npm - @pega/cosmos-react-build - Versions diffs - 3.0.0-dev.6.0 → 3.0.0-dev.7.0 - Mend

@pega/cosmos-react-build 3.0.0-dev.6.0 → 3.0.0-dev.7.0

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

Files changed (54) hide show

package/lib/components/ObjectPreview/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ObjectPreview/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,cAAc,iBAAiB,CAAC","sourcesContent":["export { default as ObjectPreview } from './ObjectPreview';\nexport * from './ObjectPreview';\n"]}

package/lib/components/ObjectSelect/ObjectSelect.d.ts CHANGED Viewed

@@ -14,6 +14,8 @@ export interface ObjectSelectProps extends BaseProps, NoChildrenProp, Omit<FormC
     onPreview?: (id: MenuItemProps['id'], e: {
         href: string;
     }) => void;
+    /** Callback fired on click of the link inside summary item */
+    onLinkClick?: ObjectSummaryProps['onLinkClick'];
     /** Ref placed on the element. */
     ref?: Ref<HTMLDivElement>;
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ObjectSelect.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,GAAG,EAAU,MAAM,OAAO,CAAC;AAEnE,OAAO,EACL,SAAS,EACT,YAAY,EAEZ,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,SAAS,EACV,MAAM,yBAAyB,CAAC;AAGjC,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEpE,MAAM,WAAW,iBACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACjC,sEAAsE;IACtE,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1B,sCAAsC;IACtC,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC,sCAAsC;IACtC,aAAa,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACpD,oFAAoF;IACpF,QAAQ,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,4EAA4E;IAC5E,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,iCAAiC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,~~CAwCrE~~,CAAC;AAEF,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"ObjectSelect.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,GAAG,EAAU,MAAM,OAAO,CAAC;AAEnE,OAAO,EACL,SAAS,EACT,YAAY,EAEZ,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,SAAS,EACV,MAAM,yBAAyB,CAAC;AAGjC,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEpE,MAAM,WAAW,iBACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACjC,sEAAsE;IACtE,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1B,sCAAsC;IACtC,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC,sCAAsC;IACtC,aAAa,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACpD,oFAAoF;IACpF,QAAQ,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,4EAA4E;IAC5E,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,8DAA8D;IAC9D,WAAW,CAAC,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;IAChD,iCAAiC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAyCrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -3,7 +3,7 @@ import { forwardRef, useRef } from 'react';
 import { useAfterInitialEffect } from '@pega/cosmos-react-core';
 import ObjectPicker from './ObjectPicker';
 import ObjectSummary from './ObjectSummary';
-const ObjectSelect = forwardRef(({ items, value, configuration, disabled, onChange, onPreview, ...restProps }, ref) => {
+const ObjectSelect = forwardRef(({ items, value, configuration, disabled, onChange, onPreview, onLinkClick, ...restProps }, ref) => {
     const objectPickerRef = useRef(null);
     const objectSummaryRef = useRef(null);
     useAfterInitialEffect(() => {
@@ -14,7 +14,7 @@ const ObjectSelect = forwardRef(({ items, value, configuration, disabled, onChan
             : objectPickerRef.current?.querySelector('input');
         element?.focus();
     }, [value, disabled]);
-    return (_jsx("div", { ref: ref, children: value ? (_jsx(ObjectSummary, { ...restProps, value: value, disabled: disabled, onDelete: () => onChange(''), ref: objectSummaryRef, configuration: configuration, onPreview: e => onPreview?.(value.id, e) })) : (_jsx(ObjectPicker, { ...restProps, disabled: disabled, ref: objectPickerRef, items: items, onSelect: onChange })) }));
+    return (_jsx("div", { ref: ref, children: value ? (_jsx(ObjectSummary, { ...restProps, value: value, disabled: disabled, onDelete: () => onChange(''), ref: objectSummaryRef, configuration: configuration, onPreview: e => onPreview?.(value.id, e), onLinkClick: onLinkClick })) : (_jsx(ObjectPicker, { ...restProps, disabled: disabled, ref: objectPickerRef, items: items, onSelect: onChange })) }));
 });
 export default ObjectSelect;
 //# sourceMappingURL=ObjectSelect.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ObjectSelect.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA0B,MAAM,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAGL,qBAAqB,EAKtB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,aAAqC,MAAM,iBAAiB,CAAC;~~AAoBpE~~,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,~~EAC5E~~,GAA6B,EAC7B,EAAE;IACF,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEtD,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,QAAQ;YAAE,OAAO;QACrB,MAAM,OAAO,GAAG,KAAK;YACnB,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,aAAa,CAAC,GAAG,CAAC;YAC9C,CAAC,CAAC,eAAe,CAAC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QACpD,OAAO,EAAE,KAAK,EAAE,CAAC;IACnB,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,YACV,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,aAAa,OACR,SAAS,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,EAC5B,GAAG,EAAE,gBAAgB,EACrB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,~~GACxC~~,CACH,CAAC,CAAC,CAAC,CACF,KAAC,YAAY,OACP,SAAS,EACb,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,eAAe,EACpB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,GAClB,CACH,GACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref, useRef } from 'react';\n\nimport {\n BaseProps,\n ForwardProps,\n useAfterInitialEffect,\n FormControlProps,\n MenuItemProps,\n NoChildrenProp,\n MenuProps\n} from '@pega/cosmos-react-core';\n\nimport ObjectPicker from './ObjectPicker';\nimport ObjectSummary, { ObjectSummaryProps } from './ObjectSummary';\n\nexport interface ObjectSelectProps\n extends BaseProps,\n NoChildrenProp,\n Omit<FormControlProps, 'value'> {\n /** An array of MenuItemProps to be shown in the ObjectPicker menu. /\n items: MenuProps['items'];\n /* The value for the ObjectSummary /\n value?: ObjectSummaryProps['value'];\n /* Props for configuration popover /\n configuration?: ObjectSummaryProps['configuration'];\n /* Callback fired when a new item is selected and on clearing the selected item. /\n onChange: (id: MenuItemProps['id']) => void;\n /* Callback fired when the preview in the ObjectSummary link is clicked. /\n onPreview?: (id: MenuItemProps['id'], e: { href: string }) => void;\n /* Ref placed on the element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst ObjectSelect: FunctionComponent<ObjectSelectProps & ForwardProps> = forwardRef(\n (\n { items, value, configuration, disabled, onChange, onPreview, ...restProps },\n ref: ObjectSelectProps['ref']\n ) => {\n const objectPickerRef = useRef<HTMLDivElement>(null);\n const objectSummaryRef = useRef<HTMLDivElement>(null);\n\n useAfterInitialEffect(() => {\n if (disabled) return;\n const element = value\n ? objectSummaryRef.current?.querySelector('a')\n : objectPickerRef.current?.querySelector('input');\n element?.focus();\n }, [value, disabled]);\n\n return (\n <div ref={ref}>\n {value ? (\n <ObjectSummary\n {...restProps}\n value={value}\n disabled={disabled}\n onDelete={() => onChange('')}\n ref={objectSummaryRef}\n configuration={configuration}\n onPreview={e => onPreview?.(value.id, e)}\n />\n ) : (\n <ObjectPicker\n {...restProps}\n disabled={disabled}\n ref={objectPickerRef}\n items={items}\n onSelect={onChange}\n />\n )}\n </div>\n );\n }\n);\n\nexport default ObjectSelect;\n"]}
1	+ {"version":3,"file":"ObjectSelect.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA0B,MAAM,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAGL,qBAAqB,EAKtB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,aAAqC,MAAM,iBAAiB,CAAC;AAsBpE,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,EACzF,GAA6B,EAC7B,EAAE;IACF,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEtD,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,QAAQ;YAAE,OAAO;QACrB,MAAM,OAAO,GAAG,KAAK;YACnB,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,aAAa,CAAC,GAAG,CAAC;YAC9C,CAAC,CAAC,eAAe,CAAC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QACpD,OAAO,EAAE,KAAK,EAAE,CAAC;IACnB,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,YACV,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,aAAa,OACR,SAAS,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,EAC5B,GAAG,EAAE,gBAAgB,EACrB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,EACxC,WAAW,EAAE,WAAW,GACxB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,YAAY,OACP,SAAS,EACb,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,eAAe,EACpB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,GAClB,CACH,GACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref, useRef } from 'react';\n\nimport {\n BaseProps,\n ForwardProps,\n useAfterInitialEffect,\n FormControlProps,\n MenuItemProps,\n NoChildrenProp,\n MenuProps\n} from '@pega/cosmos-react-core';\n\nimport ObjectPicker from './ObjectPicker';\nimport ObjectSummary, { ObjectSummaryProps } from './ObjectSummary';\n\nexport interface ObjectSelectProps\n extends BaseProps,\n NoChildrenProp,\n Omit<FormControlProps, 'value'> {\n /** An array of MenuItemProps to be shown in the ObjectPicker menu. /\n items: MenuProps['items'];\n /* The value for the ObjectSummary /\n value?: ObjectSummaryProps['value'];\n /* Props for configuration popover /\n configuration?: ObjectSummaryProps['configuration'];\n /* Callback fired when a new item is selected and on clearing the selected item. /\n onChange: (id: MenuItemProps['id']) => void;\n /* Callback fired when the preview in the ObjectSummary link is clicked. /\n onPreview?: (id: MenuItemProps['id'], e: { href: string }) => void;\n /* Callback fired on click of the link inside summary item /\n onLinkClick?: ObjectSummaryProps['onLinkClick'];\n /* Ref placed on the element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst ObjectSelect: FunctionComponent<ObjectSelectProps & ForwardProps> = forwardRef(\n (\n { items, value, configuration, disabled, onChange, onPreview, onLinkClick, ...restProps },\n ref: ObjectSelectProps['ref']\n ) => {\n const objectPickerRef = useRef<HTMLDivElement>(null);\n const objectSummaryRef = useRef<HTMLDivElement>(null);\n\n useAfterInitialEffect(() => {\n if (disabled) return;\n const element = value\n ? objectSummaryRef.current?.querySelector('a')\n : objectPickerRef.current?.querySelector('input');\n element?.focus();\n }, [value, disabled]);\n\n return (\n <div ref={ref}>\n {value ? (\n <ObjectSummary\n {...restProps}\n value={value}\n disabled={disabled}\n onDelete={() => onChange('')}\n ref={objectSummaryRef}\n configuration={configuration}\n onPreview={e => onPreview?.(value.id, e)}\n onLinkClick={onLinkClick}\n />\n ) : (\n <ObjectPicker\n {...restProps}\n disabled={disabled}\n ref={objectPickerRef}\n items={items}\n onSelect={onChange}\n />\n )}\n </div>\n );\n }\n);\n\nexport default ObjectSelect;\n"]}

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

@@ -14,6 +14,7 @@ export interface ObjectSummaryProps extends BaseProps, Omit<FormControlProps, 'v
     onPreview?: (e: {
         href: string;
     }) => void;
+    onLinkClick?: (id: MenuItemProps['id'], e: MouseEvent) => void;
     ref: Ref<HTMLDivElement>;
 }
 declare const ObjectSummary: FC<PropsWithoutRef<ObjectSummaryProps> & ForwardProps>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ObjectSummary.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAc,GAAG,EAAE,eAAe,EAAoC,MAAM,OAAO,CAAC;AAG/F,OAAO,EACL,SAAS,~~EAKT~~,YAAY,EAGZ,gBAAgB,EAChB,aAAa,~~EAUd~~,MAAM,yBAAyB,CAAC;AAIjC,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIjE,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,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,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1C,GAAG,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC1B;AAaD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,GAAG,YAAY,~~CA8HzE~~,CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"ObjectSummary.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAc,GAAG,EAAE,eAAe,EAAoC,MAAM,OAAO,CAAC;AAG/F,OAAO,EACL,SAAS,EAIT,YAAY,EAGZ,gBAAgB,EAChB,aAAa,EAWd,MAAM,yBAAyB,CAAC;AAIjC,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIjE,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,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,MAAM,IAAI,CAAC;IACrB,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;AAaD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAyIzE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/ObjectSelect/ObjectSummary.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { SummaryItem, Link, Button, Icon, StyledFormControl, FormField, useI18n, registerIcon, Text, Popover, getFocusables, useAfterInitialEffect, useConsolidatedRef, useDirection, useElement } from '@pega/cosmos-react-core';
+import { SummaryItem, Button, Icon, StyledFormControl, FormField, useI18n, registerIcon, Text, Popover, getFocusables, useAfterInitialEffect, useConsolidatedRef, useDirection, useElement, Link } 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';
 import ObjectConfig from './ObjectConfig';
@@ -15,7 +15,7 @@ const StyledMetaText = styled(Text) `
   -webkit-line-clamp: 2;
   overflow: hidden;
 `;
-const ObjectSummary = forwardRef(({ value, configuration, label, disabled, status, readOnly, onDelete, onPreview, ...restProps }, ref) => {
+const ObjectSummary = forwardRef(({ value, configuration, label, disabled, status, readOnly, onDelete, onPreview, onLinkClick, ...restProps }, ref) => {
     const [open, setOpen] = useState(false);
     const [buttonEl, setButtonEl] = useElement();
     const [popoverEl, setPopoverEl] = useElement();
@@ -65,7 +65,7 @@ const ObjectSummary = forwardRef(({ value, configuration, label, disabled, statu
         else
             buttonEl?.focus();
     }, [open, popoverEl]);
-    return (_jsx(FormField, { ...restProps, ref: ref, label: label, status: status, children: _jsx(SummaryItem, { as: StyledObjectSummary, status: status, meta: value.meta, primary: _jsx(Link, { href: value.href, "aria-label": `${label} ${value.primary}`, previewable: true, target: '_blank', onPreview: onPreview, 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', onClick: openPopover, 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' }) })), _jsx(Popover, { ref: popoverRef, placement: rtl ? 'bottom-end' : 'bottom-start', hideOnTargetHidden: true, show: open, target: buttonEl, children: configuration && open && (_jsx(ObjectConfig, { ...configuration, disabled: disabled, dismissPopover: dismissPopover })) })] }) }) }));
+    return (_jsx(FormField, { ...restProps, ref: ref, label: label, status: status, children: _jsx(SummaryItem, { as: StyledObjectSummary, status: status, meta: value.meta, 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', onClick: openPopover, 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' }) })), _jsx(Popover, { ref: popoverRef, placement: rtl ? 'bottom-end' : 'bottom-start', hideOnTargetHidden: true, show: open, target: buttonEl, children: configuration && open && (_jsx(ObjectConfig, { ...configuration, disabled: disabled, dismissPopover: dismissPopover })) })] }) }) }));
 });
 export default ObjectSummary;
 //# sourceMappingURL=ObjectSummary.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ObjectSummary.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSummary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAwB,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/F,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAEL,WAAW,EACX,~~IAAI,EACJ,~~MAAM,EACN,IAAI,EAEJ,iBAAiB,EACjB,SAAS,EAGT,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,qBAAqB,EACrB,kBAAkB,EAClB,YAAY,EACZ,UAAU,~~EACX~~,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,KAAK,MAAM,8DAA8D,CAAC;AACtF,OAAO,KAAK,IAAI,MAAM,6DAA6D,CAAC;AAEpF,OAAO,YAAmC,MAAM,gBAAgB,CAAC;AAEjE,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;~~AAiB1B~~,MAAM,mBAAmB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAkB;aAC1D,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC;CACxD,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;CAKlC,CAAC;AAEF,MAAM,aAAa,GAA2D,UAAU,CACtF,CACE,~~EAAE~~,KAAK,~~EAAE~~,aAAa,~~EAAE~~,KAAK,~~EAAE~~,QAAQ,~~EAAE~~,MAAM,~~EAAE~~,QAAQ,~~EAAE~~,QAAQ,~~EAAE~~,SAAS,~~EAAE~~,GAAG,SAAS,~~EAAE~~,~~EAC9F~~,GAA8B,EAC9B,EAAE;IACF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAqB,CAAC;IAChE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAe,CAAC;IAC5D,MAAM,UAAU,GAAG,kBAAkB,CAAiB,aAAa,EAAE,GAAG,EAAE,YAAY,CAAC,CAAC;IACxF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,aAAa,EAAE,YAAY,EAAE,EAAE,CAAC;QAChC,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,EAAW,EAAE,EAAE;QACrC,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,aAAa,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC,CAAC;IACpC,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAgB,EAAE,EAAE;QACnB,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAClB,IAAI,GAAG,KAAK,QAAQ,EAAE;YACpB,OAAO,CAAC,KAAK,CAAC,CAAC;SAChB;aAAM,IAAI,GAAG,KAAK,KAAK,IAAI,SAAS,EAAE;YACrC,MAAM,gBAAgB,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;YAEnD,IAAI,CAAC,gBAAgB;gBAAE,OAAO;YAE9B,MAAM,qBAAqB,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC;YAClD,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAE3E,IAAI,CAAC,CAAC,QAAQ,EAAE;gBACd,IAAI,QAAQ,CAAC,aAAa,KAAK,qBAAqB,EAAE;oBACpD,oBAAoB,CAAC,KAAK,EAAE,CAAC;oBAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;iBACpB;aACF;iBAAM,IAAI,QAAQ,CAAC,aAAa,KAAK,oBAAoB,EAAE;gBAC1D,qBAAqB,CAAC,KAAK,EAAE,CAAC;gBAC9B,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;SACF;IACH,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,EAAE,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAClD,OAAO,GAAG,EAAE;YACV,SAAS,EAAE,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACvD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,IAAI;YAAE,SAAS,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC;;YACjD,QAAQ,EAAE,KAAK,EAAE,CAAC;IACzB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,KAAC,SAAS,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,YAC9D,KAAC,WAAW,IACV,EAAE,EAAE,mBAAmB,EACvB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EACL,KAAC,IAAI,IACH,IAAI,EAAE,KAAK,CAAC,IAAI,gBACJ,GAAG,KAAK,IAAI,KAAK,CAAC,OAAO,EAAE,EACvC,WAAW,QACX,~~MAAM~~,~~EAAC~~,~~QAAQ~~,~~EACf~~,~~SAAS~~,EAAE,SAAS,~~YAEnB~~,KAAK,CAAC,OAAO,GACT,EAET,SAAS,EACP,KAAK,CAAC,IAAI,IAAI,KAAC,cAAc,IAAC,OAAO,EAAC,WAAW,YAAE,KAAK,CAAC,IAAI,GAAkB,EAEjF,OAAO,EACL,8BACG,aAAa,IAAI,CAChB,KAAC,MAAM,IACL,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,aAAa,EAAE,KAAK,EAC3B,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,WAAW,YAEpB,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACb,CACV,EACA,CAAC,QAAQ,IAAI,CACZ,KAAC,MAAM,IACL,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,CAAC,CAAC,sBAAsB,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EACjD,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,QAAQ,YAEjB,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,CACV,EACD,KAAC,OAAO,IACN,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EAC9C,kBAAkB,QAClB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,QAAQ,YAEf,aAAa,IAAI,IAAI,IAAI,CACxB,KAAC,YAAY,OACP,aAAa,EACjB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,GAC9B,CACH,GACO,IACT,GAEL,GACQ,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FC, forwardRef, Ref, PropsWithoutRef, useCallback, useEffect, useState } from 'react';\nimport styled from 'styled-components';\n\nimport {\n BaseProps,\n SummaryItem,\n ~~Link,\n~~ Button,\n Icon,\n ForwardProps,\n StyledFormControl,\n FormField,\n FormControlProps,\n MenuItemProps,\n useI18n,\n registerIcon,\n Text,\n Popover,\n getFocusables,\n useAfterInitialEffect,\n useConsolidatedRef,\n useDirection,\n useElement\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\nimport ObjectConfig, { ObjectConfigProps } from './ObjectConfig';\n\nregisterIcon(times, gear);\n\ninterface ObjectSummaryValueProps {\n id: MenuItemProps['id'];\n primary: MenuItemProps['primary'];\n href: string;\n meta?: string;\n}\n\nexport interface ObjectSummaryProps extends BaseProps, Omit<FormControlProps, 'value'> {\n value: ObjectSummaryValueProps;\n configuration?: ObjectConfigProps;\n onDelete: () => void;\n onPreview?: (e: { href: string }) => void;\n ref: Ref<HTMLDivElement>;\n}\n\nconst StyledObjectSummary = styled(StyledFormControl)<{ meta: string }>`\n padding: ${({ meta }) => (meta ? '0.5rem' : '0 0.5rem')};\n`;\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 ObjectSummary: FC<PropsWithoutRef<ObjectSummaryProps> & ForwardProps> = forwardRef(\n (\n { value, configuration, label, disabled, status, readOnly, onDelete, onPreview, ...restProps },\n ref: ObjectSummaryProps['ref']\n ) => {\n const [open, setOpen] = useState(false);\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>();\n const popoverRef = useConsolidatedRef<HTMLDivElement>(configuration?.ref, setPopoverEl);\n const t = useI18n();\n const { rtl } = useDirection();\n\n const openPopover = () => {\n configuration?.onBeforeOpen?.();\n setOpen(true);\n };\n\n const dismissPopover = (id?: string) => {\n setOpen(false);\n configuration?.onAfterClose?.(id);\n };\n\n const onKeydown = useCallback(\n (e: KeyboardEvent) => {\n const { key } = e;\n if (key === 'Escape') {\n setOpen(false);\n } else if (key === 'Tab' && popoverEl) {\n const focusableContent = getFocusables(popoverRef);\n\n if (!focusableContent) return;\n\n const firstFocusableElement = focusableContent[0];\n const lastFocusableElement = focusableContent[focusableContent.length - 1];\n\n if (e.shiftKey) {\n if (document.activeElement === firstFocusableElement) {\n lastFocusableElement.focus();\n e.preventDefault();\n }\n } else if (document.activeElement === lastFocusableElement) {\n firstFocusableElement.focus();\n e.preventDefault();\n }\n }\n },\n [popoverEl]\n );\n\n useEffect(() => {\n popoverEl?.addEventListener('keydown', onKeydown);\n return () => {\n popoverEl?.removeEventListener('keydown', onKeydown);\n };\n }, [popoverEl]);\n\n useAfterInitialEffect(() => {\n if (open) popoverEl?.querySelector('button')?.focus();\n else buttonEl?.focus();\n }, [open, popoverEl]);\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 primary={\n <Link\n href={value.href}\n aria-label={`${label} ${value.primary}`}\n previewable\n ~~target~~=~~'_blank'~~\n ~~onPreview~~={~~onPreview~~}\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\n ref={setButtonEl}\n label={configuration?.label}\n icon\n variant='simple'\n onClick={openPopover}\n >\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 <Popover\n ref={popoverRef}\n placement={rtl ? 'bottom-end' : 'bottom-start'}\n hideOnTargetHidden\n show={open}\n target={buttonEl}\n >\n {configuration && open && (\n <ObjectConfig\n {...configuration}\n disabled={disabled}\n dismissPopover={dismissPopover}\n />\n )}\n </Popover>\n </>\n }\n />\n </FormField>\n );\n }\n);\n\nexport default ObjectSummary;\n"]}
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, useCallback, useEffect, useState } from 'react';\nimport styled 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 Popover,\n getFocusables,\n useAfterInitialEffect,\n useConsolidatedRef,\n useDirection,\n useElement,\n Link\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\nimport ObjectConfig, { ObjectConfigProps } from './ObjectConfig';\n\nregisterIcon(times, gear);\n\ninterface ObjectSummaryValueProps {\n id: MenuItemProps['id'];\n primary: MenuItemProps['primary'];\n href: string;\n meta?: string;\n}\n\nexport interface ObjectSummaryProps extends BaseProps, Omit<FormControlProps, 'value'> {\n value: ObjectSummaryValueProps;\n configuration?: ObjectConfigProps;\n onDelete: () => 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 padding: ${({ meta }) => (meta ? '0.5rem' : '0 0.5rem')};\n`;\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 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 [open, setOpen] = useState(false);\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>();\n const popoverRef = useConsolidatedRef<HTMLDivElement>(configuration?.ref, setPopoverEl);\n const t = useI18n();\n const { rtl } = useDirection();\n\n const openPopover = () => {\n configuration?.onBeforeOpen?.();\n setOpen(true);\n };\n\n const dismissPopover = (id?: string) => {\n setOpen(false);\n configuration?.onAfterClose?.(id);\n };\n\n const onKeydown = useCallback(\n (e: KeyboardEvent) => {\n const { key } = e;\n if (key === 'Escape') {\n setOpen(false);\n } else if (key === 'Tab' && popoverEl) {\n const focusableContent = getFocusables(popoverRef);\n\n if (!focusableContent) return;\n\n const firstFocusableElement = focusableContent[0];\n const lastFocusableElement = focusableContent[focusableContent.length - 1];\n\n if (e.shiftKey) {\n if (document.activeElement === firstFocusableElement) {\n lastFocusableElement.focus();\n e.preventDefault();\n }\n } else if (document.activeElement === lastFocusableElement) {\n firstFocusableElement.focus();\n e.preventDefault();\n }\n }\n },\n [popoverEl]\n );\n\n useEffect(() => {\n popoverEl?.addEventListener('keydown', onKeydown);\n return () => {\n popoverEl?.removeEventListener('keydown', onKeydown);\n };\n }, [popoverEl]);\n\n useAfterInitialEffect(() => {\n if (open) popoverEl?.querySelector('button')?.focus();\n else buttonEl?.focus();\n }, [open, popoverEl]);\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 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\n ref={setButtonEl}\n label={configuration?.label}\n icon\n variant='simple'\n onClick={openPopover}\n >\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 <Popover\n ref={popoverRef}\n placement={rtl ? 'bottom-end' : 'bottom-start'}\n hideOnTargetHidden\n show={open}\n target={buttonEl}\n >\n {configuration && open && (\n <ObjectConfig\n {...configuration}\n disabled={disabled}\n dismissPopover={dismissPopover}\n />\n )}\n </Popover>\n </>\n }\n />\n </FormField>\n );\n }\n);\n\nexport default ObjectSummary;\n"]}

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAIjB,UAAU,EAEX,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,kBAAkB,IAAI,sBAAsB,EAE5C,eAAe,IAAI,mBAAmB,EACtC,mBAAmB,EASnB,YAAY,EAMZ,iBAAiB,EACjB,UAAU,EAEV,WAAW,EAMZ,MAAM,yBAAyB,CAAC;AAUjC,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,yGA4BtB,CAAC;AAIF,eAAO,MAAM,UAAU,mEAOpB,eAAe,gBA6FjB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAcxE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAoB9E,CAAC"}

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

@@ -1,61 +1,50 @@
 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 } 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 } 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/Form/Form';
 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 `
+      background: ${primaryBackground};
+      height: 100%;
       ${StyledRegion} > ${StyledWorkbench},
-      ${StyledTabPanel} > ${StyledWorkbench} {
+        ${StyledTabPanel} > ${StyledWorkbench} {
         position: absolute;
         width: calc(100% - calc(4 * ${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: ": " })] }), _jsx(Text, { variant: 'secondary', as: 'dd', children: meta.value })] }, meta.id));
-        }) }));
-};
-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 })), _jsx(Flex, { item: { shrink: 0 }, as: Icon, name: 'nodes-down' }), branchName && _jsx(StyledTextWithEllipsis, { children: branchName })] }));
-};
-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();
@@ -83,10 +72,11 @@ 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 }), 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(Text, { variant: 'h3', 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) => {
+    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(Text, { variant: 'h3', 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') }))] }) })] }))] }), branchName && status && _jsx(Branch, { branchName: branchName, status: status })] }), secondary: metadata && _jsx(MetaFields, { metadata: metadata }), actions: actions }));
+                                                }, 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 }), tabs: tabs, ref: ref, scrollContent: true, a: a }));

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

	@@ -1 +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"]}
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} 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} 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';\nimport { StyledForm } from '@pega/cosmos-react-core/lib/components/Form/Form';\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 ${StyledRegion} > ${StyledWorkbench},\n ${StyledTabPanel} > ${StyledWorkbench} {\n position: absolute;\n width: calc(100% - calc(4 * ${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\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 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 <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 {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, 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"]}

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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"}

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

@@ -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 }), _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(StyledDescription, { children: description }) }), _jsx(MetaList, { items: meta, wrapItems: false })] }, id));
 };
 export default SummaryCard;
 //# sourceMappingURL=SummaryCard.js.map

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

	@@ -1 +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,gBAAgB,~~EAGjB~~,MAAM,yBAAyB,CAAC;AACjC,OAAO,cAAc,MAAM,8DAA8D,CAAC;AAE1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;~~AACxE~~,~~OAAO,~~MAAM,~~EAAE,EAAe,qBAAqB,EAAE,MAAM,WAAW,~~CAAC~~;AAWvE~~,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,~~qBAAqB~~;;;~~GAGxB~~,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,GAAI,~~EACjC~~,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 defaultThemeProp,\n MetaListProps,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport { StyledDescription } from '../PageTemplates/GalleryPage.styles';\~~nimport Visual, { VisualProps, StyledVisualContainer } from '../Visual';\~~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?: ~~VisualProps;\~~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 ${~~StyledVisualContainer~~} {\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 && <~~Visual~~ {...visual} />}\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"]}
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"]}

package/lib/index.d.ts CHANGED Viewed

@@ -9,11 +9,11 @@ export * from './components/FlowModeller';
 export * from './components/ItemLibrary';
 export { default as LifeCycle } from './components/LifeCycle';
 export * from './components/LifeCycle';
+export * from './components/ObjectPreview';
 export { default as ObjectSelect } from './components/ObjectSelect';
 export * from './components/ObjectSelect';
 export * from './components/PageTemplates';
 export * from './components/SummaryCard';
-export * from './components/Visual';
 export { default as Workbench } from './components/Workbench';
 export * from './utils';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,~~cAAc,qBAAqB,CAAC;AACpC,~~OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,SAAS,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,SAAS,CAAC"}

package/lib/index.js CHANGED Viewed

@@ -10,11 +10,11 @@ export * from './components/FlowModeller';
 export * from './components/ItemLibrary';
 export { default as LifeCycle } from './components/LifeCycle';
 export * from './components/LifeCycle';
+export * from './components/ObjectPreview';
 export { default as ObjectSelect } from './components/ObjectSelect';
 export * from './components/ObjectSelect';
 export * from './components/PageTemplates';
 export * from './components/SummaryCard';
-export * from './components/Visual';
 export { default as Workbench } from './components/Workbench';
 export * from './utils';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,~~cAAc,qBAAqB,CAAC;AACpC,~~OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,SAAS,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppHeader } from './components/AppHeader';\nexport * from './components/AppHeader';\nexport { default as AppShell } from './components/AppShell';\nexport * from './components/AppShell';\nexport { default as DynamicContentEditor } from './components/DynamicContentEditor';\nexport * from './components/DynamicContentEditor';\nexport { default as FlowModeller } from './components/FlowModeller';\nexport * from './components/FlowModeller';\nexport * from './components/ItemLibrary';\nexport { default as LifeCycle } from './components/LifeCycle';\nexport * from './components/LifeCycle';\nexport { default as ObjectSelect } from './components/ObjectSelect';\nexport * from './components/ObjectSelect';\nexport * from './components/PageTemplates';\nexport * from './components/SummaryCard';\nexport * from './components/Visual';\nexport { default as Workbench } from './components/Workbench';\nexport * from './utils';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,SAAS,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppHeader } from './components/AppHeader';\nexport * from './components/AppHeader';\nexport { default as AppShell } from './components/AppShell';\nexport * from './components/AppShell';\nexport { default as DynamicContentEditor } from './components/DynamicContentEditor';\nexport * from './components/DynamicContentEditor';\nexport { default as FlowModeller } from './components/FlowModeller';\nexport * from './components/FlowModeller';\nexport * from './components/ItemLibrary';\nexport { default as LifeCycle } from './components/LifeCycle';\nexport * from './components/LifeCycle';\nexport * from './components/ObjectPreview';\nexport { default as ObjectSelect } from './components/ObjectSelect';\nexport * from './components/ObjectSelect';\nexport * from './components/PageTemplates';\nexport * from './components/SummaryCard';\nexport { default as Workbench } from './components/Workbench';\nexport * from './utils';\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-build",
-  "version": "3.0.0-dev.6.0",
+  "version": "3.0.0-dev.7.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,8 +20,8 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "3.0.0-dev.6.0",
-    "@pega/cosmos-react-dnd": "3.0.0-dev.6.0",
+    "@pega/cosmos-react-core": "3.0.0-dev.7.0",
+    "@pega/cosmos-react-dnd": "3.0.0-dev.7.0",
     "dagre": "^0.8.5",
     "polished": "^4.1.0",
     "react": "^16.14.0 || ^17.0.0",

package/lib/components/Visual/Visual.d.ts DELETED Viewed

@@ -1,17 +0,0 @@
-import { FC } from 'react';
-import { ImageProps, IconProps, RequiredByKey } from '@pega/cosmos-react-core';
-interface IconWithColor extends IconProps {
-    bgColor?: string;
-    color?: string;
-}
-interface VisualPropsInterface {
-    /** displays the image */
-    image?: ImageProps;
-    /** displays icon if image is not available */
-    icon?: IconWithColor;
-}
-export declare type VisualProps = RequiredByKey<VisualPropsInterface, 'icon'> | RequiredByKey<VisualPropsInterface, 'image'>;
-export declare const StyledVisualContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-declare const Visual: FC<VisualProps>;
-export default Visual;
-//# sourceMappingURL=Visual.d.ts.map

package/lib/components/Visual/Visual.d.ts.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Visual.d.ts","sourceRoot":"","sources":["../../../src/components/Visual/Visual.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,EAEL,UAAU,EACV,SAAS,EAMT,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,UAAU,aAAc,SAAQ,SAAS;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,oBAAoB;IAE5B,yBAAyB;IACzB,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,oBAAY,WAAW,GACnB,aAAa,CAAC,oBAAoB,EAAE,MAAM,CAAC,GAC3C,aAAa,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC;AAEjD,eAAO,MAAM,qBAAqB,yGAWhC,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAmB3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Visual/Visual.js DELETED Viewed

@@ -1,28 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { css } from 'styled-components';
-import { readableColor } from 'polished';
-import { Image, Icon, Flex, useTheme, StyledIcon, defaultThemeProp } from '@pega/cosmos-react-core';
-export const StyledVisualContainer = styled.div(({ theme }) => {
-    return css `
-    width: 2rem;
-    height: 2rem;
-    border-radius: ${theme.base['border-radius']};
-    background-color: var(--bg-color);
-    color: var(--fg-color);
-    ${StyledIcon} {
-      color: var(--fg-color);
-    }
-  `;
-});
-StyledVisualContainer.defaultProps = defaultThemeProp;
-const Visual = ({ image, icon }) => {
-    const theme = useTheme();
-    const color = (icon && icon.color) || theme.base.colors.white;
-    const bgColor = (icon && icon.bgColor) || readableColor(color);
-    return (_jsxs(Flex, { as: StyledVisualContainer, container: { justify: 'center', alignItems: 'center' }, style: {
-            '--bg-color': bgColor,
-            '--fg-color': color
-        }, children: [image && image.src && _jsx(Image, { src: image.src, alt: image.alt }), icon && icon.name && _jsx(Icon, { name: icon.name })] }));
-};
-export default Visual;
-//# sourceMappingURL=Visual.js.map

package/lib/components/Visual/Visual.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Visual.js","sourceRoot":"","sources":["../../../src/components/Visual/Visual.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EACL,KAAK,EAGL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAoBjC,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;;;qBAGS,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;MAG1C,UAAU;;;GAGb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,MAAM,GAAoB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAClD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,KAAK,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IAC9D,MAAM,OAAO,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,aAAa,CAAC,KAAK,CAAC,CAAC;IAC/D,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,qBAAqB,EACzB,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACtD,KAAK,EACH;YACE,YAAY,EAAE,OAAO;YACrB,YAAY,EAAE,KAAK;SACH,aAGnB,KAAK,IAAI,KAAK,CAAC,GAAG,IAAI,KAAC,KAAK,IAAC,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,GAAI,EAC/D,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,IAC1C,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { CSSProperties, FC } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n Image,\n ImageProps,\n IconProps,\n Icon,\n Flex,\n useTheme,\n StyledIcon,\n defaultThemeProp,\n RequiredByKey\n} from '@pega/cosmos-react-core';\n\ninterface IconWithColor extends IconProps {\n bgColor?: string;\n color?: string;\n}\n\ninterface VisualPropsInterface {\n // visual: ImageProps | (IconProps & { color?: string; bgColor?: string });\n /** displays the image */\n image?: ImageProps;\n\n /** displays icon if image is not available */\n icon?: IconWithColor;\n}\n\nexport type VisualProps =\n | RequiredByKey<VisualPropsInterface, 'icon'>\n | RequiredByKey<VisualPropsInterface, 'image'>;\n\nexport const StyledVisualContainer = styled.div(({ theme }) => {\n return css`\n width: 2rem;\n height: 2rem;\n border-radius: ${theme.base['border-radius']};\n background-color: var(--bg-color);\n color: var(--fg-color);\n ${StyledIcon} {\n color: var(--fg-color);\n }\n `;\n});\n\nStyledVisualContainer.defaultProps = defaultThemeProp;\n\nconst Visual: FC<VisualProps> = ({ image, icon }) => {\n const theme = useTheme();\n const color = (icon && icon.color) || theme.base.colors.white;\n const bgColor = (icon && icon.bgColor) || readableColor(color);\n return (\n <Flex\n as={StyledVisualContainer}\n container={{ justify: 'center', alignItems: 'center' }}\n style={\n {\n '--bg-color': bgColor,\n '--fg-color': color\n } as CSSProperties\n }\n >\n {image && image.src && <Image src={image.src} alt={image.alt} />}\n {icon && icon.name && <Icon name={icon.name} />}\n </Flex>\n );\n};\n\nexport default Visual;\n"]}

package/lib/components/Visual/index.d.ts DELETED Viewed

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

package/lib/components/Visual/index.d.ts.map DELETED Viewed

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

package/lib/components/Visual/index.js DELETED Viewed

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

package/lib/components/Visual/index.js.map DELETED Viewed

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