@pega/cosmos-react-build 4.0.0-dev.1.2 → 4.0.0-dev.10.0

package/lib/components/PageBanner/PageBanner.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { readableColor } from 'polished';
+import { Flex, Grid, Image, Text, Button, defaultThemeProp, tryCatch, StyledButton, Link, StyledLink, useBreakpoint, ShowMoreLess, StyledShowMoreLessButton } from '@pega/cosmos-react-core';
+export const StyledPageBanner = styled.div(({ theme }) => {
+    const { base: { palette: { 'brand-primary': brandBackground }, 'font-weight': fontWeight, 'content-width': contentWidth } } = theme;
+    const color = tryCatch(() => readableColor(brandBackground));
+    return css `
+    background: ${brandBackground};
+    color: ${color};
+
+    h1:focus-visible {
+      outline: transparent;
+      box-shadow: ${theme.base.shadow.focus};
+    }
+
+    ${StyledButton} {
+      width: max-content;
+    }
+
+    ${StyledButton} + ${StyledButton} {
+      margin-inline-start: 0;
+    }
+
+    ${StyledLink}, ${StyledShowMoreLessButton} {
+      font-weight: ${fontWeight['semi-bold']};
+      color: ${color};
+    }
+
+    p {
+      max-width: ${contentWidth.xl};
+    }
+  `;
+});
+StyledPageBanner.defaultProps = defaultThemeProp;
+export const StyledImageContainer = styled.div `
+  min-width: 100%;
+
+  img {
+    object-fit: contain;
+    max-height: 10rem;
+  }
+`;
+export const StyledActions = styled.div `
+  margin-block-start: auto;
+`;
+const PageBanner = ({ title, description, image, actions, link }) => {
+    const bannerRef = useRef(null);
+    const isMediumOrAbove = useBreakpoint('md', { breakpointRef: bannerRef });
+    const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: bannerRef });
+    return (_jsxs(Grid, { container: {
+            cols: isSmallOrAbove && image ? '1fr 25%' : '1fr',
+            pad: isMediumOrAbove ? [0, 8, 0, 4] : [0, 4],
+            gap: isMediumOrAbove ? 8 : 4
+        }, as: StyledPageBanner, ref: bannerRef, children: [_jsxs(Flex, { container: { direction: 'column', pad: [2, 0], gap: 1 }, children: [_jsx(Text, { variant: 'h1', children: title }), _jsx(ShowMoreLess, { lines: 3, children: _jsx(Text, { as: 'p', children: description }) }), !isSmallOrAbove && image && (_jsx(Flex, { as: StyledImageContainer, container: { justify: 'center', alignItems: 'center' }, children: _jsx(Image, { ...image }) })), !!actions?.length && (_jsxs(Flex, { as: StyledActions, container: { alignItems: 'center', pad: [1, 0, 0, 0], gap: 1, wrap: 'wrap' }, children: [actions.map(action => (_jsx(Button, { onClick: action.onClick, children: action.label }, action.label))), link && _jsx(Link, { href: link.href, children: link.label })] }))] }), isSmallOrAbove && image && (_jsx(Flex, { as: StyledImageContainer, container: { justify: 'end', alignItems: 'center' }, children: _jsx(Image, { ...image }) }))] }));
+};
+export default PageBanner;
+//# sourceMappingURL=PageBanner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageBanner.js","sourceRoot":"","sources":["../../../src/components/PageBanner/PageBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, MouseEventHandler, useRef } 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  ImageProps,\n  Link,\n  StyledLink,\n  useBreakpoint,\n  ShowMoreLess,\n  StyledShowMoreLessButton,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\ninterface Action {\n  label: string;\n  onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface PageBannerProps extends NoChildrenProp {\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  title,\n  description,\n  image,\n  actions,\n  link\n}) => {\n  const bannerRef = useRef<HTMLDivElement>(null);\n\n  const isMediumOrAbove = useBreakpoint('md', { breakpointRef: bannerRef });\n  const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: bannerRef });\n\n  return (\n    <Grid\n      container={{\n        cols: isSmallOrAbove && image ? '1fr 25%' : '1fr',\n        pad: isMediumOrAbove ? [0, 8, 0, 4] : [0, 4],\n        gap: isMediumOrAbove ? 8 : 4\n      }}\n      as={StyledPageBanner}\n      ref={bannerRef}\n    >\n      <Flex container={{ direction: 'column', pad: [2, 0], gap: 1 }}>\n        <Text variant='h1'>{title}</Text>\n        <ShowMoreLess lines={3}>\n          <Text as='p'>{description}</Text>\n        </ShowMoreLess>\n        {!isSmallOrAbove && image && (\n          <Flex as={StyledImageContainer} container={{ justify: 'center', alignItems: 'center' }}>\n            <Image {...image} />\n          </Flex>\n        )}\n        {!!actions?.length && (\n          <Flex\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 && <Link href={link.href}>{link.label}</Link>}\n          </Flex>\n        )}\n      </Flex>\n      {isSmallOrAbove && image && (\n        <Flex as={StyledImageContainer} container={{ justify: 'end', alignItems: 'center' }}>\n          <Image {...image} />\n        </Flex>\n      )}\n    </Grid>\n  );\n};\n\nexport default PageBanner;\n"]}

package/lib/components/PageBanner/index.d.ts

@@ -0,0 +1,3 @@
+export { default, StyledPageBanner } from './PageBanner';
+export type { PageBannerProps } from './PageBanner';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/PageBanner/index.d.ts.map

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

package/lib/components/PageBanner/index.js

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

package/lib/components/PageBanner/index.js.map

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

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

@@ -1,23 +1,23 @@
 import { FC, Ref, MouseEvent } from 'react';
-import { ForwardProps, ImageProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { NoChildrenProp } from '@pega/cosmos-react-core';
 import { SummaryCardProps } from '../SummaryCard';
+import { PageBannerProps } from '../PageBanner';
 interface EmptyStateProps {
     heading: string;
     description?: string;
 }
-export interface GalleryPageProps extends NoChildrenProp {
-    heading: string;
-    description?: string;
-    image?: ImageProps;
-    action: {
-        text: string;
-        onClick: (e: MouseEvent<HTMLButtonElement>) => void;
-    };
+export interface GalleryPageProps extends NoChildrenProp, PageBannerProps {
+    /** Props to render the empty state content. */
     emptyState: EmptyStateProps;
+    /** A list of cards to render as a grid. */
     items?: SummaryCardProps[];
+    /** Callback function that is fired when an item is clicked. */
     onItemClick: (id: SummaryCardProps['id'], e: MouseEvent<HTMLDivElement>) => void;
+    /** Ref for the wrapping element. */
     ref?: Ref<HTMLDivElement>;
 }
-declare const GalleryPage: FC<GalleryPageProps & ForwardProps>;
+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>;
+declare const GalleryPage: FC<GalleryPageProps>;
 export default GalleryPage;
 //# sourceMappingURL=GalleryPage.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"GalleryPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/GalleryPage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EACL,YAAY,EAEZ,UAAU,EAIV,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAY/D,UAAU,eAAe;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACrD,CAAC;IACF,UAAU,EAAE,eAAe,CAAC;IAC5B,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,WAAW,EAAE,CAAC,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACjF,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAmED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CA+BpD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"GalleryPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/GalleryPage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,GAAG,EAAE,UAAU,EAAa,MAAM,OAAO,CAAC;AAGpF,OAAO,EAIL,cAAc,EAOf,MAAM,yBAAyB,CAAC;AAEjC,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,UAAU,eAAe;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc,EAAE,eAAe;IACvE,+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;CAC3B;AAED,eAAO,MAAM,iBAAiB,yGAE7B,CAAC;AAEF,eAAO,MAAM,aAAa,yGAMxB,CAAC;AA+CH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAiDrC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/PageTemplates/GalleryPage.js

@@ -1,23 +1,47 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { Image, Flex, Grid, Button } from '@pega/cosmos-react-core';
+import { forwardRef, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { Flex, Grid, Button, ShowMoreLess, Text, defaultThemeProp, useConfiguration, focusHeadingOrContainer, useConsolidatedRef } from '@pega/cosmos-react-core';
 import SummaryCard from '../SummaryCard';
-import { StyledDescription, StyledHeading, StyledSummaryCardList, StyledBanner, StyledImageContainer, StyledGalleryPage, StyledBannerInfo } from './GalleryPage.styles';
-const Banner = ({ heading, description, image, action }) => {
-    return (_jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, as: StyledBanner, children: [_jsxs(Flex, { as: StyledBannerInfo, item: { grow: 1 }, children: [_jsx(StyledHeading, { variant: 'h1', children: heading }), description && _jsx(StyledDescription, { children: description }), action && (_jsx(Button, { onClick: (e) => action.onClick(e), children: action.text }))] }), image && (_jsx(StyledImageContainer, { children: _jsx(Image, { ...image }) }))] }));
-};
+import PageBanner from '../PageBanner';
+export const StyledGalleryPage = styled.div `
+  min-height: inherit;
+`;
+export const StyledContent = styled.div(({ theme }) => {
+    return css `
+    padding-block: calc(3 * ${theme.base.spacing});
+    padding-inline: calc(4 * ${theme.base.spacing});
+    min-height: 100%;
+  `;
+});
+StyledContent.defaultProps = defaultThemeProp;
 const SummaryCardList = ({ items, onItemClick }) => {
     return (_jsx(Grid, { container: {
             cols: 'repeat(auto-fill, minmax(18.75rem, 1fr))',
             autoRows: '10rem',
             gap: 2
-        }, as: StyledSummaryCardList, children: items && items.map(item => _jsx(SummaryCard, { ...item, onClick: onItemClick }, item.id)) }));
+        }, children: items && items.map(item => _jsx(SummaryCard, { ...item, onClick: onItemClick }, item.id)) }));
 };
-const EmptyState = ({ heading, description, action }) => {
-    return (_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', justify: 'center', rowGap: 2 }, item: { grow: 1 }, children: [_jsx(StyledHeading, { variant: 'h2', children: heading }), description && _jsx(StyledDescription, { children: description }), action && (_jsx(Button, { variant: 'primary', onClick: action.onClick, children: action.text }))] }));
+const EmptyState = ({ heading, description, actions }) => {
+    return (_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', justify: 'center', rowGap: 2 }, item: { grow: 1 }, children: [_jsx(Text, { variant: 'h2', children: heading }), description && (_jsx(ShowMoreLess, { lines: 2, children: _jsx(Text, { as: 'p', children: description }) })), !!actions?.length &&
+                actions.map(action => (_jsx(Button, { variant: 'primary', onClick: action.onClick, children: action.label }, action.label)))] }));
 };
-const GalleryPage = forwardRef(({ heading, description, image, items, onItemClick, emptyState, action }, ref) => {
-    return (_jsx(StyledGalleryPage, { title: '', ref: ref, header: _jsx(Banner, { heading: heading, description: description, action: action, image: image }), a: items && items.length > 0 ? (_jsx(SummaryCardList, { items: items, onItemClick: onItemClick })) : (_jsx(EmptyState, { ...emptyState, action: action })), scrollContent: true }));
+const GalleryPage = forwardRef(({ title, description, image, items, onItemClick, emptyState, actions, link }, ref) => {
+    const { loadedRef } = useConfiguration();
+    const pageRef = useConsolidatedRef(ref);
+    // Focus heading on initial mount
+    useEffect(() => {
+        if (!pageRef.current)
+            return;
+        if (loadedRef.current) {
+            focusHeadingOrContainer(pageRef.current, title);
+        }
+        else {
+            loadedRef.current = true;
+        }
+    }, [title]);
+    const noItems = !items || items.length === 0;
+    return (_jsxs(StyledGalleryPage, { ref: pageRef, children: [_jsx(PageBanner, { title: title, description: description, actions: noItems ? undefined : actions, link: link, image: image }), _jsx(StyledContent, { children: noItems ? (_jsx(EmptyState, { ...emptyState, actions: actions })) : (_jsx(SummaryCardList, { items: items, onItemClick: onItemClick })) })] }));
 });
 export default GalleryPage;
 //# sourceMappingURL=GalleryPage.js.map

package/lib/components/PageTemplates/GalleryPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/GalleryPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, PropsWithoutRef, forwardRef, Ref, MouseEvent } from 'react';\n\nimport {\n  ForwardProps,\n  Image,\n  ImageProps,\n  Flex,\n  Grid,\n  Button,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport SummaryCard, { SummaryCardProps } from '../SummaryCard';\n\nimport {\n  StyledDescription,\n  StyledHeading,\n  StyledSummaryCardList,\n  StyledBanner,\n  StyledImageContainer,\n  StyledGalleryPage,\n  StyledBannerInfo\n} from './GalleryPage.styles';\n\ninterface EmptyStateProps {\n  heading: string;\n  description?: string;\n}\n\nexport interface GalleryPageProps extends NoChildrenProp {\n  heading: string;\n  description?: string;\n  image?: ImageProps;\n  action: {\n    text: string;\n    onClick: (e: MouseEvent<HTMLButtonElement>) => void;\n  };\n  emptyState: EmptyStateProps;\n  items?: SummaryCardProps[];\n  onItemClick: (id: SummaryCardProps['id'], e: MouseEvent<HTMLDivElement>) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst Banner: FC<Pick<GalleryPageProps, 'heading' | 'description' | 'image' | 'action'>> = ({\n  heading,\n  description,\n  image,\n  action\n}) => {\n  return (\n    <Flex container={{ alignItems: 'center', justify: 'between' }} as={StyledBanner}>\n      <Flex as={StyledBannerInfo} item={{ grow: 1 }}>\n        <StyledHeading variant='h1'>{heading}</StyledHeading>\n        {description && <StyledDescription>{description}</StyledDescription>}\n        {action && (\n          <Button onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick(e)}>\n            {action.text}\n          </Button>\n        )}\n      </Flex>\n      {image && (\n        <StyledImageContainer>\n          <Image {...image} />\n        </StyledImageContainer>\n      )}\n    </Flex>\n  );\n};\n\nconst SummaryCardList: FC<{\n  items: GalleryPageProps['items'];\n  onItemClick: GalleryPageProps['onItemClick'];\n}> = ({ items, onItemClick }) => {\n  return (\n    <Grid\n      container={{\n        cols: 'repeat(auto-fill, minmax(18.75rem, 1fr))',\n        autoRows: '10rem',\n        gap: 2\n      }}\n      as={StyledSummaryCardList}\n    >\n      {items && items.map(item => <SummaryCard key={item.id} {...item} onClick={onItemClick} />)}\n    </Grid>\n  );\n};\n\nconst EmptyState: FC<EmptyStateProps & Pick<GalleryPageProps, 'action'>> = ({\n  heading,\n  description,\n  action\n}) => {\n  return (\n    <Flex\n      container={{ direction: 'column', alignItems: 'center', justify: 'center', rowGap: 2 }}\n      item={{ grow: 1 }}\n    >\n      <StyledHeading variant='h2'>{heading}</StyledHeading>\n      {description && <StyledDescription>{description}</StyledDescription>}\n      {action && (\n        <Button variant='primary' onClick={action.onClick}>\n          {action.text}\n        </Button>\n      )}\n    </Flex>\n  );\n};\n\nconst GalleryPage: FC<GalleryPageProps & ForwardProps> = forwardRef(\n  (\n    {\n      heading,\n      description,\n      image,\n      items,\n      onItemClick,\n      emptyState,\n      action\n    }: PropsWithoutRef<GalleryPageProps>,\n    ref: GalleryPageProps['ref']\n  ) => {\n    return (\n      <StyledGalleryPage\n        title=''\n        ref={ref}\n        header={\n          <Banner heading={heading} description={description} action={action} image={image} />\n        }\n        a={\n          items && items.length > 0 ? (\n            <SummaryCardList items={items} onItemClick={onItemClick} />\n          ) : (\n            <EmptyState {...emptyState} action={action} />\n          )\n        }\n        scrollContent\n      />\n    );\n  }\n);\n\nexport default GalleryPage;\n"]}
+{"version":3,"file":"GalleryPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/GalleryPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, PropsWithoutRef, forwardRef, Ref, MouseEvent, useEffect } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Grid,\n  Button,\n  NoChildrenProp,\n  ShowMoreLess,\n  Text,\n  defaultThemeProp,\n  useConfiguration,\n  focusHeadingOrContainer,\n  useConsolidatedRef\n} from '@pega/cosmos-react-core';\n\nimport SummaryCard, { SummaryCardProps } from '../SummaryCard';\nimport PageBanner, { PageBannerProps } from '../PageBanner';\n\ninterface EmptyStateProps {\n  heading: string;\n  description?: string;\n}\n\nexport interface GalleryPageProps extends NoChildrenProp, PageBannerProps {\n  /** Props to render the empty state content. */\n  emptyState: EmptyStateProps;\n  /** A list of cards to render as a grid. */\n  items?: SummaryCardProps[];\n  /** Callback function that is fired when an item is clicked. */\n  onItemClick: (id: SummaryCardProps['id'], e: MouseEvent<HTMLDivElement>) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledGalleryPage = styled.div`\n  min-height: inherit;\n`;\n\nexport const StyledContent = styled.div(({ theme }) => {\n  return css`\n    padding-block: calc(3 * ${theme.base.spacing});\n    padding-inline: calc(4 * ${theme.base.spacing});\n    min-height: 100%;\n  `;\n});\n\nStyledContent.defaultProps = defaultThemeProp;\n\nconst SummaryCardList: FC<{\n  items: GalleryPageProps['items'];\n  onItemClick: GalleryPageProps['onItemClick'];\n}> = ({ items, onItemClick }) => {\n  return (\n    <Grid\n      container={{\n        cols: 'repeat(auto-fill, minmax(18.75rem, 1fr))',\n        autoRows: '10rem',\n        gap: 2\n      }}\n    >\n      {items && items.map(item => <SummaryCard key={item.id} {...item} onClick={onItemClick} />)}\n    </Grid>\n  );\n};\n\nconst EmptyState: FC<EmptyStateProps & Pick<GalleryPageProps, 'actions'>> = ({\n  heading,\n  description,\n  actions\n}) => {\n  return (\n    <Flex\n      container={{ direction: 'column', alignItems: 'center', justify: 'center', rowGap: 2 }}\n      item={{ grow: 1 }}\n    >\n      <Text variant='h2'>{heading}</Text>\n      {description && (\n        <ShowMoreLess lines={2}>\n          <Text as='p'>{description}</Text>\n        </ShowMoreLess>\n      )}\n      {!!actions?.length &&\n        actions.map(action => (\n          <Button key={action.label} variant='primary' onClick={action.onClick}>\n            {action.label}\n          </Button>\n        ))}\n    </Flex>\n  );\n};\n\nconst GalleryPage: FC<GalleryPageProps> = forwardRef(\n  (\n    {\n      title,\n      description,\n      image,\n      items,\n      onItemClick,\n      emptyState,\n      actions,\n      link\n    }: PropsWithoutRef<GalleryPageProps>,\n    ref: GalleryPageProps['ref']\n  ) => {\n    const { loadedRef } = useConfiguration();\n    const pageRef = useConsolidatedRef(ref);\n\n    // Focus heading on initial mount\n    useEffect(() => {\n      if (!pageRef.current) return;\n\n      if (loadedRef.current) {\n        focusHeadingOrContainer(pageRef.current, title);\n      } else {\n        loadedRef.current = true;\n      }\n    }, [title]);\n\n    const noItems = !items || items.length === 0;\n\n    return (\n      <StyledGalleryPage ref={pageRef}>\n        <PageBanner\n          title={title}\n          description={description}\n          actions={noItems ? undefined : actions}\n          link={link}\n          image={image}\n        />\n        <StyledContent>\n          {noItems ? (\n            <EmptyState {...emptyState} actions={actions} />\n          ) : (\n            <SummaryCardList items={items} onItemClick={onItemClick} />\n          )}\n        </StyledContent>\n      </StyledGalleryPage>\n    );\n  }\n);\n\nexport default GalleryPage;\n"]}

package/lib/components/PageTemplates/PageTemplates.d.ts

@@ -14,7 +14,7 @@ export interface PageHeaderProps extends Pick<PageTemplateProps, 'title' | 'acti
         onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;
     };
 }
-declare type OmittedPageProps = 'header' | 'scrollContent';
+type OmittedPageProps = 'header' | 'scrollContent';
 export interface OneColumnPageProps extends OmitStrict<CoreOneColumnPageProps, OmittedPageProps>, PageHeaderProps {
 }
 export interface TabbedPageProps extends OmitStrict<CoreTabbedPageProps, OmittedPageProps>, PageHeaderProps {

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

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAIjB,UAAU,EAGX,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,kBAAkB,IAAI,sBAAsB,EAE5C,eAAe,IAAI,mBAAmB,EACtC,mBAAmB,EASnB,YAAY,EAMZ,iBAAiB,EACjB,UAAU,EAEV,WAAW,EAOZ,MAAM,yBAAyB,CAAC;AAYjC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACnF,QAAQ,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QACtC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACrD,CAAC;CACH;AAED,aAAK,gBAAgB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAEnD,MAAM,WAAW,kBACf,SAAQ,UAAU,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,EAC1D,eAAe;CAAG;AAEtB,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,EACvD,eAAe;CAAG;AAoBtB,eAAO,MAAM,UAAU,yGAiCtB,CAAC;AAIF,eAAO,MAAM,UAAU,mEAOpB,eAAe,gBA0GjB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAaxE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAoB9E,CAAC"}
+{"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,UAAU,EAGX,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,kBAAkB,IAAI,sBAAsB,EAE5C,eAAe,IAAI,mBAAmB,EACtC,mBAAmB,EAQnB,YAAY,EAGZ,iBAAiB,EACjB,UAAU,EAEV,WAAW,EAQZ,MAAM,yBAAyB,CAAC;AAWjC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACnF,QAAQ,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QACtC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACrD,CAAC;CACH;AAED,KAAK,gBAAgB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAEnD,MAAM,WAAW,kBACf,SAAQ,UAAU,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,EAC1D,eAAe;CAAG;AAEtB,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,EACvD,eAAe;CAAG;AA+BtB,eAAO,MAAM,UAAU,yGAiCtB,CAAC;AAIF,eAAO,MAAM,UAAU,mEAOpB,eAAe,gBAkDjB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAaxE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAoB9E,CAAC"}

package/lib/components/PageTemplates/PageTemplates.js

@@ -1,13 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useState, useEffect, useMemo, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { OneColumnPage as CoreOneColumnPage, TabbedPage as CoreTabbedPage, Flex, Status, SummaryItem, Text, Button, Popover, FieldValueList, Icon, defaultThemeProp, useI18n, useDirection, useElement, useOuterEvent, StyledSummaryItemActions, registerIcon, StyledRegion, MetaList, StyledBreadcrumbs, StyledPageHeader, useAfterInitialEffect } from '@pega/cosmos-react-core';
+import { OneColumnPage as CoreOneColumnPage, TabbedPage as CoreTabbedPage, Flex, Status, SummaryItem, Text, Button, Popover, FieldValueList, defaultThemeProp, useI18n, StyledSummaryItemActions, registerIcon, StyledRegion, MetaList, StyledBreadcrumbs, StyledPageHeader, AdditionalInfo } from '@pega/cosmos-react-core';
 import * as nodesDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down.icon';
 import * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';
 import { StyledForm } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';
 import { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner';
 import { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';
-import { StyledDialogTitle } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';
 import { StyledWorkbench } from '../Workbench/Workbench.styles';
 registerIcon(nodesDownIcon, informationIcon);
 const StyledTextWithEllipsis = styled(Text) `
@@ -16,10 +15,14 @@ const StyledTextWithEllipsis = styled(Text) `
   text-overflow: ellipsis;
   line-height: 1.15;
 `;
-const StyledInfoPopover = styled(Popover) `
-  max-width: 60ch;
-  overflow-wrap: break-word;
-`;
+const StyledInfoPopover = styled(Popover)(({ theme: { base: { 'content-width': contentWidth } } }) => {
+    return css `
+      min-width: ${contentWidth.sm};
+      max-width: ${contentWidth.md};
+      overflow-wrap: break-word;
+    `;
+});
+StyledInfoPopover.defaultProps = defaultThemeProp;
 const StyledHeaderContent = styled(SummaryItem) `
   ${StyledSummaryItemActions} {
     align-self: start;
@@ -52,49 +55,13 @@ export const StyledPage = styled.div(({ theme: { base: { spacing, palette: { 'pr
 });
 StyledPage.defaultProps = defaultThemeProp;
 export const PageHeader = ({ title, metadata, additionalInfo, actions, status, titleTag }) => {
-    const [open, setOpen] = useState(false);
-    const [popoverEl, setPopoverRef] = useElement();
-    const [buttonEl, setButtonEl] = useElement();
     const t = useI18n();
-    const { rtl } = useDirection();
-    const popoverTitleRef = useRef(null);
-    useOuterEvent('mousedown', [popoverEl, buttonEl], () => {
-        if (open)
-            setOpen(false);
-    });
-    useEffect(() => {
-        const closePopover = (e) => {
-            if (e.key === 'Escape') {
-                e.preventDefault();
-                setOpen(false);
-                if (e.currentTarget === popoverEl) {
-                    e.stopPropagation();
-                    buttonEl?.focus();
-                }
-            }
-        };
-        document.addEventListener('keydown', closePopover);
-        popoverEl?.addEventListener('keydown', closePopover);
-        return () => {
-            document.removeEventListener('keydown', closePopover);
-            popoverEl?.removeEventListener('keydown', closePopover);
-        };
-    }, [popoverEl]);
-    useAfterInitialEffect(() => {
-        if (open && popoverEl) {
-            if (popoverTitleRef.current) {
-                popoverTitleRef.current.focus();
-            }
-            else {
-                buttonEl?.focus();
-            }
-        }
-    }, [open, popoverEl]);
     const metaListItems = useMemo(() => metadata?.map(({ name, value }) => `${name}: ${value}`), [metadata]);
-    return (_jsx(StyledHeaderContent, { container: true, primary: _jsxs(Flex, { container: { alignItems: 'center', gap: 0.5, wrap: 'wrap' }, children: [_jsxs(Flex, { container: { gap: 0.5 }, item: { shrink: 0 }, children: [_jsx(StyledTextWithEllipsis, { variant: 'h1', forwardedAs: titleTag, children: title }), additionalInfo && (_jsxs(_Fragment, { children: [_jsx(Button, { label: t('additional_info'), variant: 'simple', icon: true, ref: setButtonEl, onClick: () => setOpen(cur => !cur), children: _jsx(Icon, { name: 'information' }) }), _jsx(StyledInfoPopover, { ref: setPopoverRef, show: open, target: buttonEl, placement: rtl ? 'bottom-end' : 'bottom-start', children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'start', gap: 2, pad: 2 }, children: [_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(StyledDialogTitle, { variant: 'h3', tabIndex: -1, ref: popoverTitleRef, children: additionalInfo.title }), additionalInfo.description && (_jsx(Text, { as: 'p', children: additionalInfo.description })), _jsx(FieldValueList, { variant: 'inline', fields: additionalInfo.fields })] }), additionalInfo.onEdit && (_jsx(Button, { onClick: (e) => {
-                                                    setOpen(false);
-                                                    additionalInfo.onEdit?.(e);
-                                                }, children: t('edit_details') }))] }) })] }))] }), status && _jsx(Status, { variant: status.type, children: status.label })] }), secondary: metaListItems && _jsx(MetaList, { items: metaListItems }), actions: actions }));
+    const infoDialogHandle = useRef(null);
+    return (_jsx(StyledHeaderContent, { container: true, primary: _jsxs(Flex, { container: { alignItems: 'center', gap: 0.5, wrap: 'wrap' }, children: [_jsxs(Flex, { container: { gap: 0.5, alignItems: 'end' }, item: { shrink: 0 }, children: [_jsx(StyledTextWithEllipsis, { variant: 'h1', forwardedAs: titleTag, children: title }), additionalInfo && (_jsx(AdditionalInfo, { heading: additionalInfo.title, dialogHandle: infoDialogHandle, children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'start', gap: 2 }, children: [_jsxs(Flex, { container: { direction: 'column', gap: 1 }, item: { grow: 1, alignSelf: 'stretch' }, children: [additionalInfo.description && _jsx(Text, { as: 'p', children: additionalInfo.description }), _jsx(FieldValueList, { variant: 'inline', fields: additionalInfo.fields })] }), additionalInfo.onEdit && (_jsx(Button, { onClick: (e) => {
+                                            infoDialogHandle.current?.close();
+                                            additionalInfo.onEdit?.(e);
+                                        }, children: t('edit_details') }))] }) }))] }), status && _jsx(Status, { variant: status.type, children: status.label })] }), secondary: metaListItems && _jsx(MetaList, { items: metaListItems }), actions: actions }));
 };
 export const TabbedPage = forwardRef(({ tabs, ...restProps }, ref) => {
     return (_jsx(CoreTabbedPage, { ...restProps, as: StyledPage, header: _jsx(PageHeader, { ...restProps }), tabs: tabs, ref: ref, scrollContent: true }));

package/lib/components/PageTemplates/PageTemplates.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  PropsWithoutRef,\n  Ref,\n  FunctionComponent,\n  forwardRef,\n  useState,\n  useEffect,\n  MouseEvent,\n  useMemo,\n  useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  OneColumnPage as CoreOneColumnPage,\n  OneColumnPageProps as CoreOneColumnPageProps,\n  TabbedPage as CoreTabbedPage,\n  TabbedPageProps as CoreTabbedPageProps,\n  FieldValueListProps,\n  Flex,\n  Status,\n  SummaryItem,\n  Text,\n  Button,\n  Popover,\n  FieldValueList,\n  Icon,\n  ForwardProps,\n  defaultThemeProp,\n  useI18n,\n  useDirection,\n  useElement,\n  useOuterEvent,\n  PageTemplateProps,\n  OmitStrict,\n  StyledSummaryItemActions,\n  StatusProps,\n  registerIcon,\n  StyledRegion,\n  MetaList,\n  StyledBreadcrumbs,\n  StyledPageHeader,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport * as nodesDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down.icon';\nimport * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';\nimport { StyledForm } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';\nimport { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';\nimport { StyledDialogTitle } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\n\nimport { StyledWorkbench } from '../Workbench/Workbench.styles';\n\nregisterIcon(nodesDownIcon, informationIcon);\n\nexport interface PageHeaderProps extends Pick<PageTemplateProps, 'title' | 'actions'> {\n  metadata?: FieldValueListProps['fields'];\n  status?: { type: StatusProps['variant']; label: string };\n  titleTag?: 'h1' | 'h2';\n  additionalInfo?: {\n    title: string;\n    description?: string;\n    fields: FieldValueListProps['fields'];\n    onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;\n  };\n}\n\ntype OmittedPageProps = 'header' | 'scrollContent';\n\nexport interface OneColumnPageProps\n  extends OmitStrict<CoreOneColumnPageProps, OmittedPageProps>,\n    PageHeaderProps {}\n\nexport interface TabbedPageProps\n  extends OmitStrict<CoreTabbedPageProps, OmittedPageProps>,\n    PageHeaderProps {}\n\nconst StyledTextWithEllipsis: typeof Text = styled(Text)`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  line-height: 1.15;\n`;\n\nconst StyledInfoPopover: typeof Popover = styled(Popover)`\n  max-width: 60ch;\n  overflow-wrap: break-word;\n`;\n\nconst StyledHeaderContent = styled(SummaryItem)`\n  ${StyledSummaryItemActions} {\n    align-self: start;\n  }\n`;\n\nexport const StyledPage = styled.div(\n  ({\n    theme: {\n      base: {\n        spacing,\n        palette: { 'primary-background': primaryBackground }\n      }\n    }\n  }) => {\n    return css`\n      background: ${primaryBackground};\n      height: 100%;\n\n      ${StyledBanner},\n      ${StyledTabs} {\n        margin-block-start: calc(1.5 * ${spacing});\n      }\n\n      ${StyledRegion} ${StyledWorkbench} {\n        position: absolute;\n        width: 100%;\n        margin: 0 calc(-2 * ${spacing});\n      }\n\n      ${StyledRegion} ${StyledForm} {\n        max-width: 80ch;\n      }\n\n      ${StyledPageHeader} > ${StyledBreadcrumbs} {\n        margin-block-end: 0;\n      }\n    `;\n  }\n);\n\nStyledPage.defaultProps = defaultThemeProp;\n\nexport const PageHeader = ({\n  title,\n  metadata,\n  additionalInfo,\n  actions,\n  status,\n  titleTag\n}: PageHeaderProps) => {\n  const [open, setOpen] = useState(false);\n  const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n  const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n  const t = useI18n();\n  const { rtl } = useDirection();\n  const popoverTitleRef = useRef<HTMLSpanElement>(null);\n\n  useOuterEvent('mousedown', [popoverEl, buttonEl], () => {\n    if (open) setOpen(false);\n  });\n\n  useEffect(() => {\n    const closePopover = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        setOpen(false);\n        if (e.currentTarget === popoverEl) {\n          e.stopPropagation();\n          buttonEl?.focus();\n        }\n      }\n    };\n\n    document.addEventListener('keydown', closePopover);\n    popoverEl?.addEventListener('keydown', closePopover);\n\n    return () => {\n      document.removeEventListener('keydown', closePopover);\n      popoverEl?.removeEventListener('keydown', closePopover);\n    };\n  }, [popoverEl]);\n\n  useAfterInitialEffect(() => {\n    if (open && popoverEl) {\n      if (popoverTitleRef.current) {\n        popoverTitleRef.current.focus();\n      } else {\n        buttonEl?.focus();\n      }\n    }\n  }, [open, popoverEl]);\n\n  const metaListItems = useMemo(\n    () => metadata?.map(({ name, value }) => `${name}: ${value}`),\n    [metadata]\n  );\n\n  return (\n    <StyledHeaderContent\n      container\n      primary={\n        <Flex container={{ alignItems: 'center', gap: 0.5, wrap: 'wrap' }}>\n          <Flex container={{ gap: 0.5 }} item={{ shrink: 0 }}>\n            <StyledTextWithEllipsis variant='h1' forwardedAs={titleTag}>\n              {title}\n            </StyledTextWithEllipsis>\n            {additionalInfo && (\n              <>\n                <Button\n                  label={t('additional_info')}\n                  variant='simple'\n                  icon\n                  ref={setButtonEl}\n                  onClick={() => setOpen(cur => !cur)}\n                >\n                  <Icon name='information' />\n                </Button>\n                <StyledInfoPopover\n                  ref={setPopoverRef}\n                  show={open}\n                  target={buttonEl}\n                  placement={rtl ? 'bottom-end' : 'bottom-start'}\n                >\n                  <Flex container={{ direction: 'column', alignItems: 'start', gap: 2, pad: 2 }}>\n                    <Flex container={{ direction: 'column', gap: 1 }}>\n                      <StyledDialogTitle variant='h3' tabIndex={-1} ref={popoverTitleRef}>\n                        {additionalInfo.title}\n                      </StyledDialogTitle>\n                      {additionalInfo.description && (\n                        <Text as='p'>{additionalInfo.description}</Text>\n                      )}\n                      <FieldValueList variant='inline' fields={additionalInfo.fields} />\n                    </Flex>\n                    {additionalInfo.onEdit && (\n                      <Button\n                        onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                          setOpen(false);\n                          additionalInfo.onEdit?.(e);\n                        }}\n                      >\n                        {t('edit_details')}\n                      </Button>\n                    )}\n                  </Flex>\n                </StyledInfoPopover>\n              </>\n            )}\n          </Flex>\n          {status && <Status variant={status.type}>{status.label}</Status>}\n        </Flex>\n      }\n      secondary={metaListItems && <MetaList items={metaListItems} />}\n      actions={actions}\n    />\n  );\n};\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n  ({ tabs, ...restProps }: PropsWithoutRef<TabbedPageProps>, ref: Ref<HTMLDivElement>) => {\n    return (\n      <CoreTabbedPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        tabs={tabs}\n        ref={ref}\n        scrollContent\n      />\n    );\n  }\n);\n\nexport const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps> = forwardRef(\n  (\n    {\n      a,\n\n      ...restProps\n    }: PropsWithoutRef<OneColumnPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <CoreOneColumnPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        scrollContent\n        a={a}\n        ref={ref}\n      />\n    );\n  }\n);\n"]}
+{"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  PropsWithoutRef,\n  Ref,\n  FunctionComponent,\n  forwardRef,\n  MouseEvent,\n  useMemo,\n  useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  OneColumnPage as CoreOneColumnPage,\n  OneColumnPageProps as CoreOneColumnPageProps,\n  TabbedPage as CoreTabbedPage,\n  TabbedPageProps as CoreTabbedPageProps,\n  FieldValueListProps,\n  Flex,\n  Status,\n  SummaryItem,\n  Text,\n  Button,\n  Popover,\n  FieldValueList,\n  ForwardProps,\n  defaultThemeProp,\n  useI18n,\n  PageTemplateProps,\n  OmitStrict,\n  StyledSummaryItemActions,\n  StatusProps,\n  registerIcon,\n  StyledRegion,\n  MetaList,\n  StyledBreadcrumbs,\n  StyledPageHeader,\n  AdditionalInfo,\n  DialogHandleValue\n} from '@pega/cosmos-react-core';\nimport * as nodesDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down.icon';\nimport * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';\nimport { StyledForm } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';\nimport { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';\n\nimport { StyledWorkbench } from '../Workbench/Workbench.styles';\n\nregisterIcon(nodesDownIcon, informationIcon);\n\nexport interface PageHeaderProps extends Pick<PageTemplateProps, 'title' | 'actions'> {\n  metadata?: FieldValueListProps['fields'];\n  status?: { type: StatusProps['variant']; label: string };\n  titleTag?: 'h1' | 'h2';\n  additionalInfo?: {\n    title: string;\n    description?: string;\n    fields: FieldValueListProps['fields'];\n    onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;\n  };\n}\n\ntype OmittedPageProps = 'header' | 'scrollContent';\n\nexport interface OneColumnPageProps\n  extends OmitStrict<CoreOneColumnPageProps, OmittedPageProps>,\n    PageHeaderProps {}\n\nexport interface TabbedPageProps\n  extends OmitStrict<CoreTabbedPageProps, OmittedPageProps>,\n    PageHeaderProps {}\n\nconst StyledTextWithEllipsis: typeof Text = styled(Text)`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  line-height: 1.15;\n`;\n\nconst StyledInfoPopover = styled(Popover)(\n  ({\n    theme: {\n      base: { 'content-width': contentWidth }\n    }\n  }) => {\n    return css`\n      min-width: ${contentWidth.sm};\n      max-width: ${contentWidth.md};\n      overflow-wrap: break-word;\n    `;\n  }\n);\n\nStyledInfoPopover.defaultProps = defaultThemeProp;\n\nconst StyledHeaderContent = styled(SummaryItem)`\n  ${StyledSummaryItemActions} {\n    align-self: start;\n  }\n`;\n\nexport const StyledPage = styled.div(\n  ({\n    theme: {\n      base: {\n        spacing,\n        palette: { 'primary-background': primaryBackground }\n      }\n    }\n  }) => {\n    return css`\n      background: ${primaryBackground};\n      height: 100%;\n\n      ${StyledBanner},\n      ${StyledTabs} {\n        margin-block-start: calc(1.5 * ${spacing});\n      }\n\n      ${StyledRegion} ${StyledWorkbench} {\n        position: absolute;\n        width: 100%;\n        margin: 0 calc(-2 * ${spacing});\n      }\n\n      ${StyledRegion} ${StyledForm} {\n        max-width: 80ch;\n      }\n\n      ${StyledPageHeader} > ${StyledBreadcrumbs} {\n        margin-block-end: 0;\n      }\n    `;\n  }\n);\n\nStyledPage.defaultProps = defaultThemeProp;\n\nexport const PageHeader = ({\n  title,\n  metadata,\n  additionalInfo,\n  actions,\n  status,\n  titleTag\n}: PageHeaderProps) => {\n  const t = useI18n();\n\n  const metaListItems = useMemo(\n    () => metadata?.map(({ name, value }) => `${name}: ${value}`),\n    [metadata]\n  );\n\n  const infoDialogHandle = useRef<DialogHandleValue>(null);\n\n  return (\n    <StyledHeaderContent\n      container\n      primary={\n        <Flex container={{ alignItems: 'center', gap: 0.5, wrap: 'wrap' }}>\n          <Flex container={{ gap: 0.5, alignItems: 'end' }} item={{ shrink: 0 }}>\n            <StyledTextWithEllipsis variant='h1' forwardedAs={titleTag}>\n              {title}\n            </StyledTextWithEllipsis>\n            {additionalInfo && (\n              <AdditionalInfo heading={additionalInfo.title} dialogHandle={infoDialogHandle}>\n                <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n                  <Flex\n                    container={{ direction: 'column', gap: 1 }}\n                    item={{ grow: 1, alignSelf: 'stretch' }}\n                  >\n                    {additionalInfo.description && <Text as='p'>{additionalInfo.description}</Text>}\n                    <FieldValueList variant='inline' fields={additionalInfo.fields} />\n                  </Flex>\n                  {additionalInfo.onEdit && (\n                    <Button\n                      onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                        infoDialogHandle.current?.close();\n                        additionalInfo.onEdit?.(e);\n                      }}\n                    >\n                      {t('edit_details')}\n                    </Button>\n                  )}\n                </Flex>\n              </AdditionalInfo>\n            )}\n          </Flex>\n          {status && <Status variant={status.type}>{status.label}</Status>}\n        </Flex>\n      }\n      secondary={metaListItems && <MetaList items={metaListItems} />}\n      actions={actions}\n    />\n  );\n};\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n  ({ tabs, ...restProps }: PropsWithoutRef<TabbedPageProps>, ref: Ref<HTMLDivElement>) => {\n    return (\n      <CoreTabbedPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        tabs={tabs}\n        ref={ref}\n        scrollContent\n      />\n    );\n  }\n);\n\nexport const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps> = forwardRef(\n  (\n    {\n      a,\n\n      ...restProps\n    }: PropsWithoutRef<OneColumnPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <CoreOneColumnPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        scrollContent\n        a={a}\n        ref={ref}\n      />\n    );\n  }\n);\n"]}

package/lib/components/PageTemplates/ShowcasePage.d.ts

@@ -0,0 +1,16 @@
+import { FC, Ref, ReactNode } from 'react';
+import { NoChildrenProp } from '@pega/cosmos-react-core';
+import { PageBannerProps } from '../PageBanner';
+export interface ShowcasePageProps extends NoChildrenProp, PageBannerProps {
+    /** Content to render in the main region of the page. */
+    content: ReactNode;
+    /** Banners will render above the main content if they are provided. */
+    banners?: ReactNode;
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const StyledShowcasePage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const ShowcasePage: FC<ShowcasePageProps>;
+export default ShowcasePage;
+//# sourceMappingURL=ShowcasePage.d.ts.map

package/lib/components/PageTemplates/ShowcasePage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShowcasePage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/ShowcasePage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,GAAG,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAGnF,OAAO,EAEL,cAAc,EAIf,MAAM,yBAAyB,CAAC;AAEjC,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,EAAE,eAAe;IACxE,wDAAwD;IACxD,OAAO,EAAE,SAAS,CAAC;IACnB,uEAAuE;IACvE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB,yGAE9B,CAAC;AAEF,eAAO,MAAM,aAAa,yGAEzB,CAAC;AAEF,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA2CvC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/PageTemplates/ShowcasePage.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect } from 'react';
+import styled from 'styled-components';
+import { Flex, focusHeadingOrContainer, useConfiguration, useConsolidatedRef } from '@pega/cosmos-react-core';
+import PageBanner from '../PageBanner';
+export const StyledShowcasePage = styled.div `
+  min-height: inherit;
+`;
+export const StyledContent = styled.div `
+  min-height: 100%;
+`;
+const ShowcasePage = forwardRef(({ title, description, image, actions, link, content, banners }, ref) => {
+    const { loadedRef } = useConfiguration();
+    const pageRef = useConsolidatedRef(ref);
+    // Focus heading on initial mount
+    useEffect(() => {
+        if (!pageRef.current)
+            return;
+        if (loadedRef.current) {
+            focusHeadingOrContainer(pageRef.current, title);
+        }
+        else {
+            loadedRef.current = true;
+        }
+    }, [title]);
+    return (_jsxs(StyledShowcasePage, { ref: pageRef, children: [_jsx(PageBanner, { title: title, description: description, actions: actions, link: link, image: image }), _jsxs(Flex, { as: StyledContent, container: { direction: 'column', pad: [2, 4], gap: 2 }, children: [banners, content] })] }));
+});
+export default ShowcasePage;
+//# sourceMappingURL=ShowcasePage.js.map

package/lib/components/PageTemplates/ShowcasePage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShowcasePage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/ShowcasePage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,UAAU,EAAkB,SAAS,EAAE,MAAM,OAAO,CAAC;AACnF,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EAEJ,uBAAuB,EACvB,gBAAgB,EAChB,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,UAA+B,MAAM,eAAe,CAAC;AAW5D,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE3C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEtC,CAAC;AAEF,MAAM,YAAY,GAA0B,UAAU,CACpD,CACE,EACE,KAAK,EACL,WAAW,EACX,KAAK,EACL,OAAO,EACP,IAAI,EACJ,OAAO,EACP,OAAO,EAC4B,EACrC,GAA6B,EAC7B,EAAE;IACF,MAAM,EAAE,SAAS,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACzC,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAExC,iCAAiC;IACjC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,CAAC,OAAO;YAAE,OAAO;QAE7B,IAAI,SAAS,CAAC,OAAO,EAAE;YACrB,uBAAuB,CAAC,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;SACjD;aAAM;YACL,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,MAAC,kBAAkB,IAAC,GAAG,EAAE,OAAO,aAC9B,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,GACZ,EACF,MAAC,IAAI,IAAC,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,aAC7E,OAAO,EACP,OAAO,IACH,IACY,CACtB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FC, PropsWithoutRef, forwardRef, Ref, ReactNode, useEffect } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Flex,\n  NoChildrenProp,\n  focusHeadingOrContainer,\n  useConfiguration,\n  useConsolidatedRef\n} from '@pega/cosmos-react-core';\n\nimport PageBanner, { PageBannerProps } from '../PageBanner';\n\nexport interface ShowcasePageProps extends NoChildrenProp, PageBannerProps {\n  /** Content to render in the main region of the page. */\n  content: ReactNode;\n  /** Banners will render above the main content if they are provided. */\n  banners?: ReactNode;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledShowcasePage = styled.div`\n  min-height: inherit;\n`;\n\nexport const StyledContent = styled.div`\n  min-height: 100%;\n`;\n\nconst ShowcasePage: FC<ShowcasePageProps> = forwardRef(\n  (\n    {\n      title,\n      description,\n      image,\n      actions,\n      link,\n      content,\n      banners\n    }: PropsWithoutRef<ShowcasePageProps>,\n    ref: ShowcasePageProps['ref']\n  ) => {\n    const { loadedRef } = useConfiguration();\n    const pageRef = useConsolidatedRef(ref);\n\n    // Focus heading on initial mount\n    useEffect(() => {\n      if (!pageRef.current) return;\n\n      if (loadedRef.current) {\n        focusHeadingOrContainer(pageRef.current, title);\n      } else {\n        loadedRef.current = true;\n      }\n    }, [title]);\n\n    return (\n      <StyledShowcasePage ref={pageRef}>\n        <PageBanner\n          title={title}\n          description={description}\n          actions={actions}\n          link={link}\n          image={image}\n        />\n        <Flex as={StyledContent} container={{ direction: 'column', pad: [2, 4], gap: 2 }}>\n          {banners}\n          {content}\n        </Flex>\n      </StyledShowcasePage>\n    );\n  }\n);\n\nexport default ShowcasePage;\n"]}

package/lib/components/PageTemplates/index.d.ts

@@ -1,5 +1,7 @@
 export { OneColumnPage } from './PageTemplates';
 export { TabbedPage } from './PageTemplates';
-export { default as GalleryPage } from './GalleryPage';
+export { default as GalleryPage, StyledGalleryPage } from './GalleryPage';
 export { GalleryPageProps } from './GalleryPage';
+export { default as ShowcasePage, StyledShowcasePage } from './ShowcasePage';
+export { ShowcasePageProps } from './ShowcasePage';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/PageTemplates/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/components/PageTemplates/index.js

@@ -1,4 +1,5 @@
 export { OneColumnPage } from './PageTemplates';
 export { TabbedPage } from './PageTemplates';
-export { default as GalleryPage } from './GalleryPage';
+export { default as GalleryPage, StyledGalleryPage } from './GalleryPage';
+export { default as ShowcasePage, StyledShowcasePage } from './ShowcasePage';
 //# sourceMappingURL=index.js.map

package/lib/components/PageTemplates/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { OneColumnPage } from './PageTemplates';\nexport { TabbedPage } from './PageTemplates';\nexport { default as GalleryPage } from './GalleryPage';\nexport { GalleryPageProps } from './GalleryPage';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { OneColumnPage } from './PageTemplates';\nexport { TabbedPage } from './PageTemplates';\nexport { default as GalleryPage, StyledGalleryPage } from './GalleryPage';\nexport { GalleryPageProps } from './GalleryPage';\nexport { default as ShowcasePage, StyledShowcasePage } from './ShowcasePage';\nexport { ShowcasePageProps } from './ShowcasePage';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"SummaryCard.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryCard/SummaryCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EACL,IAAI,EAGJ,IAAI,EAGJ,aAAa,EACb,cAAc,EACd,UAAU,EACV,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC9D,IAAI,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,UAAU,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC;CACxE;AAED,eAAO,MAAM,WAAW,EAAE,OAAO,IAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,IAarC,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAkBrC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SummaryCard.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryCard/SummaryCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EACL,IAAI,EAGJ,IAAI,EAGJ,aAAa,EACb,cAAc,EACd,UAAU,EACV,WAAW,EAGZ,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC9D,IAAI,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,UAAU,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC;CACxE;AAED,eAAO,MAAM,WAAW,EAAE,OAAO,IAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,IAerC,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAkBrC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/SummaryCard/SummaryCard.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
-import { Text, Flex, MetaList, Card, Avatar, defaultThemeProp, StyledAvatar } from '@pega/cosmos-react-core';
+import { Text, Flex, MetaList, Card, Avatar, defaultThemeProp, StyledAvatar, ShowMoreLess } from '@pega/cosmos-react-core';
 import BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';
-import { StyledDescription } from '../PageTemplates/GalleryPage.styles';
 export const StyledTitle = styled(Text) `
   overflow: hidden;
   text-overflow: ellipsis;
@@ -11,6 +10,8 @@ export const StyledTitle = styled(Text) `
 export const StyledSummaryCard = styled(Card)(({ theme }) => {
     return css `
     padding: calc(2 * ${theme.base.spacing});
+    overflow-y: auto;
+
     &:hover,
     &:focus {
       cursor: pointer;
@@ -24,7 +25,7 @@ export const StyledSummaryCard = styled(Card)(({ theme }) => {
 });
 StyledSummaryCard.defaultProps = defaultThemeProp;
 const SummaryCard = ({ id, title, description, visual, meta, onClick }) => {
-    return (_jsxs(BareRoleButton, { container: { direction: 'column', rowGap: 2, justify: 'between' }, as: StyledSummaryCard, onClick: (e) => onClick?.(id, e), children: [_jsxs(Flex, { container: { alignItems: 'center', colGap: 1 }, children: [visual && _jsx(Avatar, { ...visual, shape: 'squircle', name: title }), _jsx(StyledTitle, { variant: 'h3', children: title })] }), _jsx(Flex, { item: { grow: 1 }, children: _jsx(StyledDescription, { children: description }) }), _jsx(MetaList, { items: meta, wrapItems: false })] }, id));
+    return (_jsxs(BareRoleButton, { container: { direction: 'column', rowGap: 2, justify: 'between' }, as: StyledSummaryCard, onClick: (e) => onClick?.(id, e), children: [_jsxs(Flex, { container: { alignItems: 'center', colGap: 1 }, children: [visual && _jsx(Avatar, { ...visual, shape: 'squircle', name: title }), _jsx(StyledTitle, { variant: 'h3', children: title })] }), _jsx(Flex, { item: { grow: 1 }, children: _jsx(ShowMoreLess, { lines: 1, children: description }) }), _jsx(MetaList, { items: meta, wrapItems: false })] }, id));
 };
 export default SummaryCard;
 //# sourceMappingURL=SummaryCard.js.map

package/lib/components/SummaryCard/SummaryCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryCard.js","sourceRoot":"","sources":["../../../src/components/SummaryCard/SummaryCard.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,gBAAgB,EAKhB,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,cAAc,MAAM,8DAA8D,CAAC;AAE1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAWxE,MAAM,CAAC,MAAM,WAAW,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAInD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvE,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO;;;;oBAItB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;MAGrC,YAAY;;;GAGf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAyB,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;IAC9F,OAAO,CACL,MAAC,cAAc,IACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EACjE,EAAE,EAAE,iBAAiB,EAErB,OAAO,EAAE,CAAC,CAA6B,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,aAE5D,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,aACjD,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,EAAE,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,KAAK,GAAI,EAC/D,KAAC,WAAW,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAe,IAC1C,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,KAAC,iBAAiB,cAAE,WAAW,GAAqB,GAC/C,EACP,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,GAAI,KAVtC,EAAE,CAWQ,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FC, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Text,\n  Flex,\n  MetaList,\n  Card,\n  Avatar,\n  defaultThemeProp,\n  MetaListProps,\n  NoChildrenProp,\n  OmitStrict,\n  AvatarProps,\n  StyledAvatar\n} from '@pega/cosmos-react-core';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport { StyledDescription } from '../PageTemplates/GalleryPage.styles';\n\nexport interface SummaryCardProps extends NoChildrenProp {\n  id: string;\n  title: string;\n  description?: string;\n  onClick?: (id: string, e: MouseEvent<HTMLDivElement>) => void;\n  meta: MetaListProps['items'];\n  visual?: OmitStrict<AvatarProps, 'name' | 'shape' | 'size' | 'status'>;\n}\n\nexport const StyledTitle: typeof Text = styled(Text)`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nexport const StyledSummaryCard: typeof Card = styled(Card)(({ theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n    &:hover,\n    &:focus {\n      cursor: pointer;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    ${StyledAvatar} {\n      flex-shrink: 0;\n    }\n  `;\n});\n\nStyledSummaryCard.defaultProps = defaultThemeProp;\n\nconst SummaryCard: FC<SummaryCardProps> = ({ id, title, description, visual, meta, onClick }) => {\n  return (\n    <BareRoleButton\n      container={{ direction: 'column', rowGap: 2, justify: 'between' }}\n      as={StyledSummaryCard}\n      key={id}\n      onClick={(e: MouseEvent<HTMLDivElement>) => onClick?.(id, e)}\n    >\n      <Flex container={{ alignItems: 'center', colGap: 1 }}>\n        {visual && <Avatar {...visual} shape='squircle' name={title} />}\n        <StyledTitle variant='h3'>{title}</StyledTitle>\n      </Flex>\n      <Flex item={{ grow: 1 }}>\n        <StyledDescription>{description}</StyledDescription>\n      </Flex>\n      <MetaList items={meta} wrapItems={false} />\n    </BareRoleButton>\n  );\n};\n\nexport default SummaryCard;\n"]}
+{"version":3,"file":"SummaryCard.js","sourceRoot":"","sources":["../../../src/components/SummaryCard/SummaryCard.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,gBAAgB,EAKhB,YAAY,EACZ,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,cAAc,MAAM,8DAA8D,CAAC;AAW1F,MAAM,CAAC,MAAM,WAAW,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAInD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvE,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;oBAMtB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;MAGrC,YAAY;;;GAGf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAyB,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;IAC9F,OAAO,CACL,MAAC,cAAc,IACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EACjE,EAAE,EAAE,iBAAiB,EAErB,OAAO,EAAE,CAAC,CAA6B,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,aAE5D,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,aACjD,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,EAAE,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,KAAK,GAAI,EAC/D,KAAC,WAAW,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAe,IAC1C,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,KAAC,YAAY,IAAC,KAAK,EAAE,CAAC,YAAG,WAAW,GAAgB,GAC/C,EACP,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,GAAI,KAVtC,EAAE,CAWQ,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FC, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Text,\n  Flex,\n  MetaList,\n  Card,\n  Avatar,\n  defaultThemeProp,\n  MetaListProps,\n  NoChildrenProp,\n  OmitStrict,\n  AvatarProps,\n  StyledAvatar,\n  ShowMoreLess\n} from '@pega/cosmos-react-core';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nexport interface SummaryCardProps extends NoChildrenProp {\n  id: string;\n  title: string;\n  description?: string;\n  onClick?: (id: string, e: MouseEvent<HTMLDivElement>) => void;\n  meta: MetaListProps['items'];\n  visual?: OmitStrict<AvatarProps, 'name' | 'shape' | 'size' | 'status'>;\n}\n\nexport const StyledTitle: typeof Text = styled(Text)`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nexport const StyledSummaryCard: typeof Card = styled(Card)(({ theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n    overflow-y: auto;\n\n    &:hover,\n    &:focus {\n      cursor: pointer;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    ${StyledAvatar} {\n      flex-shrink: 0;\n    }\n  `;\n});\n\nStyledSummaryCard.defaultProps = defaultThemeProp;\n\nconst SummaryCard: FC<SummaryCardProps> = ({ id, title, description, visual, meta, onClick }) => {\n  return (\n    <BareRoleButton\n      container={{ direction: 'column', rowGap: 2, justify: 'between' }}\n      as={StyledSummaryCard}\n      key={id}\n      onClick={(e: MouseEvent<HTMLDivElement>) => onClick?.(id, e)}\n    >\n      <Flex container={{ alignItems: 'center', colGap: 1 }}>\n        {visual && <Avatar {...visual} shape='squircle' name={title} />}\n        <StyledTitle variant='h3'>{title}</StyledTitle>\n      </Flex>\n      <Flex item={{ grow: 1 }}>\n        <ShowMoreLess lines={1}>{description}</ShowMoreLess>\n      </Flex>\n      <MetaList items={meta} wrapItems={false} />\n    </BareRoleButton>\n  );\n};\n\nexport default SummaryCard;\n"]}

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

@@ -1,8 +1,8 @@
 import { ReactNode, Ref } from 'react';
 import type { Action } from '@pega/cosmos-react-core';
 import { IconName } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';
-export declare type ActionName = 'undo' | 'redo';
-export declare type ToolbarAction = Pick<Action, 'id' | 'onClick' | 'disabled'>;
+export type ActionName = 'undo' | 'redo';
+export type ToolbarAction = Pick<Action, 'id' | 'onClick' | 'disabled'>;
 export interface UtilityPanelProps {
     /** Utility panel id. */
     id: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Workbench.types.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,uDAAuD,CAAC;AAEjF,oBAAY,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AACzC,oBAAY,aAAa,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAExE,MAAM,WAAW,iBAAiB;IAChC,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,IAAI,EAAE,QAAQ,CAAC;IACf,iCAAiC;IACjC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,uBAAuB;IACtC,wDAAwD;IACxD,IAAI,EAAE,OAAO,CAAC;IACd,yCAAyC;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,OAAO,EAAE,SAAS,CAAC;IACnB,yDAAyD;IACzD,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IAC3B,iCAAiC;IACjC,cAAc,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;CAC7D;AAED,MAAM,WAAW,cAAc;IAC7B,wCAAwC;IACxC,QAAQ,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACpC,sCAAsC;IACtC,uBAAuB,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;IAC7D,iCAAiC;IACjC,kBAAkB,EAAE,uBAAuB,CAAC;IAC5C,6BAA6B;IAC7B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
+{"version":3,"file":"Workbench.types.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,uDAAuD,CAAC;AAEjF,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AACzC,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAExE,MAAM,WAAW,iBAAiB;IAChC,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,IAAI,EAAE,QAAQ,CAAC;IACf,iCAAiC;IACjC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,uBAAuB;IACtC,wDAAwD;IACxD,IAAI,EAAE,OAAO,CAAC;IACd,yCAAyC;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,OAAO,EAAE,SAAS,CAAC;IACnB,yDAAyD;IACzD,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IAC3B,iCAAiC;IACjC,cAAc,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;CAC7D;AAED,MAAM,WAAW,cAAc;IAC7B,wCAAwC;IACxC,QAAQ,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACpC,sCAAsC;IACtC,uBAAuB,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;IAC7D,iCAAiC;IACjC,kBAAkB,EAAE,uBAAuB,CAAC;IAC5C,6BAA6B;IAC7B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}