@pega/cosmos-react-build 3.0.0-dev.2.1 → 3.0.0-dev.20.0

package/lib/components/ObjectSelect/ObjectSummary.d.ts

@@ -0,0 +1,24 @@
+import { FC, Ref, PropsWithoutRef, MouseEvent } from 'react';
+import { BaseProps, ForwardProps, FormControlProps, MenuItemProps, DialogProps, OmitStrict } from '@pega/cosmos-react-core';
+interface ObjectSummaryValueProps {
+    id: MenuItemProps['id'];
+    primary: MenuItemProps['primary'];
+    href: string;
+    meta?: string;
+}
+interface ObjectConfigProps extends OmitStrict<DialogProps, 'target'> {
+    label: string;
+}
+export interface ObjectSummaryProps extends BaseProps, Omit<FormControlProps, 'value'> {
+    value: ObjectSummaryValueProps;
+    configuration?: ObjectConfigProps;
+    onDelete: (e: MouseEvent<HTMLButtonElement>) => void;
+    onPreview?: (e: {
+        href: string;
+    }) => void;
+    onLinkClick?: (id: MenuItemProps['id'], e: MouseEvent) => void;
+    ref: Ref<HTMLDivElement>;
+}
+declare const ObjectSummary: FC<PropsWithoutRef<ObjectSummaryProps> & ForwardProps>;
+export default ObjectSummary;
+//# sourceMappingURL=ObjectSummary.d.ts.map

package/lib/components/ObjectSelect/ObjectSummary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectSummary.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAc,GAAG,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGzE,OAAO,EACL,SAAS,EAIT,YAAY,EAGZ,gBAAgB,EAChB,aAAa,EASb,WAAW,EACX,UAAU,EAEX,MAAM,yBAAyB,CAAC;AAMjC,UAAU,uBAAuB;IAC/B,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IACxB,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,iBAAkB,SAAQ,UAAU,CAAC,WAAW,EAAE,QAAQ,CAAC;IACnE,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACpF,KAAK,EAAE,uBAAuB,CAAC;IAC/B,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,QAAQ,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC/D,GAAG,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC1B;AAsDD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAgFzE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/ObjectSelect/ObjectSummary.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { SummaryItem, Button, Icon, StyledFormControl, FormField, useI18n, registerIcon, Text, useDirection, useElement, Link, Dialog, defaultThemeProp, StyledLink } from '@pega/cosmos-react-core';
+import * as times from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
+import * as gear from '@pega/cosmos-react-core/lib/components/Icon/icons/gear.icon';
+registerIcon(times, gear);
+const StyledObjectSummary = styled(StyledFormControl)(({ theme: { base: { spacing, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }, shadow: { focus } } }, meta }) => {
+    return css `
+      padding-block: ${meta ? spacing : '0'};
+      padding-inline-start: ${spacing};
+      min-height: ${hitAreaMouse};
+
+      ${StyledLink}:focus {
+        box-shadow: inset ${focus};
+      }
+
+      @media (pointer: coarse) {
+        min-height: ${hitAreaFinger};
+      }
+    `;
+});
+StyledObjectSummary.defaultProps = defaultThemeProp;
+const StyledMetaText = styled(Text) `
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+`;
+const ScrollContainer = styled.div(({ theme: { base: { spacing } } }) => {
+    return css `
+      max-height: 12rem;
+      overflow: auto;
+      padding: calc(0.25 * ${spacing});
+    `;
+});
+ScrollContainer.defaultProps = defaultThemeProp;
+const ObjectSummary = forwardRef(({ value, configuration, label, disabled, status, readOnly, onDelete, onPreview, onLinkClick, ...restProps }, ref) => {
+    const [buttonEl, setButtonEl] = useElement();
+    const t = useI18n();
+    const { rtl } = useDirection();
+    return (_jsx(FormField, { ...restProps, ref: ref, label: label, status: status, children: _jsx(SummaryItem, { as: StyledObjectSummary, status: status, meta: value.meta, readOnly: readOnly, overflowStrategy: 'ellipsis', primary: _jsx(Link, { href: value.href, "aria-label": `${label} ${value.primary}`, previewable: true, onPreview: onPreview, onClick: onLinkClick ? (e) => onLinkClick(value.id, e) : undefined, children: value.primary }), secondary: value.meta && _jsx(StyledMetaText, { variant: 'secondary', children: value.meta }), actions: _jsxs(_Fragment, { children: [configuration && (_jsx(Button, { ref: setButtonEl, label: configuration?.label, icon: true, variant: 'simple', children: _jsx(Icon, { name: 'gear' }) })), !readOnly && (_jsx(Button, { disabled: disabled, label: t('clear_object_summary', [String(label)]), icon: true, variant: 'simple', onClick: onDelete, children: _jsx(Icon, { name: 'times' }) })), configuration && (_jsx(Dialog, { heading: configuration.heading, placement: rtl ? 'bottom-end' : 'bottom-start', target: buttonEl, onOpen: configuration.onOpen, onClose: configuration.onClose, onSubmit: readOnly || disabled ? undefined : configuration?.onSubmit, loading: configuration.loading, ref: configuration.ref, children: _jsx(ScrollContainer, { children: configuration?.children }) }))] }) }) }));
+});
+export default ObjectSummary;
+//# sourceMappingURL=ObjectSummary.js.map

package/lib/components/ObjectSelect/ObjectSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectSummary.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, Ref, PropsWithoutRef, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  BaseProps,\n  SummaryItem,\n  Button,\n  Icon,\n  ForwardProps,\n  StyledFormControl,\n  FormField,\n  FormControlProps,\n  MenuItemProps,\n  useI18n,\n  registerIcon,\n  Text,\n  useDirection,\n  useElement,\n  Link,\n  Dialog,\n  defaultThemeProp,\n  DialogProps,\n  OmitStrict,\n  StyledLink\n} from '@pega/cosmos-react-core';\nimport * as times from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as gear from '@pega/cosmos-react-core/lib/components/Icon/icons/gear.icon';\n\nregisterIcon(times, gear);\n\ninterface ObjectSummaryValueProps {\n  id: MenuItemProps['id'];\n  primary: MenuItemProps['primary'];\n  href: string;\n  meta?: string;\n}\n\ninterface ObjectConfigProps extends OmitStrict<DialogProps, 'target'> {\n  label: string;\n}\n\nexport interface ObjectSummaryProps extends BaseProps, Omit<FormControlProps, 'value'> {\n  value: ObjectSummaryValueProps;\n  configuration?: ObjectConfigProps;\n  onDelete: (e: MouseEvent<HTMLButtonElement>) => void;\n  onPreview?: (e: { href: string }) => void;\n  onLinkClick?: (id: MenuItemProps['id'], e: MouseEvent) => void;\n  ref: Ref<HTMLDivElement>;\n}\n\nconst StyledObjectSummary = styled(StyledFormControl)<{ meta: string }>(\n  ({\n    theme: {\n      base: {\n        spacing,\n        'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger },\n        shadow: { focus }\n      }\n    },\n    meta\n  }) => {\n    return css`\n      padding-block: ${meta ? spacing : '0'};\n      padding-inline-start: ${spacing};\n      min-height: ${hitAreaMouse};\n\n      ${StyledLink}:focus {\n        box-shadow: inset ${focus};\n      }\n\n      @media (pointer: coarse) {\n        min-height: ${hitAreaFinger};\n      }\n    `;\n  }\n);\n\nStyledObjectSummary.defaultProps = defaultThemeProp;\n\nconst StyledMetaText = styled(Text)`\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n`;\n\nconst ScrollContainer = styled.div(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      max-height: 12rem;\n      overflow: auto;\n      padding: calc(0.25 * ${spacing});\n    `;\n  }\n);\n\nScrollContainer.defaultProps = defaultThemeProp;\n\nconst ObjectSummary: FC<PropsWithoutRef<ObjectSummaryProps> & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      configuration,\n      label,\n      disabled,\n      status,\n      readOnly,\n      onDelete,\n      onPreview,\n      onLinkClick,\n      ...restProps\n    },\n    ref: ObjectSummaryProps['ref']\n  ) => {\n    const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n    const t = useI18n();\n    const { rtl } = useDirection();\n\n    return (\n      <FormField {...restProps} ref={ref} label={label} status={status}>\n        <SummaryItem\n          as={StyledObjectSummary}\n          status={status}\n          meta={value.meta}\n          readOnly={readOnly}\n          overflowStrategy='ellipsis'\n          primary={\n            <Link\n              href={value.href}\n              aria-label={`${label} ${value.primary}`}\n              previewable\n              onPreview={onPreview}\n              onClick={onLinkClick ? (e: MouseEvent) => onLinkClick(value.id, e) : undefined}\n            >\n              {value.primary}\n            </Link>\n          }\n          secondary={\n            value.meta && <StyledMetaText variant='secondary'>{value.meta}</StyledMetaText>\n          }\n          actions={\n            <>\n              {configuration && (\n                <Button ref={setButtonEl} label={configuration?.label} icon variant='simple'>\n                  <Icon name='gear' />\n                </Button>\n              )}\n              {!readOnly && (\n                <Button\n                  disabled={disabled}\n                  label={t('clear_object_summary', [String(label)])}\n                  icon\n                  variant='simple'\n                  onClick={onDelete}\n                >\n                  <Icon name='times' />\n                </Button>\n              )}\n              {configuration && (\n                <Dialog\n                  heading={configuration.heading}\n                  placement={rtl ? 'bottom-end' : 'bottom-start'}\n                  target={buttonEl}\n                  onOpen={configuration.onOpen}\n                  onClose={configuration.onClose}\n                  onSubmit={readOnly || disabled ? undefined : configuration?.onSubmit}\n                  loading={configuration.loading}\n                  ref={configuration.ref}\n                >\n                  <ScrollContainer>{configuration?.children}</ScrollContainer>\n                </Dialog>\n              )}\n            </>\n          }\n        />\n      </FormField>\n    );\n  }\n);\n\nexport default ObjectSummary;\n"]}

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

@@ -0,0 +1,3 @@
+export { default } from './ObjectSelect';
+export { ObjectSelectProps } from './ObjectSelect';
+//# sourceMappingURL=index.d.ts.map

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

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

package/lib/components/ObjectSelect/index.js

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

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

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

package/lib/components/ObjectSelect/useCreateModal.d.ts

@@ -0,0 +1,34 @@
+import { ComponentType } from 'react';
+import { ModalProps } from '@pega/cosmos-react-core';
+export interface UseCreateModalConfig<P extends object = object> {
+    renderer: ComponentType<P>;
+    /**
+     * Called when a user submits a form.
+     */
+    onSubmit: ({ close }: {
+        close: () => void;
+    }) => void;
+    /**
+     * Called when a user cancels a form.
+     */
+    onDismiss: ({ close }: {
+        close: () => void;
+    }) => void;
+    /**
+     * Called before the modal opens.
+     */
+    onBeforeOpen?: ModalProps['onBeforeOpen'];
+    /**
+     * Called after the modal closes.
+     */
+    onAfterClose?: ModalProps['onAfterClose'];
+}
+export interface CreateModalActionProps<P extends object = object> {
+    loading?: boolean;
+    rendererProps: P;
+}
+declare const useCreateModal: <P extends object = object>(config: UseCreateModalConfig<P> | undefined) => {
+    renderModal: ({ rendererProps, loading }: CreateModalActionProps<P>) => void;
+};
+export default useCreateModal;
+//# sourceMappingURL=useCreateModal.d.ts.map

package/lib/components/ObjectSelect/useCreateModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCreateModal.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/useCreateModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,aAAa,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,EAKL,UAAU,EAGX,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAI7D,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IACrD;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;IAC1C;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,CAAC,CAAC;CAClB;AAED,QAAA,MAAM,cAAc;;CAgFnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/ObjectSelect/useCreateModal.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useContext } from 'react';
+import { ModalManagerContext, Button, Modal, useI18n } from '@pega/cosmos-react-core';
+const useCreateModal = (config) => {
+    const t = useI18n();
+    const submittingRef = useRef(false);
+    const modalMethods = useRef();
+    const { create: createModal } = useContext(ModalManagerContext);
+    if (config) {
+        const { renderer: Renderer, onSubmit, onDismiss, onBeforeOpen, onAfterClose } = config;
+        const renderModal = ({ rendererProps, loading = false }) => {
+            let modalContent = null;
+            if (!loading) {
+                modalContent = _jsx(Renderer, { ...rendererProps });
+            }
+            let formActions = null;
+            if (!loading || submittingRef.current) {
+                const close = () => {
+                    modalMethods.current?.dismiss();
+                    modalMethods.current = undefined;
+                };
+                formActions = (_jsxs(_Fragment, { children: [_jsx(Button, { disabled: loading, onClick: () => {
+                                onDismiss({ close });
+                            }, children: t('cancel') }), _jsx(Button, { disabled: loading, type: 'submit', variant: 'primary', onClick: () => {
+                                submittingRef.current = true;
+                                onSubmit({ close });
+                            }, children: t('submit') })] }));
+            }
+            const modalProps = {
+                progress: loading
+                    ? { message: submittingRef.current ? t('submitting') : t('loading') }
+                    : undefined,
+                children: modalContent,
+                actions: formActions,
+                onRequestDismiss: loading && submittingRef.current ? () => false : undefined
+            };
+            if (modalMethods.current) {
+                modalMethods.current.update(modalProps);
+            }
+            else {
+                modalMethods.current = createModal(Modal, {
+                    ...modalProps,
+                    heading: t('create_new'),
+                    onBeforeOpen,
+                    onAfterClose: () => {
+                        onAfterClose?.();
+                        submittingRef.current = false;
+                    }
+                });
+            }
+        };
+        return {
+            renderModal
+        };
+    }
+    return {
+        renderModal: () => { }
+    };
+};
+export default useCreateModal;
+//# sourceMappingURL=useCreateModal.js.map

package/lib/components/ObjectSelect/useCreateModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCreateModal.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/useCreateModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useContext, ReactNode, ComponentType } from 'react';\n\nimport {\n  ModalMethods,\n  ModalManagerContext,\n  Button,\n  OmitStrict,\n  ModalProps,\n  Modal,\n  useI18n\n} from '@pega/cosmos-react-core';\n\nexport interface UseCreateModalConfig<P extends object = object> {\n  /*\n   * A component to render the add new form.\n   */\n  renderer: ComponentType<P>;\n  /**\n   * Called when a user submits a form.\n   */\n  onSubmit: ({ close }: { close: () => void }) => void;\n  /**\n   * Called when a user cancels a form.\n   */\n  onDismiss: ({ close }: { close: () => void }) => void;\n  /**\n   * Called before the modal opens.\n   */\n  onBeforeOpen?: ModalProps['onBeforeOpen'];\n  /**\n   * Called after the modal closes.\n   */\n  onAfterClose?: ModalProps['onAfterClose'];\n}\n\nexport interface CreateModalActionProps<P extends object = object> {\n  loading?: boolean;\n  rendererProps: P;\n}\n\nconst useCreateModal = <P extends object = object>(config: UseCreateModalConfig<P> | undefined) => {\n  const t = useI18n();\n\n  const submittingRef = useRef(false);\n  const modalMethods = useRef<ModalMethods>();\n  const { create: createModal } = useContext(ModalManagerContext);\n\n  if (config) {\n    const { renderer: Renderer, onSubmit, onDismiss, onBeforeOpen, onAfterClose } = config;\n    const renderModal = ({ rendererProps, loading = false }: CreateModalActionProps<P>) => {\n      let modalContent: ReactNode = null;\n\n      if (!loading) {\n        modalContent = <Renderer {...rendererProps} />;\n      }\n      let formActions: ReactNode = null;\n\n      if (!loading || submittingRef.current) {\n        const close = () => {\n          modalMethods.current?.dismiss();\n          modalMethods.current = undefined;\n        };\n\n        formActions = (\n          <>\n            <Button\n              disabled={loading}\n              onClick={() => {\n                onDismiss({ close });\n              }}\n            >\n              {t('cancel')}\n            </Button>\n            <Button\n              disabled={loading}\n              type='submit'\n              variant='primary'\n              onClick={() => {\n                submittingRef.current = true;\n                onSubmit({ close });\n              }}\n            >\n              {t('submit')}\n            </Button>\n          </>\n        );\n      }\n\n      const modalProps: OmitStrict<ModalProps, 'heading'> = {\n        progress: loading\n          ? { message: submittingRef.current ? t('submitting') : t('loading') }\n          : undefined,\n        children: modalContent,\n        actions: formActions,\n        onRequestDismiss: loading && submittingRef.current ? () => false : undefined\n      };\n\n      if (modalMethods.current) {\n        modalMethods.current.update(modalProps);\n      } else {\n        modalMethods.current = createModal(Modal, {\n          ...modalProps,\n          heading: t('create_new'),\n          onBeforeOpen,\n          onAfterClose: () => {\n            onAfterClose?.();\n            submittingRef.current = false;\n          }\n        });\n      }\n    };\n\n    return {\n      renderModal\n    };\n  }\n\n  return {\n    renderModal: () => {}\n  };\n};\n\nexport default useCreateModal;\n"]}

package/lib/components/PageTemplates/GalleryPage.js

@@ -4,20 +4,20 @@ import { Image, Flex, Grid, Button } 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 }, void 0), description && _jsx(StyledDescription, { children: description }, void 0), action && (_jsx(Button, { onClick: (e) => action.onClick(e), children: action.text }, void 0))] }, void 0), image && (_jsx(StyledImageContainer, { children: _jsx(Image, { ...image }, void 0) }, void 0))] }, void 0));
+    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 }) }))] }));
 };
 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)) }, void 0));
+        }, as: StyledSummaryCardList, 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 }, void 0), description && _jsx(StyledDescription, { children: description }, void 0), action && (_jsx(Button, { variant: 'primary', onClick: action.onClick, children: action.text }, void 0))] }, void 0));
+    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 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 }, void 0), a: items && items.length > 0 ? (_jsx(SummaryCardList, { items: items, onItemClick: onItemClick }, void 0)) : (_jsx(EmptyState, { ...emptyState, action: action }, void 0)), scrollContent: true }, void 0));
+    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 }));
 });
 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":";AAAA,OAAO,EAAuB,UAAU,EAAmB,MAAM,OAAO,CAAC;AAEzE,OAAO,EAEL,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,MAAM,EAEP,MAAM,yBAAyB,CAAC;AAEjC,OAAO,WAAiC,MAAM,gBAAgB,CAAC;AAE/D,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,qBAAqB,EACrB,YAAY,EACZ,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,sBAAsB,CAAC;AAqB9B,MAAM,MAAM,GAA+E,CAAC,EAC1F,OAAO,EACP,WAAW,EACX,KAAK,EACL,MAAM,EACP,EAAE,EAAE;IACH,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,YAAY,aAC7E,MAAC,IAAI,IAAC,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAC3C,KAAC,aAAa,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,GAAiB,EACpD,WAAW,IAAI,KAAC,iBAAiB,cAAE,WAAW,GAAqB,EACnE,MAAM,IAAI,CACT,KAAC,MAAM,IAAC,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,YACrE,MAAM,CAAC,IAAI,GACL,CACV,IACI,EACN,KAAK,IAAI,CACR,KAAC,oBAAoB,cACnB,KAAC,KAAK,OAAK,KAAK,GAAI,GACC,CACxB,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,eAAe,GAGhB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE;IAC9B,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE;YACT,IAAI,EAAE,0CAA0C;YAChD,QAAQ,EAAE,OAAO;YACjB,GAAG,EAAE,CAAC;SACP,EACD,EAAE,EAAE,qBAAqB,YAExB,KAAK,IAAI,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,KAAC,WAAW,OAAmB,IAAI,EAAE,OAAO,EAAE,WAAW,IAAvC,IAAI,CAAC,EAAE,CAAoC,CAAC,GACrF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAA2D,CAAC,EAC1E,OAAO,EACP,WAAW,EACX,MAAM,EACP,EAAE,EAAE;IACH,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,EACtF,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAEjB,KAAC,aAAa,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,GAAiB,EACpD,WAAW,IAAI,KAAC,iBAAiB,cAAE,WAAW,GAAqB,EACnE,MAAM,IAAI,CACT,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,YAC9C,MAAM,CAAC,IAAI,GACL,CACV,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,WAAW,GAAwC,UAAU,CACjE,CACE,EACE,OAAO,EACP,WAAW,EACX,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,MAAM,EAC4B,EACpC,GAA4B,EAC5B,EAAE;IACF,OAAO,CACL,KAAC,iBAAiB,IAChB,KAAK,EAAC,EAAE,EACR,GAAG,EAAE,GAAG,EACR,MAAM,EACJ,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAI,EAEtF,CAAC,EACC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC1B,KAAC,eAAe,IAAC,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,GAAI,CAC5D,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,OAAK,UAAU,EAAE,MAAM,EAAE,MAAM,GAAI,CAC/C,EAEH,aAAa,SACb,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","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"]}

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

@@ -2,11 +2,11 @@ import { FunctionComponent, MouseEvent } from 'react';
 import { OneColumnPageProps as CoreOneColumnPageProps, TabbedPageProps as CoreTabbedPageProps, FieldValueListProps, ForwardProps, PageTemplateProps, OmitStrict, StatusProps } from '@pega/cosmos-react-core';
 export interface PageHeaderProps extends Pick<PageTemplateProps, 'title' | 'actions'> {
     metadata?: FieldValueListProps['fields'];
-    branchName?: string;
     status?: {
-        type?: StatusProps['variant'];
+        type: StatusProps['variant'];
         label: string;
     };
+    titleTag?: 'h1' | 'h2';
     additionalInfo?: {
         title: string;
         description?: string;
@@ -19,8 +19,8 @@ export interface OneColumnPageProps extends OmitStrict<CoreOneColumnPageProps, O
 }
 export interface TabbedPageProps extends OmitStrict<CoreTabbedPageProps, OmittedPageProps>, PageHeaderProps {
 }
-export declare const StyledBranch: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledPage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const PageHeader: ({ title, metadata, additionalInfo, actions, status, titleTag }: PageHeaderProps) => JSX.Element;
 export declare const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps>;
 export declare const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps>;
 export {};

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,EAKjB,UAAU,EACX,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,kBAAkB,IAAI,sBAAsB,EAE5C,eAAe,IAAI,mBAAmB,EACtC,mBAAmB,EASnB,YAAY,EAMZ,iBAAiB,EACjB,UAAU,EAEV,WAAW,EAIZ,MAAM,yBAAyB,CAAC;AASjC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACnF,QAAQ,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,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,YAAY,yGAQvB,CAAC;AAUH,eAAO,MAAM,UAAU,yGActB,CAAC;AAqIF,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAcxE,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,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"}

package/lib/components/PageTemplates/PageTemplates.js

@@ -1,66 +1,63 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useState, useEffect } from 'react';
+import { forwardRef, useState, useEffect, 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, StyledLabel, StyledRegion } from '@pega/cosmos-react-core';
+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 * 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 { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
+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) `
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  line-height: 1.15;
 `;
 const StyledInfoPopover = styled(Popover) `
   max-width: 60ch;
   overflow-wrap: break-word;
 `;
-const StyledMetaFields = styled.dl `
-  dd,
-  dt {
-    display: inline;
-  }
-`;
-export const StyledBranch = styled.div(({ theme }) => {
-    return css `
-    border: 0.0625rem solid ${theme.base.colors.gray.light};
-    border-radius: calc(0.5 * ${theme.base['border-radius']});
-    padding: calc(0.5 * ${theme.base.spacing});
-    max-width: 100%;
-    overflow: hidden;
-  `;
-});
-StyledBranch.defaultProps = defaultThemeProp;
 const StyledHeaderContent = styled(SummaryItem) `
   ${StyledSummaryItemActions} {
     align-self: start;
   }
 `;
-export const StyledPage = styled.div(({ theme: { base: { spacing } } }) => {
+export const StyledPage = styled.div(({ theme: { base: { spacing, palette: { 'primary-background': primaryBackground } } } }) => {
     return css `
-      ${StyledRegion} > ${StyledWorkbench},
-      ${StyledTabPanel} > ${StyledWorkbench} {
+      background: ${primaryBackground};
+      height: 100%;
+
+      ${StyledBanner},
+      ${StyledTabs} {
+        margin-block-start: calc(1.5 * ${spacing});
+      }
+
+      ${StyledRegion} ${StyledWorkbench} {
         position: absolute;
-        width: calc(100% - calc(4 * ${spacing}));
+        width: 100%;
+        margin: 0 calc(-2 * ${spacing});
+      }
+
+      ${StyledRegion} ${StyledForm} {
+        max-width: 80ch;
+      }
+
+      ${StyledPageHeader} > ${StyledBreadcrumbs} {
+        margin-block-end: 0;
       }
     `;
 });
 StyledPage.defaultProps = defaultThemeProp;
-const MetaFields = ({ metadata }) => {
-    return (_jsx(Flex, { container: { wrap: 'wrap', colGap: 1, rowGap: 0.25 }, as: StyledMetaFields, children: metadata.map(meta => {
-            return (_jsxs("div", { children: [_jsxs(StyledLabel, { as: 'dt', children: [meta.name, _jsx("span", { "aria-hidden": 'true', children: ": " }, void 0)] }, void 0), _jsx(Text, { variant: 'secondary', as: 'dd', children: meta.value }, void 0)] }, meta.id));
-        }) }, void 0));
-};
-const Branch = ({ branchName, status }) => {
-    return (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: StyledBranch, children: [status && (_jsx(Flex, { item: { shrink: 0 }, as: Status, variant: status.type, children: status.label }, void 0)), _jsx(Flex, { item: { shrink: 0 }, as: Icon, name: 'nodes-down' }, void 0), branchName && _jsx(StyledTextWithEllipsis, { children: branchName }, void 0)] }, void 0));
-};
-const PageHeader = ({ title, metadata, additionalInfo, actions, branchName, status }) => {
+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);
@@ -83,15 +80,26 @@ const PageHeader = ({ title, metadata, additionalInfo, actions, branchName, stat
             popoverEl?.removeEventListener('keydown', closePopover);
         };
     }, [popoverEl]);
-    return (_jsx(StyledHeaderContent, { container: { rowGap: 0.5 }, primary: _jsxs(Flex, { container: { alignItems: 'start', gap: 0.5, wrap: 'wrap' }, children: [_jsxs(Flex, { container: { gap: 0.5 }, item: { shrink: 0 }, children: [_jsx(StyledTextWithEllipsis, { variant: 'h1', children: title }, void 0), 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' }, void 0) }, void 0), _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(Text, { variant: 'h3', children: additionalInfo.title }, void 0), additionalInfo.description && (_jsx(Text, { as: 'p', children: additionalInfo.description }, void 0)), _jsx(FieldValueList, { variant: 'inline', fields: additionalInfo.fields }, void 0)] }, void 0), additionalInfo.onEdit && (_jsx(Button, { onClick: (e) => {
+    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') }, void 0))] }, void 0) }, void 0)] }, void 0))] }, void 0), branchName && status && _jsx(Branch, { branchName: branchName, status: status }, void 0)] }, void 0), secondary: metadata && _jsx(MetaFields, { metadata: metadata }, void 0), actions: actions }, void 0));
+                                                }, 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, a, ...restProps }, ref) => {
-    return (_jsx(CoreTabbedPage, { ...restProps, as: StyledPage, header: _jsx(PageHeader, { ...restProps }, void 0), tabs: tabs, ref: ref, scrollContent: true, a: a }, void 0));
+export const TabbedPage = forwardRef(({ tabs, ...restProps }, ref) => {
+    return (_jsx(CoreTabbedPage, { ...restProps, as: StyledPage, header: _jsx(PageHeader, { ...restProps }), tabs: tabs, ref: ref, scrollContent: true }));
 });
 export const OneColumnPage = forwardRef(({ a, ...restProps }, ref) => {
-    return (_jsx(CoreOneColumnPage, { ...restProps, as: StyledPage, header: _jsx(PageHeader, { ...restProps }, void 0), scrollContent: true, a: a, ref: ref }, void 0));
+    return (_jsx(CoreOneColumnPage, { ...restProps, as: StyledPage, header: _jsx(PageHeader, { ...restProps }), scrollContent: true, a: a, ref: ref }));
 });
 //# sourceMappingURL=PageTemplates.js.map

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  FC,\n  MouseEvent\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  StyledLabel,\n  StyledRegion\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 { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\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  branchName?: string;\n  status?: { type?: StatusProps['variant']; label: string };\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`;\n\nconst StyledInfoPopover: typeof Popover = styled(Popover)`\n  max-width: 60ch;\n  overflow-wrap: break-word;\n`;\n\nconst StyledMetaFields = styled.dl`\n  dd,\n  dt {\n    display: inline;\n  }\n`;\n\nexport const StyledBranch = styled.div(({ theme }) => {\n  return css`\n    border: 0.0625rem solid ${theme.base.colors.gray.light};\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    padding: calc(0.5 * ${theme.base.spacing});\n    max-width: 100%;\n    overflow: hidden;\n  `;\n});\n\nStyledBranch.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: { spacing }\n    }\n  }) => {\n    return css`\n      ${StyledRegion} > ${StyledWorkbench},\n      ${StyledTabPanel} > ${StyledWorkbench} {\n        position: absolute;\n        width: calc(100% - calc(4 * ${spacing}));\n      }\n    `;\n  }\n);\n\nStyledPage.defaultProps = defaultThemeProp;\n\nconst MetaFields: FC<{ metadata: NonNullable<PageHeaderProps['metadata']> }> = ({ metadata }) => {\n  return (\n    <Flex container={{ wrap: 'wrap', colGap: 1, rowGap: 0.25 }} as={StyledMetaFields}>\n      {metadata.map(meta => {\n        return (\n          <div key={meta.id}>\n            <StyledLabel as='dt'>\n              {meta.name}\n              <span aria-hidden='true'>: </span>\n            </StyledLabel>\n            <Text variant='secondary' as='dd'>\n              {meta.value}\n            </Text>\n          </div>\n        );\n      })}\n    </Flex>\n  );\n};\n\nconst Branch: FC<Pick<PageHeaderProps, 'branchName' | 'status'>> = ({ branchName, status }) => {\n  return (\n    <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledBranch}>\n      {status && (\n        <Flex item={{ shrink: 0 }} as={Status} variant={status.type}>\n          {status.label}\n        </Flex>\n      )}\n      <Flex item={{ shrink: 0 }} as={Icon} name='nodes-down' />\n      {branchName && <StyledTextWithEllipsis>{branchName}</StyledTextWithEllipsis>}\n    </Flex>\n  );\n};\n\nconst PageHeader = ({\n  title,\n  metadata,\n  additionalInfo,\n  actions,\n  branchName,\n  status\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\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  return (\n    <StyledHeaderContent\n      container={{ rowGap: 0.5 }}\n      primary={\n        <Flex container={{ alignItems: 'start', gap: 0.5, wrap: 'wrap' }}>\n          <Flex container={{ gap: 0.5 }} item={{ shrink: 0 }}>\n            <StyledTextWithEllipsis variant='h1'>{title}</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                      <Text variant='h3'>{additionalInfo.title}</Text>\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          {branchName && status && <Branch branchName={branchName} status={status} />}\n        </Flex>\n      }\n      secondary={metadata && <MetaFields metadata={metadata} />}\n      actions={actions}\n    />\n  );\n};\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n  ({ tabs, a, ...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        a={a}\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  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"]}

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

@@ -1,13 +1,12 @@
 import { FC, MouseEvent } from 'react';
-import { Text, Card, MetaListProps, NoChildrenProp } from '@pega/cosmos-react-core';
-import { VisualProps } from '../Visual';
+import { Text, Card, MetaListProps, NoChildrenProp, OmitStrict, AvatarProps } from '@pega/cosmos-react-core';
 export interface SummaryCardProps extends NoChildrenProp {
     id: string;
     title: string;
     description?: string;
     onClick?: (id: string, e: MouseEvent<HTMLDivElement>) => void;
     meta: MetaListProps['items'];
-    visual?: VisualProps;
+    visual?: OmitStrict<AvatarProps, 'name' | 'shape' | 'size' | 'status'>;
 }
 export declare const StyledTitle: typeof Text;
 export declare const StyledSummaryCard: typeof Card;

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,EAEJ,aAAa,EACb,cAAc,EACf,MAAM,yBAAyB,CAAC;AAIjC,OAAe,EAAE,WAAW,EAAyB,MAAM,WAAW,CAAC;AAEvE,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,WAAW,CAAC;CACtB;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,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"}

package/lib/components/SummaryCard/SummaryCard.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
-import { Text, Flex, MetaList, Card, defaultThemeProp } from '@pega/cosmos-react-core';
+import { Text, Flex, MetaList, Card, Avatar, defaultThemeProp, StyledAvatar } from '@pega/cosmos-react-core';
 import BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';
 import { StyledDescription } from '../PageTemplates/GalleryPage.styles';
-import Visual, { StyledVisualContainer } from '../Visual';
 export const StyledTitle = styled(Text) `
   overflow: hidden;
   text-overflow: ellipsis;
@@ -18,14 +17,14 @@ export const StyledSummaryCard = styled(Card)(({ theme }) => {
       box-shadow: ${theme.base.shadow.focus};
     }
 
-    ${StyledVisualContainer} {
+    ${StyledAvatar} {
       flex-shrink: 0;
     }
   `;
 });
 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(Visual, { ...visual }, void 0), _jsx(StyledTitle, { variant: 'h3', children: title }, void 0)] }, void 0), _jsx(Flex, { item: { grow: 1 }, children: _jsx(StyledDescription, { children: description }, void 0) }, void 0), _jsx(MetaList, { items: meta, wrapItems: false }, void 0)] }, 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(StyledDescription, { children: description }) }), _jsx(MetaList, { items: meta, wrapItems: false })] }, id));
 };
 export default SummaryCard;
 //# sourceMappingURL=SummaryCard.js.map