@pega/cosmos-react-build 3.0.0-dev.16.0 → 3.0.0-dev.18.0

package/lib/components/ObjectSelect/ObjectSelect.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useState } from 'react';
-import { useAfterInitialEffect } from '@pega/cosmos-react-core';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, useEffect, useRef, useState } from 'react';
+import { useI18n, Button, Modal, ModalManagerContext, useAfterInitialEffect } from '@pega/cosmos-react-core';
 import ObjectPicker from './ObjectPicker';
 import ObjectSummary from './ObjectSummary';
-const ObjectSelect = forwardRef(({ items, value, configuration, disabled, onChange, onPreview, onLinkClick, loading, ...restProps }, ref) => {
+const ObjectSelect = forwardRef(({ items, value, configuration, disabled, onChange, onPreview, onLinkClick, loading, form, ...restProps }, ref) => {
+    const t = useI18n();
     const [mode, setMode] = useState(value ? 'summary' : 'picker');
     const objectPickerRef = useRef(null);
     const objectSummaryRef = useRef(null);
@@ -13,10 +14,66 @@ const ObjectSelect = forwardRef(({ items, value, configuration, disabled, onChan
             : objectPickerRef.current?.querySelector('input');
         element?.focus();
     }, [mode]);
+    const progressMsgRef = useRef(t('loading'));
+    const modalMethods = useRef();
+    const { create: createModal } = useContext(ModalManagerContext);
+    const closeModal = () => {
+        if (form?.loading && progressMsgRef.current === t('submitting'))
+            return;
+        progressMsgRef.current = t('loading');
+    };
+    let modalContent = null;
+    if (mode === 'create' && form && !form.loading) {
+        modalContent = _jsx(form.renderer, { ...form.rendererProps });
+    }
+    let formActions = null;
+    if (mode === 'create' && (!form?.loading || progressMsgRef.current === t('submitting'))) {
+        const close = () => {
+            if (mode === 'create') {
+                modalMethods.current?.dismiss();
+            }
+            else {
+                closeModal();
+            }
+        };
+        formActions = (_jsxs(_Fragment, { children: [_jsx(Button, { disabled: form?.loading, onClick: () => {
+                        form?.onDismiss?.({ close });
+                    }, children: t('cancel') }), _jsx(Button, { disabled: form?.loading, type: 'submit', variant: 'primary', onClick: () => {
+                        progressMsgRef.current = t('submitting');
+                        form?.onSubmit?.({ close });
+                    }, children: t('submit') })] }));
+    }
+    useEffect(() => {
+        if (mode !== 'create') {
+            modalMethods.current = undefined;
+            return;
+        }
+        const modalProps = {
+            progress: form?.loading ? { message: progressMsgRef.current } : undefined,
+            children: modalContent,
+            actions: formActions,
+            onRequestDismiss: form?.loading && progressMsgRef.current === t('submitting') ? () => false : undefined
+        };
+        if (modalMethods.current) {
+            modalMethods.current.update(modalProps);
+        }
+        else {
+            modalMethods.current = createModal(Modal, {
+                ...modalProps,
+                heading: t('create_new'),
+                onBeforeOpen: form?.onBeforeOpen,
+                onAfterClose: () => {
+                    form?.onAfterClose?.();
+                    progressMsgRef.current = t('loading');
+                    setMode('summary');
+                }
+            });
+        }
+    }, [mode, modalContent, form?.loading, formActions]);
     return (_jsx("div", { ref: ref, children: value ? (_jsx(ObjectSummary, { ...restProps, value: value, disabled: disabled, onDelete: e => {
                 setMode('picker');
                 onChange?.('', e);
-            }, ref: objectSummaryRef, configuration: configuration, onPreview: e => onPreview?.(value.id, e), onLinkClick: onLinkClick })) : (_jsx(ObjectPicker, { ...restProps, loading: loading, disabled: disabled, ref: objectPickerRef, items: items, onSelect: (id, e) => {
+            }, ref: objectSummaryRef, configuration: configuration, onPreview: e => onPreview?.(value.id, e), onLinkClick: onLinkClick })) : (_jsx(ObjectPicker, { onCreateNew: () => setMode('create'), ...restProps, loading: loading, disabled: disabled, ref: objectPickerRef, items: items, onSelect: (id, e) => {
                 setMode('summary');
                 onChange?.(id, e);
             } })) }));

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

@@ -1 +1 @@
-{"version":3,"file":"ObjectSelect.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA0B,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,EAML,qBAAqB,EAEtB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,YAAmC,MAAM,gBAAgB,CAAC;AACjE,OAAO,aAAqC,MAAM,iBAAiB,CAAC;AAwBpE,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EACE,KAAK,EACL,KAAK,EACL,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,WAAW,EACX,OAAO,EACP,GAAG,SAAS,EACb,EACD,GAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAuB,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IACrF,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEtD,qBAAqB,CAAC,GAAG,EAAE;QACzB,MAAM,OAAO,GACX,IAAI,KAAK,SAAS;YAChB,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,aAAa,CAAC,GAAG,CAAC;YAC9C,CAAC,CAAC,eAAe,CAAC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QACtD,OAAO,EAAE,KAAK,EAAE,CAAC;IACnB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,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,CAAC,CAAC,EAAE;gBACZ,OAAO,CAAC,QAAQ,CAAC,CAAC;gBAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;YACpB,CAAC,EACD,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,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,eAAe,EACpB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;gBAClB,OAAO,CAAC,SAAS,CAAC,CAAC;gBACnB,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;YACpB,CAAC,GACD,CACH,GACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref, useRef, useState } from 'react';\n\nimport {\n  BaseProps,\n  ForwardProps,\n  FormControlProps,\n  MenuItemProps,\n  NoChildrenProp,\n  useAfterInitialEffect,\n  MenuProps\n} from '@pega/cosmos-react-core';\n\nimport ObjectPicker, { ObjectPickerProps } 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  /** Boolean to trigger loading state for combobox menu */\n  loading?: ObjectPickerProps['loading'];\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: MenuItemProps['onClick'];\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    {\n      items,\n      value,\n      configuration,\n      disabled,\n      onChange,\n      onPreview,\n      onLinkClick,\n      loading,\n      ...restProps\n    },\n    ref: ObjectSelectProps['ref']\n  ) => {\n    const [mode, setMode] = useState<'picker' | 'summary'>(value ? 'summary' : 'picker');\n    const objectPickerRef = useRef<HTMLDivElement>(null);\n    const objectSummaryRef = useRef<HTMLDivElement>(null);\n\n    useAfterInitialEffect(() => {\n      const element =\n        mode === 'summary'\n          ? objectSummaryRef.current?.querySelector('a')\n          : objectPickerRef.current?.querySelector('input');\n      element?.focus();\n    }, [mode]);\n\n    return (\n      <div ref={ref}>\n        {value ? (\n          <ObjectSummary\n            {...restProps}\n            value={value}\n            disabled={disabled}\n            onDelete={e => {\n              setMode('picker');\n              onChange?.('', e);\n            }}\n            ref={objectSummaryRef}\n            configuration={configuration}\n            onPreview={e => onPreview?.(value.id, e)}\n            onLinkClick={onLinkClick}\n          />\n        ) : (\n          <ObjectPicker\n            {...restProps}\n            loading={loading}\n            disabled={disabled}\n            ref={objectPickerRef}\n            items={items}\n            onSelect={(id, e) => {\n              setMode('summary');\n              onChange?.(id, e);\n            }}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nexport default ObjectSelect;\n"]}
+{"version":3,"file":"ObjectSelect.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ComponentType,\n  forwardRef,\n  PropsWithoutRef,\n  ReactNode,\n  Ref,\n  useContext,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  BaseProps,\n  FormControlProps,\n  MenuItemProps,\n  NoChildrenProp,\n  MenuProps,\n  DeferInfer,\n  ModalProps,\n  useI18n,\n  Button,\n  Modal,\n  ModalManagerContext,\n  ModalMethods,\n  OmitStrict,\n  ForwardProps,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\n\nimport ObjectPicker, { ObjectPickerProps } from './ObjectPicker';\nimport ObjectSummary, { ObjectSummaryProps } from './ObjectSummary';\n\nexport interface ObjectSelectProps<P extends object = object>\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  /** Boolean to trigger loading state for combobox menu */\n  loading?: ObjectPickerProps['loading'];\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: MenuItemProps['onClick'];\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  /** New object creation form options. */\n  form?: {\n    /* Indicates the form is in a loading state either initially or after add is submitted. */\n    loading?: boolean;\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  } & (Record<string, never> extends P\n    ? {\n        /**\n         * A props object that will be passed to the form renderer.\n         */\n        rendererProps?: DeferInfer<P>;\n      }\n    : {\n        /**\n         * A props object that will be passed to the form renderer.\n         */\n        rendererProps: DeferInfer<P>;\n      });\n  /** Ref placed on the element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst ObjectSelect = forwardRef(\n  <P extends object = object>(\n    {\n      items,\n      value,\n      configuration,\n      disabled,\n      onChange,\n      onPreview,\n      onLinkClick,\n      loading,\n      form,\n      ...restProps\n    }: PropsWithoutRef<ObjectSelectProps<P>> & ForwardProps,\n    ref: ObjectSelectProps['ref']\n  ) => {\n    const t = useI18n();\n\n    const [mode, setMode] = useState<'picker' | 'summary' | 'create'>(value ? 'summary' : 'picker');\n    const objectPickerRef = useRef<HTMLDivElement>(null);\n    const objectSummaryRef = useRef<HTMLDivElement>(null);\n\n    useAfterInitialEffect(() => {\n      const element =\n        mode === 'summary'\n          ? objectSummaryRef.current?.querySelector('a')\n          : objectPickerRef.current?.querySelector('input');\n      element?.focus();\n    }, [mode]);\n\n    const progressMsgRef = useRef(t('loading'));\n    const modalMethods = useRef<ModalMethods>();\n    const { create: createModal } = useContext(ModalManagerContext);\n\n    const closeModal = () => {\n      if (form?.loading && progressMsgRef.current === t('submitting')) return;\n      progressMsgRef.current = t('loading');\n    };\n\n    let modalContent: ReactNode = null;\n    if (mode === 'create' && form && !form.loading) {\n      modalContent = <form.renderer {...(form.rendererProps as P)} />;\n    }\n\n    let formActions: ReactNode = null;\n    if (mode === 'create' && (!form?.loading || progressMsgRef.current === t('submitting'))) {\n      const close = () => {\n        if (mode === 'create') {\n          modalMethods.current?.dismiss();\n        } else {\n          closeModal();\n        }\n      };\n\n      formActions = (\n        <>\n          <Button\n            disabled={form?.loading}\n            onClick={() => {\n              form?.onDismiss?.({ close });\n            }}\n          >\n            {t('cancel')}\n          </Button>\n          <Button\n            disabled={form?.loading}\n            type='submit'\n            variant='primary'\n            onClick={() => {\n              progressMsgRef.current = t('submitting');\n              form?.onSubmit?.({ close });\n            }}\n          >\n            {t('submit')}\n          </Button>\n        </>\n      );\n    }\n\n    useEffect(() => {\n      if (mode !== 'create') {\n        modalMethods.current = undefined;\n        return;\n      }\n\n      const modalProps: OmitStrict<ModalProps, 'heading'> = {\n        progress: form?.loading ? { message: progressMsgRef.current } : undefined,\n        children: modalContent,\n        actions: formActions,\n        onRequestDismiss:\n          form?.loading && progressMsgRef.current === t('submitting') ? () => 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: form?.onBeforeOpen,\n          onAfterClose: () => {\n            form?.onAfterClose?.();\n            progressMsgRef.current = t('loading');\n            setMode('summary');\n          }\n        });\n      }\n    }, [mode, modalContent, form?.loading, formActions]);\n\n    return (\n      <div ref={ref}>\n        {value ? (\n          <ObjectSummary\n            {...restProps}\n            value={value}\n            disabled={disabled}\n            onDelete={e => {\n              setMode('picker');\n              onChange?.('', e);\n            }}\n            ref={objectSummaryRef}\n            configuration={configuration}\n            onPreview={e => onPreview?.(value.id, e)}\n            onLinkClick={onLinkClick}\n          />\n        ) : (\n          <ObjectPicker\n            onCreateNew={() => setMode('create')}\n            {...restProps}\n            loading={loading}\n            disabled={disabled}\n            ref={objectPickerRef}\n            items={items}\n            onSelect={(id, e) => {\n              setMode('summary');\n              onChange?.(id, e);\n            }}\n          />\n        )}\n      </div>\n    );\n  }\n) as <P extends object = object>(props: ObjectSelectProps<P> & ForwardProps) => JSX.Element | null;\n\nexport default ObjectSelect;\n"]}

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

@@ -1,12 +1,14 @@
 import { FC, Ref, PropsWithoutRef, MouseEvent } from 'react';
-import { BaseProps, ForwardProps, FormControlProps, MenuItemProps } from '@pega/cosmos-react-core';
-import { ObjectConfigProps } from './ObjectConfig';
+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;

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

@@ -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,EAAY,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnF,OAAO,EACL,SAAS,EAIT,YAAY,EAGZ,gBAAgB,EAChB,aAAa,EAYd,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,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;AAaD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAiHzE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"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

@@ -1,50 +1,45 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState } from 'react';
-import styled from 'styled-components';
-import { SummaryItem, Button, Icon, StyledFormControl, FormField, useI18n, registerIcon, Text, Popover, useAfterInitialEffect, useConsolidatedRef, useDirection, useElement, useFocusTrap, Link, useEvent } from '@pega/cosmos-react-core';
+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';
-import ObjectConfig from './ObjectConfig';
 registerIcon(times, gear);
-const StyledObjectSummary = styled(StyledFormControl) `
-  padding: ${({ meta }) => (meta ? '0.5rem' : '0 0.5rem')};
-`;
+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 [open, setOpen] = useState(false);
     const [buttonEl, setButtonEl] = useElement();
-    const [popoverEl, setPopoverEl] = useElement();
-    const popoverRef = useConsolidatedRef(configuration?.ref, setPopoverEl);
     const t = useI18n();
     const { rtl } = useDirection();
-    const openPopover = () => {
-        configuration?.onBeforeOpen?.();
-        setOpen(true);
-    };
-    const dismissPopover = (id) => {
-        setOpen(false);
-        configuration?.onAfterClose?.(id);
-    };
-    const onKeydown = (e) => {
-        const { key } = e;
-        if (key === 'Escape') {
-            setOpen(false);
-        }
-    };
-    useEvent('keydown', onKeydown, { target: popoverEl });
-    useFocusTrap(popoverRef);
-    useAfterInitialEffect(() => {
-        if (open)
-            popoverEl?.querySelector('button')?.focus();
-        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, 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 })) })] }) }) }));
+    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

@@ -1 +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, useState, MouseEvent } 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  useAfterInitialEffect,\n  useConsolidatedRef,\n  useDirection,\n  useElement,\n  useFocusTrap,\n  Link,\n  useEvent\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: (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  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 = (e: KeyboardEvent) => {\n      const { key } = e;\n      if (key === 'Escape') {\n        setOpen(false);\n      }\n    };\n\n    useEvent('keydown', onKeydown, { target: popoverEl });\n    useFocusTrap(popoverRef);\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"]}
+{"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/PageTemplates/PageTemplates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAIjB,UAAU,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;AASjC,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,CAaxE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAoB9E,CAAC"}
+{"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,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;AAWjC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACnF,QAAQ,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QACtC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACrD,CAAC;CACH;AAED,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,gBA6FjB,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

@@ -5,6 +5,8 @@ import { OneColumnPage as CoreOneColumnPage, TabbedPage as CoreTabbedPage, Flex,
 import * as nodesDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down.icon';
 import * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';
 import { StyledForm } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';
+import { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner';
+import { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';
 import { StyledWorkbench } from '../Workbench/Workbench.styles';
 registerIcon(nodesDownIcon, informationIcon);
 const StyledTextWithEllipsis = styled(Text) `
@@ -27,6 +29,11 @@ export const StyledPage = styled.div(({ theme: { base: { spacing, palette: { 'pr
       background: ${primaryBackground};
       height: 100%;
 
+      ${StyledBanner},
+      ${StyledTabs} {
+        margin-block-start: calc(1.5 * ${spacing});
+      }
+
       ${StyledRegion} ${StyledWorkbench} {
         position: absolute;
         width: 100%;

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

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  PropsWithoutRef,\n  Ref,\n  FunctionComponent,\n  forwardRef,\n  useState,\n  useEffect,\n  MouseEvent,\n  useMemo\n} 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 { StyledForm } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';\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        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\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, ...restProps }: PropsWithoutRef<TabbedPageProps>, ref: Ref<HTMLDivElement>) => {\n    return (\n      <CoreTabbedPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        tabs={tabs}\n        ref={ref}\n        scrollContent\n      />\n    );\n  }\n);\n\nexport const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps> = forwardRef(\n  (\n    {\n      a,\n\n      ...restProps\n    }: PropsWithoutRef<OneColumnPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <CoreOneColumnPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        scrollContent\n        a={a}\n        ref={ref}\n      />\n    );\n  }\n);\n"]}
+{"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  PropsWithoutRef,\n  Ref,\n  FunctionComponent,\n  forwardRef,\n  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 { StyledForm } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';\nimport { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';\n\nimport { StyledWorkbench } from '../Workbench/Workbench.styles';\n\nregisterIcon(nodesDownIcon, informationIcon);\n\nexport interface PageHeaderProps extends Pick<PageTemplateProps, 'title' | 'actions'> {\n  metadata?: FieldValueListProps['fields'];\n  status?: { type: StatusProps['variant']; label: string };\n  titleTag?: 'h1' | 'h2';\n  additionalInfo?: {\n    title: string;\n    description?: string;\n    fields: FieldValueListProps['fields'];\n    onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;\n  };\n}\n\ntype OmittedPageProps = 'header' | 'scrollContent';\n\nexport interface OneColumnPageProps\n  extends OmitStrict<CoreOneColumnPageProps, OmittedPageProps>,\n    PageHeaderProps {}\n\nexport interface TabbedPageProps\n  extends OmitStrict<CoreTabbedPageProps, OmittedPageProps>,\n    PageHeaderProps {}\n\nconst StyledTextWithEllipsis: typeof Text = styled(Text)`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  line-height: 1.15;\n`;\n\nconst StyledInfoPopover: 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\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, ...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/Workbench/Workbench.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Workbench.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAiD,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,YAAY,EAAQ,MAAM,yBAAyB,CAAC;AAI7D,OAAO,EAAqB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAItE,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,GAAG,YAAY,CAyDhD,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Workbench.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAiD,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAQ,YAAY,EAAQ,MAAM,yBAAyB,CAAC;AAInE,OAAO,EAAqB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAItE,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,GAAG,YAAY,CA2DhD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/Workbench/Workbench.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, forwardRef, useRef } from 'react';
-import { Grid } from '@pega/cosmos-react-core';
+import { Flex, Grid } from '@pega/cosmos-react-core';
 import Toolbar from './Toolbar';
 import { StyledMain, StyledWorkbench } from './Workbench.styles';
 import ConfigurationPanel from './ConfigurationPanel';
@@ -17,7 +17,7 @@ const Workbench = forwardRef(({ children, utilityPanels = [], configurationPanel
             cols: 'min-content minmax(10rem, 1fr) min-content',
             rows: 'auto minmax(0, 1fr)',
             areas: '"header header header" "utility main configuration"'
-        }, as: StyledWorkbench, ref: ref, children: [(toolbar ?? utilityPanels.length > 0) && (_jsx(Grid, { item: { area: 'header' }, children: _jsx(Toolbar, { ...toolbar, options: utilityPanels, onToggle: onToggle, currentPanelId: currentlyOpenPanelId }) })), panelContentRef.current && (_jsx(Grid, { item: { area: 'utility' }, children: _jsx(UtilityPanel, { ...panelContentRef.current, open: !!currentlyOpenPanelId }) })), _jsx(Grid, { item: { area: 'main' }, children: _jsx(StyledMain, { children: children }) }), _jsx(Grid, { item: { area: 'configuration' }, children: _jsx(ConfigurationPanel, { ...configurationPanel }) })] }));
+        }, as: StyledWorkbench, ref: ref, children: [(toolbar ?? utilityPanels.length > 0) && (_jsx(Grid, { item: { area: 'header' }, children: _jsx(Toolbar, { ...toolbar, options: utilityPanels, onToggle: onToggle, currentPanelId: currentlyOpenPanelId }) })), panelContentRef.current && (_jsx(Grid, { item: { area: 'utility' }, children: _jsx(UtilityPanel, { ...panelContentRef.current, open: !!currentlyOpenPanelId }) })), _jsx(Grid, { item: { area: 'main' }, children: _jsx(Flex, { as: StyledMain, container: { pad: 2 }, children: children }) }), _jsx(Grid, { item: { area: 'configuration' }, children: _jsx(ConfigurationPanel, { ...configurationPanel }) })] }));
 });
 export default Workbench;
 //# sourceMappingURL=Workbench.js.map

package/lib/components/Workbench/Workbench.js.map

@@ -1 +1 @@
-{"version":3,"file":"Workbench.js","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,UAAU,EAAmB,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAgB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEjE,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,MAAM,SAAS,GAAsC,UAAU,CAC7D,CACE,EACE,QAAQ,EACR,aAAa,GAAG,EAAE,EAClB,kBAAkB,EAClB,OAAO,EACP,uBAAuB,EACS,EAClC,GAA0B,EAC1B,EAAE;IACF,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAE9D,uBAAuB,CAAC,CAAC;IAE3B,MAAM,eAAe,GAAG,MAAM,CAC5B,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,uBAAuB,CAAC,CAClE,CAAC;IACF,MAAM,QAAQ,GAAG,CAAC,OAAiC,EAAE,EAAE;QACrD,uBAAuB,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,OAAO;YAAE,eAAe,CAAC,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,OAAO,CAAC,CAAC;IAC3F,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;YACT,IAAI,EAAE,4CAA4C;YAClD,IAAI,EAAE,qBAAqB;YAC3B,KAAK,EAAE,qDAAqD;SAC7D,EACD,EAAE,EAAE,eAAe,EACnB,GAAG,EAAE,GAAG,aAEP,CAAC,OAAO,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CACxC,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,YAC5B,KAAC,OAAO,OACF,OAAO,EACX,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,oBAAoB,GACpC,GACG,CACR,EACA,eAAe,CAAC,OAAO,IAAI,CAC1B,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,YAC7B,KAAC,YAAY,OAAK,eAAe,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,oBAAoB,GAAI,GACtE,CACR,EACD,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,YAC1B,KAAC,UAAU,cAAE,QAAQ,GAAc,GAC9B,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,YACnC,KAAC,kBAAkB,OAAK,kBAAkB,GAAI,GACzC,IACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { FC, useState, forwardRef, PropsWithoutRef, useRef } from 'react';\n\nimport { ForwardProps, Grid } from '@pega/cosmos-react-core';\n\nimport Toolbar from './Toolbar';\nimport { StyledMain, StyledWorkbench } from './Workbench.styles';\nimport { UtilityPanelProps, WorkbenchProps } from './Workbench.types';\nimport ConfigurationPanel from './ConfigurationPanel';\nimport UtilityPanel from './UtilityPanel';\n\nconst Workbench: FC<WorkbenchProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      utilityPanels = [],\n      configurationPanel,\n      toolbar,\n      initiallyVisiblePanelId\n    }: PropsWithoutRef<WorkbenchProps>,\n    ref: WorkbenchProps['ref']\n  ) => {\n    const [currentlyOpenPanelId, setCurrentlyOpenPanelId] = useState<\n      UtilityPanelProps['id'] | undefined\n    >(initiallyVisiblePanelId);\n\n    const panelContentRef = useRef<UtilityPanelProps | undefined>(\n      utilityPanels.find(panel => panel.id === initiallyVisiblePanelId)\n    );\n    const onToggle = (panelId?: UtilityPanelProps['id']) => {\n      setCurrentlyOpenPanelId(panelId);\n      if (panelId) panelContentRef.current = utilityPanels.find(panel => panel.id === panelId);\n    };\n\n    return (\n      <Grid\n        container={{\n          cols: 'min-content minmax(10rem, 1fr) min-content',\n          rows: 'auto minmax(0, 1fr)',\n          areas: '\"header header header\" \"utility main configuration\"'\n        }}\n        as={StyledWorkbench}\n        ref={ref}\n      >\n        {(toolbar ?? utilityPanels.length > 0) && (\n          <Grid item={{ area: 'header' }}>\n            <Toolbar\n              {...toolbar}\n              options={utilityPanels}\n              onToggle={onToggle}\n              currentPanelId={currentlyOpenPanelId}\n            />\n          </Grid>\n        )}\n        {panelContentRef.current && (\n          <Grid item={{ area: 'utility' }}>\n            <UtilityPanel {...panelContentRef.current} open={!!currentlyOpenPanelId} />\n          </Grid>\n        )}\n        <Grid item={{ area: 'main' }}>\n          <StyledMain>{children}</StyledMain>\n        </Grid>\n        <Grid item={{ area: 'configuration' }}>\n          <ConfigurationPanel {...configurationPanel} />\n        </Grid>\n      </Grid>\n    );\n  }\n);\n\nexport default Workbench;\n"]}
+{"version":3,"file":"Workbench.js","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,UAAU,EAAmB,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,IAAI,EAAgB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEjE,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,MAAM,SAAS,GAAsC,UAAU,CAC7D,CACE,EACE,QAAQ,EACR,aAAa,GAAG,EAAE,EAClB,kBAAkB,EAClB,OAAO,EACP,uBAAuB,EACS,EAClC,GAA0B,EAC1B,EAAE;IACF,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAE9D,uBAAuB,CAAC,CAAC;IAE3B,MAAM,eAAe,GAAG,MAAM,CAC5B,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,uBAAuB,CAAC,CAClE,CAAC;IACF,MAAM,QAAQ,GAAG,CAAC,OAAiC,EAAE,EAAE;QACrD,uBAAuB,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,OAAO;YAAE,eAAe,CAAC,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,OAAO,CAAC,CAAC;IAC3F,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;YACT,IAAI,EAAE,4CAA4C;YAClD,IAAI,EAAE,qBAAqB;YAC3B,KAAK,EAAE,qDAAqD;SAC7D,EACD,EAAE,EAAE,eAAe,EACnB,GAAG,EAAE,GAAG,aAEP,CAAC,OAAO,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CACxC,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,YAC5B,KAAC,OAAO,OACF,OAAO,EACX,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,oBAAoB,GACpC,GACG,CACR,EACA,eAAe,CAAC,OAAO,IAAI,CAC1B,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,YAC7B,KAAC,YAAY,OAAK,eAAe,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,oBAAoB,GAAI,GACtE,CACR,EACD,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,YAC1B,KAAC,IAAI,IAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,YACxC,QAAQ,GACJ,GACF,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,YACnC,KAAC,kBAAkB,OAAK,kBAAkB,GAAI,GACzC,IACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { FC, useState, forwardRef, PropsWithoutRef, useRef } from 'react';\n\nimport { Flex, ForwardProps, Grid } from '@pega/cosmos-react-core';\n\nimport Toolbar from './Toolbar';\nimport { StyledMain, StyledWorkbench } from './Workbench.styles';\nimport { UtilityPanelProps, WorkbenchProps } from './Workbench.types';\nimport ConfigurationPanel from './ConfigurationPanel';\nimport UtilityPanel from './UtilityPanel';\n\nconst Workbench: FC<WorkbenchProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      utilityPanels = [],\n      configurationPanel,\n      toolbar,\n      initiallyVisiblePanelId\n    }: PropsWithoutRef<WorkbenchProps>,\n    ref: WorkbenchProps['ref']\n  ) => {\n    const [currentlyOpenPanelId, setCurrentlyOpenPanelId] = useState<\n      UtilityPanelProps['id'] | undefined\n    >(initiallyVisiblePanelId);\n\n    const panelContentRef = useRef<UtilityPanelProps | undefined>(\n      utilityPanels.find(panel => panel.id === initiallyVisiblePanelId)\n    );\n    const onToggle = (panelId?: UtilityPanelProps['id']) => {\n      setCurrentlyOpenPanelId(panelId);\n      if (panelId) panelContentRef.current = utilityPanels.find(panel => panel.id === panelId);\n    };\n\n    return (\n      <Grid\n        container={{\n          cols: 'min-content minmax(10rem, 1fr) min-content',\n          rows: 'auto minmax(0, 1fr)',\n          areas: '\"header header header\" \"utility main configuration\"'\n        }}\n        as={StyledWorkbench}\n        ref={ref}\n      >\n        {(toolbar ?? utilityPanels.length > 0) && (\n          <Grid item={{ area: 'header' }}>\n            <Toolbar\n              {...toolbar}\n              options={utilityPanels}\n              onToggle={onToggle}\n              currentPanelId={currentlyOpenPanelId}\n            />\n          </Grid>\n        )}\n        {panelContentRef.current && (\n          <Grid item={{ area: 'utility' }}>\n            <UtilityPanel {...panelContentRef.current} open={!!currentlyOpenPanelId} />\n          </Grid>\n        )}\n        <Grid item={{ area: 'main' }}>\n          <Flex as={StyledMain} container={{ pad: 2 }}>\n            {children}\n          </Flex>\n        </Grid>\n        <Grid item={{ area: 'configuration' }}>\n          <ConfigurationPanel {...configurationPanel} />\n        </Grid>\n      </Grid>\n    );\n  }\n);\n\nexport default Workbench;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-build",
-  "version": "3.0.0-dev.16.0",
+  "version": "3.0.0-dev.18.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.16.0",
-    "@pega/cosmos-react-dnd": "3.0.0-dev.16.0",
+    "@pega/cosmos-react-core": "3.0.0-dev.18.0",
+    "@pega/cosmos-react-dnd": "3.0.0-dev.18.0",
     "@types/dagre": "^0.7.46",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",

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

@@ -1,18 +0,0 @@
-import { ReactNode, FC, Ref } from 'react';
-import { ForwardProps, Action } from '@pega/cosmos-react-core';
-export interface ObjectConfigProps {
-    label: string;
-    heading: string;
-    primaryAction: Action;
-    secondaryAction: Action;
-    content?: ReactNode;
-    onBeforeOpen?: () => void;
-    onAfterClose?: (id?: string) => void;
-    ref?: Ref<HTMLDivElement>;
-}
-declare const ObjectConfig: FC<ObjectConfigProps & ForwardProps & {
-    disabled?: boolean;
-    dismissPopover: (id?: string) => void;
-}>;
-export default ObjectConfig;
-//# sourceMappingURL=ObjectConfig.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ObjectConfig.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectConfig.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,EAAc,MAAM,OAAO,CAAC;AAGvD,OAAO,EACL,YAAY,EAIZ,MAAM,EAIP,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAaD,QAAA,MAAM,YAAY,EAAE,EAAE,CACpB,iBAAiB,GAAG,YAAY,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,CAuCjG,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/ObjectSelect/ObjectConfig.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { css } from 'styled-components';
-import { Button, Flex, Icon, Text, useI18n, defaultThemeProp } from '@pega/cosmos-react-core';
-const ScrollContainer = styled.div(({ theme: { base } }) => {
-    return css `
-    max-height: 12rem;
-    max-width: 80ch;
-    padding: calc(0.5 * ${base.spacing}) calc(2 * ${base.spacing});
-    overflow: auto;
-  `;
-});
-ScrollContainer.defaultProps = defaultThemeProp;
-const ObjectConfig = ({ heading, content, primaryAction, secondaryAction, disabled, dismissPopover }) => {
-    const t = useI18n();
-    return (_jsxs("div", { children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', pad: 2 }, children: [_jsx(Text, { variant: 'h3', children: heading }), _jsx(Button, { icon: true, variant: 'simple', label: t('close'), onClick: () => dismissPopover(), children: _jsx(Icon, { name: 'times' }) })] }), _jsx(Flex, { item: { grow: 1 }, as: ScrollContainer, children: content }), _jsxs(Flex, { container: { justify: 'between', pad: 2 }, children: [_jsx(Button, { variant: 'secondary', disabled: disabled, onClick: (e) => {
-                            secondaryAction.onClick?.(secondaryAction.id, e);
-                            dismissPopover(secondaryAction.id);
-                        }, children: secondaryAction.text }), _jsx(Button, { variant: 'primary', disabled: disabled, onClick: (e) => {
-                            primaryAction.onClick?.(primaryAction.id, e);
-                            dismissPopover(primaryAction.id);
-                        }, children: primaryAction.text })] })] }));
-};
-export default ObjectConfig;
-//# sourceMappingURL=ObjectConfig.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ObjectConfig.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectConfig.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,MAAM,EACN,IAAI,EACJ,IAAI,EAEJ,IAAI,EACJ,OAAO,EACP,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AAajC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;;;0BAGc,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,OAAO;;GAE7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,YAAY,GAEd,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,EAAE;IACrF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,0BACE,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACnE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,GAAQ,EACnC,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,EAAE,YAC9E,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,IACJ,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,eAAe,YACzC,OAAO,GACH,EACP,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,EAAE,aAC7C,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;4BAC5C,eAAe,CAAC,OAAO,EAAE,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;4BACjD,cAAc,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;wBACrC,CAAC,YAEA,eAAe,CAAC,IAAI,GACd,EACT,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;4BAC5C,aAAa,CAAC,OAAO,EAAE,CAAC,aAAa,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;4BAC7C,cAAc,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;wBACnC,CAAC,YAEA,aAAa,CAAC,IAAI,GACZ,IACJ,IACH,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { ReactNode, FC, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  ForwardProps,\n  Button,\n  Flex,\n  Icon,\n  Action,\n  Text,\n  useI18n,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nexport interface ObjectConfigProps {\n  label: string;\n  heading: string;\n  primaryAction: Action;\n  secondaryAction: Action;\n  content?: ReactNode;\n  onBeforeOpen?: () => void;\n  onAfterClose?: (id?: string) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst ScrollContainer = styled.div(({ theme: { base } }) => {\n  return css`\n    max-height: 12rem;\n    max-width: 80ch;\n    padding: calc(0.5 * ${base.spacing}) calc(2 * ${base.spacing});\n    overflow: auto;\n  `;\n});\n\nScrollContainer.defaultProps = defaultThemeProp;\n\nconst ObjectConfig: FC<\n  ObjectConfigProps & ForwardProps & { disabled?: boolean; dismissPopover: (id?: string) => void }\n> = ({ heading, content, primaryAction, secondaryAction, disabled, dismissPopover }) => {\n  const t = useI18n();\n\n  return (\n    <div>\n      <Flex container={{ justify: 'between', alignItems: 'center', pad: 2 }}>\n        <Text variant='h3'>{heading}</Text>\n        <Button icon variant='simple' label={t('close')} onClick={() => dismissPopover()}>\n          <Icon name='times' />\n        </Button>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={ScrollContainer}>\n        {content}\n      </Flex>\n      <Flex container={{ justify: 'between', pad: 2 }}>\n        <Button\n          variant='secondary'\n          disabled={disabled}\n          onClick={(e: MouseEvent<HTMLButtonElement>) => {\n            secondaryAction.onClick?.(secondaryAction.id, e);\n            dismissPopover(secondaryAction.id);\n          }}\n        >\n          {secondaryAction.text}\n        </Button>\n        <Button\n          variant='primary'\n          disabled={disabled}\n          onClick={(e: MouseEvent<HTMLButtonElement>) => {\n            primaryAction.onClick?.(primaryAction.id, e);\n            dismissPopover(primaryAction.id);\n          }}\n        >\n          {primaryAction.text}\n        </Button>\n      </Flex>\n    </div>\n  );\n};\n\nexport default ObjectConfig;\n"]}