@pega/cosmos-react-build 3.0.0-dev.8.0 → 3.0.0-rc.1

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

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

package/lib/components/PageTemplates/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;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,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,EAGX,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,kBAAkB,IAAI,sBAAsB,EAE5C,eAAe,IAAI,mBAAmB,EACtC,mBAAmB,EASnB,YAAY,EAMZ,iBAAiB,EACjB,UAAU,EAEV,WAAW,EAOZ,MAAM,yBAAyB,CAAC;AAYjC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACnF,QAAQ,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QACtC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACrD,CAAC;CACH;AAED,aAAK,gBAAgB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAEnD,MAAM,WAAW,kBACf,SAAQ,UAAU,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,EAC1D,eAAe;CAAG;AAEtB,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,EACvD,eAAe;CAAG;AAoBtB,eAAO,MAAM,UAAU,yGAiCtB,CAAC;AAIF,eAAO,MAAM,UAAU,mEAOpB,eAAe,gBA0GjB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAaxE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAoB9E,CAAC"}

package/lib/components/PageTemplates/PageTemplates.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useState, useEffect, useMemo } from 'react';
+import { forwardRef, useState, useEffect, useMemo, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { OneColumnPage as CoreOneColumnPage, TabbedPage as CoreTabbedPage, Flex, Status, SummaryItem, Text, Button, Popover, FieldValueList, Icon, defaultThemeProp, useI18n, useDirection, useElement, useOuterEvent, StyledSummaryItemActions, registerIcon, StyledRegion, MetaList, StyledBreadcrumbs, StyledPageHeader } from '@pega/cosmos-react-core';
+import { OneColumnPage as CoreOneColumnPage, TabbedPage as CoreTabbedPage, Flex, Status, SummaryItem, Text, Button, Popover, FieldValueList, Icon, defaultThemeProp, useI18n, useDirection, useElement, useOuterEvent, StyledSummaryItemActions, registerIcon, StyledRegion, MetaList, StyledBreadcrumbs, StyledPageHeader, useAfterInitialEffect } from '@pega/cosmos-react-core';
 import * as nodesDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down.icon';
 import * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';
-import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
-import { StyledForm } from '@pega/cosmos-react-core/lib/components/Form/Form';
+import { StyledForm } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';
+import { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner';
+import { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';
+import { StyledDialogTitle } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';
 import { StyledWorkbench } from '../Workbench/Workbench.styles';
 registerIcon(nodesDownIcon, informationIcon);
 const StyledTextWithEllipsis = styled(Text) `
@@ -28,10 +30,15 @@ export const StyledPage = styled.div(({ theme: { base: { spacing, palette: { 'pr
       background: ${primaryBackground};
       height: 100%;
 
-      ${StyledRegion} > ${StyledWorkbench},
-        ${StyledTabPanel} > ${StyledWorkbench} {
+      ${StyledBanner},
+      ${StyledTabs} {
+        margin-block-start: calc(1.5 * ${spacing});
+      }
+
+      ${StyledRegion} ${StyledWorkbench} {
         position: absolute;
-        width: calc(100% - calc(4 * ${spacing}));
+        width: 100%;
+        margin: 0 calc(-2 * ${spacing});
       }
 
       ${StyledRegion} ${StyledForm} {
@@ -50,6 +57,7 @@ export const PageHeader = ({ title, metadata, additionalInfo, actions, status, t
     const [buttonEl, setButtonEl] = useElement();
     const t = useI18n();
     const { rtl } = useDirection();
+    const popoverTitleRef = useRef(null);
     useOuterEvent('mousedown', [popoverEl, buttonEl], () => {
         if (open)
             setOpen(false);
@@ -72,8 +80,18 @@ export const PageHeader = ({ title, metadata, additionalInfo, actions, status, t
             popoverEl?.removeEventListener('keydown', closePopover);
         };
     }, [popoverEl]);
+    useAfterInitialEffect(() => {
+        if (open && popoverEl) {
+            if (popoverTitleRef.current) {
+                popoverTitleRef.current.focus();
+            }
+            else {
+                buttonEl?.focus();
+            }
+        }
+    }, [open, popoverEl]);
     const metaListItems = useMemo(() => metadata?.map(({ name, value }) => `${name}: ${value}`), [metadata]);
-    return (_jsx(StyledHeaderContent, { container: true, primary: _jsxs(Flex, { container: { alignItems: 'center', gap: 0.5, wrap: 'wrap' }, children: [_jsxs(Flex, { container: { gap: 0.5 }, item: { shrink: 0 }, children: [_jsx(StyledTextWithEllipsis, { variant: 'h1', forwardedAs: titleTag, children: title }), additionalInfo && (_jsxs(_Fragment, { children: [_jsx(Button, { label: t('additional_info'), variant: 'simple', icon: true, ref: setButtonEl, onClick: () => setOpen(cur => !cur), children: _jsx(Icon, { name: 'information' }) }), _jsx(StyledInfoPopover, { ref: setPopoverRef, show: open, target: buttonEl, placement: rtl ? 'bottom-end' : 'bottom-start', children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'start', gap: 2, pad: 2 }, children: [_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(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) => {
+    return (_jsx(StyledHeaderContent, { container: true, primary: _jsxs(Flex, { container: { alignItems: 'center', gap: 0.5, wrap: 'wrap' }, children: [_jsxs(Flex, { container: { gap: 0.5 }, item: { shrink: 0 }, children: [_jsx(StyledTextWithEllipsis, { variant: 'h1', forwardedAs: titleTag, children: title }), additionalInfo && (_jsxs(_Fragment, { children: [_jsx(Button, { label: t('additional_info'), variant: 'simple', icon: true, ref: setButtonEl, onClick: () => setOpen(cur => !cur), children: _jsx(Icon, { name: 'information' }) }), _jsx(StyledInfoPopover, { ref: setPopoverRef, show: open, target: buttonEl, placement: rtl ? 'bottom-end' : 'bottom-start', children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'start', gap: 2, pad: 2 }, children: [_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(StyledDialogTitle, { variant: 'h3', tabIndex: -1, ref: popoverTitleRef, children: additionalInfo.title }), additionalInfo.description && (_jsx(Text, { as: 'p', children: additionalInfo.description })), _jsx(FieldValueList, { variant: 'inline', fields: additionalInfo.fields })] }), additionalInfo.onEdit && (_jsx(Button, { onClick: (e) => {
                                                     setOpen(false);
                                                     additionalInfo.onEdit?.(e);
                                                 }, children: t('edit_details') }))] }) })] }))] }), status && _jsx(Status, { variant: status.type, children: status.label })] }), secondary: metaListItems && _jsx(MetaList, { items: metaListItems }), actions: actions }));

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

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":";AAAA,OAAO,EAIL,UAAU,EACV,QAAQ,EACR,SAAS,EAET,OAAO,EACR,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,aAAa,IAAI,iBAAiB,EAElC,UAAU,IAAI,cAAc,EAG5B,IAAI,EACJ,MAAM,EACN,WAAW,EACX,IAAI,EACJ,MAAM,EACN,OAAO,EACP,cAAc,EACd,IAAI,EAEJ,gBAAgB,EAChB,OAAO,EACP,YAAY,EACZ,UAAU,EACV,aAAa,EAGb,wBAAwB,EAExB,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,KAAK,eAAe,MAAM,oEAAoE,CAAC;AACtG,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAC;AACtF,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAE9E,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAEhE,YAAY,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC;AAwB7C,MAAM,sBAAsB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;CAKvD,CAAC;AAEF,MAAM,iBAAiB,GAAmB,MAAM,CAAC,OAAO,CAAC,CAAA;;;CAGxD,CAAC;AAEF,MAAM,mBAAmB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;IAC3C,wBAAwB;;;CAG3B,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,OAAO,EAAE,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,EACrD,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;oBACM,iBAAiB;;;QAG7B,YAAY,MAAM,eAAe;UAC/B,cAAc,MAAM,eAAe;;sCAEP,OAAO;;;QAGrC,YAAY,IAAI,UAAU;;;;QAI1B,gBAAgB,MAAM,iBAAiB;;;KAG1C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,cAAc,EACd,OAAO,EACP,MAAM,EACN,QAAQ,EACQ,EAAE,EAAE;IACpB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,CAAC,SAAS,EAAE,aAAa,CAAC,GAAG,UAAU,EAAe,CAAC;IAC7D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAe,CAAC;IAC1D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE;QACrD,IAAI,IAAI;YAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,CAAgB,EAAE,EAAE;YACxC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACtB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,OAAO,CAAC,KAAK,CAAC,CAAC;gBACf,IAAI,CAAC,CAAC,aAAa,KAAK,SAAS,EAAE;oBACjC,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,QAAQ,EAAE,KAAK,EAAE,CAAC;iBACnB;aACF;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QACnD,SAAS,EAAE,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QAErD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;YACtD,SAAS,EAAE,mBAAmB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QAC1D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,KAAK,KAAK,EAAE,CAAC,EAC7D,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,KAAC,mBAAmB,IAClB,SAAS,QACT,OAAO,EACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,aAC/D,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAChD,KAAC,sBAAsB,IAAC,OAAO,EAAC,IAAI,EAAC,WAAW,EAAE,QAAQ,YACvD,KAAK,GACiB,EACxB,cAAc,IAAI,CACjB,8BACE,KAAC,MAAM,IACL,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC3B,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,GAAG,EAAE,WAAW,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,YAEnC,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,GACpB,EACT,KAAC,iBAAiB,IAChB,GAAG,EAAE,aAAa,EAClB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,QAAQ,EAChB,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,YAE9C,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,aAC3E,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,cAAc,CAAC,KAAK,GAAQ,EAC/C,cAAc,CAAC,WAAW,IAAI,CAC7B,KAAC,IAAI,IAAC,EAAE,EAAC,GAAG,YAAE,cAAc,CAAC,WAAW,GAAQ,CACjD,EACD,KAAC,cAAc,IAAC,OAAO,EAAC,QAAQ,EAAC,MAAM,EAAE,cAAc,CAAC,MAAM,GAAI,IAC7D,EACN,cAAc,CAAC,MAAM,IAAI,CACxB,KAAC,MAAM,IACL,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;oDAC5C,OAAO,CAAC,KAAK,CAAC,CAAC;oDACf,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;gDAC7B,CAAC,YAEA,CAAC,CAAC,cAAc,CAAC,GACX,CACV,IACI,GACW,IACnB,CACJ,IACI,EACN,MAAM,IAAI,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,IAAI,YAAG,MAAM,CAAC,KAAK,GAAU,IAC3D,EAET,SAAS,EAAE,aAAa,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,GAAI,EAC9D,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAsD,UAAU,CACrF,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,EAAoC,EAAE,GAAwB,EAAE,EAAE;IACrF,OAAO,CACL,KAAC,cAAc,OACT,SAAS,EACb,EAAE,EAAE,UAAU,EACd,MAAM,EAAE,KAAC,UAAU,OAAK,SAAS,GAAI,EACrC,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,aAAa,SACb,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAyD,UAAU,CAC3F,CACE,EACE,CAAC,EAED,GAAG,SAAS,EACwB,EACtC,GAAwB,EACxB,EAAE;IACF,OAAO,CACL,KAAC,iBAAiB,OACZ,SAAS,EACb,EAAE,EAAE,UAAU,EACd,MAAM,EAAE,KAAC,UAAU,OAAK,SAAS,GAAI,EACrC,aAAa,QACb,CAAC,EAAE,CAAC,EACJ,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC","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, ...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  useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  OneColumnPage as CoreOneColumnPage,\n  OneColumnPageProps as CoreOneColumnPageProps,\n  TabbedPage as CoreTabbedPage,\n  TabbedPageProps as CoreTabbedPageProps,\n  FieldValueListProps,\n  Flex,\n  Status,\n  SummaryItem,\n  Text,\n  Button,\n  Popover,\n  FieldValueList,\n  Icon,\n  ForwardProps,\n  defaultThemeProp,\n  useI18n,\n  useDirection,\n  useElement,\n  useOuterEvent,\n  PageTemplateProps,\n  OmitStrict,\n  StyledSummaryItemActions,\n  StatusProps,\n  registerIcon,\n  StyledRegion,\n  MetaList,\n  StyledBreadcrumbs,\n  StyledPageHeader,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport * as nodesDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down.icon';\nimport * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';\nimport { StyledForm } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';\nimport { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';\nimport { StyledDialogTitle } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\n\nimport { StyledWorkbench } from '../Workbench/Workbench.styles';\n\nregisterIcon(nodesDownIcon, informationIcon);\n\nexport interface PageHeaderProps extends Pick<PageTemplateProps, 'title' | 'actions'> {\n  metadata?: FieldValueListProps['fields'];\n  status?: { type: StatusProps['variant']; label: string };\n  titleTag?: 'h1' | 'h2';\n  additionalInfo?: {\n    title: string;\n    description?: string;\n    fields: FieldValueListProps['fields'];\n    onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;\n  };\n}\n\ntype OmittedPageProps = 'header' | 'scrollContent';\n\nexport interface OneColumnPageProps\n  extends OmitStrict<CoreOneColumnPageProps, OmittedPageProps>,\n    PageHeaderProps {}\n\nexport interface TabbedPageProps\n  extends OmitStrict<CoreTabbedPageProps, OmittedPageProps>,\n    PageHeaderProps {}\n\nconst StyledTextWithEllipsis: typeof Text = styled(Text)`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  line-height: 1.15;\n`;\n\nconst StyledInfoPopover: typeof Popover = styled(Popover)`\n  max-width: 60ch;\n  overflow-wrap: break-word;\n`;\n\nconst StyledHeaderContent = styled(SummaryItem)`\n  ${StyledSummaryItemActions} {\n    align-self: start;\n  }\n`;\n\nexport const StyledPage = styled.div(\n  ({\n    theme: {\n      base: {\n        spacing,\n        palette: { 'primary-background': primaryBackground }\n      }\n    }\n  }) => {\n    return css`\n      background: ${primaryBackground};\n      height: 100%;\n\n      ${StyledBanner},\n      ${StyledTabs} {\n        margin-block-start: calc(1.5 * ${spacing});\n      }\n\n      ${StyledRegion} ${StyledWorkbench} {\n        position: absolute;\n        width: 100%;\n        margin: 0 calc(-2 * ${spacing});\n      }\n\n      ${StyledRegion} ${StyledForm} {\n        max-width: 80ch;\n      }\n\n      ${StyledPageHeader} > ${StyledBreadcrumbs} {\n        margin-block-end: 0;\n      }\n    `;\n  }\n);\n\nStyledPage.defaultProps = defaultThemeProp;\n\nexport const PageHeader = ({\n  title,\n  metadata,\n  additionalInfo,\n  actions,\n  status,\n  titleTag\n}: PageHeaderProps) => {\n  const [open, setOpen] = useState(false);\n  const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n  const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n  const t = useI18n();\n  const { rtl } = useDirection();\n  const popoverTitleRef = useRef<HTMLSpanElement>(null);\n\n  useOuterEvent('mousedown', [popoverEl, buttonEl], () => {\n    if (open) setOpen(false);\n  });\n\n  useEffect(() => {\n    const closePopover = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        setOpen(false);\n        if (e.currentTarget === popoverEl) {\n          e.stopPropagation();\n          buttonEl?.focus();\n        }\n      }\n    };\n\n    document.addEventListener('keydown', closePopover);\n    popoverEl?.addEventListener('keydown', closePopover);\n\n    return () => {\n      document.removeEventListener('keydown', closePopover);\n      popoverEl?.removeEventListener('keydown', closePopover);\n    };\n  }, [popoverEl]);\n\n  useAfterInitialEffect(() => {\n    if (open && popoverEl) {\n      if (popoverTitleRef.current) {\n        popoverTitleRef.current.focus();\n      } else {\n        buttonEl?.focus();\n      }\n    }\n  }, [open, popoverEl]);\n\n  const metaListItems = useMemo(\n    () => metadata?.map(({ name, value }) => `${name}: ${value}`),\n    [metadata]\n  );\n\n  return (\n    <StyledHeaderContent\n      container\n      primary={\n        <Flex container={{ alignItems: 'center', gap: 0.5, wrap: 'wrap' }}>\n          <Flex container={{ gap: 0.5 }} item={{ shrink: 0 }}>\n            <StyledTextWithEllipsis variant='h1' forwardedAs={titleTag}>\n              {title}\n            </StyledTextWithEllipsis>\n            {additionalInfo && (\n              <>\n                <Button\n                  label={t('additional_info')}\n                  variant='simple'\n                  icon\n                  ref={setButtonEl}\n                  onClick={() => setOpen(cur => !cur)}\n                >\n                  <Icon name='information' />\n                </Button>\n                <StyledInfoPopover\n                  ref={setPopoverRef}\n                  show={open}\n                  target={buttonEl}\n                  placement={rtl ? 'bottom-end' : 'bottom-start'}\n                >\n                  <Flex container={{ direction: 'column', alignItems: 'start', gap: 2, pad: 2 }}>\n                    <Flex container={{ direction: 'column', gap: 1 }}>\n                      <StyledDialogTitle variant='h3' tabIndex={-1} ref={popoverTitleRef}>\n                        {additionalInfo.title}\n                      </StyledDialogTitle>\n                      {additionalInfo.description && (\n                        <Text as='p'>{additionalInfo.description}</Text>\n                      )}\n                      <FieldValueList variant='inline' fields={additionalInfo.fields} />\n                    </Flex>\n                    {additionalInfo.onEdit && (\n                      <Button\n                        onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                          setOpen(false);\n                          additionalInfo.onEdit?.(e);\n                        }}\n                      >\n                        {t('edit_details')}\n                      </Button>\n                    )}\n                  </Flex>\n                </StyledInfoPopover>\n              </>\n            )}\n          </Flex>\n          {status && <Status variant={status.type}>{status.label}</Status>}\n        </Flex>\n      }\n      secondary={metaListItems && <MetaList items={metaListItems} />}\n      actions={actions}\n    />\n  );\n};\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n  ({ tabs, ...restProps }: PropsWithoutRef<TabbedPageProps>, ref: Ref<HTMLDivElement>) => {\n    return (\n      <CoreTabbedPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        tabs={tabs}\n        ref={ref}\n        scrollContent\n      />\n    );\n  }\n);\n\nexport const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps> = forwardRef(\n  (\n    {\n      a,\n\n      ...restProps\n    }: PropsWithoutRef<OneColumnPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <CoreOneColumnPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        scrollContent\n        a={a}\n        ref={ref}\n      />\n    );\n  }\n);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigurationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/ConfigurationPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0B,MAAM,OAAO,CAAC;AAKnD,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA8BnD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ConfigurationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/ConfigurationPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK3B,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAkBnD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/components/Workbench/ConfigurationPanel.js

@@ -1,20 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect } from 'react';
-import { Flex, Button, Icon, useI18n, ExpandCollapse } from '@pega/cosmos-react-core';
-import { StyledPanel, StyledTextWithEllipsis } from './Workbench.styles';
+import { Flex, Button, Icon, useI18n, ExpandCollapse, useEscape } from '@pega/cosmos-react-core';
+import { StyledPanel, StyledPanelContent, StyledTextWithEllipsis } from './Workbench.styles';
 const ConfigurationPanel = ({ open, header, content, onDismiss }) => {
     const t = useI18n();
-    const onKeyDown = useCallback(({ key }) => {
-        if (key === 'Escape')
-            onDismiss();
-    }, [onDismiss]);
-    useEffect(() => {
-        document.addEventListener('keydown', onKeyDown);
-        return () => {
-            document.removeEventListener('keydown', onKeyDown);
-        };
-    }, [onKeyDown]);
-    return (_jsx(ExpandCollapse, { as: StyledPanel, dimension: 'width', collapsed: !open, min: '0', max: '25rem', children: _jsxs(Flex, { container: { pad: 2, direction: 'column', gap: 1 }, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, children: [_jsx(StyledTextWithEllipsis, { variant: 'h3', children: header }), _jsx(Button, { variant: 'simple', icon: true, onClick: onDismiss, label: t('close_configuration_panel'), children: _jsx(Icon, { name: 'times' }) })] }), content] }) }));
+    useEscape(onDismiss);
+    return (_jsx(ExpandCollapse, { as: StyledPanel, dimension: 'width', collapsed: !open, children: _jsxs(Flex, { as: StyledPanelContent, container: { pad: 2, direction: 'column', gap: 1 }, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, children: [_jsx(StyledTextWithEllipsis, { variant: 'h3', children: header }), _jsx(Button, { variant: 'simple', icon: true, onClick: onDismiss, label: t('close_configuration_panel'), children: _jsx(Icon, { name: 'times' }) })] }), content] }) }));
 };
 export default ConfigurationPanel;
 //# sourceMappingURL=ConfigurationPanel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigurationPanel.js","sourceRoot":"","sources":["../../../src/components/Workbench/ConfigurationPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEtF,OAAO,EAAE,WAAW,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAGzE,MAAM,kBAAkB,GAAgC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE;IAC/F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,EAAE,GAAG,EAAiB,EAAE,EAAE;QACzB,IAAI,GAAG,KAAK,QAAQ;YAAE,SAAS,EAAE,CAAC;IACpC,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,KAAC,cAAc,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAC,OAAO,EAAC,SAAS,EAAE,CAAC,IAAI,EAAE,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,OAAO,YACtF,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACtD,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC3D,KAAC,sBAAsB,IAAC,OAAO,EAAC,IAAI,YAAE,MAAM,GAA0B,EACtE,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,QAAC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC,2BAA2B,CAAC,YACrF,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,IACJ,EACN,OAAO,IACH,GACQ,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { FC, useCallback, useEffect } from 'react';\n\nimport { Flex, Button, Icon, useI18n, ExpandCollapse } from '@pega/cosmos-react-core';\n\nimport { StyledPanel, StyledTextWithEllipsis } from './Workbench.styles';\nimport { ConfigurationPanelProps } from './Workbench.types';\n\nconst ConfigurationPanel: FC<ConfigurationPanelProps> = ({ open, header, content, onDismiss }) => {\n  const t = useI18n();\n\n  const onKeyDown = useCallback(\n    ({ key }: KeyboardEvent) => {\n      if (key === 'Escape') onDismiss();\n    },\n    [onDismiss]\n  );\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeyDown);\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n    };\n  }, [onKeyDown]);\n\n  return (\n    <ExpandCollapse as={StyledPanel} dimension='width' collapsed={!open} min='0' max='25rem'>\n      <Flex container={{ pad: 2, direction: 'column', gap: 1 }}>\n        <Flex container={{ justify: 'between', alignItems: 'center' }}>\n          <StyledTextWithEllipsis variant='h3'>{header}</StyledTextWithEllipsis>\n          <Button variant='simple' icon onClick={onDismiss} label={t('close_configuration_panel')}>\n            <Icon name='times' />\n          </Button>\n        </Flex>\n        {content}\n      </Flex>\n    </ExpandCollapse>\n  );\n};\n\nexport default ConfigurationPanel;\n"]}
+{"version":3,"file":"ConfigurationPanel.js","sourceRoot":"","sources":["../../../src/components/Workbench/ConfigurationPanel.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEjG,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAG7F,MAAM,kBAAkB,GAAgC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE;IAC/F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,SAAS,CAAC,SAAS,CAAC,CAAC;IAErB,OAAO,CACL,KAAC,cAAc,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAC,OAAO,EAAC,SAAS,EAAE,CAAC,IAAI,YACjE,MAAC,IAAI,IAAC,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9E,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC3D,KAAC,sBAAsB,IAAC,OAAO,EAAC,IAAI,YAAE,MAAM,GAA0B,EACtE,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,QAAC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC,2BAA2B,CAAC,YACrF,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,IACJ,EACN,OAAO,IACH,GACQ,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { FC } from 'react';\n\nimport { Flex, Button, Icon, useI18n, ExpandCollapse, useEscape } from '@pega/cosmos-react-core';\n\nimport { StyledPanel, StyledPanelContent, StyledTextWithEllipsis } from './Workbench.styles';\nimport { ConfigurationPanelProps } from './Workbench.types';\n\nconst ConfigurationPanel: FC<ConfigurationPanelProps> = ({ open, header, content, onDismiss }) => {\n  const t = useI18n();\n\n  useEscape(onDismiss);\n\n  return (\n    <ExpandCollapse as={StyledPanel} dimension='width' collapsed={!open}>\n      <Flex as={StyledPanelContent} container={{ pad: 2, direction: 'column', gap: 1 }}>\n        <Flex container={{ justify: 'between', alignItems: 'center' }}>\n          <StyledTextWithEllipsis variant='h3'>{header}</StyledTextWithEllipsis>\n          <Button variant='simple' icon onClick={onDismiss} label={t('close_configuration_panel')}>\n            <Icon name='times' />\n          </Button>\n        </Flex>\n        {content}\n      </Flex>\n    </ExpandCollapse>\n  );\n};\n\nexport default ConfigurationPanel;\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/lib/components/Workbench/Workbench.styles.d.ts

@@ -5,5 +5,6 @@ export declare const StyledToolbar: import("styled-components").StyledComponent<
 export declare const StyledMain: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledWorkbench: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledPanel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPanelContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTextWithEllipsis: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=Workbench.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Workbench.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,wBAAwB,yGAEpC,CAAC;AAIF,eAAO,MAAM,kBAAkB,qOAqB7B,CAAC;AAIH,eAAO,MAAM,aAAa,yGA2BzB,CAAC;AAIF,eAAO,MAAM,UAAU,yGAYtB,CAAC;AAIF,eAAO,MAAM,eAAe,yGAE3B,CAAC;AAIF,eAAO,MAAM,WAAW,yGAMtB,CAAC;AAIH,eAAO,MAAM,sBAAsB,mOAIlC,CAAC"}
+{"version":3,"file":"Workbench.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,wBAAwB,yGAEpC,CAAC;AAIF,eAAO,MAAM,kBAAkB,qOAqB7B,CAAC;AAIH,eAAO,MAAM,aAAa,yGA2BzB,CAAC;AAIF,eAAO,MAAM,UAAU,yGAYtB,CAAC;AAIF,eAAO,MAAM,eAAe,yGAE3B,CAAC;AAIF,eAAO,MAAM,WAAW,yGAMtB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAE9B,CAAC;AAIF,eAAO,MAAM,sBAAsB,mOAIlC,CAAC"}

package/lib/components/Workbench/Workbench.styles.js

@@ -62,6 +62,10 @@ export const StyledPanel = styled.div(({ theme }) => {
   `;
 });
 StyledPanel.defaultProps = defaultThemeProp;
+export const StyledPanelContent = styled.div `
+  width: 25rem;
+`;
+StyledPanelContent.defaultProps = defaultThemeProp;
 export const StyledTextWithEllipsis = styled(Text) `
   overflow: hidden;
   white-space: nowrap;

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

@@ -1 +1 @@
-{"version":3,"file":"Workbench.styles.js","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnF,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEjD,CAAC;AAEF,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,EAAE;IACvD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EACzB,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAC3B,EACF,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAE3E,OAAO,GAAG,CAAA;;aAEC,KAAK;;;0BAGQ,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;eACrC,SAAS;;GAErB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC3B,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;4BAEc,OAAO;0BACT,OAAO,CAAC,oBAAoB,CAAC;oCACnB,OAAO,CAAC,aAAa,CAAC;uCACnB,OAAO,CAAC,aAAa,CAAC;;QAErD,wBAAwB;;;;QAIxB,wBAAwB;;;+BAGD,OAAO;;oCAEF,OAAO,CAAC,aAAa,CAAC;;;KAGrD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;0BAGY,OAAO,CAAC,gBAAgB,CAAC;KAC9C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;CAExC,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;GAG7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAIjD,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { Button, Text, defaultThemeProp, tryCatch } from '@pega/cosmos-react-core';\n\nexport const StyledPanelToggleWrapper = styled.div`\n  height: 100%;\n`;\n\nStyledPanelToggleWrapper.defaultProps = defaultThemeProp;\n\nexport const UtilityPanelToggle = styled(Button)(props => {\n  const {\n    theme: {\n      base: { colors, palette },\n      components: {\n        link: { color: linkColor }\n      }\n    }\n  } = props;\n\n  const color = tryCatch(() => readableColor(palette['primary-background']));\n\n  return css`\n    background-color: transparent;\n    color: ${color};\n\n    &[aria-selected='true'] {\n      background-color: ${colors.blue['extra-light']};\n      color: ${linkColor};\n    }\n  `;\n});\n\nUtilityPanelToggle.defaultProps = defaultThemeProp;\n\nexport const StyledToolbar = styled.div(\n  ({\n    theme: {\n      base: { spacing, palette }\n    }\n  }) => {\n    return css`\n      height: 2.5rem;\n      padding: 0 calc(2 * ${spacing});\n      background-color: ${palette['primary-background']};\n      border-top: 0.0625rem solid ${palette['border-line']};\n      border-bottom: 0.0625rem solid ${palette['border-line']};\n\n      ${StyledPanelToggleWrapper}:empty {\n        display: none;\n      }\n\n      ${StyledPanelToggleWrapper}:not(:last-child) {\n        ::after {\n          content: '';\n          margin: 0 calc(2 * ${spacing});\n          height: 100%;\n          border: 0.0625rem solid ${palette['border-line']};\n        }\n      }\n    `;\n  }\n);\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.div(\n  ({\n    theme: {\n      base: { palette }\n    }\n  }) => {\n    return css`\n      height: 100%;\n      overflow: auto;\n      background-color: ${palette['app-background']};\n    `;\n  }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledWorkbench = styled.div`\n  height: 100%;\n`;\n\nStyledWorkbench.defaultProps = defaultThemeProp;\n\nexport const StyledPanel = styled.div(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['primary-background']};\n    height: 100%;\n    overflow-y: auto;\n  `;\n});\n\nStyledPanel.defaultProps = defaultThemeProp;\n\nexport const StyledTextWithEllipsis = styled(Text)`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`;\n\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Workbench.styles.js","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnF,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEjD,CAAC;AAEF,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,EAAE;IACvD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EACzB,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAC3B,EACF,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAE3E,OAAO,GAAG,CAAA;;aAEC,KAAK;;;0BAGQ,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;eACrC,SAAS;;GAErB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC3B,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;4BAEc,OAAO;0BACT,OAAO,CAAC,oBAAoB,CAAC;oCACnB,OAAO,CAAC,aAAa,CAAC;uCACnB,OAAO,CAAC,aAAa,CAAC;;QAErD,wBAAwB;;;;QAIxB,wBAAwB;;;+BAGD,OAAO;;oCAEF,OAAO,CAAC,aAAa,CAAC;;;KAGrD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;0BAGY,OAAO,CAAC,gBAAgB,CAAC;KAC9C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;CAExC,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;GAG7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE3C,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAIjD,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { Button, Text, defaultThemeProp, tryCatch } from '@pega/cosmos-react-core';\n\nexport const StyledPanelToggleWrapper = styled.div`\n  height: 100%;\n`;\n\nStyledPanelToggleWrapper.defaultProps = defaultThemeProp;\n\nexport const UtilityPanelToggle = styled(Button)(props => {\n  const {\n    theme: {\n      base: { colors, palette },\n      components: {\n        link: { color: linkColor }\n      }\n    }\n  } = props;\n\n  const color = tryCatch(() => readableColor(palette['primary-background']));\n\n  return css`\n    background-color: transparent;\n    color: ${color};\n\n    &[aria-selected='true'] {\n      background-color: ${colors.blue['extra-light']};\n      color: ${linkColor};\n    }\n  `;\n});\n\nUtilityPanelToggle.defaultProps = defaultThemeProp;\n\nexport const StyledToolbar = styled.div(\n  ({\n    theme: {\n      base: { spacing, palette }\n    }\n  }) => {\n    return css`\n      height: 2.5rem;\n      padding: 0 calc(2 * ${spacing});\n      background-color: ${palette['primary-background']};\n      border-top: 0.0625rem solid ${palette['border-line']};\n      border-bottom: 0.0625rem solid ${palette['border-line']};\n\n      ${StyledPanelToggleWrapper}:empty {\n        display: none;\n      }\n\n      ${StyledPanelToggleWrapper}:not(:last-child) {\n        ::after {\n          content: '';\n          margin: 0 calc(2 * ${spacing});\n          height: 100%;\n          border: 0.0625rem solid ${palette['border-line']};\n        }\n      }\n    `;\n  }\n);\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.div(\n  ({\n    theme: {\n      base: { palette }\n    }\n  }) => {\n    return css`\n      height: 100%;\n      overflow: auto;\n      background-color: ${palette['app-background']};\n    `;\n  }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledWorkbench = styled.div`\n  height: 100%;\n`;\n\nStyledWorkbench.defaultProps = defaultThemeProp;\n\nexport const StyledPanel = styled.div(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['primary-background']};\n    height: 100%;\n    overflow-y: auto;\n  `;\n});\n\nStyledPanel.defaultProps = defaultThemeProp;\n\nexport const StyledPanelContent = styled.div`\n  width: 25rem;\n`;\n\nStyledPanelContent.defaultProps = defaultThemeProp;\n\nexport const StyledTextWithEllipsis = styled(Text)`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`;\n\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n"]}

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

@@ -1,6 +1,6 @@
 import { ReactNode, Ref } from 'react';
 import type { Action } from '@pega/cosmos-react-core';
-import { IconNames } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';
+import { IconName } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';
 export declare type ActionName = 'undo' | 'redo';
 export declare type ToolbarAction = Pick<Action, 'id' | 'onClick' | 'disabled'>;
 export interface UtilityPanelProps {
@@ -9,7 +9,7 @@ export interface UtilityPanelProps {
     /** Utility panel title. */
     title: string;
     /** Icon of side panel in toolbar. */
-    icon: IconNames;
+    icon: IconName;
     /** Content of the side panel. */
     content: NonNullable<ReactNode>;
 }

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Workbench.types.js","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport type { Action } from '@pega/cosmos-react-core';\nimport { IconNames } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';\n\nexport type ActionName = 'undo' | 'redo';\nexport type ToolbarAction = Pick<Action, 'id' | 'onClick' | 'disabled'>;\n\nexport interface UtilityPanelProps {\n  /** Utility panel id. */\n  id: string;\n  /** Utility panel title. */\n  title: string;\n  /** Icon of side panel in toolbar. */\n  icon: IconNames;\n  /** Content of the side panel. */\n  content: NonNullable<ReactNode>;\n}\n\nexport interface ConfigurationPanelProps {\n  /** If true, the Configuration Panel will be visible. */\n  open: boolean;\n  /** Header inside Configuration Panel. */\n  header: string;\n  /** A region to display configuration content. */\n  content: ReactNode;\n  /** Callback fired when user wants to close the panel. */\n  onDismiss: () => void;\n}\n\nexport interface ToolbarProps {\n  /** Toolbar actions available. */\n  toolbarActions?: Partial<Record<ActionName, ToolbarAction>>;\n}\n\nexport interface WorkbenchProps {\n  /** A region to display main content. */\n  children: NonNullable<ReactNode>;\n  /**\n   * An array of Panel data used to render the individual panels.\n   * @default []\n   */\n  utilityPanels?: UtilityPanelProps[];\n  /** Initially opened utility panel. */\n  initiallyVisiblePanelId: UtilityPanelProps['id'] | undefined;\n  /** Configuration panel props. */\n  configurationPanel: ConfigurationPanelProps;\n  /** Toolbar configuration. */\n  toolbar?: ToolbarProps;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}
+{"version":3,"file":"Workbench.types.js","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport type { Action } from '@pega/cosmos-react-core';\nimport { IconName } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';\n\nexport type ActionName = 'undo' | 'redo';\nexport type ToolbarAction = Pick<Action, 'id' | 'onClick' | 'disabled'>;\n\nexport interface UtilityPanelProps {\n  /** Utility panel id. */\n  id: string;\n  /** Utility panel title. */\n  title: string;\n  /** Icon of side panel in toolbar. */\n  icon: IconName;\n  /** Content of the side panel. */\n  content: NonNullable<ReactNode>;\n}\n\nexport interface ConfigurationPanelProps {\n  /** If true, the Configuration Panel will be visible. */\n  open: boolean;\n  /** Header inside Configuration Panel. */\n  header: string;\n  /** A region to display configuration content. */\n  content: ReactNode;\n  /** Callback fired when user wants to close the panel. */\n  onDismiss: () => void;\n}\n\nexport interface ToolbarProps {\n  /** Toolbar actions available. */\n  toolbarActions?: Partial<Record<ActionName, ToolbarAction>>;\n}\n\nexport interface WorkbenchProps {\n  /** A region to display main content. */\n  children: NonNullable<ReactNode>;\n  /**\n   * An array of Panel data used to render the individual panels.\n   * @default []\n   */\n  utilityPanels?: UtilityPanelProps[];\n  /** Initially opened utility panel. */\n  initiallyVisiblePanelId: UtilityPanelProps['id'] | undefined;\n  /** Configuration panel props. */\n  configurationPanel: ConfigurationPanelProps;\n  /** Toolbar configuration. */\n  toolbar?: ToolbarProps;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/index.d.ts

@@ -4,6 +4,8 @@ export { default as AppShell } from './components/AppShell';
 export * from './components/AppShell';
 export { default as DynamicContentEditor } from './components/DynamicContentEditor';
 export * from './components/DynamicContentEditor';
+export { default as ExpressionBuilder } from './components/ExpressionBuilder';
+export * from './components/ExpressionBuilder';
 export { default as FlowModeller } from './components/FlowModeller';
 export * from './components/FlowModeller';
 export * from './components/ItemLibrary';

package/lib/index.d.ts.map

@@ -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,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"}
+{"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,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC9E,cAAc,gCAAgC,CAAC;AAC/C,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

@@ -5,6 +5,8 @@ export { default as AppShell } from './components/AppShell';
 export * from './components/AppShell';
 export { default as DynamicContentEditor } from './components/DynamicContentEditor';
 export * from './components/DynamicContentEditor';
+export { default as ExpressionBuilder } from './components/ExpressionBuilder';
+export * from './components/ExpressionBuilder';
 export { default as FlowModeller } from './components/FlowModeller';
 export * from './components/FlowModeller';
 export * from './components/ItemLibrary';

package/lib/index.js.map

@@ -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,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"]}
+{"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,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC9E,cAAc,gCAAgC,CAAC;AAC/C,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 ExpressionBuilder } from './components/ExpressionBuilder';\nexport * from './components/ExpressionBuilder';\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

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-build",
-  "version": "3.0.0-dev.8.0",
+  "version": "3.0.0-rc.1",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,19 +20,21 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "3.0.0-dev.8.0",
-    "@pega/cosmos-react-dnd": "3.0.0-dev.8.0",
+    "@pega/cosmos-react-core": "3.0.0-rc.1",
+    "@pega/cosmos-react-dnd": "3.0.0-rc.1",
+    "@types/codemirror": "^5.60.5",
     "@types/dagre": "^0.7.46",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",
     "@types/styled-components": "^5.1.7",
-    "@types/tinymce": "^4.6.4",
+    "codemirror": "^5.54.0",
     "dagre": "^0.8.5",
     "polished": "^4.1.0",
     "react": "^16.14.0 || ^17.0.0",
+    "react-codemirror2": "^7.2.1",
     "react-dom": "^16.14.0 || ^17.0.0",
     "styled-components": "^5.2.0",
-    "tinymce": "^5.10.2"
+    "tinymce": "^6.0.3"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^6.4.19",
@@ -41,9 +43,12 @@
     "@storybook/addon-toolbars": "^6.4.19",
     "@storybook/addons": "^6.4.19",
     "@storybook/react": "^6.4.19",
-    "@storybook/testing-react": "0.0.18",
+    "@storybook/testing-react": "^1.2.4",
     "@storybook/theming": "^6.4.19",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
+    "@testing-library/user-event": "^13.5.0",
     "enzyme": "^3.11.0",
-    "typescript": "~4.6.2"
+    "typescript": "~4.7.2"
   }
 }

package/lib/components/FlowModeller/Renderer/Connectors.d.ts

@@ -1,15 +0,0 @@
-import { FC, ComponentType } from 'react';
-import { ConnectorProps as GraphConnectorProps } from './Utils/Graph';
-import { RendererConnectorProps } from './Renderer.types';
-export interface ConnectorProps {
-    items: RendererConnectorProps[];
-    dimensions: {
-        width: number;
-        height: number;
-    };
-    content?: ComponentType<RendererConnectorProps>;
-    highlights?: Record<string, GraphConnectorProps>;
-}
-declare const Connectors: FC<ConnectorProps>;
-export default Connectors;
-//# sourceMappingURL=Connectors.d.ts.map

package/lib/components/FlowModeller/Renderer/Connectors.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Connectors.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Connectors.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,cAAc,IAAI,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAyD1D,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,sBAAsB,EAAE,CAAC;IAChC,UAAU,EAAE;QACV,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,OAAO,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;CAClD;AACD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,cAAc,CA2ClC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/FlowModeller/Renderer/Connectors.js

@@ -1,49 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from 'styled-components';
-import { useTheme } from '@pega/cosmos-react-core';
-const CURVE_RADIUS = 16;
-const genLine = (points) => {
-    const lineStr = points
-        .map((point, idx, arr) => {
-        const { x, y } = point;
-        const prev = arr[idx - 1];
-        const next = arr[idx + 1];
-        const line = `L${x},${y}`;
-        // if the point is extream end, no need to add a curve
-        if (!prev || !next)
-            return line;
-        // if point is colinear with prev and next, no need to add a curve
-        if (prev.x === next.x || prev.y === next.y)
-            return line;
-        if (point.x > next.x)
-            // BOTTOM-RIGHT ↲
-            return `L${x},${y - CURVE_RADIUS}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 1 -${CURVE_RADIUS},${CURVE_RADIUS}`;
-        // BOTTOM-LEFT ↳
-        if (point.x < next.x)
-            return `L${x},${y - CURVE_RADIUS}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 0 ${CURVE_RADIUS},${CURVE_RADIUS}`;
-        // TOP-LEFT ↱
-        if (point.x < prev.x)
-            return `L${x + CURVE_RADIUS},${y}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 0 -${CURVE_RADIUS},${CURVE_RADIUS}`;
-        // TOP-RIGHT ↴
-        if (point.x > prev.x)
-            return `L${x - CURVE_RADIUS},${y}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 1 ${CURVE_RADIUS},${CURVE_RADIUS}`;
-        return `L${x},${y}`;
-    })
-        .join('');
-    return `M${lineStr.substr(1)}`;
-};
-const StyledConnectorContainer = styled.div `
-  position: absolute;
-  top: 0;
-  left: 0;
-`;
-const Connectors = ({ items, dimensions, content: Content, highlights }) => {
-    const theme = useTheme();
-    return (_jsx(StyledConnectorContainer, { children: _jsx("svg", { width: dimensions.width, height: dimensions.height, xmlns: 'http://www.w3.org/2000/svg', viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, children: items.map(item => {
-                return (_jsxs("g", { children: [_jsx("path", { id: item.id, d: genLine(item.points), stroke: highlights && highlights[item.id]
-                                ? theme.base.colors.red.medium
-                                : theme.base.colors.slate.dark, strokeWidth: highlights && highlights[item.id] ? 2 : 1, fill: 'none' }), item.labelLayout && (_jsx("foreignObject", { x: item.labelLayout.x - item.labelLayout.width, y: item.points.length > 10 ? item.points[3].y - 15 : item.labelLayout.y - 7.5, width: item.labelLayout.width, height: item.labelLayout.height, children: Content && (_jsx(Content, { ...item, highlight: !!(highlights && highlights[item.id]) })) }))] }, item.id));
-            }) }) }));
-};
-export default Connectors;
-//# sourceMappingURL=Connectors.js.map

package/lib/components/FlowModeller/Renderer/Connectors.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Connectors.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Connectors.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ComponentType } from 'react';\nimport styled from 'styled-components';\n\nimport { useTheme } from '@pega/cosmos-react-core';\n\nimport { ConnectorProps as GraphConnectorProps } from './Utils/Graph';\nimport { RendererConnectorProps } from './Renderer.types';\n\ninterface Points {\n  x: number;\n  y: number;\n}\n\nconst CURVE_RADIUS = 16;\nconst genLine = (points: Points[]) => {\n  const lineStr: string = points\n    .map((point: Points, idx: number, arr: Points[]) => {\n      const { x, y } = point;\n      const prev = arr[idx - 1];\n      const next = arr[idx + 1];\n      const line = `L${x},${y}`;\n\n      // if the point is extream end, no need to add a curve\n      if (!prev || !next) return line;\n\n      // if point is colinear with prev and next, no need to add a curve\n      if (prev.x === next.x || prev.y === next.y) return line;\n\n      if (point.x > next.x)\n        // BOTTOM-RIGHT ↲\n        return `L${x},${\n          y - CURVE_RADIUS\n        }a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 1 -${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n      // BOTTOM-LEFT ↳\n      if (point.x < next.x)\n        return `L${x},${\n          y - CURVE_RADIUS\n        }a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 0 ${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n      // TOP-LEFT ↱\n      if (point.x < prev.x)\n        return `L${\n          x + CURVE_RADIUS\n        },${y}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 0 -${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n      // TOP-RIGHT ↴\n      if (point.x > prev.x)\n        return `L${\n          x - CURVE_RADIUS\n        },${y}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 1 ${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n      return `L${x},${y}`;\n    })\n    .join('');\n  return `M${lineStr.substr(1)}`;\n};\n\nconst StyledConnectorContainer = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n`;\nexport interface ConnectorProps {\n  items: RendererConnectorProps[];\n  dimensions: {\n    width: number;\n    height: number;\n  };\n  content?: ComponentType<RendererConnectorProps>;\n  highlights?: Record<string, GraphConnectorProps>;\n}\nconst Connectors: FC<ConnectorProps> = ({ items, dimensions, content: Content, highlights }) => {\n  const theme = useTheme();\n\n  return (\n    <StyledConnectorContainer>\n      <svg\n        width={dimensions.width}\n        height={dimensions.height}\n        xmlns='http://www.w3.org/2000/svg'\n        viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}\n      >\n        {items.map(item => {\n          return (\n            <g key={item.id}>\n              <path\n                id={item.id}\n                d={genLine(item.points)}\n                stroke={\n                  highlights && highlights[item.id]\n                    ? theme.base.colors.red.medium\n                    : theme.base.colors.slate.dark\n                }\n                strokeWidth={highlights && highlights[item.id] ? 2 : 1}\n                fill='none'\n              />\n              {item.labelLayout && (\n                <foreignObject\n                  x={item.labelLayout.x - item.labelLayout.width}\n                  y={item.points.length > 10 ? item.points[3].y - 15 : item.labelLayout.y - 7.5}\n                  width={item.labelLayout.width}\n                  height={item.labelLayout.height}\n                >\n                  {Content && (\n                    <Content {...item} highlight={!!(highlights && highlights[item.id])} />\n                  )}\n                </foreignObject>\n              )}\n            </g>\n          );\n        })}\n      </svg>\n    </StyledConnectorContainer>\n  );\n};\n\nexport default Connectors;\n"]}

package/lib/components/FlowModeller/Renderer/Nodes.d.ts

@@ -1,11 +0,0 @@
-import { ComponentType, FC } from 'react';
-import { Node as GraphNode } from './Utils/Graph';
-import { RendererNodeProps } from './Renderer.types';
-export interface NodesProps {
-    items: RendererNodeProps[];
-    content?: ComponentType<RendererNodeProps>;
-    highlights?: Record<string, GraphNode>;
-}
-declare const Nodes: FC<NodesProps>;
-export default Nodes;
-//# sourceMappingURL=Nodes.d.ts.map

package/lib/components/FlowModeller/Renderer/Nodes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Nodes.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Nodes.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AA4BrD,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,OAAO,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACxC;AACD,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAqBzB,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/FlowModeller/Renderer/Nodes.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled, { css } from 'styled-components';
-import { Flex } from '@pega/cosmos-react-core';
-const StyledNodeWrapper = styled.div(({ dimensions, position }) => {
-    return css `
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: ${dimensions.width}px;
-    height: ${dimensions.height}px;
-    transform: translate(${position.x}px, ${position.y}px);
-  `;
-});
-const StyledHighlightedNodeWrapper = styled(StyledNodeWrapper)(({ theme }) => {
-    return css `
-    border-radius: 0.25rem;
-    box-shadow: 0 0 0 0.125rem ${theme.base.colors.red.medium};
-  `;
-});
-const StyledNodeContainer = styled.div `
-  position: absolute;
-  top: 0;
-  left: 0;
-`;
-const Nodes = ({ items, content: Node, highlights }) => {
-    return (_jsx(StyledNodeContainer, { children: items.map(item => {
-            return (_jsx(Flex, { as: highlights && highlights[item.id] ? StyledHighlightedNodeWrapper : StyledNodeWrapper, id: `render-node-${item.id}`, dimensions: item.dimensions, position: item.position, container: { justify: 'center' }, children: Node && _jsx(Node, { ...item, highlight: !!(highlights && highlights[item.id]) }) }, item.id));
-        }) }));
-};
-export default Nodes;
-//# sourceMappingURL=Nodes.js.map

package/lib/components/FlowModeller/Renderer/Nodes.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Nodes.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Nodes.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAK/C,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAGjC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC9B,OAAO,GAAG,CAAA;;;;aAIC,UAAU,CAAC,KAAK;cACf,UAAU,CAAC,MAAM;2BACJ,QAAQ,CAAC,CAAC,OAAO,QAAQ,CAAC,CAAC;GACnD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,4BAA4B,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3E,OAAO,GAAG,CAAA;;iCAEqB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM;GAC1D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIrC,CAAC;AAMF,MAAM,KAAK,GAAmB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE;IACrE,OAAO,CACL,KAAC,mBAAmB,cACjB,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChB,OAAO,CACL,KAAC,IAAI,IAEH,EAAE,EACA,UAAU,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,iBAAiB,EAEtF,EAAE,EAAE,eAAe,IAAI,CAAC,EAAE,EAAE,EAC5B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,YAE/B,IAAI,IAAI,KAAC,IAAI,OAAK,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,UAAU,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,GAAI,IATxE,IAAI,CAAC,EAAE,CAUP,CACR,CAAC;QACJ,CAAC,CAAC,GACkB,CACvB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { ComponentType, FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex } from '@pega/cosmos-react-core';\n\nimport { Node as GraphNode } from './Utils/Graph';\nimport { RendererNodeProps } from './Renderer.types';\n\nconst StyledNodeWrapper = styled.div<{\n  dimensions: RendererNodeProps['dimensions'];\n  position: RendererNodeProps['position'];\n}>(({ dimensions, position }) => {\n  return css`\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: ${dimensions.width}px;\n    height: ${dimensions.height}px;\n    transform: translate(${position.x}px, ${position.y}px);\n  `;\n});\n\nconst StyledHighlightedNodeWrapper = styled(StyledNodeWrapper)(({ theme }) => {\n  return css`\n    border-radius: 0.25rem;\n    box-shadow: 0 0 0 0.125rem ${theme.base.colors.red.medium};\n  `;\n});\n\nconst StyledNodeContainer = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n`;\nexport interface NodesProps {\n  items: RendererNodeProps[];\n  content?: ComponentType<RendererNodeProps>;\n  highlights?: Record<string, GraphNode>;\n}\nconst Nodes: FC<NodesProps> = ({ items, content: Node, highlights }) => {\n  return (\n    <StyledNodeContainer>\n      {items.map(item => {\n        return (\n          <Flex\n            key={item.id}\n            as={\n              highlights && highlights[item.id] ? StyledHighlightedNodeWrapper : StyledNodeWrapper\n            }\n            id={`render-node-${item.id}`}\n            dimensions={item.dimensions}\n            position={item.position}\n            container={{ justify: 'center' }}\n          >\n            {Node && <Node {...item} highlight={!!(highlights && highlights[item.id])} />}\n          </Flex>\n        );\n      })}\n    </StyledNodeContainer>\n  );\n};\n\nexport default Nodes;\n"]}