npm - @pega/cosmos-react-work - Versions diffs - 9.0.0-build.9.9 → 9.0.1 - Mend

@pega/cosmos-react-work 9.0.0-build.9.9 → 9.0.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 (276) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Predictions.js","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.tsx"],"names":[],"mappings":"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~~EAAC~~,SAAS,~~EACd~~,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EACzB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,GAAG,EAAE;YACd,eAAe,CAAC,OAAO,GAAG,MAAM,CAAC,uBAAuB,EAAE;gBACxD,KAAK;gBACL,QAAQ;gBACR,KAAK;aACN,CAAC,CAAC;QACL,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';\nimport type { MouseEvent, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n registerIcon,\n useI18n,\n Modal,\n useModalManager,\n InfoDialog,\n StyledLabel,\n Text,\n SummaryList,\n defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport type {\n ForwardRefForwardPropsComponent,\n SummaryListProps,\n SummaryListItem,\n ModalMethods\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 type PredictionsProps from './Predictions.types';\nimport type { 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: ForwardRefForwardPropsComponent<\n PredictionsProps & Pick<SummaryListProps, 'onViewAll' \| 'name' \| 'icon'>\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 'aria-label': `${t('learn_more')} - ${item.label}`,\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: ForwardRefForwardPropsComponent<PredictionsProps> = 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"]}
1	+ {"version":3,"file":"Predictions.js","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';\nimport type { MouseEvent, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n registerIcon,\n useI18n,\n Modal,\n useModalManager,\n InfoDialog,\n StyledLabel,\n Text,\n SummaryList,\n defaultThemeProp,\n useTheme,\n colorIconMapping\n} from '@pega/cosmos-react-core';\nimport type {\n ForwardRefForwardPropsComponent,\n SummaryListProps,\n SummaryListItem,\n ModalMethods\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 type PredictionsProps from './Predictions.types';\nimport type { 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: ForwardRefForwardPropsComponent<\n PredictionsProps & Pick<SummaryListProps, 'onViewAll' \| 'name' \| 'icon'>\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 'aria-label': `${t('learn_more')} - ${item.label}`,\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: ForwardRefForwardPropsComponent<PredictionsProps> = forwardRef(\n function Predictions(\n { count, items, progress, ...restProps }: PropsWithoutRef<PredictionsProps>,\n ref: PredictionsProps['ref']\n ) {\n const t = useI18n();\n const theme = useTheme();\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={\n theme.components['case-view'].utilities['icon-color']\n ? {\n name: 'polaris',\n background: colorIconMapping(theme, 'polaris'),\n shape: 'circle'\n }\n : {\n name: 'polaris'\n }\n }\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/SearchResults/ActiveFilter.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ export interface ActiveFilterProps {
     /** This function is called when the active filter is removed. */
     onRemove: () => void;
 }
-export declare const StyledActiveFilter: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledActiveFilter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
 declare const ActiveFilter: ({ name, onRemove }: ActiveFilterProps) => import("react/jsx-runtime").JSX.Element;
 export default ActiveFilter;
 //# sourceMappingURL=ActiveFilter.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ActiveFilter.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/ActiveFilter.tsx"],"names":[],"mappings":"AAgBA,MAAM,WAAW,iBAAiB;IAChC,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,iEAAiE;IACjE,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,kBAAkB,~~wGAkB9B~~,CAAC;AAIF,QAAA,MAAM,YAAY,GAAI,oBAAoB,iBAAiB,4CAsB1D,CAAC;AAEF,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"ActiveFilter.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/ActiveFilter.tsx"],"names":[],"mappings":"AAgBA,MAAM,WAAW,iBAAiB;IAChC,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,iEAAiE;IACjE,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,kBAAkB,6NAkB9B,CAAC;AAIF,QAAA,MAAM,YAAY,GAAI,oBAAoB,iBAAiB,4CAsB1D,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/Filter.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAyB,MAAM,uBAAuB,CAAC;AAKpG,UAAU,oBAAoB;IAC5B,cAAc,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,aAAa,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;CACrD;AAED,QAAA,MAAM,MAAM,GAAI,+DAMb,WAAW,GAAG,oBAAoB,KAAG,GAAG,CAAC,~~OAkF3C~~,CAAC;AAEF,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/Filter.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAyB,MAAM,uBAAuB,CAAC;AAKpG,UAAU,oBAAoB;IAC5B,cAAc,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,aAAa,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;CACrD;AAED,QAAA,MAAM,MAAM,GAAI,+DAMb,WAAW,GAAG,oBAAoB,KAAG,GAAG,CAAC,OAmF3C,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -39,7 +39,7 @@ const Filter = ({ onFilterChange, onClearFilter, name, expanded = true, ...contr
         default:
             filterControl = null;
     }
-    return (_jsxs(StyledFilter, { children: [_jsxs(Flex, { container: { justify: 'between' }, children: [_jsx("h2", { "aria-label": name, children: _jsxs(Flex, { as: StyledFilterButton, container: { gap: 1, alignItems: 'center' }, variant: 'text', onClick: () => setFilterExpanded(curr => !curr), "aria-label": t(filterExpanded ? 'collapse_noun' : 'expand_noun', [name]), children: [_jsx(Icon, { name: 'caret-down' }), _jsx(Text, { variant: 'h3', as: 'span', children: name })] }) }), filterActive && (_jsx(Button, { variant: 'link', onClick: () => onClearFilter?.(name), "aria-label": t('search_results_clear_filter', [name]), children: t('clear') }))] }), _jsx(ExpandCollapse, { collapsed: !filterExpanded, children: filterControl })] }));
+    return (_jsxs(StyledFilter, { children: [_jsxs(Flex, { container: { justify: 'between' }, children: [_jsx("h2", { "aria-label": name, children: _jsxs(Flex, { as: StyledFilterButton, container: { gap: 1, alignItems: 'center' }, variant: 'text', onClick: () => setFilterExpanded(curr => !curr), "aria-expanded": filterExpanded, "aria-label": name, children: [_jsx(Icon, { name: 'caret-down' }), _jsx(Text, { variant: 'h3', as: 'span', children: name })] }) }), filterActive && (_jsx(Button, { variant: 'link', onClick: () => onClearFilter?.(name), "aria-label": t('search_results_clear_filter', [name]), children: t('clear') }))] }), _jsx(ExpandCollapse, { collapsed: !filterExpanded, children: filterControl })] }));
 };
 export default Filter;
 //# sourceMappingURL=Filter.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../src/components/SearchResults/Filter.tsx"],"names":[],"mappings":"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~~gBACnC~~,~~CAAC,CAAC,~~cAAc,~~CAAC~~,~~CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,~~IAAI,~~CAAC~~,~~CAAC,aAEvE,~~KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,EAC1B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,YACzB,IAAI,GACA,IACF,GACJ,EACJ,YAAY,IAAI,CACf,KAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,gBACxB,CAAC,CAAC,6BAA6B,EAAE,CAAC,IAAI,CAAC,CAAC,YAEnD,CAAC,CAAC,OAAO,CAAC,GACJ,CACV,IACI,EACP,KAAC,cAAc,IAAC,SAAS,EAAE,CAAC,cAAc,YAAG,aAAa,GAAkB,IAC/D,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { useState } from 'react';\n\nimport {\n Button,\n Checkbox,\n CheckboxGroup,\n ExpandCollapse,\n Flex,\n Icon,\n registerIcon,\n RadioButton,\n RadioButtonGroup,\n Text,\n useI18n\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\n\nimport type { FilterProps, SearchResultsProps, SelectFilterItemProps } from './SearchResults.types';\nimport { StyledFilter, StyledFilterButton } from './SearchResults.styles';\n\nregisterIcon(caretDownIcon);\n\ninterface FilterComponentProps {\n onFilterChange?: SearchResultsProps['onFilterChange'];\n onClearFilter?: SearchResultsProps['onClearFilter'];\n}\n\nconst Filter = ({\n onFilterChange,\n onClearFilter,\n name,\n expanded = true,\n ...control\n}: FilterProps & FilterComponentProps): JSX.Element => {\n const t = useI18n();\n const [filterExpanded, setFilterExpanded] = useState(expanded);\n\n let filterControl;\n let filterActive = false;\n // eslint-disable-next-line sonarjs/no-small-switch\n switch (control.type) {\n case 'select': {\n const { selectType, items } = control;\n let SelectFilterGroup = CheckboxGroup;\n let SelectFilter: typeof Checkbox \| typeof RadioButton = Checkbox;\n if (selectType === 'single-select') {\n SelectFilterGroup = RadioButtonGroup;\n SelectFilter = RadioButton;\n }\n filterControl = (\n <SelectFilterGroup\n label={name}\n labelHidden\n onChange={e => {\n const item = items.find((x: SelectFilterItemProps) => x.id === e.target.id);\n if (!item) return;\n const newItem = { ...item, checked: !item.checked };\n\n onFilterChange?.({\n name,\n type: control.type,\n value: newItem\n });\n }}\n >\n {control.items.map((filterOption: SelectFilterItemProps) => {\n if (filterOption.checked) filterActive = true;\n return (\n <SelectFilter\n key={filterOption.id}\n id={filterOption.id}\n name={filterOption.name}\n label={filterOption.label}\n checked={filterOption.checked}\n />\n );\n })}\n </SelectFilterGroup>\n );\n break;\n }\n default:\n filterControl = null;\n }\n\n return (\n <StyledFilter>\n <Flex container={{ justify: 'between' }}>\n <h2 aria-label={name}>\n <Flex\n as={StyledFilterButton}\n container={{ gap: 1, alignItems: 'center' }}\n variant='text'\n onClick={() => setFilterExpanded(curr => !curr)}\n aria-label={~~t(filterExpanded ? 'collapse_noun' : 'expand_noun', [~~name])}\n >\n <Icon name='caret-down' />\n <Text variant='h3' as='span'>\n {name}\n </Text>\n </Flex>\n </h2>\n {filterActive && (\n <Button\n variant='link'\n onClick={() => onClearFilter?.(name)}\n aria-label={t('search_results_clear_filter', [name])}\n >\n {t('clear')}\n </Button>\n )}\n </Flex>\n <ExpandCollapse collapsed={!filterExpanded}>{filterControl}</ExpandCollapse>\n </StyledFilter>\n );\n};\n\nexport default Filter;\n"]}
1	+ {"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../src/components/SearchResults/Filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\n\nimport {\n Button,\n Checkbox,\n CheckboxGroup,\n ExpandCollapse,\n Flex,\n Icon,\n registerIcon,\n RadioButton,\n RadioButtonGroup,\n Text,\n useI18n\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\n\nimport type { FilterProps, SearchResultsProps, SelectFilterItemProps } from './SearchResults.types';\nimport { StyledFilter, StyledFilterButton } from './SearchResults.styles';\n\nregisterIcon(caretDownIcon);\n\ninterface FilterComponentProps {\n onFilterChange?: SearchResultsProps['onFilterChange'];\n onClearFilter?: SearchResultsProps['onClearFilter'];\n}\n\nconst Filter = ({\n onFilterChange,\n onClearFilter,\n name,\n expanded = true,\n ...control\n}: FilterProps & FilterComponentProps): JSX.Element => {\n const t = useI18n();\n const [filterExpanded, setFilterExpanded] = useState(expanded);\n\n let filterControl;\n let filterActive = false;\n // eslint-disable-next-line sonarjs/no-small-switch\n switch (control.type) {\n case 'select': {\n const { selectType, items } = control;\n let SelectFilterGroup = CheckboxGroup;\n let SelectFilter: typeof Checkbox \| typeof RadioButton = Checkbox;\n if (selectType === 'single-select') {\n SelectFilterGroup = RadioButtonGroup;\n SelectFilter = RadioButton;\n }\n filterControl = (\n <SelectFilterGroup\n label={name}\n labelHidden\n onChange={e => {\n const item = items.find((x: SelectFilterItemProps) => x.id === e.target.id);\n if (!item) return;\n const newItem = { ...item, checked: !item.checked };\n\n onFilterChange?.({\n name,\n type: control.type,\n value: newItem\n });\n }}\n >\n {control.items.map((filterOption: SelectFilterItemProps) => {\n if (filterOption.checked) filterActive = true;\n return (\n <SelectFilter\n key={filterOption.id}\n id={filterOption.id}\n name={filterOption.name}\n label={filterOption.label}\n checked={filterOption.checked}\n />\n );\n })}\n </SelectFilterGroup>\n );\n break;\n }\n default:\n filterControl = null;\n }\n\n return (\n <StyledFilter>\n <Flex container={{ justify: 'between' }}>\n <h2 aria-label={name}>\n <Flex\n as={StyledFilterButton}\n container={{ gap: 1, alignItems: 'center' }}\n variant='text'\n onClick={() => setFilterExpanded(curr => !curr)}\n aria-expanded={filterExpanded}\n aria-label={name}\n >\n <Icon name='caret-down' />\n <Text variant='h3' as='span'>\n {name}\n </Text>\n </Flex>\n </h2>\n {filterActive && (\n <Button\n variant='link'\n onClick={() => onClearFilter?.(name)}\n aria-label={t('search_results_clear_filter', [name])}\n >\n {t('clear')}\n </Button>\n )}\n </Flex>\n <ExpandCollapse collapsed={!filterExpanded}>{filterControl}</ExpandCollapse>\n </StyledFilter>\n );\n};\n\nexport default Filter;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchResult.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResult.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;~~AAyB~~/D,QAAA,MAAM,YAAY,GAAI,gDAOnB,iBAAiB,KAAG,GAAG,CAAC,~~OAe1B~~,CAAC;AAEF,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"SearchResult.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResult.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AA8B/D,QAAA,MAAM,YAAY,GAAI,gDAOnB,iBAAiB,KAAG,GAAG,CAAC,OAmB1B,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -1,16 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, Text, MetaList, Link, Flex, StyledPopover, calculateFontSize, replaceMatchWithElement, Mark, VisuallyHiddenText } from '@pega/cosmos-react-core';
+import { defaultThemeProp, Text, MetaList, Link, Flex, StyledPopover, calculateFontSize, useHighlight, VisuallyHiddenText } from '@pega/cosmos-react-core';
 const StyledSearchResult = styled.article(({ theme }) => {
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
-    h2 ${StyledPopover} {
-      font-size: ${fontSize.s};
-      font-weight: ${theme.base['font-weight'].normal};
-    }
     padding-block-end: calc(2 * ${theme.base.spacing});
     border-bottom: 0.0125rem solid ${theme.base.palette['border-line']};
+    h2 {
+      word-break: break-word;
+      ${StyledPopover} {
+        font-size: ${fontSize.s};
+        font-weight: ${theme.base['font-weight'].normal};
+      }
+    }
     &:last-of-type {
       border-bottom: none;
     }
@@ -21,7 +27,9 @@ const StyledDescription = styled(Text) `
   word-break: break-word;
 `;
 const SearchResult = ({ title, link, description, meta = [], accent, id }) => {
-    return (_jsxs(Flex, { as: StyledSearchResult, container: { direction: 'column', gap: 1 }, children: [_jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(Text, { variant: 'h2', children: _jsxs(Link, { ...link, children: [accent ? replaceMatchWithElement(title, accent, match => _jsx(Mark, { children: match })) : title, _jsx(VisuallyHiddenText, { children: ` - ${id}` })] }) }), !!meta.length && _jsx(MetaList, { items: meta })] }), description && _jsx(StyledDescription, { forwardedAs: 'p', children: description })] }));
+    const titleRef = useRef(null);
+    useHighlight(titleRef, accent);
+    return (_jsxs(Flex, { as: StyledSearchResult, container: { direction: 'column', gap: 1 }, children: [_jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(Text, { variant: 'h2', children: _jsxs(Link, { ...link, children: [_jsx("span", { ref: titleRef, children: title }), _jsx(VisuallyHiddenText, { children: ` - ${id}` })] }) }), !!meta.length && _jsx(MetaList, { items: meta })] }), description && _jsx(StyledDescription, { forwardedAs: 'p', children: description })] }));
 };
 export default SearchResult;
 //# sourceMappingURL=SearchResult.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchResult.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResult.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,iBAAiB,EACjB,~~uBAAuB~~,~~EACvB~~,~~IAAI,EACJ,~~kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,kBAAkB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;~~SACH~~,~~aAAa;mBACH~~,~~QAAQ~~,CAAC,~~CAAC~~;~~qBACR~~,KAAK,CAAC,IAAI,CAAC,~~aAAa~~,CAAC,CAAC,~~MAAM;;kCAEnB~~,~~KAAK~~,CAAC,~~IAAI,~~CAAC~~,OAAO~~;~~qCACf~~,KAAK,CAAC,IAAI,CAAC,~~OAAO~~,CAAC,~~aAAa,~~CAAC~~;;;;;GAKnE~~,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAErC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,WAAW,EACX,IAAI,GAAG,EAAE,EACT,MAAM,EACN,EAAE,EACgB,EAAe,EAAE;IACnC,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACtE,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,aACtC,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAChB,MAAC,IAAI,OAAK,IAAI,~~aACX~~,~~MAAM~~,~~CAAC~~,~~CAAC,CAAC,uBAAuB,CAAC,KAAK,~~EAAE,~~MAAM~~,~~EAAE~~,KAAK,~~CAAC,EAAE,CAAC,KAAC,IAAI,cAAE,KAAK,~~GAAQ,~~CAAC~~,~~CAAC,CAAC,CAAC,KAAK,EACvF,~~KAAC,kBAAkB,cAAE,MAAM,EAAE,EAAE,GAAsB,IAChD,GACF,EACN,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,GAAI,IACtC,EACN,WAAW,IAAI,KAAC,iBAAiB,IAAC,WAAW,EAAC,GAAG,YAAE,WAAW,GAAqB,IAC/E,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n Text,\n MetaList,\n Link,\n Flex,\n StyledPopover,\n calculateFontSize,\n ~~replaceMatchWithElement~~,\n ~~Mark,\n~~ VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\nimport type { SearchResultProps } from './SearchResults.types';\n\nconst StyledSearchResult = styled.article(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n ~~h2 ${StyledPopover} {\n font~~-~~size~~: ${~~fontSize~~.s};\n ~~font~~-~~weight~~: ${theme.base['~~font~~-~~weight~~']~~.normal~~};\n }\n ~~padding~~-~~block-end~~: ~~calc(2~~ * ${~~theme~~.~~base.spacing~~});\n ~~border~~-~~bottom~~: ~~0.0125rem solid~~ ${theme.base~~.palette~~['~~border~~-~~line~~']};\n\n &:last-of-type {\n border-bottom: none;\n }\n `;\n});\n\nStyledSearchResult.defaultProps = defaultThemeProp;\n\nconst StyledDescription = styled(Text)`\n word-break: break-word;\n`;\n\nconst SearchResult = ({\n title,\n link,\n description,\n meta = [],\n accent,\n id\n}: SearchResultProps): JSX.Element => {\n return (\n <Flex as={StyledSearchResult} container={{ direction: 'column', gap: 1 }}>\n <Flex container={{ direction: 'column' }}>\n <Text variant='h2'>\n <Link {...link}>\n ~~{accent~~ ~~? replaceMatchWithElement(title, accent, match => <Mark>~~{~~match~~}~~</Mark~~>~~) :~~ title}\n <VisuallyHiddenText>{` - ${id}`}</VisuallyHiddenText>\n </Link>\n </Text>\n {!!meta.length && <MetaList items={meta} />}\n </Flex>\n {description && <StyledDescription forwardedAs='p'>{description}</StyledDescription>}\n </Flex>\n );\n};\n\nexport default SearchResult;\n"]}
1	+ {"version":3,"file":"SearchResult.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResult.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,kBAAkB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;kCACsB,KAAK,CAAC,IAAI,CAAC,OAAO;qCACf,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;QAK9D,aAAa;qBACA,QAAQ,CAAC,CAAC;uBACR,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM;;;;;;;GAOpD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAErC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,WAAW,EACX,IAAI,GAAG,EAAE,EACT,MAAM,EACN,EAAE,EACgB,EAAe,EAAE;IACnC,MAAM,QAAQ,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAE/C,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAE/B,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACtE,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,aACtC,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAChB,MAAC,IAAI,OAAK,IAAI,aACZ,eAAM,GAAG,EAAE,QAAQ,YAAG,KAAK,GAAQ,EACnC,KAAC,kBAAkB,cAAE,MAAM,EAAE,EAAE,GAAsB,IAChD,GACF,EACN,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,GAAI,IACtC,EACN,WAAW,IAAI,KAAC,iBAAiB,IAAC,WAAW,EAAC,GAAG,YAAE,WAAW,GAAqB,IAC/E,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n Text,\n MetaList,\n Link,\n Flex,\n StyledPopover,\n calculateFontSize,\n useHighlight,\n VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\nimport type { SearchResultProps } from './SearchResults.types';\n\nconst StyledSearchResult = styled.article(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n padding-block-end: calc(2 * ${theme.base.spacing});\n border-bottom: 0.0125rem solid ${theme.base.palette['border-line']};\n\n h2 {\n word-break: break-word;\n\n ${StyledPopover} {\n font-size: ${fontSize.s};\n font-weight: ${theme.base['font-weight'].normal};\n }\n }\n\n &:last-of-type {\n border-bottom: none;\n }\n `;\n});\n\nStyledSearchResult.defaultProps = defaultThemeProp;\n\nconst StyledDescription = styled(Text)`\n word-break: break-word;\n`;\n\nconst SearchResult = ({\n title,\n link,\n description,\n meta = [],\n accent,\n id\n}: SearchResultProps): JSX.Element => {\n const titleRef = useRef<HTMLSpanElement>(null);\n\n useHighlight(titleRef, accent);\n\n return (\n <Flex as={StyledSearchResult} container={{ direction: 'column', gap: 1 }}>\n <Flex container={{ direction: 'column' }}>\n <Text variant='h2'>\n <Link {...link}>\n <span ref={titleRef}>{title}</span>\n <VisuallyHiddenText>{` - ${id}`}</VisuallyHiddenText>\n </Link>\n </Text>\n {!!meta.length && <MetaList items={meta} />}\n </Flex>\n {description && <StyledDescription forwardedAs='p'>{description}</StyledDescription>}\n </Flex>\n );\n};\n\nexport default SearchResult;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchResults.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":"~~AA0BA~~,OAAO,KAAK,EAAE,+BAA+B,EAAgB,MAAM,yBAAyB,CAAC;AAI7F,OAAO,KAAK,EACV,kBAAkB,EAInB,MAAM,uBAAuB,CAAC;AAgF/B,QAAA,MAAM,aAAa,EAAE,+BAA+B,CAAC,kBAAkB,~~CAgQtE~~,CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"SearchResults.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,+BAA+B,EAAgB,MAAM,yBAAyB,CAAC;AAI7F,OAAO,KAAK,EACV,kBAAkB,EAInB,MAAM,uBAAuB,CAAC;AAgF/B,QAAA,MAAM,aAAa,EAAE,+BAA+B,CAAC,kBAAkB,CAkRtE,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { Button, Count, Flex, Grid, Icon, registerIcon, Modal, EmptyState, SearchInput, Text, useModalManager, useI18n, useBreakpoint, useAfterInitialEffect, SummaryItem, Avatar, useTheme, AppShellContext, Progress, useLiveLog } from '@pega/cosmos-react-core';
+import { Button, Count, Flex, Grid, Icon, registerIcon, Modal, EmptyState, SearchInput, Text, useModalManager, useI18n, useBreakpoint, useAfterInitialEffect, useConsolidatedRef, SummaryItem, Avatar, focusHeadingOrContainer, useTheme, AppShellContext, Progress, useLiveLog } from '@pega/cosmos-react-core';
 import * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';
 import * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';
 import SearchResult from './SearchResult';
@@ -32,6 +32,7 @@ const SearchResults = forwardRef(function SearchResults({ results, searchInputPr
     const { base: { palette: { 'brand-primary': primary } } } = useTheme();
     const [accent, setAccent] = useState();
     const [submittedSearchValue, setSubmittedSearchValue] = useState(searchInputProps.value);
+    const pageRef = useConsolidatedRef(ref);
     const activeFilters = filters.flatMap(group => {
         if (group.type === 'select') {
             return group.items.flatMap(item => {
@@ -75,10 +76,24 @@ const SearchResults = forwardRef(function SearchResults({ results, searchInputPr
     useAfterInitialEffect(() => {
         setAccent(submittedSearchValue ? new RegExp(submittedSearchValue, 'gi') : undefined);
     }, [submittedSearchValue]);
+    useAfterInitialEffect(() => {
+        if (loading)
+            announcePolite({ message: t('loading') });
+    }, [loading]);
+    useAfterInitialEffect(() => {
+        if (!loading)
+            announcePolite({ message: t('results_count', [count], { count }) });
+    }, [loading, count]);
     useEffect(() => {
         if (filters.length)
             announcePolite({ message: t('search_filter_update_message') });
     }, []);
+    useEffect(() => {
+        const focusContainer = pageRef.current;
+        if (!loading && submittedSearchValue && focusContainer) {
+            focusHeadingOrContainer(focusContainer, t('search'));
+        }
+    }, [loading, submittedSearchValue, t]);
     const searchTitle = (_jsx(SummaryItem, { as: StyledSearchSummaryItem, visual: _jsx(Avatar, { icon: 'search', name: 'search', shape: 'squircle', backgroundColor: primary, color: 'white' }), primary: _jsx(Text, { variant: 'h1', children: t('search') }), actions: onClearAllFilters &&
             isMedium &&
             !!activeFilters.length && (_jsx(Button, { variant: 'link', onClick: onClearAllFilters, "aria-label": t('search_results_clear_all_filters'), children: t('clear_all') })) }));
@@ -86,7 +101,7 @@ const SearchResults = forwardRef(function SearchResults({ results, searchInputPr
             searchInputProps.onSearchSubmit?.(val);
             setSubmittedSearchValue(val);
         }, placeholder: searchInputProps.placeholder }));
-    return (_jsxs(Grid, { ...restProps, as: StyledSearchResults, ref: ref, md: filters.length
+    return (_jsxs(Grid, { ...restProps, as: StyledSearchResults, ref: pageRef, md: filters.length
             ? {
                 container: {
                     cols: '15rem auto'
@@ -110,7 +125,7 @@ const SearchResults = forwardRef(function SearchResults({ results, searchInputPr
                     rowGap: 2,
                     rows: 'auto auto 1fr',
                     areas: '"search" "meta" "items"'
-                }, as: StyledResults, children: [loading && _jsx(Progress, { placement: 'local' }), searchContainerEl && isMedium ? (createPortal(searchInput, searchContainerEl)) : (_jsxs(Grid, { item: { area: 'search' }, children: [!isMedium && searchTitle, searchInput] })), _jsxs(Grid, { item: { area: 'meta' }, container: { rowGap: 1 }, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, children: [!loading && (_jsx(Text, { as: StyledCountText, variant: 'secondary', children: submittedSearchValue !== '' || results.length > 0
+                }, as: StyledResults, "aria-busy": loading || undefined, children: [loading && _jsx(Progress, { placement: 'local' }), searchContainerEl && isMedium ? (createPortal(searchInput, searchContainerEl)) : (_jsxs(Grid, { item: { area: 'search' }, children: [!isMedium && searchTitle, searchInput] })), _jsxs(Grid, { item: { area: 'meta' }, container: { rowGap: 1 }, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, children: [!loading && (_jsx(Text, { as: StyledCountText, variant: 'secondary', children: submittedSearchValue !== '' || results.length > 0
                                             ? t('results_count', [count], { count })
                                             : '' })), !isMedium && !!filters.length && (_jsxs(Button, { variant: 'secondary', onClick: openFiltersModal, children: [_jsx(Icon, { name: activeFilters.length > 0 ? 'filter-on' : 'filter' }), "\u00A0", t('filters'), "\u00A0", _jsx(Count, { children: activeFilters.length })] }))] }), !!activeFilters.length && (_jsx(Flex, { as: StyledSelectedFilters, container: { gap: 1, wrap: 'wrap' }, "aria-label": t('search_results_active_filters'), children: activeFilters.map(filter => {
                                     return (_jsx(ActiveFilter, { name: `${filter.groupName}: ${filter.name}`, onRemove: () => onFilterChange?.({

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, useEffect, useRef, useState } from 'react';\nimport type { PropsWithoutRef, ComponentProps } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport {\n Button,\n Count,\n Flex,\n Grid,\n Icon,\n registerIcon,\n Modal,\n EmptyState,\n SearchInput,\n Text,\n useModalManager,\n useI18n,\n useBreakpoint,\n useAfterInitialEffect,\n SummaryItem,\n Avatar,\n useTheme,\n AppShellContext,\n Progress,\n useLiveLog\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, ModalMethods } 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 type {\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';\nimport ActiveFilter from './ActiveFilter';\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')}>\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\n as={StyledSelectedFilters}\n container={{ gap: 1 }}\n aria-label={t('search_results_active_filters')}\n >\n {activeFilters.map(filter => {\n return (\n <ActiveFilter\n key={filter.id}\n name={`${filter.groupName}: ${filter.name}`}\n onRemove={() =>\n onFilterChange?.({\n name: filter.groupName,\n type: filter.type,\n value: filter.resetValue\n })\n }\n />\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: ForwardRefForwardPropsComponent<SearchResultsProps> = 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 { announcePolite } = useLiveLog();\n const filtersMethods = useRef<ModalMethods<ComponentProps<typeof FilterModal>>>();\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 useEffect(() => {\n if (filters.length) announcePolite({ message: t('search_filter_update_message') });\n }, []);\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'>{t('search')}</Text>}\n actions={\n onClearAllFilters &&\n isMedium &&\n !!activeFilters.length && (\n <Button\n variant='link'\n onClick={onClearAllFilters}\n aria-label={t('search_results_clear_all_filters')}\n >\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={searchInputProps.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='secondary' 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\n as={StyledSelectedFilters}\n container={{ gap: 1, wrap: 'wrap' }}\n aria-label={t('search_results_active_filters')}\n >\n {activeFilters.map(filter => {\n return (\n <ActiveFilter\n key={filter.id}\n name={`${filter.groupName}: ${filter.name}`}\n onRemove={() =>\n onFilterChange?.({\n name: filter.groupName,\n type: filter.type,\n value: filter.resetValue\n })\n }\n />\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 { forwardRef, useContext, useEffect, useRef, useState } from 'react';\nimport type { PropsWithoutRef, ComponentProps } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport {\n Button,\n Count,\n Flex,\n Grid,\n Icon,\n registerIcon,\n Modal,\n EmptyState,\n SearchInput,\n Text,\n useModalManager,\n useI18n,\n useBreakpoint,\n useAfterInitialEffect,\n useConsolidatedRef,\n SummaryItem,\n Avatar,\n focusHeadingOrContainer,\n useTheme,\n AppShellContext,\n Progress,\n useLiveLog\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, ModalMethods } 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 type {\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';\nimport ActiveFilter from './ActiveFilter';\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')}>\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\n as={StyledSelectedFilters}\n container={{ gap: 1 }}\n aria-label={t('search_results_active_filters')}\n >\n {activeFilters.map(filter => {\n return (\n <ActiveFilter\n key={filter.id}\n name={`${filter.groupName}: ${filter.name}`}\n onRemove={() =>\n onFilterChange?.({\n name: filter.groupName,\n type: filter.type,\n value: filter.resetValue\n })\n }\n />\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: ForwardRefForwardPropsComponent<SearchResultsProps> = 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 { announcePolite } = useLiveLog();\n const filtersMethods = useRef<ModalMethods<ComponentProps<typeof FilterModal>>>();\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 const pageRef = useConsolidatedRef(ref);\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 useAfterInitialEffect(() => {\n if (loading) announcePolite({ message: t('loading') });\n }, [loading]);\n\n useAfterInitialEffect(() => {\n if (!loading) announcePolite({ message: t('results_count', [count], { count }) });\n }, [loading, count]);\n\n useEffect(() => {\n if (filters.length) announcePolite({ message: t('search_filter_update_message') });\n }, []);\n\n useEffect(() => {\n const focusContainer = pageRef.current;\n\n if (!loading && submittedSearchValue && focusContainer) {\n focusHeadingOrContainer(focusContainer, t('search'));\n }\n }, [loading, submittedSearchValue, t]);\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'>{t('search')}</Text>}\n actions={\n onClearAllFilters &&\n isMedium &&\n !!activeFilters.length && (\n <Button\n variant='link'\n onClick={onClearAllFilters}\n aria-label={t('search_results_clear_all_filters')}\n >\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={searchInputProps.placeholder}\n />\n );\n\n return (\n <Grid\n {...restProps}\n as={StyledSearchResults}\n ref={pageRef}\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 aria-busy={loading \|\| undefined}\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='secondary' 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\n as={StyledSelectedFilters}\n container={{ gap: 1, wrap: 'wrap' }}\n aria-label={t('search_results_active_filters')}\n >\n {activeFilters.map(filter => {\n return (\n <ActiveFilter\n key={filter.id}\n name={`${filter.groupName}: ${filter.name}`}\n onRemove={() =>\n onFilterChange?.({\n name: filter.groupName,\n type: filter.type,\n value: filter.resetValue\n })\n }\n />\n );\n })}\n </Flex>\n )}\n </Grid>\n <Grid\n item={{ area: 'items', alignSelf: results.length ? 'start' : 'stretch' }}\n container={{ rowGap: 2 }}\n >\n {!loading && (\n <>\n {results.length ? (\n results.map((result: SearchResultProps) => {\n return <SearchResult key={result.id} {...result} accent={accent} />;\n })\n ) : (\n <Grid item={{ alignSelf: 'stretch' }}>\n <EmptyState\n message={submittedSearchValue === '' ? t('empty_search') : undefined}\n />\n </Grid>\n )}\n {onShowMore && (\n <Flex container={{ justify: 'center' }}>\n <Button variant='link' onClick={onShowMore}>\n {t('show_more')}\n </Button>\n </Flex>\n )}\n </>\n )}\n </Grid>\n </Grid>\n </Grid>\n );\n }\n);\n\nexport default SearchResults;\n"]}

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

@@ -1,11 +1,13 @@
-export declare const StyledSearchResults: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledFilterTitle: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCountText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledModalFilterContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledSelectedFilters: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledFilter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledFilterButton: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledSearchSummaryItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledFilters: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledResults: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSearchResults: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledFilterTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledCountText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledModalFilterContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledSelectedFilters: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export declare const StyledFilter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledFilterButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").ButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledSearchSummaryItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledFilters: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledResults: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 //# sourceMappingURL=SearchResults.styles.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchResults.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.styles.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,mBAAmB,~~yGAE~~/B,CAAC;AAIF,eAAO,MAAM,iBAAiB,~~0GAI5B,~~CAAC;AAIH,eAAO,MAAM,eAAe,~~0GAI1B,~~CAAC;AAIH,eAAO,MAAM,wBAAwB,~~yGAUpC~~,CAAC;AAIF,eAAO,MAAM,qBAAqB,~~wGAYjC~~,CAAC;AAIF,eAAO,MAAM,YAAY,~~yGAAe~~,CAAC;AAIzC,eAAO,MAAM,kBAAkB,~~oNAsB7B,~~CAAC;AAIH,eAAO,MAAM,uBAAuB,~~yGAYnC~~,CAAC;AAIF,eAAO,MAAM,aAAa,~~yGAWxB~~,CAAC;AAIH,eAAO,MAAM,aAAa,~~yGAOxB~~,CAAC"}
1	+ {"version":3,"file":"SearchResults.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.styles.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,mBAAmB,6NAE/B,CAAC;AAIF,eAAO,MAAM,iBAAiB,+NAI5B,CAAC;AAIH,eAAO,MAAM,eAAe,+NAI1B,CAAC;AAIH,eAAO,MAAM,wBAAwB,6NAUpC,CAAC;AAIF,eAAO,MAAM,qBAAqB,iOAYjC,CAAC;AAIF,eAAO,MAAM,YAAY,6NAAe,CAAC;AAIzC,eAAO,MAAM,kBAAkB;;2LAsB7B,CAAC;AAIH,eAAO,MAAM,uBAAuB,6NAYnC,CAAC;AAIF,eAAO,MAAM,aAAa,6NAWxB,CAAC;AAIH,eAAO,MAAM,aAAa,6NAOxB,CAAC"}

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

@@ -0,0 +1,7 @@
+import type { PropsWithoutRef } from 'react';
+import type { ShortcutsProps } from './Shortcuts.types';
+declare const _default: import("react").ForwardRefExoticComponent<PropsWithoutRef<ShortcutsProps> & import("react").RefAttributes<HTMLDivElement>> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["list", "emptyState", "categorySection", "categoryHeading"]>;
+};
+export default _default;
+//# sourceMappingURL=Shortcuts.d.ts.map

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

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"Shortcuts.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAa,eAAe,EAAE,MAAM,OAAO,CAAC;AAsBxD,OAAO,KAAK,EAAE,cAAc,EAAgB,MAAM,mBAAmB,CAAC;;;;AAkLtE,wBAA2D"}

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, forwardRef } from 'react';
+import { parseToRgb } from 'polished';
+import { Card, CardContent, CardHeader, EmptyState, Flex, Text, VisuallyHiddenText, registerIcon, tryCatch, useArrows, useBreakpoint, useI18n, useTestIds, useTheme, withTestIds } from '@pega/cosmos-react-core';
+import * as openNewTabIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';
+import { StyledExternalIcon, StyledLabelRow, StyledShortcutsCard, StyledShortcutsCardButton, StyledShortcutsCardsContainer, StyledShortcutsCategoriesContainer, StyledShortcutsCategoryHeading, StyledShortcutsCardIcon } from './Shortcuts.styles';
+import { getShortcutsTestIds } from './Shortcuts.test-ids';
+registerIcon(openNewTabIcon);
+const itemLinkProps = (item) => {
+    if (item.type === 'external') {
+        return { href: item.href, target: '_blank', rel: 'noopener noreferrer' };
+    }
+    return { onClick: item.onClick };
+};
+const CardItem = ({ item, iconBackground, variant }) => (_jsx(StyledShortcutsCard, { children: _jsxs(StyledShortcutsCardButton, { variant: 'link', layoutVariant: variant, ...itemLinkProps(item), children: [_jsx(StyledShortcutsCardIcon, { name: item.icon, background: iconBackground, shape: 'square', layoutVariant: variant }), _jsxs(StyledLabelRow, { children: [_jsx(Text, { as: 'span', variant: 'h3', children: item.label }), item.type === 'external' && _jsx(StyledExternalIcon, { name: 'open' })] })] }) }));
+const Shortcuts = forwardRef(function Shortcuts({ heading, items = [], categories, showHeader = true, variant = 'inline', testId, ...restProps }, ref) {
+    const t = useI18n();
+    const testIds = useTestIds(testId, getShortcutsTestIds);
+    const { base: { palette: { 'brand-accent': brandAccent, 'brand-primary': brandPrimary } } } = useTheme();
+    const iconBackground = tryCatch(() => {
+        parseToRgb(brandAccent);
+        return brandAccent;
+    }) ?? brandPrimary;
+    const flatListRef = useRef(null);
+    const categoriesContainerRef = useRef(null);
+    useArrows(flatListRef, { dir: 'both', cycle: true });
+    useArrows(categoriesContainerRef, { dir: 'both', cycle: true });
+    const isWide = useBreakpoint('sm', {
+        breakpointRef: categories ? categoriesContainerRef : flatListRef
+    });
+    const emptyState = _jsx(EmptyState, { message: t('no_items'), "data-testid": testIds.emptyState });
+    const withCardShell = (content) => (_jsxs(Card, { ...restProps, "data-testid": testIds.root, ref: ref, children: [_jsx(CardHeader, { children: _jsx(Text, { variant: 'h2', children: heading ?? t('shortcuts') }) }), _jsx(CardContent, { children: content })] }));
+    if (categories) {
+        const visibleCategories = categories.filter(cat => cat.items.length > 0);
+        const categorySections = (_jsx(StyledShortcutsCategoriesContainer, { ref: categoriesContainerRef, isSmallOrAbove: false, children: visibleCategories.map(cat => (_jsxs(Flex, { container: { direction: 'column' }, "aria-labelledby": `cat-${cat.id}`, "data-testid": testIds.categorySection, as: 'section', children: [_jsx(StyledShortcutsCategoryHeading, { id: `cat-${cat.id}`, "data-testid": testIds.categoryHeading, variant: 'h3', children: cat.label }), _jsx(StyledShortcutsCardsContainer, { isSmallOrAbove: isWide, showHeader: true, role: 'list', "aria-label": cat.label, children: cat.items.map(item => (_jsx(CardItem, { item: item, iconBackground: iconBackground, variant: variant }, item.id))) })] }, cat.id))) }));
+        return withCardShell(visibleCategories.length === 0 ? emptyState : categorySections);
+    }
+    const cardGrid = (_jsx(StyledShortcutsCardsContainer, { ref: flatListRef, isSmallOrAbove: isWide, showHeader: showHeader, role: 'list', "data-testid": testIds.list, "aria-label": heading ?? t('shortcuts'), children: items.map(item => (_jsx(CardItem, { item: item, iconBackground: iconBackground, variant: variant }, item.id))) }));
+    if (!showHeader) {
+        if (items.length === 0)
+            return null;
+        return (_jsxs("div", { "data-testid": testIds.root, ...restProps, ref: ref, children: [_jsx(VisuallyHiddenText, { children: heading ?? t('shortcuts') }), cardGrid] }));
+    }
+    return withCardShell(items.length === 0 ? emptyState : cardGrid);
+});
+export default withTestIds(Shortcuts, getShortcutsTestIds);
+//# sourceMappingURL=Shortcuts.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"Shortcuts.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, forwardRef } from 'react';\nimport type { ReactNode, PropsWithoutRef } from 'react';\nimport { parseToRgb } from 'polished';\n\nimport {\n Card,\n CardContent,\n CardHeader,\n EmptyState,\n Flex,\n Text,\n VisuallyHiddenText,\n registerIcon,\n tryCatch,\n useArrows,\n useBreakpoint,\n useI18n,\n useTestIds,\n useTheme,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport * as openNewTabIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';\n\nimport type { ShortcutsProps, ShortcutItem } from './Shortcuts.types';\nimport {\n StyledExternalIcon,\n StyledLabelRow,\n StyledShortcutsCard,\n StyledShortcutsCardButton,\n StyledShortcutsCardsContainer,\n StyledShortcutsCategoriesContainer,\n StyledShortcutsCategoryHeading,\n StyledShortcutsCardIcon\n} from './Shortcuts.styles';\nimport { getShortcutsTestIds } from './Shortcuts.test-ids';\n\nregisterIcon(openNewTabIcon);\n\nconst itemLinkProps = (\n item: ShortcutItem\n): {\n href?: string;\n target?: string;\n rel?: string;\n onClick?: () => void;\n} => {\n if (item.type === 'external') {\n return { href: item.href, target: '_blank', rel: 'noopener noreferrer' };\n }\n\n return { onClick: item.onClick };\n};\n\nconst CardItem = ({\n item,\n iconBackground,\n variant\n}: {\n item: ShortcutItem;\n iconBackground: string;\n variant: 'stacked' | 'inline';\n}) => (\n <StyledShortcutsCard>\n <StyledShortcutsCardButton variant='link' layoutVariant={variant} {...itemLinkProps(item)}>\n <StyledShortcutsCardIcon\n name={item.icon}\n background={iconBackground}\n shape='square'\n layoutVariant={variant}\n />\n <StyledLabelRow>\n <Text as='span' variant='h3'>\n {item.label}\n </Text>\n\n {item.type === 'external' && <StyledExternalIcon name='open' />}\n </StyledLabelRow>\n </StyledShortcutsCardButton>\n </StyledShortcutsCard>\n);\n\nconst Shortcuts = forwardRef(function Shortcuts(\n {\n heading,\n items = [],\n categories,\n showHeader = true,\n variant = 'inline',\n testId,\n ...restProps\n }: PropsWithoutRef<ShortcutsProps>,\n ref: ShortcutsProps['ref']\n) {\n const t = useI18n();\n const testIds = useTestIds(testId, getShortcutsTestIds);\n const {\n base: {\n palette: { 'brand-accent': brandAccent, 'brand-primary': brandPrimary }\n }\n } = useTheme();\n\n const iconBackground =\n tryCatch(() => {\n parseToRgb(brandAccent);\n return brandAccent;\n }) ?? brandPrimary;\n\n const flatListRef = useRef<HTMLUListElement>(null);\n const categoriesContainerRef = useRef<HTMLDivElement>(null);\n\n useArrows(flatListRef, { dir: 'both', cycle: true });\n useArrows(categoriesContainerRef, { dir: 'both', cycle: true });\n\n const isWide = useBreakpoint('sm', {\n breakpointRef: categories ? categoriesContainerRef : flatListRef\n });\n\n const emptyState = <EmptyState message={t('no_items')} data-testid={testIds.emptyState} />;\n\n const withCardShell = (content: ReactNode) => (\n <Card {...restProps} data-testid={testIds.root} ref={ref}>\n <CardHeader>\n <Text variant='h2'>{heading ?? t('shortcuts')}</Text>\n </CardHeader>\n <CardContent>{content}</CardContent>\n </Card>\n );\n\n if (categories) {\n const visibleCategories = categories.filter(cat => cat.items.length > 0);\n\n const categorySections = (\n <StyledShortcutsCategoriesContainer ref={categoriesContainerRef} isSmallOrAbove={false}>\n {visibleCategories.map(cat => (\n <Flex\n container={{ direction: 'column' }}\n key={cat.id}\n aria-labelledby={`cat-${cat.id}`}\n data-testid={testIds.categorySection}\n as='section'\n >\n <StyledShortcutsCategoryHeading\n id={`cat-${cat.id}`}\n data-testid={testIds.categoryHeading}\n variant='h3'\n >\n {cat.label}\n </StyledShortcutsCategoryHeading>\n\n <StyledShortcutsCardsContainer\n isSmallOrAbove={isWide}\n showHeader\n role='list'\n aria-label={cat.label}\n >\n {cat.items.map(item => (\n <CardItem\n key={item.id}\n item={item}\n iconBackground={iconBackground}\n variant={variant}\n />\n ))}\n </StyledShortcutsCardsContainer>\n </Flex>\n ))}\n </StyledShortcutsCategoriesContainer>\n );\n\n return withCardShell(visibleCategories.length === 0 ? emptyState : categorySections);\n }\n\n const cardGrid = (\n <StyledShortcutsCardsContainer\n ref={flatListRef}\n isSmallOrAbove={isWide}\n showHeader={showHeader}\n role='list'\n data-testid={testIds.list}\n aria-label={heading ?? t('shortcuts')}\n >\n {items.map(item => (\n <CardItem key={item.id} item={item} iconBackground={iconBackground} variant={variant} />\n ))}\n </StyledShortcutsCardsContainer>\n );\n\n if (!showHeader) {\n if (items.length === 0) return null;\n\n return (\n <div data-testid={testIds.root} {...restProps} ref={ref}>\n <VisuallyHiddenText>{heading ?? t('shortcuts')}</VisuallyHiddenText>\n {cardGrid}\n </div>\n );\n }\n\n return withCardShell(items.length === 0 ? emptyState : cardGrid);\n});\n\nexport default withTestIds(Shortcuts, getShortcutsTestIds);\n"]}

package/lib/components/Shortcuts/Shortcuts.styles.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+export declare const StyledShortcutsCardsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
+    isSmallOrAbove: boolean;
+    showHeader: boolean;
+}>> & string;
+export declare const StyledShortcutsCategoriesContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    isSmallOrAbove: boolean;
+}>> & string;
+export declare const StyledShortcutsCategoryHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").TextProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement | HTMLSpanElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
+}, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledShortcutsCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
+export declare const StyledShortcutsCardButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("@pega/cosmos-react-core").ButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, {
+    layoutVariant: "stacked" | "inline";
+}>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledShortcutsCardIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@pega/cosmos-react-core").IconProps & import("styled-components/dist/types").BaseObject, {
+    layoutVariant: "stacked" | "inline";
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledLabelRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledExternalIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@pega/cosmos-react-core").IconProps & import("styled-components/dist/types").BaseObject, import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, keyof import("react").Component<any, {}, any>>;
+//# sourceMappingURL=Shortcuts.styles.d.ts.map

package/lib/components/Shortcuts/Shortcuts.styles.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Shortcuts.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,6BAA6B;oBACxB,OAAO;gBACX,OAAO;YAqBnB,CAAC;AAIH,eAAO,MAAM,kCAAkC;oBAAgC,OAAO;YAqBrF,CAAC;AAIF,eAAO,MAAM,8BAA8B;;yLAIzC,CAAC;AAIH,eAAO,MAAM,mBAAmB,6NAG/B,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;mBAAmC,SAAS,GAAG,QAAQ;oLAyC3F,CAAC;AAIH,eAAO,MAAM,uBAAuB;mBAAiC,SAAS,GAAG,QAAQ;0JAUxF,CAAC;AAIF,eAAO,MAAM,cAAc,+NAM1B,CAAC;AAIF,eAAO,MAAM,kBAAkB,kaAE9B,CAAC"}