@pega/cosmos-react-work 9.0.0-build.9.9 → 9.0.1

package/lib/components/CaseHierarchy/CaseHierarchy.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Count, EmptyState, ErrorState, Flex, Icon, Progress, Text, useI18n, useTestIds, withTestIds } from '@pega/cosmos-react-core';
+import { colorIconMapping, Count, EmptyState, ErrorState, Flex, Icon, Progress, SearchInput, Text, useI18n, useTestIds, useTheme, withTestIds } from '@pega/cosmos-react-core';
 import { StyledCaseHierarchy, StyledCaseHierarchyHeader, StyledCaseHierarchyTree, StyledOverflowContainer } from './CaseHierarchy.styles';
 import { getCaseHierarchyTestIds } from './CaseHierarchy.test-ids';
-const CaseHierarchy = forwardRef(function CaseHierarchy({ testId, heading, icon, loading, error, count, nodes, currentCaseId, ...restProps }, ref) {
+const CaseHierarchy = forwardRef(function CaseHierarchy({ testId, heading, icon, loading, error, count, nodes, search, currentCaseId, ...restProps }, ref) {
     const t = useI18n();
+    const theme = useTheme();
     const testIds = useTestIds(testId, getCaseHierarchyTestIds);
     const content = (() => {
         if (error) {
@@ -18,7 +19,7 @@ const CaseHierarchy = forwardRef(function CaseHierarchy({ testId, heading, icon,
         }
         return _jsx(StyledCaseHierarchyTree, { ...restProps, currentNodeId: currentCaseId, nodes: nodes });
     })();
-    return (_jsxs(StyledCaseHierarchy, { "data-testid": testIds.root, ref: ref, children: [_jsx(StyledCaseHierarchyHeader, { children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { "data-testid": testIds.icon, name: icon ?? 'folder-nested', size: 's' }), _jsx(Text, { "data-testid": testIds.heading, variant: 'h3', children: heading }), !loading && typeof count === 'number' && (_jsx(Count, { "data-testid": testIds.count, children: count }))] }) }), _jsx(StyledOverflowContainer, { children: content })] }));
+    return (_jsxs(StyledCaseHierarchy, { "data-testid": testIds.root, ref: ref, children: [_jsx(StyledCaseHierarchyHeader, { children: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, item: { grow: 1 }, children: [_jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 1 }, children: [theme.components['case-view'].utilities['icon-color'] ? (_jsx(Icon, { "data-testid": testIds.icon, name: icon ?? 'folder-nested', background: colorIconMapping(theme, icon ?? 'folder-nested'), shape: 'circle' })) : (_jsx(Icon, { "data-testid": testIds.icon, name: icon ?? 'folder-nested' })), _jsx(Text, { "data-testid": testIds.heading, variant: 'h3', children: heading }), !loading && typeof count === 'number' && (_jsx(Count, { "data-testid": testIds.count, children: count }))] }), search && (_jsx(SearchInput, { "data-testid": testIds.search, value: search.value, onSearchChange: search.handler }))] }) }), _jsx(StyledOverflowContainer, { children: content })] }));
 });
 export default withTestIds(CaseHierarchy, getCaseHierarchyTestIds);
 //# sourceMappingURL=CaseHierarchy.js.map

package/lib/components/CaseHierarchy/CaseHierarchy.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaseHierarchy.js","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EACL,KAAK,EACL,UAAU,EACV,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,UAAU,EACV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EACL,mBAAmB,EACnB,yBAAyB,EACzB,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAEnE,MAAM,aAAa,GAAG,UAAU,CAAC,SAAS,aAAa,CACrD,EACE,MAAM,EACN,OAAO,EACP,IAAI,EACJ,OAAO,EACP,KAAK,EACL,KAAK,EACL,KAAK,EACL,aAAa,EACb,GAAG,SAAS,EACwB,EACtC,GAA0B;IAE1B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC;IAE5D,MAAM,OAAO,GAAG,CAAC,GAAG,EAAE;QACpB,IAAI,KAAK,EAAE,CAAC;YACV,OAAO,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,OAAO,CAAC,GAAI,CAAC;QAC7C,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,GAAG,CAAC;QACxC,CAAC;QAED,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACvB,OAAO,KAAC,UAAU,KAAG,CAAC;QACxB,CAAC;QAED,OAAO,KAAC,uBAAuB,OAAK,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;IAChG,CAAC,CAAC,EAAE,CAAC;IAEL,OAAO,CACL,MAAC,mBAAmB,mBAAc,OAAO,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,aACtD,KAAC,yBAAyB,cACxB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC/C,KAAC,IAAI,mBAAc,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,IAAI,eAAe,EAAE,IAAI,EAAC,GAAG,GAAG,EAC3E,KAAC,IAAI,mBAAc,OAAO,CAAC,OAAO,EAAE,OAAO,EAAC,IAAI,YAC7C,OAAO,GACH,EACN,CAAC,OAAO,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CACxC,KAAC,KAAK,mBAAc,OAAO,CAAC,KAAK,YAAG,KAAK,GAAS,CACnD,IACI,GACmB,EAC5B,KAAC,uBAAuB,cAAE,OAAO,GAA2B,IACxC,CACvB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,aAAa,EAAE,uBAAuB,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\n\nimport {\n  Count,\n  EmptyState,\n  ErrorState,\n  Flex,\n  Icon,\n  Progress,\n  Text,\n  useI18n,\n  useTestIds,\n  withTestIds\n} from '@pega/cosmos-react-core';\n\nimport type { CaseHierarchyProps } from './CaseHierarchy.types';\nimport {\n  StyledCaseHierarchy,\n  StyledCaseHierarchyHeader,\n  StyledCaseHierarchyTree,\n  StyledOverflowContainer\n} from './CaseHierarchy.styles';\nimport { getCaseHierarchyTestIds } from './CaseHierarchy.test-ids';\n\nconst CaseHierarchy = forwardRef(function CaseHierarchy(\n  {\n    testId,\n    heading,\n    icon,\n    loading,\n    error,\n    count,\n    nodes,\n    currentCaseId,\n    ...restProps\n  }: PropsWithoutRef<CaseHierarchyProps>,\n  ref: Ref<HTMLUListElement>\n) {\n  const t = useI18n();\n  const testIds = useTestIds(testId, getCaseHierarchyTestIds);\n\n  const content = (() => {\n    if (error) {\n      return <ErrorState message={t('error')} />;\n    }\n\n    if (loading) {\n      return <Progress placement='block' />;\n    }\n\n    if (nodes.length === 0) {\n      return <EmptyState />;\n    }\n\n    return <StyledCaseHierarchyTree {...restProps} currentNodeId={currentCaseId} nodes={nodes} />;\n  })();\n\n  return (\n    <StyledCaseHierarchy data-testid={testIds.root} ref={ref}>\n      <StyledCaseHierarchyHeader>\n        <Flex container={{ alignItems: 'center', gap: 1 }}>\n          <Icon data-testid={testIds.icon} name={icon ?? 'folder-nested'} size='s' />\n          <Text data-testid={testIds.heading} variant='h3'>\n            {heading}\n          </Text>\n          {!loading && typeof count === 'number' && (\n            <Count data-testid={testIds.count}>{count}</Count>\n          )}\n        </Flex>\n      </StyledCaseHierarchyHeader>\n      <StyledOverflowContainer>{content}</StyledOverflowContainer>\n    </StyledCaseHierarchy>\n  );\n});\n\nexport default withTestIds(CaseHierarchy, getCaseHierarchyTestIds);\n"]}
+{"version":3,"file":"CaseHierarchy.js","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\n\nimport {\n  colorIconMapping,\n  Count,\n  EmptyState,\n  ErrorState,\n  Flex,\n  Icon,\n  Progress,\n  SearchInput,\n  Text,\n  useI18n,\n  useTestIds,\n  useTheme,\n  withTestIds\n} from '@pega/cosmos-react-core';\n\nimport type { CaseHierarchyProps } from './CaseHierarchy.types';\nimport {\n  StyledCaseHierarchy,\n  StyledCaseHierarchyHeader,\n  StyledCaseHierarchyTree,\n  StyledOverflowContainer\n} from './CaseHierarchy.styles';\nimport { getCaseHierarchyTestIds } from './CaseHierarchy.test-ids';\n\nconst CaseHierarchy = forwardRef(function CaseHierarchy(\n  {\n    testId,\n    heading,\n    icon,\n    loading,\n    error,\n    count,\n    nodes,\n    search,\n    currentCaseId,\n    ...restProps\n  }: PropsWithoutRef<CaseHierarchyProps>,\n  ref: Ref<HTMLDivElement>\n) {\n  const t = useI18n();\n  const theme = useTheme();\n  const testIds = useTestIds(testId, getCaseHierarchyTestIds);\n\n  const content = (() => {\n    if (error) {\n      return <ErrorState message={t('error')} />;\n    }\n\n    if (loading) {\n      return <Progress placement='block' />;\n    }\n\n    if (nodes.length === 0) {\n      return <EmptyState />;\n    }\n\n    return <StyledCaseHierarchyTree {...restProps} currentNodeId={currentCaseId} nodes={nodes} />;\n  })();\n\n  return (\n    <StyledCaseHierarchy data-testid={testIds.root} ref={ref}>\n      <StyledCaseHierarchyHeader>\n        <Flex container={{ direction: 'column', gap: 1 }} item={{ grow: 1 }}>\n          <Flex container={{ direction: 'row', alignItems: 'center', gap: 1 }}>\n            {theme.components['case-view'].utilities['icon-color'] ? (\n              <Icon\n                data-testid={testIds.icon}\n                name={icon ?? 'folder-nested'}\n                background={colorIconMapping(theme, icon ?? 'folder-nested')}\n                shape='circle'\n              />\n            ) : (\n              <Icon data-testid={testIds.icon} name={icon ?? 'folder-nested'} />\n            )}\n            <Text data-testid={testIds.heading} variant='h3'>\n              {heading}\n            </Text>\n            {!loading && typeof count === 'number' && (\n              <Count data-testid={testIds.count}>{count}</Count>\n            )}\n          </Flex>\n          {search && (\n            <SearchInput\n              data-testid={testIds.search}\n              value={search.value}\n              onSearchChange={search.handler}\n            />\n          )}\n        </Flex>\n      </StyledCaseHierarchyHeader>\n      <StyledOverflowContainer>{content}</StyledOverflowContainer>\n    </StyledCaseHierarchy>\n  );\n});\n\nexport default withTestIds(CaseHierarchy, getCaseHierarchyTestIds);\n"]}

package/lib/components/CaseHierarchy/CaseHierarchy.styles.d.ts

@@ -1,6 +1,10 @@
 import { StandardTree } from '@pega/cosmos-react-core';
 export declare const StyledCaseHierarchyTree: typeof StandardTree;
-export declare const StyledOverflowContainer: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardContentProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCaseHierarchyHeader: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").CardHeaderProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCaseHierarchy: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").CardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledOverflowContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@pega/cosmos-react-core").CardContentProps & import("@pega/cosmos-react-core").ForwardProps, never>> & string & Omit<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardContentProps & import("@pega/cosmos-react-core").ForwardProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledCaseHierarchyHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").CardHeaderProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | 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<HTMLDivElement> | null | undefined;
+}, never>, never>> & string;
+export declare const StyledCaseHierarchy: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").CardProps, "ref"> & import("react").RefAttributes<HTMLElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLElement | 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<HTMLElement> | null | undefined;
+}, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").CardProps>, keyof import("react").Component<any, {}, any>>;
 //# sourceMappingURL=CaseHierarchy.styles.d.ts.map

package/lib/components/CaseHierarchy/CaseHierarchy.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseHierarchy.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,YAAY,EAIb,MAAM,yBAAyB,CAAC;AAKjC,eAAO,MAAM,uBAAuB,EAAE,OAAO,YAU3C,CAAC;AAIH,eAAO,MAAM,uBAAuB,0OAoBnC,CAAC;AAIF,eAAO,MAAM,yBAAyB,wNAYpC,CAAC;AAIH,eAAO,MAAM,mBAAmB,kNAK/B,CAAC"}
+{"version":3,"file":"CaseHierarchy.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAQjC,eAAO,MAAM,uBAAuB,EAAE,OAAO,YAe5C,CAAC;AAIF,eAAO,MAAM,uBAAuB,6ZAoBnC,CAAC;AAIF,eAAO,MAAM,yBAAyB;;2BAYpC,CAAC;AAIH,eAAO,MAAM,mBAAmB;;yLAI/B,CAAC"}

package/lib/components/CaseHierarchy/CaseHierarchy.styles.js

@@ -1,19 +1,22 @@
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, StandardTree, Card, CardContent, StyledFlex } from '@pega/cosmos-react-core';
+import { defaultThemeProp, StandardTree, Card, CardContent, StyledFlex, StyledButton } from '@pega/cosmos-react-core';
 import { StyledSummaryListHeader } from '@pega/cosmos-react-core/lib/components/SummaryList/SummaryList';
 import { StyledDialog } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.styles';
-import { StyledNodeInteraction } from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';
-export const StyledCaseHierarchyTree = styled(StandardTree)(({ theme }) => {
-    return css `
+import { StyledLabelContainer, StyledNodeInteraction } from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';
+export const StyledCaseHierarchyTree = styled(StandardTree)(({ theme }) => css `
     display: table;
     width: 100%;
 
+    ${StyledLabelContainer} ${StyledButton} {
+      align-self: flex-start;
+      margin-block-start: calc(${theme.base.spacing} / 4);
+    }
+
     [aria-current='true'],
     [aria-current='page'] {
       font-weight: ${theme.base['font-weight']['semi-bold']};
     }
-  `;
-});
+  `);
 StyledCaseHierarchyTree.defaultProps = defaultThemeProp;
 export const StyledOverflowContainer = styled(CardContent)(({ theme }) => css `
     overflow: auto;
@@ -51,7 +54,6 @@ export const StyledCaseHierarchyHeader = styled(StyledSummaryListHeader)(({ them
 StyledCaseHierarchyHeader.defaultProps = defaultThemeProp;
 export const StyledCaseHierarchy = styled(Card) `
   ${StyledDialog} & {
-    /* stylelint-disable-next-line unit-allowed-list */
     max-height: calc(100dvh - 5rem);
   }
 `;

package/lib/components/CaseHierarchy/CaseHierarchy.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaseHierarchy.styles.js","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,uBAAuB,EAAE,MAAM,gEAAgE,CAAC;AACzG,OAAO,EAAE,YAAY,EAAE,MAAM,6DAA6D,CAAC;AAC3F,OAAO,EAAE,qBAAqB,EAAE,MAAM,iEAAiE,CAAC;AAExG,MAAM,CAAC,MAAM,uBAAuB,GAAwB,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7F,OAAO,GAAG,CAAA;;;;;;qBAMS,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;GAExD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,WAAW,CAAC,CACxD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;MAId,qBAAqB;;sDAE2B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;sDAG3B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;qDAG5B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;qDAG3B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;GAG7E,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrF,OAAO,GAAG,CAAA;8BACkB,KAAK,CAAC,IAAI,CAAC,OAAO;;MAE1C,UAAU;oBACI,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;;;sBAGjC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;GAGvD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC3C,YAAY;;;;CAIf,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  StandardTree,\n  Card,\n  CardContent,\n  StyledFlex\n} from '@pega/cosmos-react-core';\nimport { StyledSummaryListHeader } from '@pega/cosmos-react-core/lib/components/SummaryList/SummaryList';\nimport { StyledDialog } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.styles';\nimport { StyledNodeInteraction } from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nexport const StyledCaseHierarchyTree: typeof StandardTree = styled(StandardTree)(({ theme }) => {\n  return css`\n    display: table;\n    width: 100%;\n\n    [aria-current='true'],\n    [aria-current='page'] {\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n    }\n  `;\n});\n\nStyledCaseHierarchyTree.defaultProps = defaultThemeProp;\n\nexport const StyledOverflowContainer = styled(CardContent)(\n  ({ theme }) => css`\n    overflow: auto;\n    max-height: inherit;\n\n    ${StyledNodeInteraction} {\n      border-top-right-radius: calc(\n        var(--first-visible) * var(--border-radius, ${theme.base['border-radius']})\n      );\n      border-top-left-radius: calc(\n        var(--first-visible) * var(--border-radius, ${theme.base['border-radius']})\n      );\n      border-bottom-left-radius: calc(\n        var(--last-visible) * var(--border-radius, ${theme.base['border-radius']})\n      );\n      border-bottom-right-radius: calc(\n        var(--last-visible) * var(--border-radius, ${theme.base['border-radius']})\n      );\n    }\n  `\n);\n\nStyledOverflowContainer.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHierarchyHeader = styled(StyledSummaryListHeader)(({ theme }) => {\n  return css`\n    padding-block-end: calc(${theme.base.spacing} / 2);\n\n    ${StyledFlex} {\n      min-height: ${theme.base['hit-area']['mouse-min']};\n\n      @media (pointer: coarse) {\n        min-height: ${theme.base['hit-area']['finger-min']};\n      }\n    }\n  `;\n});\n\nStyledCaseHierarchyHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHierarchy = styled(Card)`\n  ${StyledDialog} & {\n    /* stylelint-disable-next-line unit-allowed-list */\n    max-height: calc(100dvh - 5rem);\n  }\n`;\n\nStyledCaseHierarchy.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"CaseHierarchy.styles.js","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,UAAU,EACV,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,uBAAuB,EAAE,MAAM,gEAAgE,CAAC;AACzG,OAAO,EAAE,YAAY,EAAE,MAAM,6DAA6D,CAAC;AAC3F,OAAO,EACL,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,iEAAiE,CAAC;AAEzE,MAAM,CAAC,MAAM,uBAAuB,GAAwB,MAAM,CAAC,YAAY,CAAC,CAC9E,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;MAId,oBAAoB,IAAI,YAAY;;iCAET,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;qBAK9B,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;GAExD,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,WAAW,CAAC,CACxD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;MAId,qBAAqB;;sDAE2B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;sDAG3B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;qDAG5B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;qDAG3B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;GAG7E,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrF,OAAO,GAAG,CAAA;8BACkB,KAAK,CAAC,IAAI,CAAC,OAAO;;MAE1C,UAAU;oBACI,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;;;sBAGjC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;GAGvD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC3C,YAAY;;;CAGf,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  StandardTree,\n  Card,\n  CardContent,\n  StyledFlex,\n  StyledButton\n} from '@pega/cosmos-react-core';\nimport { StyledSummaryListHeader } from '@pega/cosmos-react-core/lib/components/SummaryList/SummaryList';\nimport { StyledDialog } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.styles';\nimport {\n  StyledLabelContainer,\n  StyledNodeInteraction\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nexport const StyledCaseHierarchyTree: typeof StandardTree = styled(StandardTree)(\n  ({ theme }) => css`\n    display: table;\n    width: 100%;\n\n    ${StyledLabelContainer} ${StyledButton} {\n      align-self: flex-start;\n      margin-block-start: calc(${theme.base.spacing} / 4);\n    }\n\n    [aria-current='true'],\n    [aria-current='page'] {\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n    }\n  `\n);\n\nStyledCaseHierarchyTree.defaultProps = defaultThemeProp;\n\nexport const StyledOverflowContainer = styled(CardContent)(\n  ({ theme }) => css`\n    overflow: auto;\n    max-height: inherit;\n\n    ${StyledNodeInteraction} {\n      border-top-right-radius: calc(\n        var(--first-visible) * var(--border-radius, ${theme.base['border-radius']})\n      );\n      border-top-left-radius: calc(\n        var(--first-visible) * var(--border-radius, ${theme.base['border-radius']})\n      );\n      border-bottom-left-radius: calc(\n        var(--last-visible) * var(--border-radius, ${theme.base['border-radius']})\n      );\n      border-bottom-right-radius: calc(\n        var(--last-visible) * var(--border-radius, ${theme.base['border-radius']})\n      );\n    }\n  `\n);\n\nStyledOverflowContainer.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHierarchyHeader = styled(StyledSummaryListHeader)(({ theme }) => {\n  return css`\n    padding-block-end: calc(${theme.base.spacing} / 2);\n\n    ${StyledFlex} {\n      min-height: ${theme.base['hit-area']['mouse-min']};\n\n      @media (pointer: coarse) {\n        min-height: ${theme.base['hit-area']['finger-min']};\n      }\n    }\n  `;\n});\n\nStyledCaseHierarchyHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHierarchy = styled(Card)`\n  ${StyledDialog} & {\n    max-height: calc(100dvh - 5rem);\n  }\n`;\n\nStyledCaseHierarchy.defaultProps = defaultThemeProp;\n"]}

package/lib/components/CaseHierarchy/CaseHierarchy.test-ids.d.ts

@@ -1,2 +1,2 @@
-export declare const getCaseHierarchyTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["heading", "icon", "count"]>;
+export declare const getCaseHierarchyTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["heading", "icon", "count", "search"]>;
 //# sourceMappingURL=CaseHierarchy.test-ids.d.ts.map

package/lib/components/CaseHierarchy/CaseHierarchy.test-ids.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseHierarchy.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,iKAIzB,CAAC"}
+{"version":3,"file":"CaseHierarchy.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,2KAKzB,CAAC"}

package/lib/components/CaseHierarchy/CaseHierarchy.test-ids.js

@@ -2,6 +2,7 @@ import { createTestIds } from '@pega/cosmos-react-core';
 export const getCaseHierarchyTestIds = createTestIds('case-hierarchy', [
     'heading',
     'icon',
-    'count'
+    'count',
+    'search'
 ]);
 //# sourceMappingURL=CaseHierarchy.test-ids.js.map

package/lib/components/CaseHierarchy/CaseHierarchy.test-ids.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaseHierarchy.test-ids.js","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAC,gBAAgB,EAAE;IACrE,SAAS;IACT,MAAM;IACN,OAAO;CACC,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getCaseHierarchyTestIds = createTestIds('case-hierarchy', [\n  'heading',\n  'icon',\n  'count'\n] as const);\n"]}
+{"version":3,"file":"CaseHierarchy.test-ids.js","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAC,gBAAgB,EAAE;IACrE,SAAS;IACT,MAAM;IACN,OAAO;IACP,QAAQ;CACA,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getCaseHierarchyTestIds = createTestIds('case-hierarchy', [\n  'heading',\n  'icon',\n  'count',\n  'search'\n] as const);\n"]}

package/lib/components/CaseHierarchy/CaseHierarchy.types.d.ts

@@ -4,7 +4,8 @@ export interface CaseHierarchyNode extends OmitStrict<StandardTreeNode, 'nodes'>
     nodes?: CaseHierarchyNode[];
     caseTypeId?: string;
 }
-export interface CaseHierarchyProps extends OmitStrict<StandardTreeProps, 'currentNodeId' | 'ref'>, TestIdProp {
+export interface CaseHierarchyProps extends OmitStrict<StandardTreeProps, 'currentNodeId' | 'ref' | 'nodes'>, TestIdProp {
+    nodes: CaseHierarchyNode[];
     /** Heading shown on the Card wrapping the component. */
     heading: string;
     /** The icon rendered as part of the header. If not set will default to 'folder-nested'. */
@@ -17,6 +18,11 @@ export interface CaseHierarchyProps extends OmitStrict<StandardTreeProps, 'curre
     error?: boolean;
     /** Will render the provided number in a count badge next to the heading. */
     count?: number;
+    /** If set, will render a search input above the tree to search nodes. */
+    search?: {
+        value: string;
+        handler: (value: string) => void;
+    };
     /** A ref to the wrapping element. */
     ref?: Ref<HTMLDivElement>;
 }

package/lib/components/CaseHierarchy/CaseHierarchy.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseHierarchy.types.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EACV,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,UAAU,EACV,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,iBAAkB,SAAQ,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC;IAC9E,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBACf,SAAQ,UAAU,CAAC,iBAAiB,EAAE,eAAe,GAAG,KAAK,CAAC,EAC5D,UAAU;IACZ,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAC;IAChB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB,mEAAmE;IACnE,aAAa,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
+{"version":3,"file":"CaseHierarchy.types.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EACV,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,UAAU,EACV,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,iBAAkB,SAAQ,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC;IAC9E,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBACf,SAAQ,UAAU,CAAC,iBAAiB,EAAE,eAAe,GAAG,KAAK,GAAG,OAAO,CAAC,EACtE,UAAU;IACZ,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAC;IAChB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB,mEAAmE;IACnE,aAAa,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;KAAE,CAAC;IAC7D,qCAAqC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}

package/lib/components/CaseHierarchy/CaseHierarchy.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaseHierarchy.types.js","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type {\n  IconProps,\n  OmitStrict,\n  StandardTreeNode,\n  StandardTreeProps,\n  TestIdProp,\n  TreeNode\n} from '@pega/cosmos-react-core';\n\nexport interface CaseHierarchyNode extends OmitStrict<StandardTreeNode, 'nodes'> {\n  nodes?: CaseHierarchyNode[];\n  caseTypeId?: string;\n}\n\nexport interface CaseHierarchyProps\n  extends OmitStrict<StandardTreeProps, 'currentNodeId' | 'ref'>,\n    TestIdProp {\n  /** Heading shown on the Card wrapping the component. */\n  heading: string;\n  /** The icon rendered as part of the header. If not set will default to 'folder-nested'. */\n  icon?: IconProps['name'];\n  /** The currently selected case, will be highlighted by default. */\n  currentCaseId?: TreeNode['id'];\n  /** If set, a progress indicator will render in place of the component. */\n  loading?: boolean;\n  /** If set, an error state will render in place of the component. */\n  error?: boolean;\n  /** Will render the provided number in a count badge next to the heading. */\n  count?: number;\n  /** A ref to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}
+{"version":3,"file":"CaseHierarchy.types.js","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type {\n  IconProps,\n  OmitStrict,\n  StandardTreeNode,\n  StandardTreeProps,\n  TestIdProp,\n  TreeNode\n} from '@pega/cosmos-react-core';\n\nexport interface CaseHierarchyNode extends OmitStrict<StandardTreeNode, 'nodes'> {\n  nodes?: CaseHierarchyNode[];\n  caseTypeId?: string;\n}\n\nexport interface CaseHierarchyProps\n  extends OmitStrict<StandardTreeProps, 'currentNodeId' | 'ref' | 'nodes'>,\n    TestIdProp {\n  nodes: CaseHierarchyNode[];\n  /** Heading shown on the Card wrapping the component. */\n  heading: string;\n  /** The icon rendered as part of the header. If not set will default to 'folder-nested'. */\n  icon?: IconProps['name'];\n  /** The currently selected case, will be highlighted by default. */\n  currentCaseId?: TreeNode['id'];\n  /** If set, a progress indicator will render in place of the component. */\n  loading?: boolean;\n  /** If set, an error state will render in place of the component. */\n  error?: boolean;\n  /** Will render the provided number in a count badge next to the heading. */\n  count?: number;\n  /** If set, will render a search input above the tree to search nodes. */\n  search?: { value: string; handler: (value: string) => void };\n  /** A ref to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/components/CasePreview/CasePreview.d.ts

@@ -2,7 +2,7 @@ import type { Ref } from 'react';
 import type { ForwardRefForwardPropsComponent, BaseProps, TestIdProp, NoChildrenProp, ErrorStateProps } from '@pega/cosmos-react-core';
 import type { CaseViewProps } from '../CaseView';
 import type { CaseViewContextValue } from '../CaseView/CaseView.types';
-export interface CasePreviewProps extends Pick<CaseViewProps, 'caseId' | 'caseType' | 'heading' | 'subheading' | 'parentCases' | 'icon' | 'followed' | 'onFollowedChange' | 'actions' | 'promotedActions' | 'onEdit' | 'summaryFields' | 'tabs' | 'tabContent' | 'stages' | 'tasks' | 'banners' | 'utilities' | 'utilitiesSummaryItems'>, NoChildrenProp, TestIdProp, BaseProps {
+export interface CasePreviewProps extends Pick<CaseViewProps, 'caseId' | 'caseType' | 'heading' | 'subheading' | 'parentCases' | 'icon' | 'color' | 'followed' | 'onFollowedChange' | 'actions' | 'promotedActions' | 'onEdit' | 'summaryFields' | 'tabs' | 'tabContent' | 'stages' | 'tasks' | 'banners' | 'utilities' | 'utilitiesSummaryItems'>, NoChildrenProp, TestIdProp, BaseProps {
     /** A set of props including an href that will be forwarded to the case preview's heading and subheading. */
     caseLink?: CaseViewContextValue['caseLink'];
     /** If true, the Case Preview will be visible. */

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

@@ -1 +1 @@
-{"version":3,"file":"CasePreview.d.ts","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AA0BlD,OAAO,KAAK,EACV,+BAA+B,EAC/B,SAAS,EACT,UAAU,EACV,cAAc,EACd,eAAe,EAChB,MAAM,yBAAyB,CAAC;AAUjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAQvE,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,aAAa,EACX,QAAQ,GACR,UAAU,GACV,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,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAC1C,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;;;;AAsSD,wBAA+D"}
+{"version":3,"file":"CasePreview.d.ts","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAelD,OAAO,KAAK,EACV,+BAA+B,EAC/B,SAAS,EACT,UAAU,EACV,cAAc,EACd,eAAe,EAEhB,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAQvE,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,aAAa,EACX,QAAQ,GACR,UAAU,GACV,SAAS,GACT,YAAY,GACZ,aAAa,GACb,MAAM,GACN,OAAO,GACP,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,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAC1C,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;;;;AA6OD,wBAA+D"}

package/lib/components/CasePreview/CasePreview.js

@@ -1,82 +1,32 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useCallback, useEffect, useContext } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Drawer, Icon, registerIcon, Button, Flex, defaultThemeProp, useBreakpoint, useElement, useDirection, useI18n, AppShellContext, useTestIds, withTestIds, Progress, ErrorState, getFocusables, useConsolidatedRef, StyledButton, calculateForegroundColor, useFocusTrap, readableHue } from '@pega/cosmos-react-core';
-import { resizeDrawerDefaultWidth } from '@pega/cosmos-react-core/lib/styles/constants';
+import { registerIcon, defaultThemeProp, useBreakpoint, useI18n, useTestIds, withTestIds, ErrorState, useConsolidatedRef, StyledPreviewDrawer, usePreviewManager } 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 CaseView, { StyledCaseView, StyledCaseViewContent, StyledSummaryRegion } from '../CaseView';
 import { StyledGenAICoachContainer } from '../GenAICoach/GenAICoach.styles';
-import { StyledCaseHeader } from '../CaseView/CaseView.styles';
+import { StyledSummaryPrimaryList, StyledSummarySecondaryList } from '../CaseView/CaseView.styles';
 import { getCasePreviewTestIds } from './CasePreview.test-ids';
 registerIcon(timesIcon);
-const StyledPreviewHeader = styled.div(({ theme }) => {
+const StyledCasePreviewDrawer = styled(StyledPreviewDrawer)(({ theme }) => {
     return css `
-    z-index: ${theme.base['z-index'].drawer};
-    background-color: ${theme.base.palette['primary-background']};
-  `;
-});
-StyledPreviewHeader.defaultProps = defaultThemeProp;
-const StyledPreviewActions = styled.div(({ theme: { base: { spacing, 'z-index': { backdrop, popover } }, components: { 'case-view': { header: { background, 'foreground-color': color } } } }, fixedHeaderHeight, progressActive }) => {
-    const foregroundColor = calculateForegroundColor(background, color);
-    return css `
-      color: ${foregroundColor};
-      padding: ${spacing} calc(2 * ${spacing}) calc(0.25 * ${spacing});
-
-      ${fixedHeaderHeight
-        ? css `
-            background: ${background};
-          `
-        : css `
-            position: absolute;
-            z-index: ${popover + 1};
-          `}
-
-      ${StyledButton} {
-        color: ${foregroundColor};
-
-        ${progressActive &&
-        css `
-          z-index: ${backdrop + 1};
-          color: ${foregroundColor};
-        `}
-      }
+    ${StyledSummaryPrimaryList} {
+      padding: unset;
+    }
 
-      ${fixedHeaderHeight &&
-        css `
-        min-height: 6.625rem;
-      `}
-    `;
-});
-StyledPreviewActions.defaultProps = defaultThemeProp;
-const StyledPreviewDrawer = styled(StyledCaseDrawer)(({ theme }) => {
-    return css `
-    background-color: ${theme.base.palette['app-background']};
-    height: calc(100vh - var(--appshell-offset, 0rem));
-    top: var(--appshell-offset, 0);
-    z-index: calc(${theme.base['z-index'].drawer} + 500);
-    transition-property: transform, box-shadow, opacity, border-inline-start;
-    transition-duration: max(${theme.base.animation.speed}, 0.0001s);
-    transition-timing-function: ${theme.base.animation.timing.ease};
+    ${StyledSummarySecondaryList} {
+      padding-block-start: unset;
+      padding-inline: unset;
+    }
 
     ${StyledCaseView} {
       height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['mouse-min']});
+      z-index: 1;
 
       @media (pointer: coarse) {
         height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['finger-min']});
       }
 
-      ${StyledCaseHeader} {
-        padding-block-start: calc(
-          (2.25 * ${theme.base.spacing}) + ${theme.base['hit-area']['mouse-min']}
-        );
-
-        @media (pointer: coarse) {
-          padding-block-start: calc(
-            (2.25 * ${theme.base.spacing}) + ${theme.base['hit-area']['finger-min']}
-          );
-        }
-      }
-
       ${StyledSummaryRegion} {
         position: relative;
         top: 0;
@@ -95,69 +45,87 @@ const StyledPreviewDrawer = styled(StyledCaseDrawer)(({ theme }) => {
       width: unset;
       min-width: unset;
     }
-
-    @media (min-width: ${theme.base.breakpoints.xl}) {
-      box-shadow: none;
-      border-inline-start: 0.0625rem solid
-        ${readableHue(theme.base.palette['border-line'], theme.base.palette['app-background'], {
-        mode: 'both',
-        level: 'AANonText'
-    })};
-    }
   `;
 });
-StyledPreviewDrawer.defaultProps = defaultThemeProp;
+StyledCasePreviewDrawer.defaultProps = defaultThemeProp;
+const CasePreviewContent = ({ error, onErrorRetry, caseId, caseType, heading, subheading, caseLink, parentCases, icon, color, followed, onFollowedChange, summaryFields, tabs, stages, tasks, tabContent, utilities, utilitiesSummaryItems, actions, banners, onEdit }) => {
+    const t = useI18n();
+    if (error) {
+        return _jsx(ErrorState, { message: t('preview_error'), onRetry: onErrorRetry });
+    }
+    return (_jsx(CaseView, { caseId: caseId, caseType: caseType, parentCases: parentCases, heading: heading, subheading: subheading, caseLink: caseLink, icon: icon, color: color, followed: followed, onFollowedChange: onFollowedChange, summaryFields: summaryFields, tabs: tabs, stages: stages, tasks: tasks, tabContent: tabContent, utilities: utilities, utilitiesSummaryItems: utilitiesSummaryItems, actions: actions, banners: banners, onEdit: onEdit, isPreview: true }));
+};
 const CasePreview = forwardRef(function CasePreview(props, ref) {
-    const { testId, open: openProp, progress, error, onErrorRetry, caseId, caseType, heading, subheading, caseLink, parentCases, icon, followed, onFollowedChange, summaryFields, tabs, stages, tasks, tabContent, utilities, utilitiesSummaryItems, actions, banners, onEdit, onBeforeOpen, onAfterOpen, onBeforeClose, ...restProps } = props;
+    const { testId, open: openProp, progress, error, onErrorRetry, caseId, caseType, heading, subheading, caseLink, parentCases, icon, color, followed, onFollowedChange, summaryFields, tabs, stages, tasks, tabContent, utilities, utilitiesSummaryItems, actions, banners, onEdit, onBeforeOpen, onAfterOpen, onBeforeClose, onAfterClose, ...restProps } = props;
     const testIds = useTestIds(testId, getCasePreviewTestIds);
-    const t = useI18n();
+    const { createPreview } = usePreviewManager();
+    const previewMethodsRef = useRef(undefined);
     const previewRef = useConsolidatedRef(ref);
-    const { previewTriggerRef, setPreviewActive } = useContext(AppShellContext);
-    const [closeButtonEl, setCloseButtonEl] = useElement();
     const isSmallOrAbove = useBreakpoint('sm');
     const [open, setOpen] = useState(openProp);
-    const [progressActive, setProgressActive] = useState(false);
-    const [progressVisible, setProgressVisible] = useState(false);
-    const direction = useDirection();
-    const closePreview = useCallback(() => {
-        setOpen(false);
-        previewTriggerRef.current?.focus();
-    }, []);
-    const setFocus = () => {
-        if (progressVisible)
-            return;
-        const focusables = getFocusables(previewRef).filter(el => el !== closeButtonEl);
-        const focusable = focusables[0] ?? closeButtonEl;
-        focusable?.focus();
-    };
     useEffect(() => {
         setOpen(openProp);
     }, [openProp]);
     useEffect(() => {
-        if (!progressVisible) {
-            setFocus();
+        if (open && isSmallOrAbove) {
+            const contentProps = {
+                error,
+                onErrorRetry,
+                caseId,
+                caseType,
+                heading,
+                subheading,
+                caseLink,
+                parentCases,
+                icon,
+                color,
+                followed,
+                onFollowedChange,
+                summaryFields,
+                tabs,
+                stages,
+                tasks,
+                tabContent,
+                utilities,
+                utilitiesSummaryItems,
+                actions,
+                banners,
+                onEdit
+            };
+            const metadata = {
+                previewProps: {
+                    testId: testIds.root,
+                    previewLabel: typeof heading === 'string' ? heading : heading?.text,
+                    onBeforeOpen,
+                    onAfterOpen,
+                    onBeforeClose,
+                    onAfterClose: () => {
+                        onAfterClose?.();
+                        setOpen(false);
+                        if (previewMethodsRef.current) {
+                            previewMethodsRef.current.unmountPreview();
+                            previewMethodsRef.current = undefined;
+                        }
+                    },
+                    as: StyledCasePreviewDrawer,
+                    ref: previewRef,
+                    progress,
+                    ...restProps
+                }
+            };
+            if (previewMethodsRef.current) {
+                previewMethodsRef.current.updatePreview(contentProps, metadata);
+            }
+            else {
+                previewMethodsRef.current = createPreview(CasePreviewContent, contentProps, metadata);
+            }
         }
-    }, [progressVisible]);
-    useEffect(() => {
-        return () => {
-            setPreviewActive(false);
-        };
-    }, []);
-    useFocusTrap(previewRef, true, [], false);
-    const content = error ? (_jsx(ErrorState, { message: t('preview_error'), onRetry: onErrorRetry })) : (_jsx(CaseView, { caseId: caseId, caseType: caseType, parentCases: parentCases, heading: heading, subheading: subheading, caseLink: caseLink, icon: icon, followed: followed, onFollowedChange: onFollowedChange, summaryFields: summaryFields, tabs: tabs, stages: stages, tasks: tasks, tabContent: tabContent, utilities: utilities, utilitiesSummaryItems: utilitiesSummaryItems, actions: actions, banners: banners, onEdit: onEdit, isPreview: true }));
-    return (_jsxs(Drawer, { "data-testid": testIds.root, ...restProps, onBeforeOpen: () => {
-            setPreviewActive(true);
-            onBeforeOpen?.();
-        }, onAfterOpen: () => {
-            setFocus();
-            onAfterOpen?.();
-        }, onBeforeClose: () => {
-            setPreviewActive(false);
-            onBeforeClose?.();
-        }, as: StyledPreviewDrawer, role: 'complementary', forwardedAs: Flex, container: { direction: 'column' }, ref: previewRef, open: open && isSmallOrAbove, position: 'fixed', placement: direction.end, "aria-label": t('preview_of_noun', [heading]), size: resizeDrawerDefaultWidth, resizeable: true, shadow: true, nullWhenClosed: true, children: [_jsx(StyledPreviewActions, { fixedHeaderHeight: !!error || !!progress, progressActive: progressActive, children: _jsx(Button, { "data-testid": testIds.close, variant: 'simple', icon: true, onClick: closePreview, ref: setCloseButtonEl, label: t('close_preview'), children: _jsx(Icon, { name: 'times' }) }) }), _jsx(Progress, { placement: 'local', visible: !!progress, focusOnVisible: true, delay: true, onTransitionStartIn: () => {
-                    setProgressActive(true);
-                    setProgressVisible(true);
-                }, onTransitionStartOut: () => setProgressActive(false), onTransitionEndOut: () => setProgressVisible(false) }), !progress && content] }));
+        else if (!open) {
+            // This branch is needed for controlled component via open prop
+            previewMethodsRef.current = undefined;
+        }
+    }, [open, progress, error, tabs, banners, utilities, utilitiesSummaryItems, isSmallOrAbove]);
+    return null;
 });
 export default withTestIds(CasePreview, getCasePreviewTestIds);
 //# sourceMappingURL=CasePreview.js.map

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

@@ -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 { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Drawer,\n  Icon,\n  registerIcon,\n  Button,\n  Flex,\n  defaultThemeProp,\n  useBreakpoint,\n  useElement,\n  useDirection,\n  useI18n,\n  AppShellContext,\n  useTestIds,\n  withTestIds,\n  Progress,\n  ErrorState,\n  getFocusables,\n  useConsolidatedRef,\n  StyledButton,\n  calculateForegroundColor,\n  useFocusTrap,\n  readableHue\n} from '@pega/cosmos-react-core';\nimport type {\n  ForwardRefForwardPropsComponent,\n  BaseProps,\n  TestIdProp,\n  NoChildrenProp,\n  ErrorStateProps\n} from '@pega/cosmos-react-core';\nimport { resizeDrawerDefaultWidth } from '@pega/cosmos-react-core/lib/styles/constants';\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';\nimport { StyledGenAICoachContainer } from '../GenAICoach/GenAICoach.styles';\nimport { StyledCaseHeader } from '../CaseView/CaseView.styles';\n\nimport { getCasePreviewTestIds } from './CasePreview.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface CasePreviewProps\n  extends Pick<\n      CaseViewProps,\n      | 'caseId'\n      | 'caseType'\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  /** If true, the Case Preview will render in a progress state. */\n  progress?: boolean;\n  /** If true, the Case Preview will render in an error state. */\n  error?: boolean;\n  /** Callback fired when \"Try again\" button is clicked in an error state. */\n  onErrorRetry?: ErrorStateProps['onRetry'];\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  fixedHeaderHeight?: boolean;\n  progressActive?: boolean;\n}>(\n  ({\n    theme: {\n      base: {\n        spacing,\n        'z-index': { backdrop, popover }\n      },\n      components: {\n        'case-view': {\n          header: { background, 'foreground-color': color }\n        }\n      }\n    },\n    fixedHeaderHeight,\n    progressActive\n  }) => {\n    const foregroundColor = calculateForegroundColor(background, color);\n\n    return css`\n      color: ${foregroundColor};\n      padding: ${spacing} calc(2 * ${spacing}) calc(0.25 * ${spacing});\n\n      ${fixedHeaderHeight\n        ? css`\n            background: ${background};\n          `\n        : css`\n            position: absolute;\n            z-index: ${popover + 1};\n          `}\n\n      ${StyledButton} {\n        color: ${foregroundColor};\n\n        ${progressActive &&\n        css`\n          z-index: ${backdrop + 1};\n          color: ${foregroundColor};\n        `}\n      }\n\n      ${fixedHeaderHeight &&\n      css`\n        min-height: 6.625rem;\n      `}\n    `;\n  }\n);\n\nStyledPreviewActions.defaultProps = defaultThemeProp;\n\nconst StyledPreviewDrawer = styled(StyledCaseDrawer)(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['app-background']};\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    transition-property: transform, box-shadow, opacity, border-inline-start;\n    transition-duration: max(${theme.base.animation.speed}, 0.0001s);\n    transition-timing-function: ${theme.base.animation.timing.ease};\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      ${StyledCaseHeader} {\n        padding-block-start: calc(\n          (2.25 * ${theme.base.spacing}) + ${theme.base['hit-area']['mouse-min']}\n        );\n\n        @media (pointer: coarse) {\n          padding-block-start: calc(\n            (2.25 * ${theme.base.spacing}) + ${theme.base['hit-area']['finger-min']}\n          );\n        }\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    ${StyledGenAICoachContainer} {\n      width: unset;\n      min-width: unset;\n    }\n\n    @media (min-width: ${theme.base.breakpoints.xl}) {\n      box-shadow: none;\n      border-inline-start: 0.0625rem solid\n        ${readableHue(theme.base.palette['border-line'], theme.base.palette['app-background'], {\n          mode: 'both',\n          level: 'AANonText'\n        })};\n    }\n  `;\n});\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n\nconst CasePreview: ForwardRefForwardPropsComponent<CasePreviewProps> = forwardRef(\n  function CasePreview(props: PropsWithoutRef<CasePreviewProps>, ref: CasePreviewProps['ref']) {\n    const {\n      testId,\n      open: openProp,\n      progress,\n      error,\n      onErrorRetry,\n      caseId,\n      caseType,\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      onBeforeOpen,\n      onAfterOpen,\n      onBeforeClose,\n      ...restProps\n    } = props;\n    const testIds = useTestIds(testId, getCasePreviewTestIds);\n\n    const t = useI18n();\n    const previewRef = useConsolidatedRef(ref);\n\n    const { previewTriggerRef, setPreviewActive } = useContext(AppShellContext);\n    const [closeButtonEl, setCloseButtonEl] = useElement<HTMLButtonElement>();\n    const isSmallOrAbove = useBreakpoint('sm');\n    const [open, setOpen] = useState(openProp);\n    const [progressActive, setProgressActive] = useState(false);\n    const [progressVisible, setProgressVisible] = useState(false);\n    const direction = useDirection();\n\n    const closePreview = useCallback(() => {\n      setOpen(false);\n      previewTriggerRef.current?.focus();\n    }, []);\n\n    const setFocus = () => {\n      if (progressVisible) return;\n\n      const focusables = getFocusables(previewRef).filter(el => el !== closeButtonEl);\n      const focusable = focusables[0] ?? closeButtonEl;\n      focusable?.focus();\n    };\n\n    useEffect(() => {\n      setOpen(openProp);\n    }, [openProp]);\n\n    useEffect(() => {\n      if (!progressVisible) {\n        setFocus();\n      }\n    }, [progressVisible]);\n\n    useEffect(() => {\n      return () => {\n        setPreviewActive(false);\n      };\n    }, []);\n\n    useFocusTrap(previewRef, true, [], false);\n\n    const content = error ? (\n      <ErrorState message={t('preview_error')} onRetry={onErrorRetry} />\n    ) : (\n      <CaseView\n        caseId={caseId}\n        caseType={caseType}\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    );\n\n    return (\n      <Drawer\n        data-testid={testIds.root}\n        {...restProps}\n        onBeforeOpen={() => {\n          setPreviewActive(true);\n          onBeforeOpen?.();\n        }}\n        onAfterOpen={() => {\n          setFocus();\n          onAfterOpen?.();\n        }}\n        onBeforeClose={() => {\n          setPreviewActive(false);\n          onBeforeClose?.();\n        }}\n        as={StyledPreviewDrawer}\n        role='complementary'\n        forwardedAs={Flex}\n        container={{ direction: 'column' }}\n        ref={previewRef}\n        open={open && isSmallOrAbove}\n        position='fixed'\n        placement={direction.end}\n        aria-label={t('preview_of_noun', [heading])}\n        size={resizeDrawerDefaultWidth}\n        resizeable\n        shadow\n        nullWhenClosed\n      >\n        <StyledPreviewActions\n          fixedHeaderHeight={!!error || !!progress}\n          progressActive={progressActive}\n        >\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        <Progress\n          placement='local'\n          visible={!!progress}\n          focusOnVisible\n          delay\n          onTransitionStartIn={() => {\n            setProgressActive(true);\n            setProgressVisible(true);\n          }}\n          onTransitionStartOut={() => setProgressActive(false)}\n          onTransitionEndOut={() => setProgressVisible(false)}\n        />\n\n        {!progress && content}\n      </Drawer>\n    );\n  }\n);\n\nexport default withTestIds(CasePreview, getCasePreviewTestIds);\n"]}
+{"version":3,"file":"CasePreview.js","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,aAAa,EACb,OAAO,EACP,UAAU,EACV,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,mBAAmB,EACnB,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AASjC,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,OAAO,QAAQ,EAAE,EAAE,cAAc,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGnG,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,wBAAwB,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AAEnG,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,YAAY,CAAC,SAAS,CAAC,CAAC;AAqDxB,MAAM,uBAAuB,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxE,OAAO,GAAG,CAAA;MACN,wBAAwB;;;;MAIxB,0BAA0B;;;;;MAK1B,cAAc;6BACS,KAAK,CAAC,IAAI,CAAC,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;;;;+BAIzD,KAAK,CAAC,IAAI,CAAC,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;QAGnF,mBAAmB;;;;;;MAMrB,qBAAqB;;;;mCAIQ,KAAK,CAAC,IAAI,CAAC,OAAO;;;;MAI/C,yBAAyB;;;;GAI5B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AA4BxD,MAAM,kBAAkB,GAAG,CAAC,EAC1B,KAAK,EACL,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,OAAO,EACP,UAAU,EACV,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,aAAa,EACb,IAAI,EACJ,MAAM,EACN,KAAK,EACL,UAAU,EACV,SAAS,EACT,qBAAqB,EACrB,OAAO,EACP,OAAO,EACP,MAAM,EACkB,EAAE,EAAE;IAC5B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,IAAI,KAAK,EAAE,CAAC;QACV,OAAO,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,eAAe,CAAC,EAAE,OAAO,EAAE,YAAY,GAAI,CAAC;IAC5E,CAAC;IAED,OAAO,CACL,KAAC,QAAQ,IACP,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,EAC5B,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,qBAAqB,EAAE,qBAAqB,EAC5C,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,SACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,WAAW,GAAsD,UAAU,CAC/E,SAAS,WAAW,CAAC,KAAwC,EAAE,GAA4B;IACzF,MAAM,EACJ,MAAM,EACN,IAAI,EAAE,QAAQ,EACd,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,OAAO,EACP,UAAU,EACV,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,aAAa,EACb,IAAI,EACJ,MAAM,EACN,KAAK,EACL,UAAU,EACV,SAAS,EACT,qBAAqB,EACrB,OAAO,EACP,OAAO,EACP,MAAM,EACN,YAAY,EACZ,WAAW,EACX,aAAa,EACb,YAAY,EACZ,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAE1D,MAAM,EAAE,aAAa,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAC9C,MAAM,iBAAiB,GAAG,MAAM,CAA6B,SAAS,CAAC,CAAC;IACxE,MAAM,UAAU,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC3C,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAE3C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAE3C,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,QAAQ,CAAC,CAAC;IACpB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,IAAI,cAAc,EAAE,CAAC;YAC3B,MAAM,YAAY,GAAG;gBACnB,KAAK;gBACL,YAAY;gBACZ,MAAM;gBACN,QAAQ;gBACR,OAAO;gBACP,UAAU;gBACV,QAAQ;gBACR,WAAW;gBACX,IAAI;gBACJ,KAAK;gBACL,QAAQ;gBACR,gBAAgB;gBAChB,aAAa;gBACb,IAAI;gBACJ,MAAM;gBACN,KAAK;gBACL,UAAU;gBACV,SAAS;gBACT,qBAAqB;gBACrB,OAAO;gBACP,OAAO;gBACP,MAAM;aACP,CAAC;YAEF,MAAM,QAAQ,GAAG;gBACf,YAAY,EAAE;oBACZ,MAAM,EAAE,OAAO,CAAC,IAAI;oBACpB,YAAY,EAAE,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EAAE,IAAI;oBACnE,YAAY;oBACZ,WAAW;oBACX,aAAa;oBACb,YAAY,EAAE,GAAG,EAAE;wBACjB,YAAY,EAAE,EAAE,CAAC;wBACjB,OAAO,CAAC,KAAK,CAAC,CAAC;wBACf,IAAI,iBAAiB,CAAC,OAAO,EAAE,CAAC;4BAC9B,iBAAiB,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC;4BAC3C,iBAAiB,CAAC,OAAO,GAAG,SAAS,CAAC;wBACxC,CAAC;oBACH,CAAC;oBACD,EAAE,EAAE,uBAAuB;oBAC3B,GAAG,EAAE,UAAU;oBACf,QAAQ;oBACR,GAAG,SAAS;iBACb;aACF,CAAC;YACF,IAAI,iBAAiB,CAAC,OAAO,EAAE,CAAC;gBAC9B,iBAAiB,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;YAClE,CAAC;iBAAM,CAAC;gBACN,iBAAiB,CAAC,OAAO,GAAG,aAAa,CAAC,kBAAkB,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC;YACxF,CAAC;QACH,CAAC;aAAM,IAAI,CAAC,IAAI,EAAE,CAAC;YACjB,+DAA+D;YAC/D,iBAAiB,CAAC,OAAO,GAAG,SAAS,CAAC;QACxC,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,cAAc,CAAC,CAAC,CAAC;IAE7F,OAAO,IAAI,CAAC;AACd,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC,WAAW,EAAE,qBAAqB,CAAC,CAAC","sourcesContent":["import { forwardRef, useEffect, useState, useRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  registerIcon,\n  defaultThemeProp,\n  useBreakpoint,\n  useI18n,\n  useTestIds,\n  withTestIds,\n  ErrorState,\n  useConsolidatedRef,\n  StyledPreviewDrawer,\n  usePreviewManager\n} from '@pega/cosmos-react-core';\nimport type {\n  ForwardRefForwardPropsComponent,\n  BaseProps,\n  TestIdProp,\n  NoChildrenProp,\n  ErrorStateProps,\n  PreviewMethods\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport CaseView, { StyledCaseView, StyledCaseViewContent, StyledSummaryRegion } from '../CaseView';\nimport type { CaseViewProps } from '../CaseView';\nimport type { CaseViewContextValue } from '../CaseView/CaseView.types';\nimport { StyledGenAICoachContainer } from '../GenAICoach/GenAICoach.styles';\nimport { StyledSummaryPrimaryList, StyledSummarySecondaryList } from '../CaseView/CaseView.styles';\n\nimport { getCasePreviewTestIds } from './CasePreview.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface CasePreviewProps\n  extends Pick<\n      CaseViewProps,\n      | 'caseId'\n      | 'caseType'\n      | 'heading'\n      | 'subheading'\n      | 'parentCases'\n      | 'icon'\n      | 'color'\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  /** If true, the Case Preview will render in a progress state. */\n  progress?: boolean;\n  /** If true, the Case Preview will render in an error state. */\n  error?: boolean;\n  /** Callback fired when \"Try again\" button is clicked in an error state. */\n  onErrorRetry?: ErrorStateProps['onRetry'];\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 StyledCasePreviewDrawer = styled(StyledPreviewDrawer)(({ theme }) => {\n  return css`\n    ${StyledSummaryPrimaryList} {\n      padding: unset;\n    }\n\n    ${StyledSummarySecondaryList} {\n      padding-block-start: unset;\n      padding-inline: unset;\n    }\n\n    ${StyledCaseView} {\n      height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['mouse-min']});\n      z-index: 1;\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    ${StyledGenAICoachContainer} {\n      width: unset;\n      min-width: unset;\n    }\n  `;\n});\n\nStyledCasePreviewDrawer.defaultProps = defaultThemeProp;\n\ntype CasePreviewContentProps = Pick<\n  CasePreviewProps,\n  | 'error'\n  | 'onErrorRetry'\n  | 'caseId'\n  | 'caseType'\n  | 'heading'\n  | 'subheading'\n  | 'caseLink'\n  | 'parentCases'\n  | 'icon'\n  | 'color'\n  | 'followed'\n  | 'onFollowedChange'\n  | 'summaryFields'\n  | 'tabs'\n  | 'tabContent'\n  | 'stages'\n  | 'tasks'\n  | 'banners'\n  | 'utilities'\n  | 'utilitiesSummaryItems'\n  | 'actions'\n  | 'onEdit'\n>;\n\nconst CasePreviewContent = ({\n  error,\n  onErrorRetry,\n  caseId,\n  caseType,\n  heading,\n  subheading,\n  caseLink,\n  parentCases,\n  icon,\n  color,\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}: CasePreviewContentProps) => {\n  const t = useI18n();\n\n  if (error) {\n    return <ErrorState message={t('preview_error')} onRetry={onErrorRetry} />;\n  }\n\n  return (\n    <CaseView\n      caseId={caseId}\n      caseType={caseType}\n      parentCases={parentCases}\n      heading={heading}\n      subheading={subheading}\n      caseLink={caseLink}\n      icon={icon}\n      color={color}\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  );\n};\n\nconst CasePreview: ForwardRefForwardPropsComponent<CasePreviewProps> = forwardRef(\n  function CasePreview(props: PropsWithoutRef<CasePreviewProps>, ref: CasePreviewProps['ref']) {\n    const {\n      testId,\n      open: openProp,\n      progress,\n      error,\n      onErrorRetry,\n      caseId,\n      caseType,\n      heading,\n      subheading,\n      caseLink,\n      parentCases,\n      icon,\n      color,\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      onBeforeOpen,\n      onAfterOpen,\n      onBeforeClose,\n      onAfterClose,\n      ...restProps\n    } = props;\n    const testIds = useTestIds(testId, getCasePreviewTestIds);\n\n    const { createPreview } = usePreviewManager();\n    const previewMethodsRef = useRef<PreviewMethods | undefined>(undefined);\n    const previewRef = useConsolidatedRef(ref);\n    const isSmallOrAbove = useBreakpoint('sm');\n\n    const [open, setOpen] = useState(openProp);\n\n    useEffect(() => {\n      setOpen(openProp);\n    }, [openProp]);\n\n    useEffect(() => {\n      if (open && isSmallOrAbove) {\n        const contentProps = {\n          error,\n          onErrorRetry,\n          caseId,\n          caseType,\n          heading,\n          subheading,\n          caseLink,\n          parentCases,\n          icon,\n          color,\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        };\n\n        const metadata = {\n          previewProps: {\n            testId: testIds.root,\n            previewLabel: typeof heading === 'string' ? heading : heading?.text,\n            onBeforeOpen,\n            onAfterOpen,\n            onBeforeClose,\n            onAfterClose: () => {\n              onAfterClose?.();\n              setOpen(false);\n              if (previewMethodsRef.current) {\n                previewMethodsRef.current.unmountPreview();\n                previewMethodsRef.current = undefined;\n              }\n            },\n            as: StyledCasePreviewDrawer,\n            ref: previewRef,\n            progress,\n            ...restProps\n          }\n        };\n        if (previewMethodsRef.current) {\n          previewMethodsRef.current.updatePreview(contentProps, metadata);\n        } else {\n          previewMethodsRef.current = createPreview(CasePreviewContent, contentProps, metadata);\n        }\n      } else if (!open) {\n        // This branch is needed for controlled component via open prop\n        previewMethodsRef.current = undefined;\n      }\n    }, [open, progress, error, tabs, banners, utilities, utilitiesSummaryItems, isSmallOrAbove]);\n\n    return null;\n  }\n);\n\nexport default withTestIds(CasePreview, getCasePreviewTestIds);\n"]}

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

@@ -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,EA4RjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"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;AA8C5C,QAAA,MAAM,UAAU,EAAE,EAyZjB,CAAC;AAEF,eAAe,UAAU,CAAC"}