npm - @pega/cosmos-react-work - Versions diffs - 7.0.0-build.1.0 → 7.0.0-build.10.0 - Mend

@pega/cosmos-react-work 7.0.0-build.1.0 → 7.0.0-build.10.0

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

Files changed (30) hide show

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { readableColor } from 'polished';
-import { Button, StyledButton, Text, Icon, registerIcon, useI18n, tryCatch, defaultThemeProp, useDirection } from '@pega/cosmos-react-core';
+import { Button, StyledButton, Text, Icon, registerIcon, useI18n, tryCatch, defaultThemeProp, useDirection, readableColor } from '@pega/cosmos-react-core';
 import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
 registerIcon(timesIcon);
 const StyledDismissButton = styled.button `

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppAnnouncement.js","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;~~AAChD~~,OAAO,~~EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,~~EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,gBAAgB,EAChB,YAAY,~~EACb~~,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,YAAY,CAAC,SAAS,CAAC,CAAC;AAoBxB,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAA;;;CAGxC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,OAAO,CAAsC,KAAK,CAAC,EAAE;IAC/F,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,EAC7C,MAAM,EACN,OAAO,EACR,EACD,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACxC,EACF,EACD,KAAK,EACN,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC;IAE7D,OAAO,GAAG,CAAA;wBACY,OAAO;kBACb,eAAe;qBACZ,YAAY;aACpB,KAAK;;;;yBAIO,KAAK;6BACD,GAAG;;;;;;;;;;;0BAWN,OAAO;;;;;;uBAMV,OAAO;;;MAGxB,mBAAmB;;;;;;;;;;sBAUH,MAAM,CAAC,KAAK;;;;;;;;;;;gCAWF,OAAO;;;;yCAIE,OAAO;;;QAGxC,YAAY;+BACW,OAAO;;;wBAGd,MAAM,CAAC,KAAK;;;;GAIjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,eAAe,GAA2D,UAAU,CACxF,SAAS,eAAe,CACtB,KAA4C,EAC5C,GAAgC;IAEhC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EACJ,OAAO,EACP,WAAW,EACX,OAAO,EACP,YAAY,EACZ,YAAY,GAAG,CAAC,CAAC,yCAAyC,CAAC,EAC3D,KAAK,EACL,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,MAAC,qBAAqB,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,aACzD,SAAS,IAAI,CACZ,KAAC,MAAM,IACL,EAAE,EAAE,mBAAmB,EACvB,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,SAAS,gBACN,CAAC,CAAC,4CAA4C,CAAC,YAE3D,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,CACV,EACD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,IAAI,CAAC,CAAC,sCAAsC,CAAC,GAAQ,EAChF,0BACG,WAAW,IAAI,sBAAI,WAAW,GAAK,EACnC,OAAO,IAAI,CACV,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;4BAC3B,oDAAoD;4BACpD,OAAO,uBAAiB,IAAI,IAAZ,KAAK,CAAa,CAAC;wBACrC,CAAC,CAAC,GACC,CACN,EACA,YAAY,IAAI,CACf,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAE,YAAY,EAAE,MAAM,EAAC,QAAQ,YAC5D,YAAY,GACN,CACV,IACG,IACgB,CACzB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\~~nimport { readableColor } from 'polished';\~~n\nimport {\n Button,\n StyledButton,\n Text,\n Icon,\n registerIcon,\n useI18n,\n tryCatch,\n defaultThemeProp,\n useDirection\n} from '@pega/cosmos-react-core';\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nregisterIcon(timesIcon);\n\nexport interface AppAnnouncementProps extends BaseProps, NoChildrenProp {\n /** Heading text for the announcement. /\n heading?: string;\n /* Description text for the announcement. /\n description?: string;\n /* Announcement details to be displayed in form of bulleted list. /\n details?: string[];\n /* Url to open with What's new link. /\n whatsNewLink?: string;\n /* Content to populate the announcement button. /\n whatsNewText?: string;\n /* An image source for the decorative background. /\n image?: string;\n /* Callback when user dismisses the announcements. /\n onDismiss?: () => void;\n ref?: Ref<HTMLElement>;\n}\n\nconst StyledDismissButton = styled.button`\n font-size: 1.25rem;\n border: none;\n`;\n\nexport const StyledAppAnnouncement = styled.article<Pick<AppAnnouncementProps, 'image'>>(props => {\n const {\n theme: {\n base: {\n palette: { 'brand-primary': brandBackground },\n shadow,\n spacing\n },\n components: {\n card: { 'border-radius': borderRadius }\n }\n },\n image\n } = props;\n\n const { end } = useDirection();\n const color = tryCatch(() => readableColor(brandBackground));\n\n return css`\n padding: calc(2 ${spacing});\n background: ${brandBackground};\n border-radius: ${borderRadius};\n color: ${color};\n position: relative;\n\n &::after {\n background: url('${image}') no-repeat;\n background-position: ${end} bottom;\n background-size: contain;\n background-origin: content-box;\n opacity: 0.2;\n content: '';\n display: block;\n position: absolute;\n width: 50%;\n height: 100%;\n inset-inline-end: 0;\n bottom: 0;\n padding: calc(2 * ${spacing});\n }\n\n h2 {\n position: relative;\n z-index: 2;\n margin-bottom: ${spacing};\n }\n\n ${StyledDismissButton} {\n position: absolute;\n top: 0.75rem;\n inset-inline-end: 0.75rem;\n color: inherit;\n z-index: 3;\n &:enabled:hover {\n background: #ffffff19;\n }\n &:enabled:focus {\n box-shadow: ${shadow.focus};\n }\n }\n\n > div {\n width: 75%;\n position: relative;\n z-index: 2;\n\n p,\n ul {\n padding-top: calc(2 * ${spacing});\n }\n\n ul {\n padding-inline-start: calc(2 * ${spacing});\n }\n\n ${StyledButton} {\n margin-top: calc(2 * ${spacing});\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: ${shadow.focus};\n }\n }\n }\n `;\n});\n\nStyledAppAnnouncement.defaultProps = defaultThemeProp;\n\nconst AppAnnouncement: FunctionComponent<AppAnnouncementProps & ForwardProps> = forwardRef(\n function AppAnnouncement(\n props: PropsWithoutRef<AppAnnouncementProps>,\n ref: AppAnnouncementProps['ref']\n ) {\n const t = useI18n();\n const {\n heading,\n description,\n details,\n whatsNewLink,\n whatsNewText = t('app_announcement_whats_new_button_label'),\n image,\n onDismiss,\n ...restProps\n } = props;\n\n return (\n <StyledAppAnnouncement {...restProps} ref={ref} image={image}>\n {onDismiss && (\n <Button\n as={StyledDismissButton}\n variant='simple'\n icon\n onClick={onDismiss}\n aria-label={t('app_announcement_dismiss_button_label_a11y')}\n >\n <Icon name='times' />\n </Button>\n )}\n <Text variant='h2'>{heading \|\| t('app_announcement_details_list_header')}</Text>\n <div>\n {description && <p>{description}</p>}\n {details && (\n <ul>\n {details.map((item, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <li key={index}>{item}</li>;\n })}\n </ul>\n )}\n {whatsNewLink && (\n <Button variant='secondary' href={whatsNewLink} target='_blank'>\n {whatsNewText}\n </Button>\n )}\n </div>\n </StyledAppAnnouncement>\n );\n }\n);\n\nexport default AppAnnouncement;\n"]}
1	+ {"version":3,"file":"AppAnnouncement.js","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n StyledButton,\n Text,\n Icon,\n registerIcon,\n useI18n,\n tryCatch,\n defaultThemeProp,\n useDirection,\n readableColor\n} from '@pega/cosmos-react-core';\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nregisterIcon(timesIcon);\n\nexport interface AppAnnouncementProps extends BaseProps, NoChildrenProp {\n /** Heading text for the announcement. /\n heading?: string;\n /* Description text for the announcement. /\n description?: string;\n /* Announcement details to be displayed in form of bulleted list. /\n details?: string[];\n /* Url to open with What's new link. /\n whatsNewLink?: string;\n /* Content to populate the announcement button. /\n whatsNewText?: string;\n /* An image source for the decorative background. /\n image?: string;\n /* Callback when user dismisses the announcements. /\n onDismiss?: () => void;\n ref?: Ref<HTMLElement>;\n}\n\nconst StyledDismissButton = styled.button`\n font-size: 1.25rem;\n border: none;\n`;\n\nexport const StyledAppAnnouncement = styled.article<Pick<AppAnnouncementProps, 'image'>>(props => {\n const {\n theme: {\n base: {\n palette: { 'brand-primary': brandBackground },\n shadow,\n spacing\n },\n components: {\n card: { 'border-radius': borderRadius }\n }\n },\n image\n } = props;\n\n const { end } = useDirection();\n const color = tryCatch(() => readableColor(brandBackground));\n\n return css`\n padding: calc(2 ${spacing});\n background: ${brandBackground};\n border-radius: ${borderRadius};\n color: ${color};\n position: relative;\n\n &::after {\n background: url('${image}') no-repeat;\n background-position: ${end} bottom;\n background-size: contain;\n background-origin: content-box;\n opacity: 0.2;\n content: '';\n display: block;\n position: absolute;\n width: 50%;\n height: 100%;\n inset-inline-end: 0;\n bottom: 0;\n padding: calc(2 * ${spacing});\n }\n\n h2 {\n position: relative;\n z-index: 2;\n margin-bottom: ${spacing};\n }\n\n ${StyledDismissButton} {\n position: absolute;\n top: 0.75rem;\n inset-inline-end: 0.75rem;\n color: inherit;\n z-index: 3;\n &:enabled:hover {\n background: #ffffff19;\n }\n &:enabled:focus {\n box-shadow: ${shadow.focus};\n }\n }\n\n > div {\n width: 75%;\n position: relative;\n z-index: 2;\n\n p,\n ul {\n padding-top: calc(2 * ${spacing});\n }\n\n ul {\n padding-inline-start: calc(2 * ${spacing});\n }\n\n ${StyledButton} {\n margin-top: calc(2 * ${spacing});\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: ${shadow.focus};\n }\n }\n }\n `;\n});\n\nStyledAppAnnouncement.defaultProps = defaultThemeProp;\n\nconst AppAnnouncement: FunctionComponent<AppAnnouncementProps & ForwardProps> = forwardRef(\n function AppAnnouncement(\n props: PropsWithoutRef<AppAnnouncementProps>,\n ref: AppAnnouncementProps['ref']\n ) {\n const t = useI18n();\n const {\n heading,\n description,\n details,\n whatsNewLink,\n whatsNewText = t('app_announcement_whats_new_button_label'),\n image,\n onDismiss,\n ...restProps\n } = props;\n\n return (\n <StyledAppAnnouncement {...restProps} ref={ref} image={image}>\n {onDismiss && (\n <Button\n as={StyledDismissButton}\n variant='simple'\n icon\n onClick={onDismiss}\n aria-label={t('app_announcement_dismiss_button_label_a11y')}\n >\n <Icon name='times' />\n </Button>\n )}\n <Text variant='h2'>{heading \|\| t('app_announcement_details_list_header')}</Text>\n <div>\n {description && <p>{description}</p>}\n {details && (\n <ul>\n {details.map((item, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <li key={index}>{item}</li>;\n })}\n </ul>\n )}\n {whatsNewLink && (\n <Button variant='secondary' href={whatsNewLink} target='_blank'>\n {whatsNewText}\n </Button>\n )}\n </div>\n </StyledAppAnnouncement>\n );\n }\n);\n\nexport default AppAnnouncement;\n"]}

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

@@ -115,7 +115,7 @@ const ArticleList = forwardRef(function ArticleList(props, ref) {
             onLoadMore?.();
     }, ':scope > li[role="article"]');
     const articleContent = ({ content, tabId, headerTitle }) => {
-        return (_jsxs(_Fragment, { children: [activeTab === t('search') && search && _jsx(ArticleListFilter, { ...search }), activeTab === t('followed') && followed && _jsx(ArticleListFilter, { ...followed }), loading && (_jsx(Progress, { visible: !!loading, placement: 'block', message: t('loading'), liveConfig: { contextualLabel: headerTitle ?? t('article_list_label_a11y') } })), !loading &&
+        return (_jsxs(_Fragment, { children: [activeTab === 'Search' && search && _jsx(ArticleListFilter, { ...search }), activeTab === 'Followed' && followed && _jsx(ArticleListFilter, { ...followed }), loading && (_jsx(Progress, { visible: !!loading, placement: 'block', message: t('loading'), liveConfig: { contextualLabel: headerTitle ?? t('article_list_label_a11y') } })), !loading &&
                     (content.length > 0 ? (_jsxs(Flex, { container: { direction: 'column', gap: 0.5, pad: [1.5, 2] }, as: StyledSummaryList, role: 'feed', ref: listUlRef[tabId], children: [content.map(summaryItem => (_createElement(ArticleSummary, { ...summaryItem, key: summaryItem.articleId, onQuickFilterClick: onQuickFilterClick }))), loadingMore && _jsx(Progress, { placement: 'block' })] })) : (_jsx(EmptyState, {})))] }));
     };
     return (_jsxs(Flex, { ...restProps, container: {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ArticleList.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo, useEffect, useRef, createRef } from 'react';\nimport type { FunctionComponent, Ref, PropsWithoutRef, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n useI18n,\n defaultThemeProp,\n TabPanel,\n Tabs,\n EmptyState,\n Progress,\n getFocusables,\n useLiveLog,\n useItemIntersection\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, Tab } from '@pega/cosmos-react-core';\n\nimport ArticleListFilter from './ArticleListFilter';\nimport ArticleSummary from './ArticleSummary';\nimport type {\n ArticleListTabId,\n ArticleListProps,\n ArticleSummaryProps,\n ArticleListHeaderProps\n} from './ArticleList.types';\nimport ArticleListHeader from './ArticleListHeader';\nimport ArticleBuddy from './ArticleBuddy';\n\nconst StyledSummaryList = styled.ul(({ theme }) => {\n return css`\n max-height: calc(100vh - 8 * ${theme.base.spacing});\n flex-grow: 1;\n height: 100%;\n list-style-type: none;\n overflow-y: auto;\n border-end-start-radius: ${theme.base['border-radius']};\n border-end-end-radius: ${theme.base['border-radius']};\n > li[role='article'] {\n padding-block: ${theme.base.spacing};\n }\n `;\n});\n\nStyledSummaryList.defaultProps = defaultThemeProp;\n\nconst StyledArticleTabPanel = styled.div(({ theme }) => {\n return css`\n display: flex;\n flex-direction: column;\n min-height: 0;\n flex: 1 1;\n gap: ${theme.base.spacing};\n `;\n});\n\nStyledArticleTabPanel.defaultProps = defaultThemeProp;\n\nconst StyledArticleList = styled.article(({ theme }) => {\n return css`\n height: 100%;\n background: ${theme.base.palette['primary-background']};\n border-radius: ${theme.components.card['border-radius']};\n `;\n});\n\nStyledArticleList.defaultProps = defaultThemeProp;\n\nconst ArticleList: FunctionComponent<ArticleListProps & ForwardProps> = forwardRef(\n function ArticleList(props: PropsWithoutRef<ArticleListProps>, ref: Ref<HTMLDivElement>) {\n const {\n header,\n suggested,\n followed,\n search,\n buddy,\n onTabClick,\n activeTab,\n loading = false,\n loadingMore = false,\n onQuickFilterClick,\n onLoadMore,\n ...restProps\n } = props;\n const t = useI18n();\n const { announcePolite } = useLiveLog();\n\n const articleContentRefs = useRef<HTMLDivElement[]>([]);\n const activeTabContentRef = useRef<HTMLDivElement \| null>(null);\n const tabsRef = useRef<HTMLButtonElement>(null);\n const activeElementRef = useRef<HTMLElement \| null>(null);\n\n const tabs = useMemo(() => {\n const tabsArr: (Tab & {\n content?: ArticleSummaryProps[];\n id: ArticleListTabId;\n })[] = [];\n\n if (suggested)\n tabsArr.push({\n id: 'Suggested',\n name: t('suggested'),\n count: suggested?.count,\n content: suggested.articles ?? []\n });\n\n if (search)\n tabsArr.push({\n id: 'Search',\n name: t('search'),\n count: search?.count,\n content: search?.articles ?? []\n });\n\n if (followed)\n tabsArr.push({\n id: 'Followed',\n name: t('followed'),\n count: followed?.count,\n content: followed?.articles ?? []\n });\n\n if (buddy)\n tabsArr.push({\n id: 'Buddy',\n name: buddy.title\n });\n\n return tabsArr;\n }, [suggested, followed, search, buddy]);\n\n const listUlRef: { [id: string]: RefObject<HTMLElement> } = tabs.reduce((acc, tab) => {\n return { ...acc, [tab.id]: createRef() };\n }, {});\n\n useEffect(() => {\n if (tabsRef.current && getFocusables(tabsRef)?.length > 0)\n activeElementRef.current = getFocusables(tabsRef)[0];\n else {\n activeTabContentRef.current =\n articleContentRefs.current[tabs.findIndex(({ id }) => id === activeTab)];\n if (activeTabContentRef && getFocusables(activeTabContentRef)?.length > 0) {\n activeElementRef.current = getFocusables(activeTabContentRef)[0];\n }\n }\n }, []);\n\n useEffect(() => {\n if (!loading) {\n const currentTabContent = tabs.find(tab => tab.id === activeTab)?.content;\n announcePolite({\n type: 'status',\n message:\n currentTabContent && currentTabContent?.length > 0\n ? `${header?.title \|\| t('article_list_label_a11y')} ${t('loaded')}`\n : t('no_items')\n });\n }\n }, [loading]);\n\n const getItemLength = (tabName: string): number => {\n const currentTab = tabs.find(item => item.id === tabName);\n if (!currentTab \|\| !currentTab.content) {\n return 0;\n }\n return currentTab.content.length - 1;\n };\n\n useItemIntersection(\n listUlRef[activeTab],\n getItemLength(activeTab),\n () => {\n if (!loadingMore) onLoadMore?.();\n },\n ':scope > li[role=\"article\"]'\n );\n\n const articleContent = ({\n content,\n tabId,\n headerTitle\n }: {\n count?: Tab['count'];\n content: ArticleSummaryProps[];\n headerTitle?: ArticleListHeaderProps['title'];\n tabId: ArticleListTabId;\n }) => {\n return (\n <>\n {activeTab === t('search') && search && <ArticleListFilter {...search} />}\n {activeTab === t('followed') && followed && <ArticleListFilter {...followed} />}\n {loading && (\n <Progress\n visible={!!loading}\n placement='block'\n message={t('loading')}\n liveConfig={{ contextualLabel: headerTitle ?? t('article_list_label_a11y') }}\n />\n )}\n {!loading &&\n (content.length > 0 ? (\n <Flex\n container={{ direction: 'column', gap: 0.5, pad: [1.5, 2] }}\n as={StyledSummaryList}\n role='feed'\n ref={listUlRef[tabId]}\n >\n {content.map(summaryItem => (\n <ArticleSummary\n {...summaryItem}\n key={summaryItem.articleId}\n onQuickFilterClick={onQuickFilterClick}\n />\n ))}\n {loadingMore && <Progress placement='block' />}\n </Flex>\n ) : (\n <EmptyState />\n ))}\n </>\n );\n };\n\n return (\n <Flex\n {...restProps}\n container={{\n direction: 'column'\n }}\n as={StyledArticleList}\n aria-label={t('article_list_label_a11y')}\n ref={ref}\n aria-busy={loading ? true : undefined}\n >\n {header && (\n <ArticleListHeader icon={header.icon} title={header.title} actions={header.actions} />\n )}\n\n {tabs.length === 1 && (\n <>\n {tabs[0].id === 'Buddy' && buddy ? (\n <ArticleBuddy {...buddy.content} />\n ) : (\n articleContent({\n content: tabs[0]?.content \|\| [],\n tabId: tabs[0].id,\n headerTitle: header?.title\n })\n )}\n </>\n )}\n\n {/* When multiple tabs present. */}\n\n {tabs.length > 1 && (\n <>\n <Tabs\n ref={tabsRef}\n tabs={tabs}\n onTabClick={(name, e) => {\n if (document.activeElement instanceof HTMLElement) {\n activeElementRef.current = document.activeElement;\n onTabClick?.(name, e);\n }\n }}\n currentTabId={activeTab}\n />\n {tabs.map(({ id, content }) => {\n return (\n <TabPanel\n key={id}\n tabId={id}\n currentTabId={activeTab}\n as={activeTab === id ? StyledArticleTabPanel : undefined}\n >\n {activeTab === 'Buddy' && buddy ? (\n <ArticleBuddy {...buddy.content} />\n ) : (\n <>\n {activeTab === id &&\n content &&\n articleContent({ content, tabId: id, headerTitle: header?.title })}\n </>\n )}\n </TabPanel>\n );\n })}\n </>\n )}\n </Flex>\n );\n }\n);\n\nexport default ArticleList;\n"]}
1	+ {"version":3,"file":"ArticleList.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo, useEffect, useRef, createRef } from 'react';\nimport type { FunctionComponent, Ref, PropsWithoutRef, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n useI18n,\n defaultThemeProp,\n TabPanel,\n Tabs,\n EmptyState,\n Progress,\n getFocusables,\n useLiveLog,\n useItemIntersection\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, Tab } from '@pega/cosmos-react-core';\n\nimport ArticleListFilter from './ArticleListFilter';\nimport ArticleSummary from './ArticleSummary';\nimport type {\n ArticleListTabId,\n ArticleListProps,\n ArticleSummaryProps,\n ArticleListHeaderProps\n} from './ArticleList.types';\nimport ArticleListHeader from './ArticleListHeader';\nimport ArticleBuddy from './ArticleBuddy';\n\nconst StyledSummaryList = styled.ul(({ theme }) => {\n return css`\n max-height: calc(100vh - 8 * ${theme.base.spacing});\n flex-grow: 1;\n height: 100%;\n list-style-type: none;\n overflow-y: auto;\n border-end-start-radius: ${theme.base['border-radius']};\n border-end-end-radius: ${theme.base['border-radius']};\n > li[role='article'] {\n padding-block: ${theme.base.spacing};\n }\n `;\n});\n\nStyledSummaryList.defaultProps = defaultThemeProp;\n\nconst StyledArticleTabPanel = styled.div(({ theme }) => {\n return css`\n display: flex;\n flex-direction: column;\n min-height: 0;\n flex: 1 1;\n gap: ${theme.base.spacing};\n `;\n});\n\nStyledArticleTabPanel.defaultProps = defaultThemeProp;\n\nconst StyledArticleList = styled.article(({ theme }) => {\n return css`\n height: 100%;\n background: ${theme.base.palette['primary-background']};\n border-radius: ${theme.components.card['border-radius']};\n `;\n});\n\nStyledArticleList.defaultProps = defaultThemeProp;\n\nconst ArticleList: FunctionComponent<ArticleListProps & ForwardProps> = forwardRef(\n function ArticleList(props: PropsWithoutRef<ArticleListProps>, ref: Ref<HTMLDivElement>) {\n const {\n header,\n suggested,\n followed,\n search,\n buddy,\n onTabClick,\n activeTab,\n loading = false,\n loadingMore = false,\n onQuickFilterClick,\n onLoadMore,\n ...restProps\n } = props;\n const t = useI18n();\n const { announcePolite } = useLiveLog();\n\n const articleContentRefs = useRef<HTMLDivElement[]>([]);\n const activeTabContentRef = useRef<HTMLDivElement \| null>(null);\n const tabsRef = useRef<HTMLButtonElement>(null);\n const activeElementRef = useRef<HTMLElement \| null>(null);\n\n const tabs = useMemo(() => {\n const tabsArr: (Tab & {\n content?: ArticleSummaryProps[];\n id: ArticleListTabId;\n })[] = [];\n\n if (suggested)\n tabsArr.push({\n id: 'Suggested',\n name: t('suggested'),\n count: suggested?.count,\n content: suggested.articles ?? []\n });\n\n if (search)\n tabsArr.push({\n id: 'Search',\n name: t('search'),\n count: search?.count,\n content: search?.articles ?? []\n });\n\n if (followed)\n tabsArr.push({\n id: 'Followed',\n name: t('followed'),\n count: followed?.count,\n content: followed?.articles ?? []\n });\n\n if (buddy)\n tabsArr.push({\n id: 'Buddy',\n name: buddy.title\n });\n\n return tabsArr;\n }, [suggested, followed, search, buddy]);\n\n const listUlRef: { [id: string]: RefObject<HTMLElement> } = tabs.reduce((acc, tab) => {\n return { ...acc, [tab.id]: createRef() };\n }, {});\n\n useEffect(() => {\n if (tabsRef.current && getFocusables(tabsRef)?.length > 0)\n activeElementRef.current = getFocusables(tabsRef)[0];\n else {\n activeTabContentRef.current =\n articleContentRefs.current[tabs.findIndex(({ id }) => id === activeTab)];\n if (activeTabContentRef && getFocusables(activeTabContentRef)?.length > 0) {\n activeElementRef.current = getFocusables(activeTabContentRef)[0];\n }\n }\n }, []);\n\n useEffect(() => {\n if (!loading) {\n const currentTabContent = tabs.find(tab => tab.id === activeTab)?.content;\n announcePolite({\n type: 'status',\n message:\n currentTabContent && currentTabContent?.length > 0\n ? `${header?.title \|\| t('article_list_label_a11y')} ${t('loaded')}`\n : t('no_items')\n });\n }\n }, [loading]);\n\n const getItemLength = (tabName: string): number => {\n const currentTab = tabs.find(item => item.id === tabName);\n if (!currentTab \|\| !currentTab.content) {\n return 0;\n }\n return currentTab.content.length - 1;\n };\n\n useItemIntersection(\n listUlRef[activeTab],\n getItemLength(activeTab),\n () => {\n if (!loadingMore) onLoadMore?.();\n },\n ':scope > li[role=\"article\"]'\n );\n\n const articleContent = ({\n content,\n tabId,\n headerTitle\n }: {\n count?: Tab['count'];\n content: ArticleSummaryProps[];\n headerTitle?: ArticleListHeaderProps['title'];\n tabId: ArticleListTabId;\n }) => {\n return (\n <>\n {activeTab === 'Search' && search && <ArticleListFilter {...search} />}\n {activeTab === 'Followed' && followed && <ArticleListFilter {...followed} />}\n {loading && (\n <Progress\n visible={!!loading}\n placement='block'\n message={t('loading')}\n liveConfig={{ contextualLabel: headerTitle ?? t('article_list_label_a11y') }}\n />\n )}\n {!loading &&\n (content.length > 0 ? (\n <Flex\n container={{ direction: 'column', gap: 0.5, pad: [1.5, 2] }}\n as={StyledSummaryList}\n role='feed'\n ref={listUlRef[tabId]}\n >\n {content.map(summaryItem => (\n <ArticleSummary\n {...summaryItem}\n key={summaryItem.articleId}\n onQuickFilterClick={onQuickFilterClick}\n />\n ))}\n {loadingMore && <Progress placement='block' />}\n </Flex>\n ) : (\n <EmptyState />\n ))}\n </>\n );\n };\n\n return (\n <Flex\n {...restProps}\n container={{\n direction: 'column'\n }}\n as={StyledArticleList}\n aria-label={t('article_list_label_a11y')}\n ref={ref}\n aria-busy={loading ? true : undefined}\n >\n {header && (\n <ArticleListHeader icon={header.icon} title={header.title} actions={header.actions} />\n )}\n\n {tabs.length === 1 && (\n <>\n {tabs[0].id === 'Buddy' && buddy ? (\n <ArticleBuddy {...buddy.content} />\n ) : (\n articleContent({\n content: tabs[0]?.content \|\| [],\n tabId: tabs[0].id,\n headerTitle: header?.title\n })\n )}\n </>\n )}\n\n {/* When multiple tabs present. */}\n\n {tabs.length > 1 && (\n <>\n <Tabs\n ref={tabsRef}\n tabs={tabs}\n onTabClick={(name, e) => {\n if (document.activeElement instanceof HTMLElement) {\n activeElementRef.current = document.activeElement;\n onTabClick?.(name, e);\n }\n }}\n currentTabId={activeTab}\n />\n {tabs.map(({ id, content }) => {\n return (\n <TabPanel\n key={id}\n tabId={id}\n currentTabId={activeTab}\n as={activeTab === id ? StyledArticleTabPanel : undefined}\n >\n {activeTab === 'Buddy' && buddy ? (\n <ArticleBuddy {...buddy.content} />\n ) : (\n <>\n {activeTab === id &&\n content &&\n articleContent({ content, tabId: id, headerTitle: header?.title })}\n </>\n )}\n </TabPanel>\n );\n })}\n </>\n )}\n </Flex>\n );\n }\n);\n\nexport default ArticleList;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CasePreview.d.ts","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAoBrE,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AASnG,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAMvE,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,aAAa,EACX,QAAQ,GACR,SAAS,GACT,YAAY,GACZ,aAAa,GACb,MAAM,GACN,UAAU,GACV,kBAAkB,GAClB,SAAS,GACT,iBAAiB,GACjB,QAAQ,GACR,eAAe,GACf,MAAM,GACN,YAAY,GACZ,QAAQ,GACR,OAAO,GACP,SAAS,GACT,WAAW,GACX,uBAAuB,CAC1B,EACD,cAAc,EACd,UAAU,EACV,SAAS;IACX,4GAA4G;IAC5G,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAC5C,iDAAiD;IACjD,IAAI,EAAE,OAAO,CAAC;IACd,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;;;;~~AA+KD~~,wBAA+D"}
1	+ {"version":3,"file":"CasePreview.d.ts","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAoBrE,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AASnG,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAMvE,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,aAAa,EACX,QAAQ,GACR,SAAS,GACT,YAAY,GACZ,aAAa,GACb,MAAM,GACN,UAAU,GACV,kBAAkB,GAClB,SAAS,GACT,iBAAiB,GACjB,QAAQ,GACR,eAAe,GACf,MAAM,GACN,YAAY,GACZ,QAAQ,GACR,OAAO,GACP,SAAS,GACT,WAAW,GACX,uBAAuB,CAC1B,EACD,cAAc,EACd,UAAU,EACV,SAAS;IACX,4GAA4G;IAC5G,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAC5C,iDAAiD;IACjD,IAAI,EAAE,OAAO,CAAC;IACd,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;;;;AA8KD,wBAA+D"}

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState, useCallback, useEffect, useContext } from 'react';
 import styled, { css } from 'styled-components';
-import { readableColor } from 'polished';
-import { Drawer, Icon, registerIcon, Button, Flex, tryCatch, defaultThemeProp, useBreakpoint, useElement, useDirection, useI18n, AppShellContext, useTestIds, withTestIds } from '@pega/cosmos-react-core';
+import { Drawer, Icon, registerIcon, Button, Flex, tryCatch, defaultThemeProp, useBreakpoint, useElement, useDirection, useI18n, AppShellContext, useTestIds, withTestIds, readableColor } from '@pega/cosmos-react-core';
 import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
 import CaseView, { StyledCaseView, StyledCaseViewContent, StyledCaseDrawer, StyledSummaryRegion } from '../CaseView';
 import { getCasePreviewTestIds } from './CasePreview.test-ids';
@@ -18,8 +17,7 @@ const StyledPreviewActions = styled.div(({ theme: { base: { spacing, palette: {
     const buttonColor = tryCatch(() => readableColor(brandPrimary));
     return css `
       background-color: ${brandPrimary};
-      padding: ${spacing} calc(2 * ${spacing}) 0;
+      padding: ${spacing} calc(2 * ${spacing}) calc(0.25 * ${spacing});
       button {
         color: ${buttonColor};
       }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CasePreview.js","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback, useEffect, useContext } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n Drawer,\n Icon,\n registerIcon,\n Button,\n Flex,\n tryCatch,\n defaultThemeProp,\n useBreakpoint,\n useElement,\n useDirection,\n useI18n,\n AppShellContext,\n useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, BaseProps, TestIdProp, NoChildrenProp } from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport CaseView, {\n StyledCaseView,\n StyledCaseViewContent,\n StyledCaseDrawer,\n StyledSummaryRegion\n} from '../CaseView';\nimport type { CaseViewProps } from '../CaseView';\nimport type { CaseViewContextValue } from '../CaseView/CaseView.types';\n\nimport { getCasePreviewTestIds } from './CasePreview.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface CasePreviewProps\n extends Pick<\n CaseViewProps,\n \| 'caseId'\n \| 'heading'\n \| 'subheading'\n \| 'parentCases'\n \| 'icon'\n \| 'followed'\n \| 'onFollowedChange'\n \| 'actions'\n \| 'promotedActions'\n \| 'onEdit'\n \| 'summaryFields'\n \| 'tabs'\n \| 'tabContent'\n \| 'stages'\n \| 'tasks'\n \| 'banners'\n \| 'utilities'\n \| 'utilitiesSummaryItems'\n >,\n NoChildrenProp,\n TestIdProp,\n BaseProps {\n /** A set of props including an href that will be forwarded to the case preview's heading and subheading. /\n caseLink?: CaseViewContextValue['caseLink'];\n /* If true, the Case Preview will be visible. /\n open: boolean;\n /* Callback fired before Case Preview opens. /\n onBeforeOpen?: () => void;\n /* Callback fired after Case Preview opens. /\n onAfterOpen?: () => void;\n /* Callback fired before Case Preview closes. /\n onBeforeClose?: () => void;\n /* Callback fired after Case Preview closes. /\n onAfterClose?: () => void;\n /* Callback fired when a click action occurs outside of the Case Preview. /\n onOuterClick?: () => void;\n /* Reference to the wrapping element. /\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledPreviewHeader = styled.div(({ theme }) => {\n return css`\n z-index: ${theme.base['z-index'].drawer};\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledPreviewHeader.defaultProps = defaultThemeProp;\n\nconst StyledPreviewActions = styled.div(\n ({\n theme: {\n base: {\n spacing,\n palette: { 'brand-primary': brandPrimary }\n }\n }\n }) => {\n const buttonColor = tryCatch(() => readableColor(brandPrimary));\n\n return css`\n background-color: ${brandPrimary};\n padding: ${spacing} calc(2 ${spacing}) 0;\n\n button {\n color: ${buttonColor};\n }\n `;\n }\n);\n\nStyledPreviewActions.defaultProps = defaultThemeProp;\n\nconst StyledPreviewDrawer = styled(StyledCaseDrawer)(({ theme }) => {\n return css`\n height: calc(100vh - var(--appshell-offset, 0rem));\n top: var(--appshell-offset, 0);\n z-index: calc(${theme.base['z-index'].drawer} + 500);\n\n ${StyledCaseView} {\n height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['mouse-min']});\n\n @media (pointer: coarse) {\n height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['finger-min']});\n }\n\n ${StyledSummaryRegion} {\n position: relative;\n top: 0;\n }\n }\n\n ${StyledCaseViewContent} {\n overflow-y: auto;\n\n & > :last-child {\n padding-bottom: calc(2 * ${theme.base.spacing});\n }\n }\n `;\n});\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n\nconst CasePreview: FunctionComponent<CasePreviewProps & ForwardProps> = forwardRef(\n function CasePreview(props: PropsWithoutRef<CasePreviewProps>, ref: CasePreviewProps['ref']) {\n const {\n testId,\n open: openProp,\n caseId,\n heading,\n subheading,\n caseLink,\n parentCases,\n icon,\n followed,\n onFollowedChange,\n summaryFields,\n tabs,\n stages,\n tasks,\n tabContent,\n utilities,\n utilitiesSummaryItems,\n actions,\n banners,\n onEdit,\n onAfterOpen,\n ...restProps\n } = props;\n const testIds = useTestIds(testId, getCasePreviewTestIds);\n\n const t = useI18n();\n const { previewTriggerRef } = useContext(AppShellContext);\n const [closeButtonEl, setCloseButtonEl] = useElement<HTMLButtonElement>();\n const isSmallOrAbove = useBreakpoint('sm');\n const [open, setOpen] = useState(openProp);\n const direction = useDirection();\n\n const closePreview = useCallback(() => {\n setOpen(false);\n previewTriggerRef.current?.focus();\n }, []);\n\n const setFocus = useCallback(() => {\n if (openProp && closeButtonEl) {\n closeButtonEl.focus();\n }\n }, [openProp, closeButtonEl]);\n\n useEffect(() => {\n setOpen(openProp);\n }, [openProp]);\n\n return (\n <Drawer\n data-testid={testIds.root}\n {...restProps}\n onAfterOpen={() => {\n setFocus();\n onAfterOpen?.();\n }}\n as={StyledPreviewDrawer}\n role='complementary'\n forwardedAs={Flex}\n container={{ direction: 'column' }}\n ref={ref}\n open={open && isSmallOrAbove}\n position='fixed'\n placement={direction.end}\n aria-label={t('preview_of_noun', [heading])}\n shadow\n nullWhenClosed\n >\n <StyledPreviewActions>\n <Button\n data-testid={testIds.close}\n variant='simple'\n icon\n onClick={closePreview}\n ref={setCloseButtonEl}\n label={t('close_preview')}\n >\n <Icon name='times' />\n </Button>\n </StyledPreviewActions>\n\n <CaseView\n caseId={caseId}\n parentCases={parentCases}\n heading={heading}\n subheading={subheading}\n caseLink={caseLink}\n icon={icon}\n followed={followed}\n onFollowedChange={onFollowedChange}\n summaryFields={summaryFields}\n tabs={tabs}\n stages={stages}\n tasks={tasks}\n tabContent={tabContent}\n utilities={utilities}\n utilitiesSummaryItems={utilitiesSummaryItems}\n actions={actions}\n banners={banners}\n onEdit={onEdit}\n isPreview\n />\n </Drawer>\n );\n }\n);\n\nexport default withTestIds(CasePreview, getCasePreviewTestIds);\n"]}
1	+ {"version":3,"file":"CasePreview.js","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback, useEffect, useContext } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Drawer,\n Icon,\n registerIcon,\n Button,\n Flex,\n tryCatch,\n defaultThemeProp,\n useBreakpoint,\n useElement,\n useDirection,\n useI18n,\n AppShellContext,\n useTestIds,\n withTestIds,\n readableColor\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, BaseProps, TestIdProp, NoChildrenProp } from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport CaseView, {\n StyledCaseView,\n StyledCaseViewContent,\n StyledCaseDrawer,\n StyledSummaryRegion\n} from '../CaseView';\nimport type { CaseViewProps } from '../CaseView';\nimport type { CaseViewContextValue } from '../CaseView/CaseView.types';\n\nimport { getCasePreviewTestIds } from './CasePreview.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface CasePreviewProps\n extends Pick<\n CaseViewProps,\n \| 'caseId'\n \| 'heading'\n \| 'subheading'\n \| 'parentCases'\n \| 'icon'\n \| 'followed'\n \| 'onFollowedChange'\n \| 'actions'\n \| 'promotedActions'\n \| 'onEdit'\n \| 'summaryFields'\n \| 'tabs'\n \| 'tabContent'\n \| 'stages'\n \| 'tasks'\n \| 'banners'\n \| 'utilities'\n \| 'utilitiesSummaryItems'\n >,\n NoChildrenProp,\n TestIdProp,\n BaseProps {\n /** A set of props including an href that will be forwarded to the case preview's heading and subheading. /\n caseLink?: CaseViewContextValue['caseLink'];\n /* If true, the Case Preview will be visible. /\n open: boolean;\n /* Callback fired before Case Preview opens. /\n onBeforeOpen?: () => void;\n /* Callback fired after Case Preview opens. /\n onAfterOpen?: () => void;\n /* Callback fired before Case Preview closes. /\n onBeforeClose?: () => void;\n /* Callback fired after Case Preview closes. /\n onAfterClose?: () => void;\n /* Callback fired when a click action occurs outside of the Case Preview. /\n onOuterClick?: () => void;\n /* Reference to the wrapping element. /\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledPreviewHeader = styled.div(({ theme }) => {\n return css`\n z-index: ${theme.base['z-index'].drawer};\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledPreviewHeader.defaultProps = defaultThemeProp;\n\nconst StyledPreviewActions = styled.div(\n ({\n theme: {\n base: {\n spacing,\n palette: { 'brand-primary': brandPrimary }\n }\n }\n }) => {\n const buttonColor = tryCatch(() => readableColor(brandPrimary));\n\n return css`\n background-color: ${brandPrimary};\n padding: ${spacing} calc(2 ${spacing}) calc(0.25 * ${spacing});\n button {\n color: ${buttonColor};\n }\n `;\n }\n);\n\nStyledPreviewActions.defaultProps = defaultThemeProp;\n\nconst StyledPreviewDrawer = styled(StyledCaseDrawer)(({ theme }) => {\n return css`\n height: calc(100vh - var(--appshell-offset, 0rem));\n top: var(--appshell-offset, 0);\n z-index: calc(${theme.base['z-index'].drawer} + 500);\n\n ${StyledCaseView} {\n height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['mouse-min']});\n\n @media (pointer: coarse) {\n height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['finger-min']});\n }\n\n ${StyledSummaryRegion} {\n position: relative;\n top: 0;\n }\n }\n\n ${StyledCaseViewContent} {\n overflow-y: auto;\n\n & > :last-child {\n padding-bottom: calc(2 * ${theme.base.spacing});\n }\n }\n `;\n});\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n\nconst CasePreview: FunctionComponent<CasePreviewProps & ForwardProps> = forwardRef(\n function CasePreview(props: PropsWithoutRef<CasePreviewProps>, ref: CasePreviewProps['ref']) {\n const {\n testId,\n open: openProp,\n caseId,\n heading,\n subheading,\n caseLink,\n parentCases,\n icon,\n followed,\n onFollowedChange,\n summaryFields,\n tabs,\n stages,\n tasks,\n tabContent,\n utilities,\n utilitiesSummaryItems,\n actions,\n banners,\n onEdit,\n onAfterOpen,\n ...restProps\n } = props;\n const testIds = useTestIds(testId, getCasePreviewTestIds);\n\n const t = useI18n();\n const { previewTriggerRef } = useContext(AppShellContext);\n const [closeButtonEl, setCloseButtonEl] = useElement<HTMLButtonElement>();\n const isSmallOrAbove = useBreakpoint('sm');\n const [open, setOpen] = useState(openProp);\n const direction = useDirection();\n\n const closePreview = useCallback(() => {\n setOpen(false);\n previewTriggerRef.current?.focus();\n }, []);\n\n const setFocus = useCallback(() => {\n if (openProp && closeButtonEl) {\n closeButtonEl.focus();\n }\n }, [openProp, closeButtonEl]);\n\n useEffect(() => {\n setOpen(openProp);\n }, [openProp]);\n\n return (\n <Drawer\n data-testid={testIds.root}\n {...restProps}\n onAfterOpen={() => {\n setFocus();\n onAfterOpen?.();\n }}\n as={StyledPreviewDrawer}\n role='complementary'\n forwardedAs={Flex}\n container={{ direction: 'column' }}\n ref={ref}\n open={open && isSmallOrAbove}\n position='fixed'\n placement={direction.end}\n aria-label={t('preview_of_noun', [heading])}\n shadow\n nullWhenClosed\n >\n <StyledPreviewActions>\n <Button\n data-testid={testIds.close}\n variant='simple'\n icon\n onClick={closePreview}\n ref={setCloseButtonEl}\n label={t('close_preview')}\n >\n <Icon name='times' />\n </Button>\n </StyledPreviewActions>\n\n <CaseView\n caseId={caseId}\n parentCases={parentCases}\n heading={heading}\n subheading={subheading}\n caseLink={caseLink}\n icon={icon}\n followed={followed}\n onFollowedChange={onFollowedChange}\n summaryFields={summaryFields}\n tabs={tabs}\n stages={stages}\n tasks={tasks}\n tabContent={tabContent}\n utilities={utilities}\n utilitiesSummaryItems={utilitiesSummaryItems}\n actions={actions}\n banners={banners}\n onEdit={onEdit}\n isPreview\n />\n </Drawer>\n );\n }\n);\n\nexport default withTestIds(CasePreview, getCasePreviewTestIds);\n"]}

package/lib/components/CaseView/CaseHeader/CaseHeader.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAsC5C,QAAA,MAAM,UAAU,EAAE,~~EAuRjB~~,CAAC;AAEF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"CaseHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAsC5C,QAAA,MAAM,UAAU,EAAE,EAwRjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/CaseView/CaseHeader/CaseHeader.js CHANGED Viewed

@@ -10,7 +10,7 @@ import Summary from './Summary';
 registerIcon(pencilIcon, moreIcon);
 const CaseHeader = () => {
     const t = useI18n();
-    const { ltr } = useDirection();
+    const { ltr, start } = useDirection();
     const theme = useTheme();
     const { testIds, caseId, icon, heading, subheading, actions, caseLink, parentCases, onEdit, followed, onFollowedChange, promotedActions, summaryExpanded, summaryFields, onToggleSummary, isPreview, aboveSM, aboveMD, persistentUtility } = useCaseViewContext();
     const [wrapPromotedActions, setWrapPromotedActions] = useState(false);
@@ -92,7 +92,7 @@ const CaseHeader = () => {
     useEffect(() => {
         setSummaryResetID(Math.random());
     }, [heading, summaryFields, promotedActions]);
-    return (_jsxs(Flex, { "data-testid": testIds.header, as: StyledCaseHeader, container: { direction: 'column', gap: 1.5 }, children: [_jsxs(Flex, { container: true, ref: contentsEl, children: [showExpandCollapse && onToggleSummary && !persistentUtility && (_jsx(StyledExpandCollapseSummaryButton, { ref: toggleButtonRef, onClick: onToggleSummary, label: t(summaryExpanded ? 'collapse' : 'expand'), "aria-label": t(summaryExpanded ? 'collapse_summary' : 'expand_summary'), icon: true, compact: true, children: _jsx(Icon, { name: 'arrow-micro-left' }) })), icon && (_jsx(Flex, { container: { pad: [1, 0, 0] }, item: { shrink: 0 }, children: _jsx(Icon, { "data-testid": testIds.icon, name: icon, background: iconBackground }) })), _jsxs(Flex, { as: StyledCaseHeaderText, container: {
+    return (_jsxs(Flex, { "data-testid": testIds.header, as: StyledCaseHeader, container: { direction: 'column', gap: 1.5 }, children: [_jsxs(Flex, { container: true, ref: contentsEl, children: [showExpandCollapse && onToggleSummary && !persistentUtility && (_jsx(StyledExpandCollapseSummaryButton, { ref: toggleButtonRef, onClick: onToggleSummary, label: t(summaryExpanded ? 'collapse' : 'expand'), "aria-label": t(summaryExpanded ? 'collapse_summary' : 'expand_summary'), icon: true, compact: true, children: _jsx(Icon, { name: summaryExpanded ? `arrow-micro-${start}` : `arrow-micro-down` }) })), icon && (_jsx(Flex, { container: { pad: [1, 0, 0] }, item: { shrink: 0 }, children: _jsx(Icon, { "data-testid": testIds.icon, name: icon, background: iconBackground }) })), _jsxs(Flex, { as: StyledCaseHeaderText, container: {
                             direction: 'column',
                             pad: [0.5, 2, 0.5, 1.5],
                             alignItems: 'start'
@@ -107,17 +107,19 @@ const CaseHeader = () => {
                                 ], leafOnly: true }))] }), collapsedMainHeader && !wrapPromotedActions && (_jsx(Summary, { siblingRef: actionsContainerEl }, summaryResetID)), _jsxs(Flex, { as: StyledHeaderActions, item: { shrink: 0 }, container: { alignItems: 'start', pad: [0, 0, 0, 2] }, offsetEnd: !summaryExpanded, ref: actionsContainerEl, children: [collapsedMainHeader &&
                                 !wrapPromotedActions &&
                                 promotedActions &&
-                                promotedActions.length > 0 ? (_jsx(_Fragment, { children: promotedActions.map(promotedAction => (_jsx(StyledCaseHeaderPromotedAction, { variant: 'secondary', onClick: (e) => promotedAction.onClick?.(promotedAction.id, e), children: promotedAction.text }, promotedAction.id))) })) : null, onEdit && (_jsx(Button, { "data-testid": testIds.edit, icon: true, variant: 'simple', onClick: onEdit, label: t('edit'), children: _jsx(Icon, { name: 'pencil' }) })), caseActions && (_jsx(MenuButton, { "data-testid": testIds.actions, icon: 'more', iconOnly: true, variant: 'simple', text: t('actions'), menu: {
-                                    items: followed !== undefined
-                                        ? [
-                                            {
-                                                id: 'follow',
-                                                primary: followed ? t('unfollow') : t('follow'),
-                                                onClick: () => onFollowedChange?.(!followed)
-                                            },
-                                            ...caseActions
-                                        ]
-                                        : caseActions,
+                                promotedActions.length > 0 ? (_jsx(_Fragment, { children: promotedActions.map(promotedAction => (_jsx(StyledCaseHeaderPromotedAction, { variant: 'secondary', onClick: (e) => promotedAction.onClick?.(promotedAction.id, e), children: promotedAction.text }, promotedAction.id))) })) : null, onEdit && (_jsx(Button, { "data-testid": testIds.edit, icon: true, variant: 'simple', onClick: onEdit, label: t('edit'), children: _jsx(Icon, { name: 'pencil' }) })), (caseActions || onFollowedChange) && (_jsx(MenuButton, { "data-testid": testIds.actions, icon: 'more', iconOnly: true, variant: 'simple', text: t('actions'), menu: {
+                                    items: [
+                                        ...(onFollowedChange
+                                            ? [
+                                                {
+                                                    id: 'follow',
+                                                    primary: followed ? t('unfollow') : t('follow'),
+                                                    onClick: () => onFollowedChange(!followed)
+                                                }
+                                            ]
+                                            : []),
+                                        ...(caseActions ?? [])
+                                    ],
                                     scrollAt: 20
                                 } }))] })] }), (!collapsedMainHeader || wrapPromotedActions || !aboveSM) &&
                 promotedActions &&

package/lib/components/CaseView/CaseHeader/CaseHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseHeader.js","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { FC, MouseEvent } from 'react';\nimport { parseToHsl } from 'polished';\n\nimport {\n Breadcrumbs,\n Flex,\n getEdge,\n Icon,\n registerIcon,\n Text,\n Link,\n Button,\n MenuButton,\n throttle,\n useDirection,\n useI18n,\n useAfterInitialEffect,\n useTheme,\n tryCatch\n} from '@pega/cosmos-react-core';\nimport type { MenuItemProps } from '@pega/cosmos-react-core';\nimport * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';\nimport * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';\n\nimport {\n StyledCaseHeader,\n StyledCaseHeaderText,\n StyledExpandCollapseSummaryButton,\n StyledSubheading,\n StyledHeaderActions,\n StyledCaseHeaderPromotedAction\n} from '../CaseView.styles';\nimport { useCaseViewContext } from '../CaseView.context';\n\nimport Summary from './Summary';\n\nregisterIcon(pencilIcon, moreIcon);\n\nconst CaseHeader: FC = () => {\n const t = useI18n();\n const { ltr } = useDirection();\n const theme = useTheme();\n\n const {\n testIds,\n caseId,\n icon,\n heading,\n subheading,\n actions,\n caseLink,\n parentCases,\n onEdit,\n followed,\n onFollowedChange,\n promotedActions,\n summaryExpanded,\n summaryFields,\n onToggleSummary,\n isPreview,\n aboveSM,\n aboveMD,\n persistentUtility\n } = useCaseViewContext();\n\n const [wrapPromotedActions, setWrapPromotedActions] = useState(false);\n const [summaryResetID, setSummaryResetID] = useState<number \| undefined>(Math.random());\n\n const wrapActionsBreakpoint = useRef<number \| null>(null);\n\n const iconBackground = useMemo(() => {\n return tryCatch(() => {\n const { lightness } = parseToHsl(theme.base.palette['brand-primary']);\n return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n });\n }, [theme]);\n\n const contentsEl = useRef<HTMLDivElement>(null);\n const headerGroupEl = useRef<HTMLElement>(null);\n const actionsContainerEl = useRef<HTMLDivElement>(null);\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n\n const caseActions: MenuItemProps[] \| undefined = actions\n ? actions.map(action => {\n return {\n ...action,\n primary: action.text,\n visual: action.icon ? <Icon name={action.icon} /> : null\n };\n })\n : undefined;\n const showExpandCollapse = !isPreview && aboveMD;\n const collapsedMainHeader =\n (!isPreview && !aboveMD && aboveSM) \|\| (showExpandCollapse && !summaryExpanded);\n\n // FIXME: This is a hack to get the Tooltip to reset its position when the summary changes layout.\n useAfterInitialEffect(() => {\n if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {\n toggleButtonRef.current.blur();\n setTimeout(() => {\n toggleButtonRef.current?.focus();\n }, 0);\n }\n }, [summaryExpanded]);\n\n // Actions wrapping\n useLayoutEffect(() => {\n if (\n !wrapPromotedActions &&\n contentsEl.current &&\n headerGroupEl.current &&\n actionsContainerEl.current\n ) {\n const contentStart = getEdge({\n el: contentsEl.current,\n side: 'leading',\n ltr\n });\n const headerGroupEnd = getEdge({\n el: headerGroupEl.current,\n side: 'trailing',\n ltr\n });\n const actionsContainerWidth = actionsContainerEl.current.getBoundingClientRect().width;\n\n wrapActionsBreakpoint.current =\n Math.ceil(headerGroupEnd) - Math.ceil(contentStart) + Math.ceil(actionsContainerWidth);\n }\n\n const promotedActionsWrapHandler = () => {\n if (wrapActionsBreakpoint.current && contentsEl.current) {\n setWrapPromotedActions(\n Math.ceil(contentsEl.current.offsetWidth) < wrapActionsBreakpoint.current\n );\n }\n };\n\n const resizeObserver = new ResizeObserver(throttle(promotedActionsWrapHandler, 30));\n\n promotedActionsWrapHandler();\n\n if (contentsEl.current) {\n resizeObserver.observe(contentsEl.current, { box: 'border-box' });\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [\n contentsEl,\n headerGroupEl,\n actionsContainerEl,\n promotedActions,\n heading,\n subheading,\n wrapPromotedActions\n ]);\n\n // Reset summary\n useEffect(() => {\n setSummaryResetID(Math.random());\n }, [heading, summaryFields, promotedActions]);\n\n return (\n <Flex\n data-testid={testIds.header}\n as={StyledCaseHeader}\n container={{ direction: 'column', gap: 1.5 }}\n >\n <Flex container ref={contentsEl}>\n {showExpandCollapse && onToggleSummary && !persistentUtility && (\n <StyledExpandCollapseSummaryButton\n ref={toggleButtonRef}\n onClick={onToggleSummary}\n label={t(summaryExpanded ? 'collapse' : 'expand')}\n aria-label={t(summaryExpanded ? 'collapse_summary' : 'expand_summary')}\n icon\n compact\n >\n <Icon name='arrow-micro-left' />\n </StyledExpandCollapseSummaryButton>\n )}\n\n {icon && (\n <Flex container={{ pad: [1, 0, 0] }} item={{ shrink: 0 }}>\n <Icon data-testid={testIds.icon} name={icon} background={iconBackground} />\n </Flex>\n )}\n\n {/* header group /}\n <Flex\n as={StyledCaseHeaderText}\n container={{\n direction: 'column',\n pad: [0.5, 2, 0.5, 1.5],\n alignItems: 'start'\n }}\n item={aboveSM ? { shrink: wrapPromotedActions ? 1 : 0 } : { shrink: 1, grow: 1 }}\n ref={headerGroupEl}\n >\n <Text data-testid={testIds.heading} variant='h1'>\n {caseLink ? <Link {...caseLink}>{heading}</Link> : heading}\n </Text>\n\n {subheading && (!parentCases \|\| subheading !== caseId) && (\n <StyledSubheading data-testid={testIds.subheading}>{subheading}</StyledSubheading>\n )}\n\n {parentCases && (\n <Breadcrumbs\n forwardedAs='p'\n path={[\n ...parentCases,\n {\n ...caseLink,\n id: caseId,\n primary: caseId,\n href: caseLink?.href\n }\n ]}\n leafOnly\n />\n )}\n </Flex>\n\n {/ summary /}\n {collapsedMainHeader && !wrapPromotedActions && (\n <Summary siblingRef={actionsContainerEl} key={summaryResetID} />\n )}\n\n {/ inline actions /}\n <Flex\n as={StyledHeaderActions}\n item={{ shrink: 0 }}\n container={{ alignItems: 'start', pad: [0, 0, 0, 2] }}\n offsetEnd={!summaryExpanded}\n ref={actionsContainerEl}\n >\n {collapsedMainHeader &&\n !wrapPromotedActions &&\n promotedActions &&\n promotedActions.length > 0 ? (\n <>\n {promotedActions.map(promotedAction => (\n <StyledCaseHeaderPromotedAction\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) =>\n promotedAction.onClick?.(promotedAction.id, e)\n }\n key={promotedAction.id}\n >\n {promotedAction.text}\n </StyledCaseHeaderPromotedAction>\n ))}\n </>\n ) : null}\n\n {onEdit && (\n <Button\n data-testid={testIds.edit}\n icon\n variant='simple'\n onClick={onEdit}\n label={t('edit')}\n >\n <Icon name='pencil' />\n </Button>\n )}\n\n {caseActions && (\n <MenuButton\n data-testid={testIds.actions}\n icon='more'\n iconOnly\n variant='simple'\n text={t('actions')}\n menu={{\n items:\n followed !== undefined\n ? [\n {\n id: 'follow',\n primary: followed ? t('unfollow') : t('follow'),\n onClick: () => onFollowedChange?.(!followed)\n },\n ...caseActions\n ]\n : caseActions,\n scrollAt: 20\n }}\n />\n )}\n </Flex>\n </Flex>\n\n {/ wrapped promoted actions */}\n {(!collapsedMainHeader \|\| wrapPromotedActions \|\| !aboveSM) &&\n promotedActions &&\n promotedActions.length > 0 ? (\n <Flex\n data-testid={testIds.promotedActions}\n container={{ justify: 'start', wrap: 'wrap', gap: 1, pad: [0, 0, 0.5] }}\n >\n {promotedActions.map(({ id, text, onClick }) => (\n <div key={text}>\n <StyledCaseHeaderPromotedAction\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => onClick?.(id, e)}\n >\n {text}\n </StyledCaseHeaderPromotedAction>\n </div>\n ))}\n </Flex>\n ) : null}\n </Flex>\n );\n};\n\nexport default CaseHeader;\n"]}
1	+ {"version":3,"file":"CaseHeader.js","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { FC, MouseEvent } from 'react';\nimport { parseToHsl } from 'polished';\n\nimport {\n Breadcrumbs,\n Flex,\n getEdge,\n Icon,\n registerIcon,\n Text,\n Link,\n Button,\n MenuButton,\n throttle,\n useDirection,\n useI18n,\n useAfterInitialEffect,\n useTheme,\n tryCatch\n} from '@pega/cosmos-react-core';\nimport type { MenuItemProps } from '@pega/cosmos-react-core';\nimport * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';\nimport * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';\n\nimport {\n StyledCaseHeader,\n StyledCaseHeaderText,\n StyledExpandCollapseSummaryButton,\n StyledSubheading,\n StyledHeaderActions,\n StyledCaseHeaderPromotedAction\n} from '../CaseView.styles';\nimport { useCaseViewContext } from '../CaseView.context';\n\nimport Summary from './Summary';\n\nregisterIcon(pencilIcon, moreIcon);\n\nconst CaseHeader: FC = () => {\n const t = useI18n();\n const { ltr, start } = useDirection();\n const theme = useTheme();\n\n const {\n testIds,\n caseId,\n icon,\n heading,\n subheading,\n actions,\n caseLink,\n parentCases,\n onEdit,\n followed,\n onFollowedChange,\n promotedActions,\n summaryExpanded,\n summaryFields,\n onToggleSummary,\n isPreview,\n aboveSM,\n aboveMD,\n persistentUtility\n } = useCaseViewContext();\n\n const [wrapPromotedActions, setWrapPromotedActions] = useState(false);\n const [summaryResetID, setSummaryResetID] = useState<number \| undefined>(Math.random());\n\n const wrapActionsBreakpoint = useRef<number \| null>(null);\n\n const iconBackground = useMemo(() => {\n return tryCatch(() => {\n const { lightness } = parseToHsl(theme.base.palette['brand-primary']);\n return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n });\n }, [theme]);\n\n const contentsEl = useRef<HTMLDivElement>(null);\n const headerGroupEl = useRef<HTMLElement>(null);\n const actionsContainerEl = useRef<HTMLDivElement>(null);\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n\n const caseActions: MenuItemProps[] \| undefined = actions\n ? actions.map(action => {\n return {\n ...action,\n primary: action.text,\n visual: action.icon ? <Icon name={action.icon} /> : null\n };\n })\n : undefined;\n const showExpandCollapse = !isPreview && aboveMD;\n const collapsedMainHeader =\n (!isPreview && !aboveMD && aboveSM) \|\| (showExpandCollapse && !summaryExpanded);\n\n // FIXME: This is a hack to get the Tooltip to reset its position when the summary changes layout.\n useAfterInitialEffect(() => {\n if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {\n toggleButtonRef.current.blur();\n setTimeout(() => {\n toggleButtonRef.current?.focus();\n }, 0);\n }\n }, [summaryExpanded]);\n\n // Actions wrapping\n useLayoutEffect(() => {\n if (\n !wrapPromotedActions &&\n contentsEl.current &&\n headerGroupEl.current &&\n actionsContainerEl.current\n ) {\n const contentStart = getEdge({\n el: contentsEl.current,\n side: 'leading',\n ltr\n });\n const headerGroupEnd = getEdge({\n el: headerGroupEl.current,\n side: 'trailing',\n ltr\n });\n const actionsContainerWidth = actionsContainerEl.current.getBoundingClientRect().width;\n\n wrapActionsBreakpoint.current =\n Math.ceil(headerGroupEnd) - Math.ceil(contentStart) + Math.ceil(actionsContainerWidth);\n }\n\n const promotedActionsWrapHandler = () => {\n if (wrapActionsBreakpoint.current && contentsEl.current) {\n setWrapPromotedActions(\n Math.ceil(contentsEl.current.offsetWidth) < wrapActionsBreakpoint.current\n );\n }\n };\n\n const resizeObserver = new ResizeObserver(throttle(promotedActionsWrapHandler, 30));\n\n promotedActionsWrapHandler();\n\n if (contentsEl.current) {\n resizeObserver.observe(contentsEl.current, { box: 'border-box' });\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [\n contentsEl,\n headerGroupEl,\n actionsContainerEl,\n promotedActions,\n heading,\n subheading,\n wrapPromotedActions\n ]);\n\n // Reset summary\n useEffect(() => {\n setSummaryResetID(Math.random());\n }, [heading, summaryFields, promotedActions]);\n\n return (\n <Flex\n data-testid={testIds.header}\n as={StyledCaseHeader}\n container={{ direction: 'column', gap: 1.5 }}\n >\n <Flex container ref={contentsEl}>\n {showExpandCollapse && onToggleSummary && !persistentUtility && (\n <StyledExpandCollapseSummaryButton\n ref={toggleButtonRef}\n onClick={onToggleSummary}\n label={t(summaryExpanded ? 'collapse' : 'expand')}\n aria-label={t(summaryExpanded ? 'collapse_summary' : 'expand_summary')}\n icon\n compact\n >\n <Icon name={summaryExpanded ? `arrow-micro-${start}` : `arrow-micro-down`} />\n </StyledExpandCollapseSummaryButton>\n )}\n\n {icon && (\n <Flex container={{ pad: [1, 0, 0] }} item={{ shrink: 0 }}>\n <Icon data-testid={testIds.icon} name={icon} background={iconBackground} />\n </Flex>\n )}\n\n {/* header group /}\n <Flex\n as={StyledCaseHeaderText}\n container={{\n direction: 'column',\n pad: [0.5, 2, 0.5, 1.5],\n alignItems: 'start'\n }}\n item={aboveSM ? { shrink: wrapPromotedActions ? 1 : 0 } : { shrink: 1, grow: 1 }}\n ref={headerGroupEl}\n >\n <Text data-testid={testIds.heading} variant='h1'>\n {caseLink ? <Link {...caseLink}>{heading}</Link> : heading}\n </Text>\n\n {subheading && (!parentCases \|\| subheading !== caseId) && (\n <StyledSubheading data-testid={testIds.subheading}>{subheading}</StyledSubheading>\n )}\n\n {parentCases && (\n <Breadcrumbs\n forwardedAs='p'\n path={[\n ...parentCases,\n {\n ...caseLink,\n id: caseId,\n primary: caseId,\n href: caseLink?.href\n }\n ]}\n leafOnly\n />\n )}\n </Flex>\n\n {/ summary /}\n {collapsedMainHeader && !wrapPromotedActions && (\n <Summary siblingRef={actionsContainerEl} key={summaryResetID} />\n )}\n\n {/ inline actions /}\n <Flex\n as={StyledHeaderActions}\n item={{ shrink: 0 }}\n container={{ alignItems: 'start', pad: [0, 0, 0, 2] }}\n offsetEnd={!summaryExpanded}\n ref={actionsContainerEl}\n >\n {collapsedMainHeader &&\n !wrapPromotedActions &&\n promotedActions &&\n promotedActions.length > 0 ? (\n <>\n {promotedActions.map(promotedAction => (\n <StyledCaseHeaderPromotedAction\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) =>\n promotedAction.onClick?.(promotedAction.id, e)\n }\n key={promotedAction.id}\n >\n {promotedAction.text}\n </StyledCaseHeaderPromotedAction>\n ))}\n </>\n ) : null}\n\n {onEdit && (\n <Button\n data-testid={testIds.edit}\n icon\n variant='simple'\n onClick={onEdit}\n label={t('edit')}\n >\n <Icon name='pencil' />\n </Button>\n )}\n\n {(caseActions \|\| onFollowedChange) && (\n <MenuButton\n data-testid={testIds.actions}\n icon='more'\n iconOnly\n variant='simple'\n text={t('actions')}\n menu={{\n items: [\n ...(onFollowedChange\n ? [\n {\n id: 'follow',\n primary: followed ? t('unfollow') : t('follow'),\n onClick: () => onFollowedChange(!followed)\n }\n ]\n : []),\n ...(caseActions ?? [])\n ],\n scrollAt: 20\n }}\n />\n )}\n </Flex>\n </Flex>\n\n {/ wrapped promoted actions */}\n {(!collapsedMainHeader \|\| wrapPromotedActions \|\| !aboveSM) &&\n promotedActions &&\n promotedActions.length > 0 ? (\n <Flex\n data-testid={testIds.promotedActions}\n container={{ justify: 'start', wrap: 'wrap', gap: 1, pad: [0, 0, 0.5] }}\n >\n {promotedActions.map(({ id, text, onClick }) => (\n <div key={text}>\n <StyledCaseHeaderPromotedAction\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => onClick?.(id, e)}\n >\n {text}\n </StyledCaseHeaderPromotedAction>\n </div>\n ))}\n </Flex>\n ) : null}\n </Flex>\n );\n};\n\nexport default CaseHeader;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseView.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAuBhC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAmB5D,OAAO,KAAK,EAAwB,aAAa,EAAE,MAAM,kBAAkB,CAAC;;;;~~AAupB5E~~,wBAAyD"}
1	+ {"version":3,"file":"CaseView.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAuBhC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAmB5D,OAAO,KAAK,EAAwB,aAAa,EAAE,MAAM,kBAAkB,CAAC;;;;AAypB5E,wBAAyD"}

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

@@ -51,7 +51,7 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
     const testIds = useTestIds(testId, getCaseViewTestIds);
     // General util hooks
     const t = useI18n();
-    const direction = useDirection();
+    const { start, end } = useDirection();
     const { loadedRef } = useConfiguration();
     // Element refs
     const caseViewRef = useRef(null);
@@ -224,7 +224,7 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
     }
     // Apply sticky columns
     const scrollStickOptions = useRef({
-        elements: []
+        elements: new Set()
     });
     const stickOffset = useMemo(() => {
         if (windowIsAvailable && caseViewRef.current) {
@@ -388,7 +388,7 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
             isToggleButtonFocused.current = true;
         }, onBlur: () => {
             isToggleButtonFocused.current = false;
-        }, ref: toggleButtonRef, children: _jsx(Icon, { name: 'arrow-micro-left' }) }));
+        }, ref: toggleButtonRef, children: _jsx(Icon, { name: utilitiesExpanded ? `arrow-micro-${end}` : `arrow-micro-${start}` }) }));
     // Here we go...
     return (_jsxs(_Fragment, { children: [_jsx(CaseViewContext.Provider, { value: ctxValue, children: _jsxs(Grid, { "data-testid": testIds.root, ...restProps, as: StyledCaseView, ref: caseViewRef, container: caseViewGridContainer, item: { area: 'case-view' }, children: [_jsx(Grid, { as: StyledSummary, item: { area: 'summary' }, desktop: mdOrAbove && (!persistentUtility || xlOrAbove) && !summaryExpanded, isLargeOrAbove: lgOrAbove, ref: summaryRef, children: _jsx(CaseSummary, {}) }), _jsxs(Flex, { container: {
                                 direction: 'column',
@@ -397,14 +397,15 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
                             }, as: StyledWorkArea, persistentUtility: Boolean(persistentUtility), ref: (el) => {
                                 workAreaRef.current = el;
                                 if (el)
-                                    scrollStickOptions.current?.elements.push(el);
+                                    scrollStickOptions.current?.elements.add(el);
                             }, children: [(banners || stages || tasks) && (_jsxs(Flex, { container: {
                                         direction: 'column',
                                         alignContent: 'start',
                                         rowGap: 2
-                                    }, ref: setBannersStagesTasksEl, children: [banners && _jsx("div", { "data-testid": testIds.banners, children: banners }), stages && _jsx("div", { "data-testid": testIds.stages, children: stages }), tasks && _jsx("div", { "data-testid": testIds.tasks, children: tasks })] })), (!mdOrAbove || (persistentUtility && !xlOrAbove) || !summaryExpanded) && (_jsx(Tabs, { "data-testid": testIds.tabs, tabs: tabItems, onTabClick: onTabClick, currentTabId: currentTabId })), _jsx("div", { ref: setTabContentEl, children: tabContent?.map(({ id, content }) => (_jsx(TabPanel, { "data-testid": currentTabId === id ? testIds.tabContent : undefined, currentTabId: currentTabId, tabId: id, ref: currentTabId === id ? currentTabPanelRef : undefined, children: content }, id))) })] }), persistentUtility && mdOrAbove && (_jsx(Grid, { as: StyledPersistentUtility, item: { area: 'persistentUtility' }, "data-app-region": true, children: persistentUtility.content })), utilities && mdOrAbove && !lgOrAbove && utilitiesExpanded && (_jsx(Drawer, { as: StyledCaseDrawer, open: utilitiesExpanded, position: 'fixed', placement: direction.end, shadow: true, nullWhenClosed: true, hasPersistentUtility: !!persistentUtility, children: _jsxs(Flex, { as: StyledCaseDrawerContent, container: { direction: 'column', gap: 2 }, "data-app-region": true, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, children: [utilitiesHeading, utilitiesToggleButton] }), utilities] }) })), utilities && mdOrAbove && (_jsxs(Grid, { "data-testid": testIds.utilities, ref: (el) => {
-                                if (el)
-                                    scrollStickOptions.current?.elements.push(el);
+                                    }, ref: setBannersStagesTasksEl, children: [banners && _jsx("div", { "data-testid": testIds.banners, children: banners }), stages && _jsx("div", { "data-testid": testIds.stages, children: stages }), tasks && _jsx("div", { "data-testid": testIds.tasks, children: tasks })] })), (!mdOrAbove || (persistentUtility && !xlOrAbove) || !summaryExpanded) && (_jsx(Tabs, { "data-testid": testIds.tabs, tabs: tabItems, onTabClick: onTabClick, currentTabId: currentTabId })), _jsx("div", { ref: setTabContentEl, children: tabContent?.map(({ id, content }) => (_jsx(TabPanel, { "data-testid": currentTabId === id ? testIds.tabContent : undefined, currentTabId: currentTabId, tabId: id, ref: currentTabId === id ? currentTabPanelRef : undefined, children: content }, id))) })] }), persistentUtility && mdOrAbove && (_jsx(Grid, { as: StyledPersistentUtility, item: { area: 'persistentUtility' }, "data-app-region": true, children: persistentUtility.content })), utilities && mdOrAbove && !lgOrAbove && utilitiesExpanded && (_jsx(Drawer, { as: StyledCaseDrawer, open: utilitiesExpanded, position: 'fixed', placement: end, shadow: true, nullWhenClosed: true, hasPersistentUtility: !!persistentUtility, children: _jsxs(Flex, { as: StyledCaseDrawerContent, container: { direction: 'column', gap: 2 }, "data-app-region": true, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, children: [utilitiesHeading, utilitiesToggleButton] }), utilities] }) })), utilities && mdOrAbove && (_jsxs(Grid, { "data-testid": testIds.utilities, ref: (el) => {
+                                if (el) {
+                                    scrollStickOptions.current?.elements.add(el);
+                                }
                             }, as: StyledUtilities, container: {
                                 cols: 'minmax(0, 1fr)',
                                 rowGap: 2