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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PageBanner.js","sourceRoot":"","sources":["../../../src/components/PageBanner/PageBanner.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;~~AAEzC~~,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,MAAM,EACN,gBAAgB,EAChB,QAAQ,EACR,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,aAAa,EACb,YAAY,EACZ,wBAAwB,EACxB,UAAU,EACV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAkB7D,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,MAAM,EACJ,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,~~EAC7C~~,aAAa,EAAE,UAAU,EACzB,eAAe,EAAE,YAAY,EAC9B,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC;IAE7D,OAAO,GAAG,CAAA;kBACM,eAAe;~~aACpB~~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","sourcesContent":["import type { FunctionComponent, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n Flex,\n Grid,\n Image,\n Text,\n Button,\n defaultThemeProp,\n tryCatch,\n StyledButton,\n Link,\n StyledLink,\n useBreakpoint,\n ShowMoreLess,\n StyledShowMoreLessButton,\n useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport type { ImageProps, NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';\n\nimport { getPageBannerTestIds } from './PageBanner.test-ids';\n\ninterface Action {\n label: string;\n onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface PageBannerProps extends NoChildrenProp, TestIdProp {\n title: string;\n description: string;\n image?: ImageProps;\n actions?: [Action] \| [Action, Action];\n link?: {\n label: string;\n href: string;\n };\n}\n\nexport const StyledPageBanner = styled.div(({ theme }) => {\n const {\n base: {\n palette: { 'brand-primary': brandBackground },\n 'font-weight': fontWeight,\n 'content-width': contentWidth\n }\n } = theme;\n\n const color = tryCatch(() => readableColor(brandBackground));\n\n return css`\n background: ${brandBackground};\n color: ${color};\n\n h1:focus-visible {\n outline: transparent;\n box-shadow: ${theme.base.shadow.focus};\n }\n\n ${StyledButton} {\n width: max-content;\n }\n\n ${StyledButton} + ${StyledButton} {\n margin-inline-start: 0;\n }\n\n ${StyledLink}, ${StyledShowMoreLessButton} {\n font-weight: ${fontWeight['semi-bold']};\n color: ${color};\n }\n\n p {\n max-width: ${contentWidth.xl};\n }\n `;\n});\n\nStyledPageBanner.defaultProps = defaultThemeProp;\n\nexport const StyledImageContainer = styled.div`\n min-width: 100%;\n\n img {\n object-fit: contain;\n max-height: 10rem;\n }\n`;\n\nexport const StyledActions = styled.div`\n margin-block-start: auto;\n`;\n\nconst PageBanner: FunctionComponent<PageBannerProps> = ({\n testId,\n title,\n description,\n image,\n actions,\n link\n}) => {\n const testIds = useTestIds(testId, getPageBannerTestIds);\n const isMediumOrAbove = useBreakpoint('md');\n const isSmallOrAbove = useBreakpoint('sm');\n\n return (\n <Grid\n container={{\n cols: isSmallOrAbove && image ? '1fr 25%' : '1fr',\n pad: isMediumOrAbove ? [0, 8, 0, 3] : [0, 3],\n gap: isMediumOrAbove ? 8 : 4\n }}\n as={StyledPageBanner}\n >\n <Flex container={{ direction: 'column', pad: [2, 0], gap: 1 }}>\n <Text data-testid={testIds.title} variant='h1'>\n {title}\n </Text>\n <ShowMoreLess lines={3}>\n <Text data-testid={testIds.description} as='p'>\n {description}\n </Text>\n </ShowMoreLess>\n {!isSmallOrAbove && image && (\n <Flex as={StyledImageContainer} container={{ justify: 'center', alignItems: 'center' }}>\n <Image {...image} />\n </Flex>\n )}\n {(actions \|\| link) && (\n <Flex\n data-testid={testIds.actions}\n as={StyledActions}\n container={{ alignItems: 'center', pad: [1, 0, 0, 0], gap: 1, wrap: 'wrap' }}\n >\n {actions?.map(action => (\n <Button key={action.label} onClick={action.onClick}>\n {action.label}\n </Button>\n ))}\n {link && (\n <Link data-testid={testIds.link} href={link.href}>\n {link.label}\n </Link>\n )}\n </Flex>\n )}\n </Flex>\n {isSmallOrAbove && image && (\n <Flex as={StyledImageContainer} container={{ justify: 'end', alignItems: 'center' }}>\n <Image {...image} data-testId={testIds.image} />\n </Flex>\n )}\n </Grid>\n );\n};\n\nexport default withTestIds(PageBanner, getPageBannerTestIds);\n"]}
1	+ {"version":3,"file":"PageBanner.js","sourceRoot":"","sources":["../../../src/components/PageBanner/PageBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, transparentize } from 'polished';\n\nimport {\n Flex,\n Grid,\n Image,\n Text,\n Button,\n defaultThemeProp,\n tryCatch,\n StyledButton,\n Link,\n StyledLink,\n useBreakpoint,\n ShowMoreLess,\n StyledShowMoreLessButton,\n useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport type { ImageProps, NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';\n\nimport { getPageBannerTestIds } from './PageBanner.test-ids';\n\ninterface Action {\n label: string;\n onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface PageBannerProps extends NoChildrenProp, TestIdProp {\n title: string;\n description: string;\n image?: ImageProps;\n actions?: [Action] \| [Action, Action];\n link?: {\n label: string;\n href: string;\n };\n}\n\nexport const StyledPageBanner = styled.div(({ theme }) => {\n const {\n base: {\n spacing,\n palette: { 'brand-primary': brandBackground, 'secondary-background': secondaryBackground },\n 'font-weight': fontWeight,\n 'content-width': contentWidth\n }\n } = theme;\n\n const color = tryCatch(() => readableColor(brandBackground));\n\n return css`\n background: ${brandBackground};\n border: solid 0.0625rem ${transparentize(0.5, secondaryBackground)};\n border-block-end-color: rgba(0, 0, 0, 0.1);\n border-inline-end-color: rgba(0, 0, 0, 0.1);\n backdrop-filter: blur(calc(0.25 * ${spacing}));\n color: ${color};\n\n h1:focus-visible {\n outline: transparent;\n box-shadow: ${theme.base.shadow.focus};\n }\n\n ${StyledButton} {\n width: max-content;\n }\n\n ${StyledButton} + ${StyledButton} {\n margin-inline-start: 0;\n }\n\n ${StyledLink}, ${StyledShowMoreLessButton} {\n font-weight: ${fontWeight['semi-bold']};\n color: ${color};\n }\n\n p {\n max-width: ${contentWidth.xl};\n }\n `;\n});\n\nStyledPageBanner.defaultProps = defaultThemeProp;\n\nexport const StyledImageContainer = styled.div`\n min-width: 100%;\n\n img {\n object-fit: contain;\n max-height: 10rem;\n }\n`;\n\nexport const StyledActions = styled.div`\n margin-block-start: auto;\n`;\n\nconst PageBanner: FunctionComponent<PageBannerProps> = ({\n testId,\n title,\n description,\n image,\n actions,\n link\n}) => {\n const testIds = useTestIds(testId, getPageBannerTestIds);\n const isMediumOrAbove = useBreakpoint('md');\n const isSmallOrAbove = useBreakpoint('sm');\n\n return (\n <Grid\n container={{\n cols: isSmallOrAbove && image ? '1fr 25%' : '1fr',\n pad: isMediumOrAbove ? [0, 8, 0, 3] : [0, 3],\n gap: isMediumOrAbove ? 8 : 4\n }}\n as={StyledPageBanner}\n >\n <Flex container={{ direction: 'column', pad: [2, 0], gap: 1 }}>\n <Text data-testid={testIds.title} variant='h1'>\n {title}\n </Text>\n <ShowMoreLess lines={3}>\n <Text data-testid={testIds.description} as='p'>\n {description}\n </Text>\n </ShowMoreLess>\n {!isSmallOrAbove && image && (\n <Flex as={StyledImageContainer} container={{ justify: 'center', alignItems: 'center' }}>\n <Image {...image} />\n </Flex>\n )}\n {(actions \|\| link) && (\n <Flex\n data-testid={testIds.actions}\n as={StyledActions}\n container={{ alignItems: 'center', pad: [1, 0, 0, 0], gap: 1, wrap: 'wrap' }}\n >\n {actions?.map(action => (\n <Button key={action.label} onClick={action.onClick}>\n {action.label}\n </Button>\n ))}\n {link && (\n <Link data-testid={testIds.link} href={link.href}>\n {link.label}\n </Link>\n )}\n </Flex>\n )}\n </Flex>\n {isSmallOrAbove && image && (\n <Flex as={StyledImageContainer} container={{ justify: 'end', alignItems: 'center' }}>\n <Image {...image} data-testId={testIds.image} />\n </Flex>\n )}\n </Grid>\n );\n};\n\nexport default withTestIds(PageBanner, getPageBannerTestIds);\n"]}

package/lib/components/PageTemplates/ConstructPageTemplate/ConstructPageHeader.d.ts CHANGED Viewed

@@ -1,11 +1,13 @@
 import { type TestIdProp } from '@pega/cosmos-react-core';
 import type { ConstructPageTemplateProps, PageTemplateProps } from '../PageTemplate.types';
-type ConstructPageHeaderProps = ConstructPageTemplateProps['header'] & Pick<PageTemplateProps, 'progress'> & TestIdProp;
+type ConstructPageHeaderProps = ConstructPageTemplateProps['header'] & Pick<PageTemplateProps, 'progress'> & TestIdProp & {
+    onHeightChange?: (height: number) => void;
+};
 export declare const PrimaryHeaderText: ({ type: { href, onClick, name }, testId }: {
     type: ConstructPageHeaderProps["type"];
     testId?: TestIdProp["testId"];
 }) => import("react/jsx-runtime").JSX.Element;
-declare const _default: (({ testId, title, primaryAction, additionalActions, metadata, visual, type, description, secondaryAction, progress }: ConstructPageHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
+declare const _default: (({ testId, title, primaryAction, additionalActions, metadata, visual, type, description, secondaryAction, progress, onHeightChange, closeAction }: ConstructPageHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["title", "status", "edit-details", "additional-info-icon", "type", "meta-data", "primary-meta-data", "secondary-meta-data", "visual", "primary-action", "secondary-action", "additional-actions", "banner-description", "banner-link", "banner-actions", "banner-image"]>;
 };
 export default _default;

package/lib/components/PageTemplates/ConstructPageTemplate/ConstructPageHeader.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ConstructPageHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/ConstructPageTemplate/ConstructPageHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAgBL,KAAK,UAAU,EAChB,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,EAAE,0BAA0B,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAU3F,KAAK,wBAAwB,GAAG,0BAA0B,CAAC,QAAQ,CAAC,GAClE,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,GACnC,UAAU,CAAC;~~AAEb~~,eAAO,MAAM,iBAAiB,GAAI,2CAG/B;IACD,IAAI,EAAE,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;CAC/B,4CASA,CAAC~~;+IAaC~~,wBAAwB;;;~~AAkT3B~~,wBAAsE"}
1	+ {"version":3,"file":"ConstructPageHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/ConstructPageTemplate/ConstructPageHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAgBL,KAAK,UAAU,EAChB,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,EAAE,0BAA0B,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAU3F,KAAK,wBAAwB,GAAG,0BAA0B,CAAC,QAAQ,CAAC,GAClE,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,GACnC,UAAU,GAAG;IACX,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEJ,eAAO,MAAM,iBAAiB,GAAI,2CAG/B;IACD,IAAI,EAAE,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;CAC/B,4CASA,CAAC;4KAeC,wBAAwB;;;AAkU3B,wBAAsE"}

package/lib/components/PageTemplates/ConstructPageTemplate/ConstructPageHeader.js CHANGED Viewed

@@ -9,9 +9,9 @@ export const PrimaryHeaderText = ({ type: { href, onClick, name }, testId }) =>
     if (href || onClick) {
         return (_jsx(Button, { variant: 'link', href: href, onClick: onClick, "data-testid": testId, children: name }));
     }
-    return _jsx(StyledText, { variant: 'secondary', children: name });
+    return _jsx(StyledLabel, { as: StyledText, children: name });
 };
-const ConstructPageHeader = ({ testId, title, primaryAction, additionalActions = [], metadata = { additional: [] }, visual, type, description, secondaryAction, progress }) => {
+const ConstructPageHeader = ({ testId, title, primaryAction, additionalActions = [], metadata = { additional: [] }, visual, type, description, secondaryAction, progress, onHeightChange, closeAction }) => {
     // States
     const [countOfSecondaryMetaToShow, setCountOfSecondaryMetaToShow] = useState(metadata?.secondary?.length ?? 0);
     const [countOfPrimaryMetaToShow, setCountOfPrimaryMetaToShow] = useState(metadata.primary?.length ?? 0);
@@ -24,6 +24,7 @@ const ConstructPageHeader = ({ testId, title, primaryAction, additionalActions =
     const t = useI18n();
     // Refs
     const headerRef = useRef(null);
+    const headerContentRef = useRef(null);
     const pageTitleContainerRef = useRef(null);
     const actionsContainerRef = useRef(null);
     const secondaryMetaDataRef = useRef(null);
@@ -40,12 +41,20 @@ const ConstructPageHeader = ({ testId, title, primaryAction, additionalActions =
         if (additionalActionsData.length > 0 && secondaryAction && !showSecondaryAction) {
             additionalActionsData.unshift(secondaryAction);
         }
-        return (_jsx(HeaderActionButtons, { additionalActions: additionalActionsData, primaryAction: primaryAction, secondaryAction: secondaryActionsData, testIds: testIds, progress: progress, animatePrimaryButton: true }));
-    }, [showSecondaryAction, primaryAction, secondaryAction, additionalActions]);
+        return (_jsx(HeaderActionButtons, { additionalActions: additionalActionsData, primaryAction: primaryAction, secondaryAction: secondaryActionsData, testIds: testIds, progress: progress, animatePrimaryButton: true, closeAction: closeAction }));
+    }, [
+        showSecondaryAction,
+        primaryAction,
+        secondaryAction,
+        additionalActions,
+        testIds,
+        progress,
+        closeAction
+    ]);
     // CB to be run on resize observer
     const showOrHideElements = useCallback(() => {
         // Logic to show or hide primary metadata
-        const headerWidth = headerRef.current?.offsetWidth ?? 0;
+        const headerWidth = headerContentRef.current?.offsetWidth ?? 0;
         const titleWidth = pageTitleContainerRef.current?.offsetWidth ?? 0;
         let actionsWidth = actionsContainerRef.current?.offsetWidth ?? 0;
         let newCountOfPrimaryMetaToShow = countOfPrimaryMetaToShow;
@@ -86,17 +95,19 @@ const ConstructPageHeader = ({ testId, title, primaryAction, additionalActions =
         setShowSecondaryAction(!!secondaryAction && headerWidth >= titleWidth + actionsWidth + 25);
         setCountOfPrimaryMetaToShow(newCountOfPrimaryMetaToShow);
         setCountOfSecondaryMetaToShow(newCountOfSecondaryMetaToShow);
-        if (!headerRef.current?.offsetWidth) {
+        if (!headerContentRef.current?.offsetWidth) {
             setCountOfPrimaryMetaToShow(primaryMetaLengths.current.length);
             setShowSecondaryAction(!!secondaryAction);
             setCountOfSecondaryMetaToShow(secondaryMetaLengths.current.length);
         }
+        onHeightChange?.(headerRef.current?.offsetHeight ?? 0);
     }, [
         countOfSecondaryMetaToShow,
         secondaryMetaLengths,
         showSecondaryAction,
         primaryMetaLengths,
-        countOfPrimaryMetaToShow
+        countOfPrimaryMetaToShow,
+        onHeightChange
     ]);
     useLayoutEffect(() => {
         primaryMetaLengths.current = [];
@@ -119,9 +130,9 @@ const ConstructPageHeader = ({ testId, title, primaryAction, additionalActions =
         if (observerRef.current) {
             observerRef.current.disconnect();
         }
-        if (headerRef.current) {
+        if (headerContentRef.current) {
             observerRef.current = new ResizeObserver(() => showOrHideElements());
-            observerRef.current.observe(headerRef.current);
+            observerRef.current.observe(headerContentRef.current);
         }
         return () => observerRef.current?.disconnect();
     }, [showOrHideElements]);
@@ -132,11 +143,11 @@ const ConstructPageHeader = ({ testId, title, primaryAction, additionalActions =
     return (_jsxs(Flex, { as: StyledHeader, container: {
             direction: 'column',
             rowGap: 1
-        }, children: [_jsxs(Flex, { container: {
+        }, ref: headerRef, children: [_jsxs(Flex, { container: {
                     direction: 'row',
                     alignItems: 'center',
                     colGap: countOfPrimaryMetaToShow > 0 ? 3 : 1.5
-                }, ref: headerRef, children: [_jsxs(Flex, { ref: pageTitleContainerRef, container: { direction: 'row', colGap: 1, alignItems: 'center' }, item: { shrink: showSecondaryAction || countOfPrimaryMetaToShow > 0 ? 0 : 1 }, children: [visual && _jsx(IconTile, { testId: testIds.visual, ...visual, size: 'xl' }), _jsxs(Flex, { as: StyledTitleContainer, container: {
+                }, ref: headerContentRef, children: [_jsxs(Flex, { ref: pageTitleContainerRef, container: { direction: 'row', colGap: 1, alignItems: 'center' }, item: { shrink: showSecondaryAction || countOfPrimaryMetaToShow > 0 ? 0 : 1 }, children: [visual && _jsx(IconTile, { testId: testIds.visual, ...visual, size: 'xl' }), _jsxs(Flex, { as: StyledTitleContainer, container: {
                                     alignItems: 'start',
                                     direction: 'column',
                                     wrap: 'wrap'
@@ -152,7 +163,7 @@ const ConstructPageHeader = ({ testId, title, primaryAction, additionalActions =
                                             direction: 'column',
                                             alignItems: 'start',
                                             gap: 1
-                                        }, item: { grow: 1, alignSelf: 'stretch' }, children: [_jsx(FieldValueList, { fields: metadata.additional, variant: 'inline', testId: testIds.metaData }), description && (_jsxs(StyledStackedFieldValue, { children: [_jsx(StyledLabel, { as: StyledFieldName, children: t('description') }), _jsx(ShowMoreLess, { lines: 3, children: description })] }))] }) }) })), actions] })] }), description && (_jsx(StyledDescription, { children: _jsx(ShowMoreLess, { lines: 1, children: _jsx(Text, { children: description }) }) }))] }));
+                                        }, item: { grow: 1, alignSelf: 'stretch' }, children: [_jsx(FieldValueList, { fields: metadata.additional, variant: 'inline', testId: testIds.metaData }), description && (_jsxs(StyledStackedFieldValue, { children: [_jsx(StyledLabel, { as: StyledFieldName, children: t('description') }), _jsx(StyledDescription, { children: _jsx(ShowMoreLess, { lines: 3, children: description }) })] }))] }) }) })), actions] })] }), description && (_jsx(StyledDescription, { children: _jsx(ShowMoreLess, { lines: 2, children: _jsx(Text, { children: description }) }) }))] }));
 };
 export default withTestIds(ConstructPageHeader, getPageHeaderTestIds);
 //# sourceMappingURL=ConstructPageHeader.js.map

package/lib/components/PageTemplates/ConstructPageTemplate/ConstructPageHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ConstructPageHeader.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/ConstructPageTemplate/ConstructPageHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, useRef, useState, useLayoutEffect, useCallback } from 'react';\n\nimport {\n Text,\n Flex,\n useTestIds,\n withTestIds,\n useElement,\n Tooltip,\n Button,\n ShowMoreLess,\n StyledStackedFieldValue,\n StyledLabel,\n StyledFieldName,\n FieldValueList,\n AdditionalInfo,\n useI18n,\n useChToPxConversionFactor,\n type TestIdProp\n} from '@pega/cosmos-react-core';\n\nimport IconTile from '../../IconTile';\nimport { getPageHeaderTestIds } from '../PageTemplates.test-ids';\nimport type { ConstructPageTemplateProps, PageTemplateProps } from '../PageTemplate.types';\nimport HeaderActionButtons from '../HeaderActionButtons';\nimport {\n StyledText,\n StyledDescription,\n StyledPrimaryMetaButton,\n StyledHeader,\n StyledTitleContainer\n} from '../PageTemplate.styles';\n\ntype ConstructPageHeaderProps = ConstructPageTemplateProps['header'] &\n Pick<PageTemplateProps, 'progress'> &\n TestIdProp;\n\nexport const PrimaryHeaderText = ({\n type: { href, onClick, name },\n testId\n}: {\n type: ConstructPageHeaderProps['type'];\n testId?: TestIdProp['testId'];\n}) => {\n if (href \|\| onClick) {\n return (\n <Button variant='link' href={href} onClick={onClick} data-testid={testId}>\n {name}\n </Button>\n );\n }\n return <StyledText variant='secondary'>{name}</StyledText>;\n};\n\nconst ConstructPageHeader = ({\n testId,\n title,\n primaryAction,\n additionalActions = [],\n metadata = { additional: [] },\n visual,\n type,\n description,\n secondaryAction,\n progress\n}: ConstructPageHeaderProps) => {\n // States\n const [countOfSecondaryMetaToShow, setCountOfSecondaryMetaToShow] = useState<number>(\n metadata?.secondary?.length ?? 0\n );\n const [countOfPrimaryMetaToShow, setCountOfPrimaryMetaToShow] = useState<number>(\n metadata.primary?.length ?? 0\n );\n const [showSecondaryAction, setShowSecondaryAction] = useState(true);\n const [pageTitleEl, setPageTitleEl] = useElement();\n const [primaryMetaEl, setPrimaryMetaEl] = useElement();\n\n // Hooks\n const chToPxConversionFactor = useChToPxConversionFactor();\n const testIds = useTestIds(testId, getPageHeaderTestIds);\n const t = useI18n();\n\n // Refs\n const headerRef = useRef<HTMLDivElement>(null);\n const pageTitleContainerRef = useRef<HTMLDivElement>(null);\n const actionsContainerRef = useRef<HTMLDivElement>(null);\n const secondaryMetaDataRef = useRef<HTMLDivElement>(null);\n const primaryMetaDataRef = useRef<HTMLDivElement>(null);\n const observerRef = useRef<ResizeObserver>();\n const primaryMetaLengths = useRef<number[]>([]);\n const secondaryMetaLengths = useRef<number[]>([]);\n\n // Memos\n const secondaryActionWidth = useMemo(\n () => (secondaryAction ? secondaryAction.primary.length * chToPxConversionFactor + 44 : 0),\n [secondaryAction]\n );\n\n // Page actions component\n const actions = useMemo(() => {\n const additionalActionsData = [...additionalActions];\n const secondaryActionsData =\n showSecondaryAction \|\| additionalActionsData.length === 0 ? secondaryAction : undefined;\n if (additionalActionsData.length > 0 && secondaryAction && !showSecondaryAction) {\n additionalActionsData.unshift(secondaryAction);\n }\n\n return (\n <HeaderActionButtons\n additionalActions={additionalActionsData}\n primaryAction={primaryAction}\n secondaryAction={secondaryActionsData}\n testIds={testIds}\n progress={progress}\n animatePrimaryButton\n />\n );\n }, [showSecondaryAction, primaryAction, secondaryAction, additionalActions]);\n\n // CB to be run on resize observer\n const showOrHideElements = useCallback(() => {\n // Logic to show or hide primary metadata\n const headerWidth = headerRef.current?.offsetWidth ?? 0;\n const titleWidth = pageTitleContainerRef.current?.offsetWidth ?? 0;\n let actionsWidth = actionsContainerRef.current?.offsetWidth ?? 0;\n let newCountOfPrimaryMetaToShow = countOfPrimaryMetaToShow;\n let newCountOfSecondaryMetaToShow = countOfSecondaryMetaToShow;\n\n if (primaryMetaLengths.current.length > 0 && primaryMetaDataRef.current) {\n if (countOfSecondaryMetaToShow === 0) {\n const availableSpace = headerWidth - titleWidth - actionsWidth - 48;\n const closestIndex = primaryMetaLengths.current.findIndex(i => i > availableSpace);\n newCountOfPrimaryMetaToShow =\n closestIndex === -1 ? primaryMetaLengths.current.length : closestIndex;\n } else {\n newCountOfPrimaryMetaToShow = primaryMetaLengths.current.length;\n }\n }\n\n // Logic to show and hide secondary metadata items\n if (\n secondaryMetaLengths.current.length !== 0 &&\n secondaryMetaDataRef.current &&\n primaryMetaDataRef.current &&\n primaryMetaLengths.current.length === newCountOfPrimaryMetaToShow\n ) {\n const availableSpace =\n primaryMetaDataRef.current.offsetWidth -\n (primaryMetaLengths.current[primaryMetaLengths.current.length - 1] ?? 0);\n if (availableSpace > secondaryMetaLengths.current[secondaryMetaLengths.current.length - 1]) {\n newCountOfSecondaryMetaToShow = secondaryMetaLengths.current.length;\n } else if (availableSpace < secondaryMetaLengths.current[0]) {\n newCountOfSecondaryMetaToShow = 0;\n } else {\n const closestIndex = secondaryMetaLengths.current.findIndex(i => i > availableSpace);\n newCountOfSecondaryMetaToShow =\n closestIndex === -1 ? secondaryMetaLengths.current.length : closestIndex;\n }\n }\n\n // Logic to show or hide secondary action\n actionsWidth =\n secondaryAction && showSecondaryAction ? actionsWidth : actionsWidth + secondaryActionWidth;\n setShowSecondaryAction(!!secondaryAction && headerWidth >= titleWidth + actionsWidth + 25);\n setCountOfPrimaryMetaToShow(newCountOfPrimaryMetaToShow);\n setCountOfSecondaryMetaToShow(newCountOfSecondaryMetaToShow);\n\n if (!headerRef.current?.offsetWidth) {\n setCountOfPrimaryMetaToShow(primaryMetaLengths.current.length);\n setShowSecondaryAction(!!secondaryAction);\n setCountOfSecondaryMetaToShow(secondaryMetaLengths.current.length);\n }\n }, [\n countOfSecondaryMetaToShow,\n secondaryMetaLengths,\n showSecondaryAction,\n primaryMetaLengths,\n countOfPrimaryMetaToShow\n ]);\n\n useLayoutEffect(() => {\n primaryMetaLengths.current = [];\n secondaryMetaLengths.current = [];\n const primaryMetaDataLength = metadata.primary?.length ?? 0;\n primaryMetaDataRef.current?.querySelectorAll('div:has(>dt)').forEach((el, index) => {\n if (index < primaryMetaDataLength) {\n primaryMetaLengths.current.push(\n (index === 0 ? el.clientWidth : el.clientWidth + primaryMetaLengths.current[index - 1]) +\n 16\n );\n } else {\n secondaryMetaLengths.current.push(\n (index === primaryMetaDataLength\n ? el.clientWidth\n : el.clientWidth + secondaryMetaLengths.current[index - primaryMetaDataLength - 1]) + 16\n );\n }\n });\n }, [metadata.primary, metadata.secondary]);\n\n // Resize observer for header\n useLayoutEffect(() => {\n if (observerRef.current) {\n observerRef.current.disconnect();\n }\n if (headerRef.current) {\n observerRef.current = new ResizeObserver(() => showOrHideElements());\n observerRef.current.observe(headerRef.current);\n }\n return () => observerRef.current?.disconnect();\n }, [showOrHideElements]);\n\n // Run CB once on mount incase if component is mounted initially on resized screen\n useLayoutEffect(() => {\n showOrHideElements();\n }, []);\n\n return (\n <Flex\n as={StyledHeader}\n container={{\n direction: 'column',\n rowGap: 1\n }}\n >\n <Flex\n container={{\n direction: 'row',\n alignItems: 'center',\n colGap: countOfPrimaryMetaToShow > 0 ? 3 : 1.5\n }}\n ref={headerRef}\n >\n <Flex\n ref={pageTitleContainerRef}\n container={{ direction: 'row', colGap: 1, alignItems: 'center' }}\n item={{ shrink: showSecondaryAction \|\| countOfPrimaryMetaToShow > 0 ? 0 : 1 }}\n >\n {visual && <IconTile testId={testIds.visual} {...visual} size='xl' />}\n <Flex\n as={StyledTitleContainer}\n container={{\n alignItems: 'start',\n direction: 'column',\n wrap: 'wrap'\n }}\n >\n {type.name && <PrimaryHeaderText type={type} testId={testIds.type} />}\n <StyledText\n showEllipsis={!showSecondaryAction && countOfPrimaryMetaToShow === 0}\n data-testid={testIds.title}\n variant='h1'\n ref={setPageTitleEl}\n >\n {title}\n </StyledText>\n <Tooltip target={pageTitleEl} smart showDelay='none' hideDelay='none'>\n {title}\n </Tooltip>\n </Flex>\n </Flex>\n\n <Flex\n container={{\n direction: 'row',\n colGap: countOfSecondaryMetaToShow > 0 \|\| countOfPrimaryMetaToShow > 1 ? 3 : 0,\n alignItems: 'center'\n }}\n item={{ grow: 1, shrink: 1 }}\n ref={primaryMetaDataRef}\n as='dl'\n >\n {metadata.primary?.slice(0, countOfPrimaryMetaToShow).map(metaItem => (\n <Flex\n key={metaItem.name}\n as={StyledStackedFieldValue}\n container={{ direction: 'column' }}\n item={{ shrink: 0 }}\n data-testid={testIds.primaryMetaData}\n >\n <StyledLabel as={StyledFieldName}>{metaItem.name}</StyledLabel>\n {metaItem.onClick ? (\n <dd>\n <StyledPrimaryMetaButton\n ref={setPrimaryMetaEl}\n variant='link'\n onClick={metaItem.onClick}\n data-testid={testId}\n >\n {metaItem.value}\n </StyledPrimaryMetaButton>\n </dd>\n ) : (\n <StyledText ref={setPrimaryMetaEl} variant='h1' forwardedAs='dd'>\n {metaItem.value}\n </StyledText>\n )}\n <Tooltip target={primaryMetaEl} smart showDelay='none' hideDelay='none'>\n {metaItem.value}\n </Tooltip>\n </Flex>\n ))}\n\n {metadata.secondary && (\n <Flex\n container={{ direction: 'row', colGap: 2, justify: 'end' }}\n item={{ grow: 1, shrink: 1 }}\n ref={secondaryMetaDataRef}\n data-testid={testIds.secondaryMetaData}\n >\n {metadata.secondary.slice(0, countOfSecondaryMetaToShow).map(metaItem => (\n <Flex as={StyledStackedFieldValue} item={{ shrink: 0 }} key={metaItem.name}>\n <StyledLabel as={StyledFieldName}>{metaItem.name}</StyledLabel>\n <StyledText as='dd'>{metaItem.value}</StyledText>\n </Flex>\n ))}\n </Flex>\n )}\n </Flex>\n\n <Flex\n ref={actionsContainerRef}\n container={{\n direction: 'row',\n colGap: 2,\n justify: 'center'\n }}\n item={{ alignSelf: 'center', shrink: 0 }}\n >\n {metadata.additional.length > 0 && (\n <Flex container={{ direction: 'row', colGap: 2, alignItems: 'center' }}>\n <AdditionalInfo data-testid={testIds.additionalInfoIcon} heading={title}>\n <Flex\n container={{\n direction: 'column',\n alignItems: 'start',\n gap: 1\n }}\n item={{ grow: 1, alignSelf: 'stretch' }}\n >\n <FieldValueList\n fields={metadata.additional}\n variant='inline'\n testId={testIds.metaData}\n />\n {description && (\n <StyledStackedFieldValue>\n <StyledLabel as={StyledFieldName}>{t('description')}</StyledLabel>\n <ShowMoreLess lines={3}>{description}</ShowMoreLess>\n </StyledStackedFieldValue>\n )}\n </Flex>\n </AdditionalInfo>\n </Flex>\n )}\n\n {actions}\n </Flex>\n </Flex>\n\n {description && (\n <StyledDescription>\n <ShowMoreLess lines={1}>\n <Text>{description}</Text>\n </ShowMoreLess>\n </StyledDescription>\n )}\n </Flex>\n );\n};\n\nexport default withTestIds(ConstructPageHeader, getPageHeaderTestIds);\n"]}
1	+ {"version":3,"file":"ConstructPageHeader.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/ConstructPageTemplate/ConstructPageHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, useRef, useState, useLayoutEffect, useCallback } from 'react';\n\nimport {\n Text,\n Flex,\n useTestIds,\n withTestIds,\n useElement,\n Tooltip,\n Button,\n ShowMoreLess,\n StyledStackedFieldValue,\n StyledLabel,\n StyledFieldName,\n FieldValueList,\n AdditionalInfo,\n useI18n,\n useChToPxConversionFactor,\n type TestIdProp\n} from '@pega/cosmos-react-core';\n\nimport IconTile from '../../IconTile';\nimport { getPageHeaderTestIds } from '../PageTemplates.test-ids';\nimport type { ConstructPageTemplateProps, PageTemplateProps } from '../PageTemplate.types';\nimport HeaderActionButtons from '../HeaderActionButtons';\nimport {\n StyledText,\n StyledDescription,\n StyledPrimaryMetaButton,\n StyledHeader,\n StyledTitleContainer\n} from '../PageTemplate.styles';\n\ntype ConstructPageHeaderProps = ConstructPageTemplateProps['header'] &\n Pick<PageTemplateProps, 'progress'> &\n TestIdProp & {\n onHeightChange?: (height: number) => void;\n };\n\nexport const PrimaryHeaderText = ({\n type: { href, onClick, name },\n testId\n}: {\n type: ConstructPageHeaderProps['type'];\n testId?: TestIdProp['testId'];\n}) => {\n if (href \|\| onClick) {\n return (\n <Button variant='link' href={href} onClick={onClick} data-testid={testId}>\n {name}\n </Button>\n );\n }\n return <StyledLabel as={StyledText}>{name}</StyledLabel>;\n};\n\nconst ConstructPageHeader = ({\n testId,\n title,\n primaryAction,\n additionalActions = [],\n metadata = { additional: [] },\n visual,\n type,\n description,\n secondaryAction,\n progress,\n onHeightChange,\n closeAction\n}: ConstructPageHeaderProps) => {\n // States\n const [countOfSecondaryMetaToShow, setCountOfSecondaryMetaToShow] = useState<number>(\n metadata?.secondary?.length ?? 0\n );\n const [countOfPrimaryMetaToShow, setCountOfPrimaryMetaToShow] = useState<number>(\n metadata.primary?.length ?? 0\n );\n const [showSecondaryAction, setShowSecondaryAction] = useState(true);\n const [pageTitleEl, setPageTitleEl] = useElement();\n const [primaryMetaEl, setPrimaryMetaEl] = useElement();\n\n // Hooks\n const chToPxConversionFactor = useChToPxConversionFactor();\n const testIds = useTestIds(testId, getPageHeaderTestIds);\n const t = useI18n();\n\n // Refs\n const headerRef = useRef<HTMLDivElement>(null);\n const headerContentRef = useRef<HTMLDivElement>(null);\n const pageTitleContainerRef = useRef<HTMLDivElement>(null);\n const actionsContainerRef = useRef<HTMLDivElement>(null);\n const secondaryMetaDataRef = useRef<HTMLDivElement>(null);\n const primaryMetaDataRef = useRef<HTMLDivElement>(null);\n const observerRef = useRef<ResizeObserver>();\n const primaryMetaLengths = useRef<number[]>([]);\n const secondaryMetaLengths = useRef<number[]>([]);\n\n // Memos\n const secondaryActionWidth = useMemo(\n () => (secondaryAction ? secondaryAction.primary.length * chToPxConversionFactor + 44 : 0),\n [secondaryAction]\n );\n\n // Page actions component\n const actions = useMemo(() => {\n const additionalActionsData = [...additionalActions];\n const secondaryActionsData =\n showSecondaryAction \|\| additionalActionsData.length === 0 ? secondaryAction : undefined;\n if (additionalActionsData.length > 0 && secondaryAction && !showSecondaryAction) {\n additionalActionsData.unshift(secondaryAction);\n }\n\n return (\n <HeaderActionButtons\n additionalActions={additionalActionsData}\n primaryAction={primaryAction}\n secondaryAction={secondaryActionsData}\n testIds={testIds}\n progress={progress}\n animatePrimaryButton\n closeAction={closeAction}\n />\n );\n }, [\n showSecondaryAction,\n primaryAction,\n secondaryAction,\n additionalActions,\n testIds,\n progress,\n closeAction\n ]);\n\n // CB to be run on resize observer\n const showOrHideElements = useCallback(() => {\n // Logic to show or hide primary metadata\n const headerWidth = headerContentRef.current?.offsetWidth ?? 0;\n const titleWidth = pageTitleContainerRef.current?.offsetWidth ?? 0;\n let actionsWidth = actionsContainerRef.current?.offsetWidth ?? 0;\n let newCountOfPrimaryMetaToShow = countOfPrimaryMetaToShow;\n let newCountOfSecondaryMetaToShow = countOfSecondaryMetaToShow;\n\n if (primaryMetaLengths.current.length > 0 && primaryMetaDataRef.current) {\n if (countOfSecondaryMetaToShow === 0) {\n const availableSpace = headerWidth - titleWidth - actionsWidth - 48;\n const closestIndex = primaryMetaLengths.current.findIndex(i => i > availableSpace);\n newCountOfPrimaryMetaToShow =\n closestIndex === -1 ? primaryMetaLengths.current.length : closestIndex;\n } else {\n newCountOfPrimaryMetaToShow = primaryMetaLengths.current.length;\n }\n }\n\n // Logic to show and hide secondary metadata items\n if (\n secondaryMetaLengths.current.length !== 0 &&\n secondaryMetaDataRef.current &&\n primaryMetaDataRef.current &&\n primaryMetaLengths.current.length === newCountOfPrimaryMetaToShow\n ) {\n const availableSpace =\n primaryMetaDataRef.current.offsetWidth -\n (primaryMetaLengths.current[primaryMetaLengths.current.length - 1] ?? 0);\n if (availableSpace > secondaryMetaLengths.current[secondaryMetaLengths.current.length - 1]) {\n newCountOfSecondaryMetaToShow = secondaryMetaLengths.current.length;\n } else if (availableSpace < secondaryMetaLengths.current[0]) {\n newCountOfSecondaryMetaToShow = 0;\n } else {\n const closestIndex = secondaryMetaLengths.current.findIndex(i => i > availableSpace);\n newCountOfSecondaryMetaToShow =\n closestIndex === -1 ? secondaryMetaLengths.current.length : closestIndex;\n }\n }\n\n // Logic to show or hide secondary action\n actionsWidth =\n secondaryAction && showSecondaryAction ? actionsWidth : actionsWidth + secondaryActionWidth;\n setShowSecondaryAction(!!secondaryAction && headerWidth >= titleWidth + actionsWidth + 25);\n setCountOfPrimaryMetaToShow(newCountOfPrimaryMetaToShow);\n setCountOfSecondaryMetaToShow(newCountOfSecondaryMetaToShow);\n\n if (!headerContentRef.current?.offsetWidth) {\n setCountOfPrimaryMetaToShow(primaryMetaLengths.current.length);\n setShowSecondaryAction(!!secondaryAction);\n setCountOfSecondaryMetaToShow(secondaryMetaLengths.current.length);\n }\n\n onHeightChange?.(headerRef.current?.offsetHeight ?? 0);\n }, [\n countOfSecondaryMetaToShow,\n secondaryMetaLengths,\n showSecondaryAction,\n primaryMetaLengths,\n countOfPrimaryMetaToShow,\n onHeightChange\n ]);\n\n useLayoutEffect(() => {\n primaryMetaLengths.current = [];\n secondaryMetaLengths.current = [];\n const primaryMetaDataLength = metadata.primary?.length ?? 0;\n primaryMetaDataRef.current?.querySelectorAll('div:has(>dt)').forEach((el, index) => {\n if (index < primaryMetaDataLength) {\n primaryMetaLengths.current.push(\n (index === 0 ? el.clientWidth : el.clientWidth + primaryMetaLengths.current[index - 1]) +\n 16\n );\n } else {\n secondaryMetaLengths.current.push(\n (index === primaryMetaDataLength\n ? el.clientWidth\n : el.clientWidth + secondaryMetaLengths.current[index - primaryMetaDataLength - 1]) + 16\n );\n }\n });\n }, [metadata.primary, metadata.secondary]);\n\n // Resize observer for header\n useLayoutEffect(() => {\n if (observerRef.current) {\n observerRef.current.disconnect();\n }\n if (headerContentRef.current) {\n observerRef.current = new ResizeObserver(() => showOrHideElements());\n observerRef.current.observe(headerContentRef.current);\n }\n return () => observerRef.current?.disconnect();\n }, [showOrHideElements]);\n\n // Run CB once on mount incase if component is mounted initially on resized screen\n useLayoutEffect(() => {\n showOrHideElements();\n }, []);\n\n return (\n <Flex\n as={StyledHeader}\n container={{\n direction: 'column',\n rowGap: 1\n }}\n ref={headerRef}\n >\n <Flex\n container={{\n direction: 'row',\n alignItems: 'center',\n colGap: countOfPrimaryMetaToShow > 0 ? 3 : 1.5\n }}\n ref={headerContentRef}\n >\n <Flex\n ref={pageTitleContainerRef}\n container={{ direction: 'row', colGap: 1, alignItems: 'center' }}\n item={{ shrink: showSecondaryAction \|\| countOfPrimaryMetaToShow > 0 ? 0 : 1 }}\n >\n {visual && <IconTile testId={testIds.visual} {...visual} size='xl' />}\n <Flex\n as={StyledTitleContainer}\n container={{\n alignItems: 'start',\n direction: 'column',\n wrap: 'wrap'\n }}\n >\n {type.name && <PrimaryHeaderText type={type} testId={testIds.type} />}\n <StyledText\n showEllipsis={!showSecondaryAction && countOfPrimaryMetaToShow === 0}\n data-testid={testIds.title}\n variant='h1'\n ref={setPageTitleEl}\n >\n {title}\n </StyledText>\n <Tooltip target={pageTitleEl} smart showDelay='none' hideDelay='none'>\n {title}\n </Tooltip>\n </Flex>\n </Flex>\n\n <Flex\n container={{\n direction: 'row',\n colGap: countOfSecondaryMetaToShow > 0 \|\| countOfPrimaryMetaToShow > 1 ? 3 : 0,\n alignItems: 'center'\n }}\n item={{ grow: 1, shrink: 1 }}\n ref={primaryMetaDataRef}\n as='dl'\n >\n {metadata.primary?.slice(0, countOfPrimaryMetaToShow).map(metaItem => (\n <Flex\n key={metaItem.name}\n as={StyledStackedFieldValue}\n container={{ direction: 'column' }}\n item={{ shrink: 0 }}\n data-testid={testIds.primaryMetaData}\n >\n <StyledLabel as={StyledFieldName}>{metaItem.name}</StyledLabel>\n {metaItem.onClick ? (\n <dd>\n <StyledPrimaryMetaButton\n ref={setPrimaryMetaEl}\n variant='link'\n onClick={metaItem.onClick}\n data-testid={testId}\n >\n {metaItem.value}\n </StyledPrimaryMetaButton>\n </dd>\n ) : (\n <StyledText ref={setPrimaryMetaEl} variant='h1' forwardedAs='dd'>\n {metaItem.value}\n </StyledText>\n )}\n <Tooltip target={primaryMetaEl} smart showDelay='none' hideDelay='none'>\n {metaItem.value}\n </Tooltip>\n </Flex>\n ))}\n\n {metadata.secondary && (\n <Flex\n container={{ direction: 'row', colGap: 2, justify: 'end' }}\n item={{ grow: 1, shrink: 1 }}\n ref={secondaryMetaDataRef}\n data-testid={testIds.secondaryMetaData}\n >\n {metadata.secondary.slice(0, countOfSecondaryMetaToShow).map(metaItem => (\n <Flex as={StyledStackedFieldValue} item={{ shrink: 0 }} key={metaItem.name}>\n <StyledLabel as={StyledFieldName}>{metaItem.name}</StyledLabel>\n <StyledText as='dd'>{metaItem.value}</StyledText>\n </Flex>\n ))}\n </Flex>\n )}\n </Flex>\n\n <Flex\n ref={actionsContainerRef}\n container={{\n direction: 'row',\n colGap: 2,\n justify: 'center'\n }}\n item={{ alignSelf: 'center', shrink: 0 }}\n >\n {metadata.additional.length > 0 && (\n <Flex container={{ direction: 'row', colGap: 2, alignItems: 'center' }}>\n <AdditionalInfo data-testid={testIds.additionalInfoIcon} heading={title}>\n <Flex\n container={{\n direction: 'column',\n alignItems: 'start',\n gap: 1\n }}\n item={{ grow: 1, alignSelf: 'stretch' }}\n >\n <FieldValueList\n fields={metadata.additional}\n variant='inline'\n testId={testIds.metaData}\n />\n {description && (\n <StyledStackedFieldValue>\n <StyledLabel as={StyledFieldName}>{t('description')}</StyledLabel>\n <StyledDescription>\n <ShowMoreLess lines={3}>{description}</ShowMoreLess>\n </StyledDescription>\n </StyledStackedFieldValue>\n )}\n </Flex>\n </AdditionalInfo>\n </Flex>\n )}\n\n {actions}\n </Flex>\n </Flex>\n\n {description && (\n <StyledDescription>\n <ShowMoreLess lines={2}>\n <Text>{description}</Text>\n </ShowMoreLess>\n </StyledDescription>\n )}\n </Flex>\n );\n};\n\nexport default withTestIds(ConstructPageHeader, getPageHeaderTestIds);\n"]}

package/lib/components/PageTemplates/ConstructPageTemplate/ConstructPageTemplate.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ConstructPageTemplate.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/ConstructPageTemplate/ConstructPageTemplate.tsx"],"names":[],"mappings":"~~AAIA~~,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAE/E,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAKxE,QAAA,MAAM,qBAAqB,EAAE,+BAA+B,CAAC,0BAA0B,~~CA+BpF~~,CAAC;AAEJ,eAAe,qBAAqB,CAAC"}
1	+ {"version":3,"file":"ConstructPageTemplate.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/ConstructPageTemplate/ConstructPageTemplate.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAE/E,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAKxE,QAAA,MAAM,qBAAqB,EAAE,+BAA+B,CAAC,0BAA0B,CA0EpF,CAAC;AAEJ,eAAe,qBAAqB,CAAC"}

package/lib/components/PageTemplates/ConstructPageTemplate/ConstructPageTemplate.js CHANGED Viewed

@@ -1,10 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { TabbedPage as CoreTabbedPage, Banner } from '@pega/cosmos-react-core';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useCallback } from 'react';
+import { Banner, OneColumnPage, Progress, TabbedPage, useI18n, useConsolidatedRef } from '@pega/cosmos-react-core';
 import { StyledPage } from '../PageTemplates';
 import ConstructPageHeader from './ConstructPageHeader';
-const ConstructPageTemplate = forwardRef(({ tabs, errorBanner, header, progress = false, testId, isPreview = false, ...restProps }, ref) => {
-    return (_jsx(CoreTabbedPage, { ...restProps, title: !isPreview ? header.title : '', as: StyledPage, header: !isPreview ? (_jsx(ConstructPageHeader, { ...header, progress: progress, testId: testId })) : undefined, tabs: tabs, ref: ref, banners: errorBanner && _jsx(Banner, { testId: testId, ...errorBanner }), scrollContent: true }));
+const ConstructPageTemplate = forwardRef(({ content, tabs, errorBanner, header, progress = false, testId, isPreview = false, ...restProps }, ref) => {
+    const t = useI18n();
+    const pageRef = useConsolidatedRef(ref);
+    const handleHeaderHeightChange = useCallback((height) => {
+        pageRef.current?.style.setProperty('--rule-content-height', `calc(var(--content-height-in-view) - ${height}px)`);
+    }, []);
+    const pageHeader = useMemo(() => !isPreview ? (_jsx(ConstructPageHeader, { ...header, progress: progress, testId: testId, onHeightChange: handleHeaderHeightChange })) : undefined, [isPreview, header, progress, testId, handleHeaderHeightChange]);
+    if (tabs) {
+        return (_jsx(TabbedPage, { ...restProps, title: !isPreview ? header.title : '', as: StyledPage, header: pageHeader, tabs: tabs, ref: pageRef, banners: errorBanner && _jsx(Banner, { testId: testId, ...errorBanner }), scrollContent: true }));
+    }
+    return (_jsx(_Fragment, { children: content ? (_jsx(OneColumnPage, { ...restProps, title: !isPreview ? header.title : '', as: StyledPage, header: pageHeader, progress: progress, a: _jsxs(_Fragment, { children: [progress && _jsx(Progress, { message: t('loading'), placement: 'local' }), content] }), ref: pageRef, banners: errorBanner && _jsx(Banner, { testId: testId, ...errorBanner }), scrollContent: true })) : null }));
 });
 export default ConstructPageTemplate;
 //# sourceMappingURL=ConstructPageTemplate.js.map

package/lib/components/PageTemplates/ConstructPageTemplate/ConstructPageTemplate.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ConstructPageTemplate.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/ConstructPageTemplate/ConstructPageTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;~~AAGnC~~,OAAO,~~EAAE~~,UAAU,~~IAAI~~,~~cAAc~~,~~EAAE~~,~~MAAM~~,~~EAAE~~,MAAM,yBAAyB,CAAC;~~AAI/E~~,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAExD,MAAM,qBAAqB,GACzB,UAAU,CACR,CACE,EACE,IAAI,EACJ,WAAW,EACX,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,MAAM,EACN,SAAS,GAAG,KAAK,EACjB,GAAG,SAAS,EACgC,EAC9C,GAAwB,EACxB,EAAE;IACF,OAAO,~~CACL~~,KAAC,cAAc,~~OACT~~,SAAS,EACb,KAAK,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EACrC,EAAE,EAAE,UAAU,EACd,MAAM,~~EACJ~~,CAAC,~~SAAS~~,CAAC,CAAC,CAAC,~~CACX~~,KAAC,~~mBAAmB~~,~~OAAK~~,~~MAAM~~,EAAE,~~QAAQ~~,EAAE,~~QAAQ~~,EAAE,MAAM,EAAE,~~MAAM~~,~~GAAI~~,~~CACxE~~,CAAC,CAAC,CAAC,SAAS,~~EAEf~~,~~IAAI,~~EAAE,~~IAAI~~,~~EACV~~,GAAG,~~EAAE~~,GAAG,~~EACR~~,OAAO,EAAE,WAAW,IAAI,KAAC,MAAM,IAAC,MAAM,EAAE,MAAM,KAAM,WAAW,GAAI,EACnE,aAAa,SACb,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,eAAe,qBAAqB,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { Ref, PropsWithoutRef } from 'react';\n\nimport { TabbedPage ~~as CoreTabbedPage, Banner~~ } from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport type { ConstructPageTemplateProps } from '../PageTemplate.types';\nimport { StyledPage } from '../PageTemplates';\n\nimport ConstructPageHeader from './ConstructPageHeader';\n\nconst ConstructPageTemplate: ForwardRefForwardPropsComponent<ConstructPageTemplateProps> =\n forwardRef(\n (\n {\n tabs,\n errorBanner,\n header,\n progress = false,\n testId,\n isPreview = false,\n ...restProps\n }: PropsWithoutRef<ConstructPageTemplateProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n ~~return~~ (\n <~~CoreTabbedPage~~\n {...restProps}\n title={!isPreview ? header.title : ''}\n as={StyledPage}\n header={\n ~~!isPreview~~ ? (\n ~~<ConstructPageHeader~~ {...header} progress={progress} ~~testId~~={~~testId~~} ~~/>\n )~~ ~~: undefined~~\n }\n ~~tabs={tabs~~}\n ref={~~ref~~}\n banners={errorBanner && <Banner testId={testId} {...errorBanner} />}\n scrollContent\n />\n );\n }\n );\n\nexport default ConstructPageTemplate;\n"]}
1	+ {"version":3,"file":"ConstructPageTemplate.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/ConstructPageTemplate/ConstructPageTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGzD,OAAO,EACL,MAAM,EACN,aAAa,EACb,QAAQ,EACR,UAAU,EACV,OAAO,EACP,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAExD,MAAM,qBAAqB,GACzB,UAAU,CACR,CACE,EACE,OAAO,EACP,IAAI,EACJ,WAAW,EACX,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,MAAM,EACN,SAAS,GAAG,KAAK,EACjB,GAAG,SAAS,EACgC,EAC9C,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAExC,MAAM,wBAAwB,GAAG,WAAW,CAAC,CAAC,MAAc,EAAE,EAAE;QAC9D,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,WAAW,CAChC,uBAAuB,EACvB,wCAAwC,MAAM,KAAK,CACpD,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,OAAO,CACxB,GAAG,EAAE,CACH,CAAC,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,mBAAmB,OACd,MAAM,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,wBAAwB,GACxC,CACH,CAAC,CAAC,CAAC,SAAS,EACf,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,wBAAwB,CAAC,CAChE,CAAC;IACF,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,CACL,KAAC,UAAU,OACL,SAAS,EACb,KAAK,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EACrC,EAAE,EAAE,UAAU,EACd,MAAM,EAAE,UAAU,EAClB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,OAAO,EACZ,OAAO,EAAE,WAAW,IAAI,KAAC,MAAM,IAAC,MAAM,EAAE,MAAM,KAAM,WAAW,GAAI,EACnE,aAAa,SACb,CACH,CAAC;IACJ,CAAC;IACD,OAAO,CACL,4BACG,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,aAAa,OACR,SAAS,EACb,KAAK,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EACrC,EAAE,EAAE,UAAU,EACd,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,QAAQ,EAClB,CAAC,EACC,8BACG,QAAQ,IAAI,KAAC,QAAQ,IAAC,OAAO,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,SAAS,EAAC,OAAO,GAAG,EACjE,OAAO,IACP,EAEL,GAAG,EAAE,OAAO,EACZ,OAAO,EAAE,WAAW,IAAI,KAAC,MAAM,IAAC,MAAM,EAAE,MAAM,KAAM,WAAW,GAAI,EACnE,aAAa,SACb,CACH,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,eAAe,qBAAqB,CAAC","sourcesContent":["import { forwardRef, useMemo, useCallback } from 'react';\nimport type { Ref, PropsWithoutRef } from 'react';\n\nimport {\n Banner,\n OneColumnPage,\n Progress,\n TabbedPage,\n useI18n,\n useConsolidatedRef\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport type { ConstructPageTemplateProps } from '../PageTemplate.types';\nimport { StyledPage } from '../PageTemplates';\n\nimport ConstructPageHeader from './ConstructPageHeader';\n\nconst ConstructPageTemplate: ForwardRefForwardPropsComponent<ConstructPageTemplateProps> =\n forwardRef(\n (\n {\n content,\n tabs,\n errorBanner,\n header,\n progress = false,\n testId,\n isPreview = false,\n ...restProps\n }: PropsWithoutRef<ConstructPageTemplateProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n const t = useI18n();\n const pageRef = useConsolidatedRef(ref);\n\n const handleHeaderHeightChange = useCallback((height: number) => {\n pageRef.current?.style.setProperty(\n '--rule-content-height',\n `calc(var(--content-height-in-view) - ${height}px)`\n );\n }, []);\n\n const pageHeader = useMemo(\n () =>\n !isPreview ? (\n <ConstructPageHeader\n {...header}\n progress={progress}\n testId={testId}\n onHeightChange={handleHeaderHeightChange}\n />\n ) : undefined,\n [isPreview, header, progress, testId, handleHeaderHeightChange]\n );\n if (tabs) {\n return (\n <TabbedPage\n {...restProps}\n title={!isPreview ? header.title : ''}\n as={StyledPage}\n header={pageHeader}\n tabs={tabs}\n ref={pageRef}\n banners={errorBanner && <Banner testId={testId} {...errorBanner} />}\n scrollContent\n />\n );\n }\n return (\n <>\n {content ? (\n <OneColumnPage\n {...restProps}\n title={!isPreview ? header.title : ''}\n as={StyledPage}\n header={pageHeader}\n progress={progress}\n a={\n <>\n {progress && <Progress message={t('loading')} placement='local' />}\n {content}\n </>\n }\n ref={pageRef}\n banners={errorBanner && <Banner testId={testId} {...errorBanner} />}\n scrollContent\n />\n ) : null}\n </>\n );\n }\n );\n\nexport default ConstructPageTemplate;\n"]}

package/lib/components/PageTemplates/GalleryPage.d.ts CHANGED Viewed

@@ -26,8 +26,8 @@ export interface GalleryPageProps extends NoChildrenProp, PageBannerProps, TestI
     /** Flag to hide filter options */
     hideFilterOptions?: boolean;
 }
-export declare const StyledGalleryPage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledGalleryPage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare const GalleryPage: ForwardRefForwardPropsComponent<GalleryPageProps>;
 export default GalleryPage;
 //# sourceMappingURL=GalleryPage.d.ts.map

package/lib/components/PageTemplates/GalleryPage.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GalleryPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/GalleryPage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAkBlE,OAAO,KAAK,EACV,cAAc,EACd,UAAU,EAGV,+BAA+B,EAChC,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAIrD,UAAU,eAAgB,SAAQ,UAAU;IAC1C,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc,EAAE,eAAe,EAAE,UAAU;IACnF,+CAA+C;IAC/C,UAAU,EAAE,eAAe,CAAC;IAC5B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,+DAA+D;IAC/D,WAAW,EAAE,CAAC,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACjF,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAK1B,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,6BAA6B;IAC7B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,sEAAsE;IACtE,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,kCAAkC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,iBAAiB,~~yGAE7B~~,CAAC;AAEF,eAAO,MAAM,aAAa,~~yGAIxB~~,CAAC;AAqDH,QAAA,MAAM,WAAW,EAAE,+BAA+B,CAAC,gBAAgB,CAsIlE,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"GalleryPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/GalleryPage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAkBlE,OAAO,KAAK,EACV,cAAc,EACd,UAAU,EAGV,+BAA+B,EAChC,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAIrD,UAAU,eAAgB,SAAQ,UAAU;IAC1C,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc,EAAE,eAAe,EAAE,UAAU;IACnF,+CAA+C;IAC/C,UAAU,EAAE,eAAe,CAAC;IAC5B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,+DAA+D;IAC/D,WAAW,EAAE,CAAC,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACjF,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAK1B,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,6BAA6B;IAC7B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,sEAAsE;IACtE,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,kCAAkC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,iBAAiB,6NAE7B,CAAC;AAEF,eAAO,MAAM,aAAa,6NAIxB,CAAC;AAqDH,QAAA,MAAM,WAAW,EAAE,+BAA+B,CAAC,gBAAgB,CAsIlE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/PageTemplates/HeaderActionButtons.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderActionButtons.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/HeaderActionButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;~~AAIhC~~,OAAO,KAAK,EAAE,iBAAiB,~~EAAE~~,MAAM,sBAAsB,CAAC;~~AAE9D~~,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,iBAAiB,~~CA8CxC~~,CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"HeaderActionButtons.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/HeaderActionButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAOhC,OAAO,KAAK,EAAE,iBAAiB,EAAyB,MAAM,sBAAsB,CAAC;AAWrF,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,iBAAiB,CAgExC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/PageTemplates/HeaderActionButtons.js CHANGED Viewed

@@ -1,8 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Flex, MenuButton, useI18n } from '@pega/cosmos-react-core';
-const ActionButtons = ({ primaryAction, progress, testIds, secondaryAction, additionalActions, animatePrimaryButton }) => {
+import { isValidElement } from 'react';
+import { Button, Flex, Icon, MenuButton, registerIcon, useI18n } from '@pega/cosmos-react-core';
+import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
+import { StyledPrimaryActionWrapper } from './PageTemplate.styles';
+registerIcon(timesIcon);
+const isButtonConfig = (action) => {
+    return !!(action && typeof action === 'object' && !isValidElement(action) && 'onClick' in action);
+};
+const ActionButtons = ({ primaryAction, progress, testIds, secondaryAction, additionalActions, animatePrimaryButton, closeAction }) => {
     const t = useI18n();
-    return (_jsxs(Flex, { container: true, children: [primaryAction && (_jsx(Button, { variant: primaryAction.variant, onClick: primaryAction.onClick, disabled: progress || primaryAction.disabled, "data-testid": testIds.primaryAction, animate: animatePrimaryButton, children: primaryAction.primary })), secondaryAction && (_jsx(Button, { variant: 'secondary', onClick: secondaryAction.onClick, disabled: progress || secondaryAction.disabled, "data-testid": testIds.secondaryAction, children: secondaryAction.primary })), additionalActions && additionalActions.length > 0 && (_jsx(MenuButton, { testId: testIds.additionalActions, text: t('actions'), "aria-label": t('actions'), disabled: progress, iconOnly: true, icon: 'more', menu: { items: additionalActions } }))] }));
+    return (_jsxs(Flex, { container: true, children: [primaryAction &&
+                (isButtonConfig(primaryAction) ? (_jsx(Button, { variant: primaryAction.variant, onClick: primaryAction.onClick, disabled: progress || primaryAction.disabled, "data-testid": testIds.primaryAction, animate: animatePrimaryButton, children: primaryAction.primary })) : (_jsx(StyledPrimaryActionWrapper, { hasAdditionalAction: !!additionalActions, children: primaryAction }))), secondaryAction && (_jsx(Button, { variant: 'secondary', onClick: secondaryAction.onClick, disabled: progress || secondaryAction.disabled, "data-testid": testIds.secondaryAction, children: secondaryAction.primary })), additionalActions && additionalActions.length > 0 && (_jsx(MenuButton, { testId: testIds.additionalActions, text: t('actions'), "aria-label": t('actions'), disabled: progress || additionalActions.every(action => action.disabled), iconOnly: true, icon: 'more', menu: { items: additionalActions } })), closeAction && (_jsx(Button, { variant: 'secondary', icon: true, onClick: closeAction.onClick, disabled: closeAction.disabled || progress, "aria-label": t('close'), children: _jsx(Icon, { name: 'times' }) }))] }));
 };
 export default ActionButtons;
 //# sourceMappingURL=HeaderActionButtons.js.map

package/lib/components/PageTemplates/HeaderActionButtons.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderActionButtons.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/HeaderActionButtons.tsx"],"names":[],"mappings":";~~AAEA~~,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;~~AAI5E~~,MAAM,aAAa,GAA0B,CAAC,EAC5C,aAAa,EACb,QAAQ,EACR,OAAO,EACP,eAAe,EACf,iBAAiB,EACjB,oBAAoB,~~EACrB~~,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,~~mBACZ~~,aAAa,~~IAAI~~,~~CAChB~~,KAAC,MAAM,IACL,OAAO,EAAE,aAAa,CAAC,OAAO,EAC9B,OAAO,EAAE,aAAa,CAAC,OAAO,EAC9B,QAAQ,EAAE,QAAQ,IAAI,aAAa,CAAC,QAAQ,iBAC/B,OAAO,CAAC,aAAa,EAClC,OAAO,EAAE,oBAAoB,YAE5B,aAAa,CAAC,OAAO,GACf,CACV,~~EACA~~,eAAe,IAAI,CAClB,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,eAAe,CAAC,OAAO,EAChC,QAAQ,EAAE,QAAQ,IAAI,eAAe,CAAC,QAAQ,iBACjC,OAAO,CAAC,eAAe,YAEnC,eAAe,CAAC,OAAO,GACjB,CACV,EACA,iBAAiB,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,CACpD,KAAC,UAAU,IACT,MAAM,EAAE,OAAO,CAAC,iBAAiB,EACjC,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,gBACN,CAAC,CAAC,SAAS,CAAC,EACxB,QAAQ,EAAE,QAAQ,~~EAClB~~,QAAQ,QACR,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,GAClC,CACH,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import type { FC } from 'react';\n\nimport { Button, Flex, MenuButton, useI18n } from '@pega/cosmos-react-core';\n\nimport type { ActionButtonProps } from './PageTemplate.types';\n\nconst ActionButtons: FC<ActionButtonProps> = ({\n primaryAction,\n progress,\n testIds,\n secondaryAction,\n additionalActions,\n animatePrimaryButton\n}) => {\n const t = useI18n();\n\n return (\n <Flex container>\n {primaryAction && (\n <Button\n variant={primaryAction.variant}\n onClick={primaryAction.onClick}\n disabled={progress \|\| primaryAction.disabled}\n data-testid={testIds.primaryAction}\n animate={animatePrimaryButton}\n >\n {primaryAction.primary}\n </Button>\n )}\n {secondaryAction && (\n <Button\n variant='secondary'\n onClick={secondaryAction.onClick}\n disabled={progress \|\| secondaryAction.disabled}\n data-testid={testIds.secondaryAction}\n >\n {secondaryAction.primary}\n </Button>\n )}\n {additionalActions && additionalActions.length > 0 && (\n <MenuButton\n testId={testIds.additionalActions}\n text={t('actions')}\n aria-label={t('actions')}\n disabled={progress}\n iconOnly\n icon='more'\n menu={{ items: additionalActions }}\n />\n )}\n </Flex>\n );\n};\n\nexport default ActionButtons;\n"]}
1	+ {"version":3,"file":"HeaderActionButtons.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/HeaderActionButtons.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAEhG,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAG1F,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAEnE,YAAY,CAAC,SAAS,CAAC,CAAC;AAExB,MAAM,cAAc,GAAG,CACrB,MAA0C,EAC8B,EAAE;IAC1E,OAAO,CAAC,CAAC,CAAC,MAAM,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,SAAS,IAAI,MAAM,CAAC,CAAC;AACpG,CAAC,CAAC;AAEF,MAAM,aAAa,GAA0B,CAAC,EAC5C,aAAa,EACb,QAAQ,EACR,OAAO,EACP,eAAe,EACf,iBAAiB,EACjB,oBAAoB,EACpB,WAAW,EACZ,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,mBAEZ,aAAa;gBACZ,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAC/B,KAAC,MAAM,IACL,OAAO,EAAE,aAAa,CAAC,OAAO,EAC9B,OAAO,EAAE,aAAa,CAAC,OAAO,EAC9B,QAAQ,EAAE,QAAQ,IAAI,aAAa,CAAC,QAAQ,iBAC/B,OAAO,CAAC,aAAa,EAClC,OAAO,EAAE,oBAAoB,YAE5B,aAAa,CAAC,OAAO,GACf,CACV,CAAC,CAAC,CAAC,CACF,KAAC,0BAA0B,IAAC,mBAAmB,EAAE,CAAC,CAAC,iBAAiB,YACjE,aAAa,GACa,CAC9B,CAAC,EACH,eAAe,IAAI,CAClB,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,eAAe,CAAC,OAAO,EAChC,QAAQ,EAAE,QAAQ,IAAI,eAAe,CAAC,QAAQ,iBACjC,OAAO,CAAC,eAAe,YAEnC,eAAe,CAAC,OAAO,GACjB,CACV,EACA,iBAAiB,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,CACpD,KAAC,UAAU,IACT,MAAM,EAAE,OAAO,CAAC,iBAAiB,EACjC,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,gBACN,CAAC,CAAC,SAAS,CAAC,EACxB,QAAQ,EAAE,QAAQ,IAAI,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EACxE,QAAQ,QACR,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,GAClC,CACH,EACA,WAAW,IAAI,CACd,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,IAAI,QACJ,OAAO,EAAE,WAAW,CAAC,OAAO,EAC5B,QAAQ,EAAE,WAAW,CAAC,QAAQ,IAAI,QAAQ,gBAC9B,CAAC,CAAC,OAAO,CAAC,YAEtB,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,CACV,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import type { FC } from 'react';\nimport { isValidElement } from 'react';\n\nimport { Button, Flex, Icon, MenuButton, registerIcon, useI18n } from '@pega/cosmos-react-core';\nimport type { ButtonProps } from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport type { ActionButtonProps, HeaderActionItemProps } from './PageTemplate.types';\nimport { StyledPrimaryActionWrapper } from './PageTemplate.styles';\n\nregisterIcon(timesIcon);\n\nconst isButtonConfig = (\n action: ActionButtonProps['primaryAction']\n): action is HeaderActionItemProps & { variant?: ButtonProps['variant'] } => {\n return !!(action && typeof action === 'object' && !isValidElement(action) && 'onClick' in action);\n};\n\nconst ActionButtons: FC<ActionButtonProps> = ({\n primaryAction,\n progress,\n testIds,\n secondaryAction,\n additionalActions,\n animatePrimaryButton,\n closeAction\n}) => {\n const t = useI18n();\n\n return (\n <Flex container>\n {/* Primary Action */}\n {primaryAction &&\n (isButtonConfig(primaryAction) ? (\n <Button\n variant={primaryAction.variant}\n onClick={primaryAction.onClick}\n disabled={progress \|\| primaryAction.disabled}\n data-testid={testIds.primaryAction}\n animate={animatePrimaryButton}\n >\n {primaryAction.primary}\n </Button>\n ) : (\n <StyledPrimaryActionWrapper hasAdditionalAction={!!additionalActions}>\n {primaryAction}\n </StyledPrimaryActionWrapper>\n ))}\n {secondaryAction && (\n <Button\n variant='secondary'\n onClick={secondaryAction.onClick}\n disabled={progress \|\| secondaryAction.disabled}\n data-testid={testIds.secondaryAction}\n >\n {secondaryAction.primary}\n </Button>\n )}\n {additionalActions && additionalActions.length > 0 && (\n <MenuButton\n testId={testIds.additionalActions}\n text={t('actions')}\n aria-label={t('actions')}\n disabled={progress \|\| additionalActions.every(action => action.disabled)}\n iconOnly\n icon='more'\n menu={{ items: additionalActions }}\n />\n )}\n {closeAction && (\n <Button\n variant='secondary'\n icon\n onClick={closeAction.onClick}\n disabled={closeAction.disabled \|\| progress}\n aria-label={t('close')}\n >\n <Icon name='times' />\n </Button>\n )}\n </Flex>\n );\n};\n\nexport default ActionButtons;\n"]}