npm - @pega/cosmos-react-build - Versions diffs - 3.0.0-dev.3.0 → 3.0.0-dev.4.0 - Mend

@pega/cosmos-react-build 3.0.0-dev.3.0 → 3.0.0-dev.4.0

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

Files changed (49) hide show

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

@@ -1,6 +1,9 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '@pega/cosmos-react-core';
 import { DynamicContentEditorProps } from './DynamicContentEditor.types';
+export declare const StyledSearchPopover: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    offset?: number | undefined;
+}, never>;
 declare const DynamicContentEditor: FunctionComponent<DynamicContentEditorProps & ForwardProps>;
 export default DynamicContentEditor;
 //# sourceMappingURL=DynamicContentEditor.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicContentEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAGL,YAAY,~~EAOb~~,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,yBAAyB,EAAY,MAAM,8BAA8B,CAAC;~~AASnF~~,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,~~CA0InF~~,CAAC;AAEJ,eAAe,oBAAoB,CAAC"}
1	+ {"version":3,"file":"DynamicContentEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAGL,YAAY,EAYb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,yBAAyB,EAAY,MAAM,8BAA8B,CAAC;AAOnF,eAAO,MAAM,mBAAmB;;SAE/B,CAAC;AAIF,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CAyRnF,CAAC;AAEJ,eAAe,oBAAoB,CAAC"}

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

@@ -2,21 +2,40 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef, useContext, useRef, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Editor } from '@pega/cosmos-react-rte';
-import { Button, defaultThemeProp, Modal, ModalManagerContext, useConsolidatedRef, useI18n } from '@pega/cosmos-react-core';
+import { Button, defaultThemeProp, Menu, Modal, ModalManagerContext, Popover, StyledPopover, useConsolidatedRef, useI18n } from '@pega/cosmos-react-core';
 import { getKeyCommand } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/Toolbar/utils';
 import PegaCustomElement from './PegaCustomElement';
 const StyledDynamicContentEditor = styled.div ``;
+export const StyledSearchPopover = styled(StyledPopover) `
+  min-width: 20rem;
+`;
 StyledDynamicContentEditor.defaultProps = defaultThemeProp;
-const DynamicContentEditor = forwardRef(({ form: { dynamicContentPicker, onSubmit }, onActiveFieldChange, label, toolbar, ...restProps }, ref) => {
+const DynamicContentEditor = forwardRef(({ form: { dynamicContentPicker, onSubmit }, onActiveFieldChange, label, toolbar, fieldItems, ...restProps }, ref) => {
     const { create } = useContext(ModalManagerContext);
     const t = useI18n();
     const modalMethods = useRef();
-    const [editor, setEditor] = useState({});
+    const [editor, setEditor] = useState();
     const [bookmark, setBookmark] = useState();
+    const [fieldMenu, setFieldMenu] = useState({ items: fieldItems || [] });
     const [currentElementContent, setCurrentElementContent] = useState(null);
+    const [currentCursorPosition, setCurrentCursorPosition] = useState({
+        bottom: 0,
+        height: 0,
+        left: 0,
+        right: 0,
+        top: 0,
+        width: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => { }
+    });
+    const [showFieldsPopover, setShowFieldsPopover] = useState(false);
+    const fieldPopoverRef = useRef(null);
     const editorRef = useConsolidatedRef(ref);
-    const tooltip = getKeyCommand(navigator.appVersion.includes('Mac'), ({ ctrl }) => `${t('rte_anchor')} (${ctrl}/)`);
+    const tooltip = getKeyCommand(navigator.appVersion.includes('Mac'), ({ ctrl }) => `${t('rte_insert_field')} (${ctrl}/)`);
     const insertField = (field) => {
+        if (!editor)
+            return;
         const fieldContent = `<pega-reference role="button" contenteditable="false" data-rule-type='field' data-rule-id=${field.id}>${field.text}</pega-reference>`;
         if (bookmark) {
             editor.selection.moveToBookmark(bookmark);
@@ -42,24 +61,64 @@ const DynamicContentEditor = forwardRef(({ form: { dynamicContentPicker, onSubmi
                 onActiveFieldChange({ id: currentElementContent, text: currentElementContent });
         }
     };
-    useEffect(() => {
-        if (currentElementContent)
-            modalMethods.current = create(Modal, modalProps);
-    }, [currentElementContent]);
+    const findAndRenameField = (fieldId) => {
+        if (!editor || !fieldItems)
+            return;
+        const selectedRange = editor.selection.getRng();
+        const endOffset = selectedRange.endOffset;
+        const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(0, endOffset);
+        if (stringToSearch === undefined)
+            return;
+        const splitSearch = stringToSearch.split(' ');
+        const fieldString = splitSearch[splitSearch.length - 1];
+        const range = document.createRange();
+        const startPos = stringToSearch.lastIndexOf(fieldString);
+        const endPos = startPos + fieldString.length;
+        range.setStart(selectedRange.commonAncestorContainer, startPos);
+        range.setEnd(selectedRange.commonAncestorContainer, endPos);
+        document.getSelection()?.removeAllRanges();
+        document.getSelection()?.addRange(range);
+        const selectedFieldId = fieldItems.find(item => item.id === fieldId)?.id;
+        if (selectedFieldId) {
+            editor.selection.setContent(`<pega-reference contenteditable="false" data-rule-type="field" data-rule-id=${selectedFieldId}>${selectedFieldId}</pega-reference>`);
+            setShowFieldsPopover(false);
+        }
+    };
+    const hidePopover = () => {
+        if (fieldPopoverRef)
+            setShowFieldsPopover(false);
+    };
+    const filterFieldMenu = (searchString) => {
+        setShowFieldsPopover(true);
+        setFieldMenu({ items: fieldItems || [] });
+        if (/\s/.test(searchString)) {
+            setShowFieldsPopover(false);
+            return;
+        }
+        if (searchString && fieldItems) {
+            const newFieldItems = fieldItems.filter(item => item.id.toLowerCase().startsWith(searchString.toLowerCase()));
+            if (newFieldItems) {
+                setShowFieldsPopover(true);
+                setFieldMenu({ items: newFieldItems });
+            }
+            else
+                setShowFieldsPopover(false);
+        }
+    };
     const updateBookmarkAndCurrentElement = (editorSelection) => {
         const targetEl = editorSelection.getNode();
         const fieldValue = targetEl.getAttribute('data-rule-id');
         setBookmark(editorSelection.getBookmark());
         setCurrentElementContent(fieldValue);
     };
-    const handleElementClick = (e) => {
-        const targetEl = e.target;
-        if (targetEl.tagName === 'PEGA-REFERENCE') {
+    const handleElementClick = ({ target }) => {
+        if (editor && target instanceof HTMLElement && target.tagName === 'PEGA-REFERENCE') {
             updateBookmarkAndCurrentElement(editor.selection);
         }
+        hidePopover();
     };
     const onInsertField = (incEditor) => {
-        const targetEl = incEditor.selection?.getNode();
+        const targetEl = incEditor.selection.getNode();
         if (targetEl.tagName === 'PEGA-REFERENCE') {
             updateBookmarkAndCurrentElement(incEditor.selection);
         }
@@ -68,9 +127,18 @@ const DynamicContentEditor = forwardRef(({ form: { dynamicContentPicker, onSubmi
         }
     };
     const isPegaRefActive = (incEditor) => {
-        const targetEl = incEditor.selection?.getNode();
-        return targetEl?.tagName === 'PEGA-REFERENCE';
+        const targetEl = incEditor.selection.getNode();
+        return targetEl.tagName === 'PEGA-REFERENCE';
     };
+    const fieldSelectionPopover = (_jsx(Popover, { show: showFieldsPopover, strategy: 'fixed', ref: fieldPopoverRef, target: {
+            getBoundingClientRect: () => {
+                return currentCursorPosition;
+            }
+        }, placement: 'bottom-start', children: fieldItems && (_jsx(Menu, { ...fieldMenu, as: StyledSearchPopover, focusControlEl: editorRef.current?.element?.querySelector('[role="textbox"]') || undefined, mode: 'action', onItemClick: findAndRenameField }, void 0)) }, void 0));
+    useEffect(() => {
+        if (currentElementContent)
+            modalMethods.current = create(Modal, modalProps);
+    }, [currentElementContent]);
     useEffect(() => {
         editorRef.current?.element?.addEventListener('click', handleElementClick);
         return () => {
@@ -82,26 +150,60 @@ const DynamicContentEditor = forwardRef(({ form: { dynamicContentPicker, onSubmi
             modalMethods.current.update(modalProps);
         }
     }, [modalProps]);
-    return (_jsx(Editor, { ref: editorRef, ...restProps, label: label, toolbar: toolbar, customComponents: [
-            {
-                customElement: PegaCustomElement,
-                name: 'pega-reference'
+    const onEditorChange = (formEditor) => {
+        if (formEditor) {
+            const targetEl = formEditor?.selection?.getBoundingClientRect();
+            const { left = 0, top = 0 } = targetEl;
+            setCurrentCursorPosition({
+                ...formEditor?.selection?.getBoundingClientRect(),
+                x: left,
+                y: top,
+                toJSON: () => { }
+            });
+        }
+        if (formEditor?.selection?.isCollapsed()) {
+            // get the full line string
+            const selectedRange = formEditor.selection.getRng();
+            const endOffset = selectedRange.endOffset;
+            const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(0, endOffset);
+            const fieldString = stringToSearch?.split(' ')[stringToSearch?.split(' ').length - 1];
+            if (fieldString?.startsWith('@') &&
+                fieldString.indexOf('@') === fieldString.lastIndexOf('@')) {
+                filterFieldMenu(fieldString.slice(1));
             }
-        ], customActions: [
-            {
-                icon: 'code',
-                text: tooltip,
-                onMouseDown: () => {
-                    modalMethods.current = create(Modal, modalProps);
-                },
-                active: isPegaRefActive,
-                shortcut: {
-                    pattern: 'meta+191',
-                    description: tooltip,
-                    command: onInsertField
+            else
+                setShowFieldsPopover(false);
+        }
+    };
+    const onKeyDown = event => {
+        if ((event?.key === 'Enter' || event?.key === 'ArrowLeft' || event?.key === 'ArrowRight') &&
+            !!fieldPopoverRef.current) {
+            event?.preventDefault();
+        }
+        if (event?.key === 'Escape' && !!fieldPopoverRef.current) {
+            hidePopover();
+        }
+    };
+    return (_jsx(_Fragment, { children: _jsx(Editor, { ref: editorRef, ...restProps, label: label, toolbar: toolbar, customComponents: [
+                {
+                    customElement: PegaCustomElement,
+                    name: 'pega-reference'
                 }
-            }
-        ], onInit: initializedEditor => setEditor(initializedEditor) }, void 0));
+            ], customActions: [
+                {
+                    icon: 'code',
+                    text: tooltip,
+                    onMouseDown: () => {
+                        modalMethods.current = create(Modal, modalProps);
+                    },
+                    active: isPegaRefActive,
+                    shortcut: {
+                        pattern: 'meta+191',
+                        description: tooltip,
+                        command: onInsertField
+                    }
+                }
+            ], onInit: initializedEditor => setEditor(initializedEditor), onChange: onEditorChange, onBlur: hidePopover, onKeyDown: onKeyDown, children: fieldSelectionPopover }, void 0) }, void 0));
 });
 export default DynamicContentEditor;
 //# sourceMappingURL=DynamicContentEditor.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicContentEditor.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useContext,\n useRef,\n useEffect,\n useState\n} from 'react';\nimport styled from 'styled-components';\nimport { Bookmark, Editor as TinymceEditor, EditorSelection } from 'tinymce';\n\nimport { Editor } from '@pega/cosmos-react-rte';\nimport {\n Button,\n defaultThemeProp,\n ForwardProps,\n Modal,\n ModalManagerContext,\n ModalMethods,\n PropsWithDefaults,\n useConsolidatedRef,\n useI18n\n} from '@pega/cosmos-react-core';\nimport { getKeyCommand } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/Toolbar/utils';\n\nimport { DynamicContentEditorProps, ItemType } from './DynamicContentEditor.types';\nimport PegaCustomElement from './PegaCustomElement';\n\ntype DynamicContentEditorPropsWithDefaults = PropsWithDefaults<DynamicContentEditorProps>;\n\nconst StyledDynamicContentEditor = styled.div<DynamicContentEditorPropsWithDefaults>``;\n\nStyledDynamicContentEditor.defaultProps = defaultThemeProp;\n\nconst DynamicContentEditor: FunctionComponent<DynamicContentEditorProps & ForwardProps> =\n forwardRef(\n (\n {\n form: { dynamicContentPicker, onSubmit },\n onActiveFieldChange,\n label,\n toolbar,\n ...restProps\n }: PropsWithoutRef<DynamicContentEditorProps>,\n ref: DynamicContentEditorProps['ref']\n ) => {\n const { create } = useContext(ModalManagerContext);\n const t = useI18n();\n\n const modalMethods = useRef<ModalMethods>();\n const [editor, setEditor] = useState({} as TinymceEditor);\n const [bookmark, setBookmark] = useState<Bookmark \| undefined>();\n const [currentElementContent, setCurrentElementContent] = useState<string \| null>(null);\n const editorRef = useConsolidatedRef(ref);\n const tooltip = getKeyCommand(\n navigator.appVersion.includes('Mac'),\n ({ ctrl }) => `${t('rte_anchor')} (${ctrl}/)`\n );\n\n const insertField = (field: ItemType) => {\n const fieldContent = `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type='field' data-rule-id=${field.id}>${field.text}</pega-reference>`;\n if (bookmark) {\n editor.selection.moveToBookmark(bookmark);\n editor.selection.setContent(fieldContent);\n } else {\n editor.insertContent(fieldContent);\n }\n\n modalMethods.current?.dismiss();\n };\n\n const modalProps = {\n children: dynamicContentPicker,\n heading: t('rte_insert_field'),\n actions: (\n <>\n <Button variant='secondary' onClick={() => modalMethods.current?.dismiss()}>\n {t('cancel')}\n </Button>\n <Button variant='primary' onClick={() => onSubmit(insertField)}>\n {t('submit')}\n </Button>\n </>\n ),\n center: true,\n onAfterClose: () => {\n setBookmark(undefined);\n setCurrentElementContent('');\n onActiveFieldChange({ id: '', text: '' });\n },\n onBeforeOpen: () => {\n if (currentElementContent)\n onActiveFieldChange({ id: currentElementContent, text: currentElementContent });\n }\n };\n\n useEffect(() => {\n if (currentElementContent) modalMethods.current = create(Modal, modalProps);\n }, [currentElementContent]);\n\n const updateBookmarkAndCurrentElement = (editorSelection: EditorSelection) => {\n const targetEl = editorSelection.getNode();\n const fieldValue = targetEl.getAttribute('data-rule-id');\n setBookmark(editorSelection.getBookmark());\n setCurrentElementContent(fieldValue);\n };\n\n const handleElementClick = (e: MouseEvent) => {\n const targetEl = e.target as HTMLElement;\n if (targetEl.tagName === 'PEGA-REFERENCE') {\n updateBookmarkAndCurrentElement(editor.selection);\n }\n };\n\n const onInsertField = (incEditor: TinymceEditor) => {\n const targetEl = incEditor.selection?.getNode();\n if (targetEl.tagName === 'PEGA-REFERENCE') {\n updateBookmarkAndCurrentElement(incEditor.selection);\n } else {\n modalMethods.current = create(Modal, modalProps);\n }\n };\n\n const isPegaRefActive = (incEditor: TinymceEditor) => {\n const targetEl = incEditor.selection?.getNode();\n return targetEl?.tagName === 'PEGA-REFERENCE';\n };\n\n useEffect(() => {\n editorRef.current?.element?.addEventListener('click', handleElementClick);\n return () => {\n editorRef.current?.element?.removeEventListener('click', handleElementClick);\n };\n }, [editor, editorRef.current]);\n\n useEffect(() => {\n if (modalMethods.current) {\n modalMethods.current.update(modalProps);\n }\n }, [modalProps]);\n\n return (\n <Editor\n ref={editorRef}\n {...restProps}\n label={label}\n toolbar={toolbar}\n customComponents={[\n {\n customElement: PegaCustomElement,\n name: 'pega-reference'\n }\n ]}\n customActions={[\n {\n icon: 'code',\n text: tooltip,\n onMouseDown: () => {\n modalMethods.current = create(Modal, modalProps);\n },\n active: isPegaRefActive,\n shortcut: {\n pattern: 'meta+191',\n description: tooltip,\n command: onInsertField\n }\n }\n ]}\n onInit={initializedEditor => setEditor(initializedEditor)}\n />\n );\n }\n );\n\nexport default DynamicContentEditor;\n"]}
1	+ {"version":3,"file":"DynamicContentEditor.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useContext,\n useRef,\n useEffect,\n useState\n} from 'react';\nimport styled from 'styled-components';\nimport { Bookmark, Editor as TinymceEditor, EditorSelection } from 'tinymce';\n\nimport { Editor, EditorProps } from '@pega/cosmos-react-rte';\nimport {\n Button,\n defaultThemeProp,\n ForwardProps,\n Menu,\n MenuItemProps,\n MenuProps,\n Modal,\n ModalManagerContext,\n ModalMethods,\n Popover,\n PropsWithDefaults,\n StyledPopover,\n useConsolidatedRef,\n useI18n\n} from '@pega/cosmos-react-core';\nimport { getKeyCommand } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/Toolbar/utils';\n\nimport { DynamicContentEditorProps, ItemType } from './DynamicContentEditor.types';\nimport PegaCustomElement from './PegaCustomElement';\n\ntype DynamicContentEditorPropsWithDefaults = PropsWithDefaults<DynamicContentEditorProps>;\n\nconst StyledDynamicContentEditor = styled.div<DynamicContentEditorPropsWithDefaults>``;\n\nexport const StyledSearchPopover = styled(StyledPopover)`\n min-width: 20rem;\n`;\n\nStyledDynamicContentEditor.defaultProps = defaultThemeProp;\n\nconst DynamicContentEditor: FunctionComponent<DynamicContentEditorProps & ForwardProps> =\n forwardRef(\n (\n {\n form: { dynamicContentPicker, onSubmit },\n onActiveFieldChange,\n label,\n toolbar,\n fieldItems,\n ...restProps\n }: PropsWithoutRef<DynamicContentEditorProps>,\n ref: DynamicContentEditorProps['ref']\n ) => {\n const { create } = useContext(ModalManagerContext);\n const t = useI18n();\n\n const modalMethods = useRef<ModalMethods>();\n const [editor, setEditor] = useState<TinymceEditor \| undefined>();\n const [bookmark, setBookmark] = useState<Bookmark \| undefined>();\n const [fieldMenu, setFieldMenu] = useState<MenuProps>({ items: fieldItems \|\| [] });\n const [currentElementContent, setCurrentElementContent] = useState<string \| null>(null);\n const [currentCursorPosition, setCurrentCursorPosition] = useState({\n bottom: 0,\n height: 0,\n left: 0,\n right: 0,\n top: 0,\n width: 0,\n x: 0,\n y: 0,\n toJSON: () => {}\n });\n const [showFieldsPopover, setShowFieldsPopover] = useState<boolean>(false);\n\n const fieldPopoverRef = useRef<HTMLDivElement>(null);\n const editorRef = useConsolidatedRef(ref);\n\n const tooltip = getKeyCommand(\n navigator.appVersion.includes('Mac'),\n ({ ctrl }) => `${t('rte_insert_field')} (${ctrl}/)`\n );\n\n const insertField = (field: ItemType) => {\n if (!editor) return;\n\n const fieldContent = `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type='field' data-rule-id=${field.id}>${field.text}</pega-reference>`;\n if (bookmark) {\n editor.selection.moveToBookmark(bookmark);\n editor.selection.setContent(fieldContent);\n } else {\n editor.insertContent(fieldContent);\n }\n\n modalMethods.current?.dismiss();\n };\n\n const modalProps = {\n children: dynamicContentPicker,\n heading: t('rte_insert_field'),\n actions: (\n <>\n <Button variant='secondary' onClick={() => modalMethods.current?.dismiss()}>\n {t('cancel')}\n </Button>\n <Button variant='primary' onClick={() => onSubmit(insertField)}>\n {t('submit')}\n </Button>\n </>\n ),\n center: true,\n onAfterClose: () => {\n setBookmark(undefined);\n setCurrentElementContent('');\n onActiveFieldChange({ id: '', text: '' });\n },\n onBeforeOpen: () => {\n if (currentElementContent)\n onActiveFieldChange({ id: currentElementContent, text: currentElementContent });\n }\n };\n\n const findAndRenameField = (fieldId: string) => {\n if (!editor \|\| !fieldItems) return;\n\n const selectedRange = editor.selection.getRng();\n const endOffset = selectedRange.endOffset;\n const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(0, endOffset);\n if (stringToSearch === undefined) return;\n\n const splitSearch = stringToSearch.split(' ');\n const fieldString = splitSearch[splitSearch.length - 1];\n const range = document.createRange();\n\n const startPos = stringToSearch.lastIndexOf(fieldString);\n const endPos = startPos + fieldString.length;\n range.setStart(selectedRange.commonAncestorContainer, startPos);\n range.setEnd(selectedRange.commonAncestorContainer, endPos);\n document.getSelection()?.removeAllRanges();\n document.getSelection()?.addRange(range);\n const selectedFieldId = fieldItems.find(item => item.id === fieldId)?.id;\n if (selectedFieldId) {\n editor.selection.setContent(\n `<pega-reference contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=${selectedFieldId}>${selectedFieldId}</pega-reference>`\n );\n setShowFieldsPopover(false);\n }\n };\n\n const hidePopover = () => {\n if (fieldPopoverRef) setShowFieldsPopover(false);\n };\n\n const filterFieldMenu = (searchString: string) => {\n setShowFieldsPopover(true);\n setFieldMenu({ items: fieldItems \|\| [] });\n if (/\\s/.test(searchString)) {\n setShowFieldsPopover(false);\n return;\n }\n if (searchString && fieldItems) {\n const newFieldItems: MenuItemProps[] = fieldItems.filter(item =>\n item.id.toLowerCase().startsWith(searchString.toLowerCase())\n );\n if (newFieldItems) {\n setShowFieldsPopover(true);\n setFieldMenu({ items: newFieldItems });\n } else setShowFieldsPopover(false);\n }\n };\n\n const updateBookmarkAndCurrentElement = (editorSelection: EditorSelection) => {\n const targetEl = editorSelection.getNode();\n const fieldValue = targetEl.getAttribute('data-rule-id');\n setBookmark(editorSelection.getBookmark());\n setCurrentElementContent(fieldValue);\n };\n\n const handleElementClick = ({ target }: MouseEvent) => {\n if (editor && target instanceof HTMLElement && target.tagName === 'PEGA-REFERENCE') {\n updateBookmarkAndCurrentElement(editor.selection);\n }\n hidePopover();\n };\n\n const onInsertField = (incEditor: TinymceEditor) => {\n const targetEl = incEditor.selection.getNode();\n if (targetEl.tagName === 'PEGA-REFERENCE') {\n updateBookmarkAndCurrentElement(incEditor.selection);\n } else {\n modalMethods.current = create(Modal, modalProps);\n }\n };\n\n const isPegaRefActive = (incEditor: TinymceEditor) => {\n const targetEl = incEditor.selection.getNode();\n return targetEl.tagName === 'PEGA-REFERENCE';\n };\n\n const fieldSelectionPopover = (\n <Popover\n show={showFieldsPopover}\n strategy='fixed'\n ref={fieldPopoverRef}\n target={{\n getBoundingClientRect: () => {\n return currentCursorPosition;\n }\n }}\n placement='bottom-start'\n >\n {fieldItems && (\n <Menu\n {...fieldMenu}\n as={StyledSearchPopover}\n focusControlEl={\n editorRef.current?.element?.querySelector('[role=\"textbox\"]') \|\| undefined\n }\n mode='action'\n onItemClick={findAndRenameField}\n />\n )}\n </Popover>\n );\n\n useEffect(() => {\n if (currentElementContent) modalMethods.current = create(Modal, modalProps);\n }, [currentElementContent]);\n\n useEffect(() => {\n editorRef.current?.element?.addEventListener('click', handleElementClick);\n return () => {\n editorRef.current?.element?.removeEventListener('click', handleElementClick);\n };\n }, [editor, editorRef.current]);\n\n useEffect(() => {\n if (modalMethods.current) {\n modalMethods.current.update(modalProps);\n }\n }, [modalProps]);\n\n const onEditorChange: EditorProps['onChange'] = (formEditor?: TinymceEditor) => {\n if (formEditor) {\n const targetEl = formEditor?.selection?.getBoundingClientRect();\n const { left = 0, top = 0 } = targetEl;\n setCurrentCursorPosition({\n ...formEditor?.selection?.getBoundingClientRect(),\n x: left,\n y: top,\n toJSON: () => {}\n });\n }\n\n if (formEditor?.selection?.isCollapsed()) {\n // get the full line string\n const selectedRange = formEditor.selection.getRng();\n const endOffset = selectedRange.endOffset;\n const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(\n 0,\n endOffset\n );\n const fieldString = stringToSearch?.split(' ')[stringToSearch?.split(' ').length - 1];\n if (\n fieldString?.startsWith('@') &&\n fieldString.indexOf('@') === fieldString.lastIndexOf('@')\n ) {\n filterFieldMenu(fieldString.slice(1));\n } else setShowFieldsPopover(false);\n }\n };\n\n const onKeyDown: EditorProps['onKeyDown'] = event => {\n if (\n (event?.key === 'Enter' \|\| event?.key === 'ArrowLeft' \|\| event?.key === 'ArrowRight') &&\n !!fieldPopoverRef.current\n ) {\n event?.preventDefault();\n }\n if (event?.key === 'Escape' && !!fieldPopoverRef.current) {\n hidePopover();\n }\n };\n\n return (\n <>\n <Editor\n ref={editorRef}\n {...restProps}\n label={label}\n toolbar={toolbar}\n customComponents={[\n {\n customElement: PegaCustomElement,\n name: 'pega-reference'\n }\n ]}\n customActions={[\n {\n icon: 'code',\n text: tooltip,\n onMouseDown: () => {\n modalMethods.current = create(Modal, modalProps);\n },\n active: isPegaRefActive,\n shortcut: {\n pattern: 'meta+191',\n description: tooltip,\n command: onInsertField\n }\n }\n ]}\n onInit={initializedEditor => setEditor(initializedEditor)}\n onChange={onEditorChange}\n onBlur={hidePopover}\n onKeyDown={onKeyDown}\n >\n {fieldSelectionPopover}\n </Editor>\n </>\n );\n }\n );\n\nexport default DynamicContentEditor;\n"]}

package/lib/components/DynamicContentEditor/DynamicContentEditor.types.d.ts CHANGED Viewed

@@ -1,15 +1,19 @@
 import { ReactNode } from 'react';
 import { EditorProps } from '@pega/cosmos-react-rte';
+import { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';
 export declare type ItemType = {
     id: string;
     text: string;
 };
 export interface DynamicContentEditorProps extends EditorProps {
+    /** Insert field form */
     form: {
         onSubmit: (insertField: (selectedField: ItemType) => void) => void;
         dynamicContentPicker: ReactNode;
     };
     onActiveFieldChange: (field: ItemType) => void;
+    /** Property selection array */
+    fieldItems?: MenuItemProps[];
 }
 export interface DynamicContentEditorContextProps extends DynamicContentEditorProps {
     updateProperties?: (selectedfield: ItemType) => void;

package/lib/components/DynamicContentEditor/DynamicContentEditor.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicContentEditor.types.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;~~AAErD~~,oBAAY,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,IAAI,EAAE;QACJ,QAAQ,EAAE,CAAC,WAAW,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,KAAK,IAAI,CAAC;QACnE,oBAAoB,EAAE,SAAS,CAAC;KACjC,CAAC;IACF,mBAAmB,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;~~CAChD~~;AAED,MAAM,WAAW,gCAAiC,SAAQ,yBAAyB;IACjF,gBAAgB,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;CACtD"}
1	+ {"version":3,"file":"DynamicContentEditor.types.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;AAEvF,oBAAY,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,wBAAwB;IACxB,IAAI,EAAE;QACJ,QAAQ,EAAE,CAAC,WAAW,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,KAAK,IAAI,CAAC;QACnE,oBAAoB,EAAE,SAAS,CAAC;KACjC,CAAC;IACF,mBAAmB,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC/C,+BAA+B;IAC/B,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;CAC9B;AAED,MAAM,WAAW,gCAAiC,SAAQ,yBAAyB;IACjF,gBAAgB,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;CACtD"}

package/lib/components/DynamicContentEditor/DynamicContentEditor.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicContentEditor.types.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode } from 'react';\n\nimport { EditorProps } from '@pega/cosmos-react-rte';\n\nexport type ItemType = {\n id: string;\n text: string;\n};\n\nexport interface DynamicContentEditorProps extends EditorProps {\n form: {\n onSubmit: (insertField: (selectedField: ItemType) => void) => void;\n dynamicContentPicker: ReactNode;\n };\n onActiveFieldChange: (field: ItemType) => void;\n}\n\nexport interface DynamicContentEditorContextProps extends DynamicContentEditorProps {\n updateProperties?: (selectedfield: ItemType) => void;\n}\n"]}
1	+ {"version":3,"file":"DynamicContentEditor.types.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode } from 'react';\n\nimport { EditorProps } from '@pega/cosmos-react-rte';\nimport { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\n\nexport type ItemType = {\n id: string;\n text: string;\n};\n\nexport interface DynamicContentEditorProps extends EditorProps {\n /** Insert field form /\n form: {\n onSubmit: (insertField: (selectedField: ItemType) => void) => void;\n dynamicContentPicker: ReactNode;\n };\n onActiveFieldChange: (field: ItemType) => void;\n /* Property selection array */\n fieldItems?: MenuItemProps[];\n}\n\nexport interface DynamicContentEditorContextProps extends DynamicContentEditorProps {\n updateProperties?: (selectedfield: ItemType) => void;\n}\n"]}

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

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"ObjectConfig.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectConfig.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,EAAc,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAsB,MAAM,EAAiB,MAAM,yBAAyB,CAAC;AAElG,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CACpB,iBAAiB,GAAG,YAAY,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,CAqCjG,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/ObjectSelect/ObjectConfig.js ADDED Viewed

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Flex, Icon, Text, useI18n } from '@pega/cosmos-react-core';
+const ObjectConfig = ({ heading, content, primaryAction, secondaryAction, disabled, dismissPopover }) => {
+    const t = useI18n();
+    return (_jsxs(Flex, { container: { direction: 'column', pad: 2, gap: 2 }, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, children: [_jsx(Text, { variant: 'h3', children: heading }, void 0), _jsx(Button, { icon: true, variant: 'simple', label: t('close'), onClick: () => dismissPopover(), children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)] }, void 0), content, _jsxs(Flex, { container: { justify: 'between' }, children: [_jsx(Button, { variant: 'secondary', disabled: disabled, onClick: (e) => {
+                            secondaryAction.onClick?.(secondaryAction.id, e);
+                            dismissPopover(secondaryAction.id);
+                        }, children: secondaryAction.text }, void 0), _jsx(Button, { variant: 'primary', disabled: disabled, onClick: (e) => {
+                            primaryAction.onClick?.(primaryAction.id, e);
+                            dismissPopover(primaryAction.id);
+                        }, children: primaryAction.text }, void 0)] }, void 0)] }, void 0));
+};
+export default ObjectConfig;
+//# sourceMappingURL=ObjectConfig.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"ObjectConfig.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectConfig.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAgB,MAAM,EAAE,IAAI,EAAE,IAAI,EAAU,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAalG,MAAM,YAAY,GAEd,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,EAAE;IACrF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,aACtD,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC3D,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,WAAQ,EACnC,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,EAAE,YAC9E,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,WACd,YACJ,EACN,OAAO,EACR,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,aACrC,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;4BAC5C,eAAe,CAAC,OAAO,EAAE,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;4BACjD,cAAc,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;wBACrC,CAAC,YAEA,eAAe,CAAC,IAAI,WACd,EACT,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;4BAC5C,aAAa,CAAC,OAAO,EAAE,CAAC,aAAa,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;4BAC7C,cAAc,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;wBACnC,CAAC,YAEA,aAAa,CAAC,IAAI,WACZ,YACJ,YACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { ReactNode, FC, Ref, MouseEvent } from 'react';\n\nimport { ForwardProps, Button, Flex, Icon, Action, Text, useI18n } from '@pega/cosmos-react-core';\n\nexport interface ObjectConfigProps {\n label: string;\n heading: string;\n primaryAction: Action;\n secondaryAction: Action;\n content?: ReactNode;\n onBeforeOpen?: () => void;\n onAfterClose?: (id?: string) => void;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst ObjectConfig: FC<\n ObjectConfigProps & ForwardProps & { disabled?: boolean; dismissPopover: (id?: string) => void }\n> = ({ heading, content, primaryAction, secondaryAction, disabled, dismissPopover }) => {\n const t = useI18n();\n\n return (\n <Flex container={{ direction: 'column', pad: 2, gap: 2 }}>\n <Flex container={{ justify: 'between', alignItems: 'center' }}>\n <Text variant='h3'>{heading}</Text>\n <Button icon variant='simple' label={t('close')} onClick={() => dismissPopover()}>\n <Icon name='times' />\n </Button>\n </Flex>\n {content}\n <Flex container={{ justify: 'between' }}>\n <Button\n variant='secondary'\n disabled={disabled}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n secondaryAction.onClick?.(secondaryAction.id, e);\n dismissPopover(secondaryAction.id);\n }}\n >\n {secondaryAction.text}\n </Button>\n <Button\n variant='primary'\n disabled={disabled}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n primaryAction.onClick?.(primaryAction.id, e);\n dismissPopover(primaryAction.id);\n }}\n >\n {primaryAction.text}\n </Button>\n </Flex>\n </Flex>\n );\n};\n\nexport default ObjectConfig;\n"]}

package/lib/components/ObjectSelect/ObjectPicker.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { FC, Ref } from 'react';
+import { BaseProps, ForwardProps, MenuProps, MenuItemProps, ComboBoxProps, NoChildrenProp } from '@pega/cosmos-react-core';
+interface ObjectPickerProps extends BaseProps, NoChildrenProp, Pick<ComboBoxProps, 'id' | 'label' | 'labelHidden' | 'required' | 'disabled' | 'readOnly' | 'name' | 'status' | 'info' | 'placeholder'> {
+    items: MenuProps['items'];
+    onSelect: (id: MenuItemProps['id']) => void;
+    ref?: Ref<HTMLDivElement>;
+}
+declare const ObjectPicker: FC<ObjectPickerProps & ForwardProps>;
+export default ObjectPicker;
+//# sourceMappingURL=ObjectPicker.d.ts.map

package/lib/components/ObjectSelect/ObjectPicker.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ObjectPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,EAAE,EAAkC,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,EACL,SAAS,EAGT,YAAY,EACZ,SAAS,EACT,aAAa,EAEb,aAAa,EACb,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,UAAU,iBACR,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CACF,aAAa,EACX,IAAI,GACJ,OAAO,GACP,aAAa,GACb,UAAU,GACV,UAAU,GACV,UAAU,GACV,MAAM,GACN,QAAQ,GACR,MAAM,GACN,aAAa,CAChB;IACH,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1B,QAAQ,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,GAAG,YAAY,CAkCtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/ObjectSelect/ObjectPicker.js ADDED Viewed

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useMemo } from 'react';
+import { ComboBox, menuHelpers, createStringMatcher } from '@pega/cosmos-react-core';
+const ObjectPicker = forwardRef(({ items, onSelect, ...restProps }, ref) => {
+    const [filterValue, setFilterValue] = useState('');
+    const filterRegex = filterValue ? createStringMatcher(filterValue) : undefined;
+    const itemsToRender = useMemo(() => {
+        const newItems = filterValue
+            ? menuHelpers.flatten(items).filter(({ primary }) => {
+                return filterRegex?.test(primary);
+            })
+            : items;
+        return menuHelpers.mapTree(newItems, item => ({
+            ...item,
+            selected: item.items ? undefined : !!item.selected
+        }));
+    }, [filterValue, items]);
+    return (_jsx(ComboBox, { ...restProps, ref: ref, mode: 'single-select', value: filterValue, onChange: (e) => setFilterValue(e.target.value), onBlur: () => setFilterValue(''), menu: {
+            items: itemsToRender,
+            onItemClick: onSelect,
+            accent: filterRegex
+        } }, void 0));
+});
+export default ObjectPicker;
+//# sourceMappingURL=ObjectPicker.js.map

package/lib/components/ObjectSelect/ObjectPicker.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ObjectPicker.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAM,QAAQ,EAAE,OAAO,EAAoB,MAAM,OAAO,CAAC;AAE5E,OAAO,EAEL,QAAQ,EACR,WAAW,EAIX,mBAAmB,EAGpB,MAAM,yBAAyB,CAAC;AAuBjC,MAAM,YAAY,GAAyC,UAAU,CACnE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,GAA6B,EAAE,EAAE;IACnE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE/E,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,QAAQ,GAAG,WAAW;YAC1B,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAiB,EAAE,EAAE;gBAC/D,OAAO,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YACpC,CAAC,CAAC;YACJ,CAAC,CAAC,KAAK,CAAC;QAEV,OAAO,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YAC5C,GAAG,IAAI;YACP,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,KAAC,QAAQ,OACH,SAAS,EACb,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,eAAe,EACpB,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC9E,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,EAChC,IAAI,EAAE;YACJ,KAAK,EAAE,aAAa;YACpB,WAAW,EAAE,QAAQ;YACrB,MAAM,EAAE,WAAW;SACpB,WACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FC, useState, useMemo, ChangeEvent, Ref } from 'react';\n\nimport {\n BaseProps,\n ComboBox,\n menuHelpers,\n ForwardProps,\n MenuProps,\n MenuItemProps,\n createStringMatcher,\n ComboBoxProps,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\n\ninterface ObjectPickerProps\n extends BaseProps,\n NoChildrenProp,\n Pick<\n ComboBoxProps,\n | 'id'\n | 'label'\n | 'labelHidden'\n | 'required'\n | 'disabled'\n | 'readOnly'\n | 'name'\n | 'status'\n | 'info'\n | 'placeholder'\n > {\n items: MenuProps['items'];\n onSelect: (id: MenuItemProps['id']) => void;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst ObjectPicker: FC<ObjectPickerProps & ForwardProps> = forwardRef(\n ({ items, onSelect, ...restProps }, ref: ObjectPickerProps['ref']) => {\n const [filterValue, setFilterValue] = useState('');\n const filterRegex = filterValue ? createStringMatcher(filterValue) : undefined;\n\n const itemsToRender = useMemo(() => {\n const newItems = filterValue\n ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n return filterRegex?.test(primary);\n })\n : items;\n\n return menuHelpers.mapTree(newItems, item => ({\n ...item,\n selected: item.items ? undefined : !!item.selected\n }));\n }, [filterValue, items]);\n\n return (\n <ComboBox\n {...restProps}\n ref={ref}\n mode='single-select'\n value={filterValue}\n onChange={(e: ChangeEvent<HTMLInputElement>) => setFilterValue(e.target.value)}\n onBlur={() => setFilterValue('')}\n menu={{\n items: itemsToRender,\n onItemClick: onSelect,\n accent: filterRegex\n }}\n />\n );\n }\n);\n\nexport default ObjectPicker;\n"]}

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

@@ -0,0 +1,22 @@
+import { FunctionComponent, Ref } from 'react';
+import { BaseProps, ForwardProps, FormControlProps, MenuItemProps, NoChildrenProp, MenuProps } from '@pega/cosmos-react-core';
+import { ObjectSummaryProps } from './ObjectSummary';
+export interface ObjectSelectProps extends BaseProps, NoChildrenProp, Omit<FormControlProps, 'value'> {
+    /** An array of MenuItemProps to be shown in the ObjectPicker menu. */
+    items: MenuProps['items'];
+    /** The value for the ObjectSummary */
+    value?: ObjectSummaryProps['value'];
+    /** Props for configuration popover */
+    configuration?: ObjectSummaryProps['configuration'];
+    /** Callback fired when a new item is selected and on clearing the selected item. */
+    onChange: (id: MenuItemProps['id']) => void;
+    /** Callback fired when the preview in the ObjectSummary link is clicked. */
+    onPreview?: (id: MenuItemProps['id'], e: {
+        href: string;
+    }) => void;
+    /** Ref placed on the element. */
+    ref?: Ref<HTMLDivElement>;
+}
+declare const ObjectSelect: FunctionComponent<ObjectSelectProps & ForwardProps>;
+export default ObjectSelect;
+//# sourceMappingURL=ObjectSelect.d.ts.map

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

@@ -0,0 +1 @@

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

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

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

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

@@ -0,0 +1 @@

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

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

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"ObjectSummary.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAc,GAAG,EAAE,eAAe,EAAoC,MAAM,OAAO,CAAC;AAG/F,OAAO,EACL,SAAS,EAKT,YAAY,EAGZ,gBAAgB,EAChB,aAAa,EAUd,MAAM,yBAAyB,CAAC;AAIjC,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIjE,UAAU,uBAAuB;IAC/B,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IACxB,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACpF,KAAK,EAAE,uBAAuB,CAAC;IAC/B,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1C,GAAG,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC1B;AAaD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,GAAG,YAAY,CA8HzE,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,71 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { SummaryItem, Link, Button, Icon, StyledFormControl, FormField, useI18n, registerIcon, Text, Popover, getFocusables, useAfterInitialEffect, useConsolidatedRef, useDirection, useElement } from '@pega/cosmos-react-core';
+import * as times from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
+import * as gear from '@pega/cosmos-react-core/lib/components/Icon/icons/gear.icon';
+import ObjectConfig from './ObjectConfig';
+registerIcon(times, gear);
+const StyledObjectSummary = styled(StyledFormControl) `
+  padding: ${({ meta }) => (meta ? '0.5rem' : '0 0.5rem')};
+`;
+const StyledMetaText = styled(Text) `
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+`;
+const ObjectSummary = forwardRef(({ value, configuration, label, disabled, status, readOnly, onDelete, onPreview, ...restProps }, ref) => {
+    const [open, setOpen] = useState(false);
+    const [buttonEl, setButtonEl] = useElement();
+    const [popoverEl, setPopoverEl] = useElement();
+    const popoverRef = useConsolidatedRef(configuration?.ref, setPopoverEl);
+    const t = useI18n();
+    const { rtl } = useDirection();
+    const openPopover = () => {
+        configuration?.onBeforeOpen?.();
+        setOpen(true);
+    };
+    const dismissPopover = (id) => {
+        setOpen(false);
+        configuration?.onAfterClose?.(id);
+    };
+    const onKeydown = useCallback((e) => {
+        const { key } = e;
+        if (key === 'Escape') {
+            setOpen(false);
+        }
+        else if (key === 'Tab' && popoverEl) {
+            const focusableContent = getFocusables(popoverRef);
+            if (!focusableContent)
+                return;
+            const firstFocusableElement = focusableContent[0];
+            const lastFocusableElement = focusableContent[focusableContent.length - 1];
+            if (e.shiftKey) {
+                if (document.activeElement === firstFocusableElement) {
+                    lastFocusableElement.focus();
+                    e.preventDefault();
+                }
+            }
+            else if (document.activeElement === lastFocusableElement) {
+                firstFocusableElement.focus();
+                e.preventDefault();
+            }
+        }
+    }, [popoverEl]);
+    useEffect(() => {
+        popoverEl?.addEventListener('keydown', onKeydown);
+        return () => {
+            popoverEl?.removeEventListener('keydown', onKeydown);
+        };
+    }, [popoverEl]);
+    useAfterInitialEffect(() => {
+        if (open)
+            popoverEl?.querySelector('button')?.focus();
+        else
+            buttonEl?.focus();
+    }, [open, popoverEl]);
+    return (_jsx(FormField, { ...restProps, ref: ref, label: label, status: status, children: _jsx(SummaryItem, { as: StyledObjectSummary, status: status, meta: value.meta, primary: _jsx(Link, { href: value.href, "aria-label": `${label} ${value.primary}`, previewable: true, target: '_blank', onPreview: onPreview, children: value.primary }, void 0), secondary: value.meta && _jsx(StyledMetaText, { variant: 'secondary', children: value.meta }, void 0), actions: _jsxs(_Fragment, { children: [configuration && (_jsx(Button, { ref: setButtonEl, label: configuration?.label, icon: true, variant: 'simple', onClick: openPopover, children: _jsx(Icon, { name: 'gear' }, void 0) }, void 0)), !readOnly && (_jsx(Button, { disabled: disabled, label: t('clear_object_summary', [String(label)]), icon: true, variant: 'simple', onClick: onDelete, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)), _jsx(Popover, { ref: popoverRef, placement: rtl ? 'bottom-end' : 'bottom-start', hideOnTargetHidden: true, show: open, target: buttonEl, children: configuration && open && (_jsx(ObjectConfig, { ...configuration, disabled: disabled, dismissPopover: dismissPopover }, void 0)) }, void 0)] }, void 0) }, void 0) }, void 0));
+});
+export default ObjectSummary;
+//# sourceMappingURL=ObjectSummary.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"ObjectSummary.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, Ref, PropsWithoutRef, useCallback, useEffect, useState } from 'react';\nimport styled from 'styled-components';\n\nimport {\n BaseProps,\n SummaryItem,\n Link,\n Button,\n Icon,\n ForwardProps,\n StyledFormControl,\n FormField,\n FormControlProps,\n MenuItemProps,\n useI18n,\n registerIcon,\n Text,\n Popover,\n getFocusables,\n useAfterInitialEffect,\n useConsolidatedRef,\n useDirection,\n useElement\n} from '@pega/cosmos-react-core';\nimport * as times from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as gear from '@pega/cosmos-react-core/lib/components/Icon/icons/gear.icon';\n\nimport ObjectConfig, { ObjectConfigProps } from './ObjectConfig';\n\nregisterIcon(times, gear);\n\ninterface ObjectSummaryValueProps {\n id: MenuItemProps['id'];\n primary: MenuItemProps['primary'];\n href: string;\n meta?: string;\n}\n\nexport interface ObjectSummaryProps extends BaseProps, Omit<FormControlProps, 'value'> {\n value: ObjectSummaryValueProps;\n configuration?: ObjectConfigProps;\n onDelete: () => void;\n onPreview?: (e: { href: string }) => void;\n ref: Ref<HTMLDivElement>;\n}\n\nconst StyledObjectSummary = styled(StyledFormControl)<{ meta: string }>`\n padding: ${({ meta }) => (meta ? '0.5rem' : '0 0.5rem')};\n`;\n\nconst StyledMetaText = styled(Text)`\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n`;\n\nconst ObjectSummary: FC<PropsWithoutRef<ObjectSummaryProps> & ForwardProps> = forwardRef(\n (\n { value, configuration, label, disabled, status, readOnly, onDelete, onPreview, ...restProps },\n ref: ObjectSummaryProps['ref']\n ) => {\n const [open, setOpen] = useState(false);\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>();\n const popoverRef = useConsolidatedRef<HTMLDivElement>(configuration?.ref, setPopoverEl);\n const t = useI18n();\n const { rtl } = useDirection();\n\n const openPopover = () => {\n configuration?.onBeforeOpen?.();\n setOpen(true);\n };\n\n const dismissPopover = (id?: string) => {\n setOpen(false);\n configuration?.onAfterClose?.(id);\n };\n\n const onKeydown = useCallback(\n (e: KeyboardEvent) => {\n const { key } = e;\n if (key === 'Escape') {\n setOpen(false);\n } else if (key === 'Tab' && popoverEl) {\n const focusableContent = getFocusables(popoverRef);\n\n if (!focusableContent) return;\n\n const firstFocusableElement = focusableContent[0];\n const lastFocusableElement = focusableContent[focusableContent.length - 1];\n\n if (e.shiftKey) {\n if (document.activeElement === firstFocusableElement) {\n lastFocusableElement.focus();\n e.preventDefault();\n }\n } else if (document.activeElement === lastFocusableElement) {\n firstFocusableElement.focus();\n e.preventDefault();\n }\n }\n },\n [popoverEl]\n );\n\n useEffect(() => {\n popoverEl?.addEventListener('keydown', onKeydown);\n return () => {\n popoverEl?.removeEventListener('keydown', onKeydown);\n };\n }, [popoverEl]);\n\n useAfterInitialEffect(() => {\n if (open) popoverEl?.querySelector('button')?.focus();\n else buttonEl?.focus();\n }, [open, popoverEl]);\n\n return (\n <FormField {...restProps} ref={ref} label={label} status={status}>\n <SummaryItem\n as={StyledObjectSummary}\n status={status}\n meta={value.meta}\n primary={\n <Link\n href={value.href}\n aria-label={`${label} ${value.primary}`}\n previewable\n target='_blank'\n onPreview={onPreview}\n >\n {value.primary}\n </Link>\n }\n secondary={\n value.meta && <StyledMetaText variant='secondary'>{value.meta}</StyledMetaText>\n }\n actions={\n <>\n {configuration && (\n <Button\n ref={setButtonEl}\n label={configuration?.label}\n icon\n variant='simple'\n onClick={openPopover}\n >\n <Icon name='gear' />\n </Button>\n )}\n {!readOnly && (\n <Button\n disabled={disabled}\n label={t('clear_object_summary', [String(label)])}\n icon\n variant='simple'\n onClick={onDelete}\n >\n <Icon name='times' />\n </Button>\n )}\n <Popover\n ref={popoverRef}\n placement={rtl ? 'bottom-end' : 'bottom-start'}\n hideOnTargetHidden\n show={open}\n target={buttonEl}\n >\n {configuration && open && (\n <ObjectConfig\n {...configuration}\n disabled={disabled}\n dismissPopover={dismissPopover}\n />\n )}\n </Popover>\n </>\n }\n />\n </FormField>\n );\n }\n);\n\nexport default ObjectSummary;\n"]}

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

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

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

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

package/lib/components/ObjectSelect/index.js ADDED Viewed

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

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

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

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

	@@ -1 +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,~~CA4CnD~~,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
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"}

package/lib/components/Workbench/ConfigurationPanel.js CHANGED Viewed

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect } from 'react';
-import { Flex, Button, Icon, useElement, useI18n, ExpandCollapse } from '@pega/cosmos-react-core';
+import { Flex, Button, Icon, useI18n, ExpandCollapse } from '@pega/cosmos-react-core';
 import { StyledPanel, StyledTextWithEllipsis } from './Workbench.styles';
 const ConfigurationPanel = ({ open, header, content, onDismiss }) => {
-    const [buttonEl, setButtonEl] = useElement();
     const t = useI18n();
     const onKeyDown = useCallback(({ key }) => {
         if (key === 'Escape')
@@ -15,7 +14,7 @@ const ConfigurationPanel = ({ open, header, content, onDismiss }) => {
             document.removeEventListener('keydown', onKeyDown);
         };
     }, [onKeyDown]);
-    return (_jsx(ExpandCollapse, { as: StyledPanel, dimension: 'width', collapsed: !open, min: '0', max: '25rem', onAfterExpand: () => buttonEl?.focus(), 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 }, void 0), _jsx(Button, { variant: 'simple', icon: true, onClick: onDismiss, ref: setButtonEl, label: t('close_configuration_panel'), children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)] }, void 0), content] }, void 0) }, void 0));
+    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 }, void 0), _jsx(Button, { variant: 'simple', icon: true, onClick: onDismiss, label: t('close_configuration_panel'), children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)] }, void 0), content] }, void 0) }, void 0));
 };
 export default ConfigurationPanel;
 //# sourceMappingURL=ConfigurationPanel.js.map

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

	@@ -1 +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,~~UAAU,EAAE,~~OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;~~AAElG~~,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,~~QAAQ,EAAE,WAAW,CAAC,~~GAAG,~~UAAU,EAAe,CAAC;IAC1D,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,~~IACb~~,EAAE,EAAE,WAAW,~~EACf~~,SAAS,EAAC,OAAO,~~EACjB~~,SAAS,EAAE,CAAC,IAAI,~~EAChB~~,GAAG,EAAC,GAAG,~~EACP~~,GAAG,EAAC,OAAO,~~EACX~~,~~aAAa,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,YAEtC,~~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,WAA0B,EACtE,KAAC,MAAM,~~IACL~~,OAAO,EAAC,QAAQ,~~EAChB~~,IAAI,~~QACJ~~,OAAO,EAAE,SAAS,~~EAClB,GAAG,~~EAAE,~~WAAW,EAChB,~~KAAK,EAAE,CAAC,CAAC,2BAA2B,CAAC,~~YAErC~~,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,WACd,YACJ,EACN,OAAO,YACH,WACQ,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { FC, useCallback, useEffect } from 'react';\n\nimport { Flex, Button, Icon, ~~useElement,~~ 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 ~~[buttonEl, setButtonEl] = useElement<HTMLElement>();\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\n as={StyledPanel}\n dimension='width'\n collapsed={!open}\n min='0'\n max='25rem'~~\n onAfterExpand={() => buttonEl?.focus()}\n~~ >\n <Flex container={{ pad: 2, direction: 'column', gap: 1 }}>\n <Flex container={{ justify: 'between', alignItems: 'center' }}>\n <StyledTextWithEllipsis variant='h3'>{header}</StyledTextWithEllipsis>\n <Button\n variant='simple'\n icon\n onClick={onDismiss}~~\n ref={setButtonEl}\n~~ label={t('close_configuration_panel')}\n >\n <Icon name='times' />\n </Button>\n </Flex>\n {content}\n </Flex>\n </ExpandCollapse>\n );\n};\n\nexport default ConfigurationPanel;\n"]}
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,WAA0B,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,WAAG,WACd,YACJ,EACN,OAAO,YACH,WACQ,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"]}

package/lib/components/Workbench/Toolbar.d.ts CHANGED Viewed

@@ -5,10 +5,6 @@ interface UtilityPanelSelectorProps {
     onToggle: (panelId?: UtilityPanelProps['id']) => void;
     currentPanelId: UtilityPanelProps['id'] | undefined;
 }
-interface ZoomProps {
-    zoomLevel: number;
-    onZoomLevelChange: (value: number) => void;
-}
-declare const Toolbar: FC<ToolbarProps & UtilityPanelSelectorProps & ZoomProps>;
+declare const Toolbar: FC<ToolbarProps & UtilityPanelSelectorProps>;
 export default Toolbar;
 //# sourceMappingURL=Toolbar.d.ts.map

package/lib/components/Workbench/Toolbar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK3B,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEpE,UAAU,yBAAyB;IACjC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,GAAG,OAAO,GAAG,MAAM,CAAC,EAAE,CAAC;IAC5D,QAAQ,EAAE,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IACtD,cAAc,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;CACrD;AAED,~~UAAU,SAAS;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,~~QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,GAAG,yBAAyB,~~GAAG~~,~~SAAS,CA6ErE,~~CAAC;AAEF,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK3B,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEpE,UAAU,yBAAyB;IACjC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,GAAG,OAAO,GAAG,MAAM,CAAC,EAAE,CAAC;IAC5D,QAAQ,EAAE,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IACtD,cAAc,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;CACrD;AAED,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,GAAG,yBAAyB,CAwDzD,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Workbench/Toolbar.js CHANGED Viewed

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Flex, Icon, NumberInput, Button, useI18n } from '@pega/cosmos-react-core';
+import { Flex, Icon, Button, useI18n } from '@pega/cosmos-react-core';
 import { StyledPanelToggleWrapper, StyledToolbar, UtilityPanelToggle } from './Workbench.styles';
-const Toolbar = ({ zoom = false, zoomLevel, onZoomLevelChange, options, currentPanelId, onToggle, toolbarActions: { undo, redo } = {} }) => {
+const Toolbar = ({ options, currentPanelId, onToggle, toolbarActions: { undo, redo } = {} }) => {
     const t = useI18n();
-    return (_jsxs(Flex, { as: StyledToolbar, container: { justify: 'between' }, children: [_jsxs(Flex, { container: { alignItems: 'center' }, children: [_jsx(Flex, { container: { alignItems: 'center' }, as: StyledPanelToggleWrapper, children: options.map(panelDef => {
-                            const selected = panelDef.id === currentPanelId;
-                            return (_jsx(Button, { variant: 'simple', as: UtilityPanelToggle, icon: true, "aria-selected": selected, onClick: () => {
-                                    onToggle(selected ? undefined : panelDef.id);
-                                }, label: t(selected ? 'collapse_noun' : 'expand_noun', [panelDef.title]), children: _jsx(Icon, { name: panelDef.icon }, void 0) }, panelDef.id));
-                        }) }, void 0), undo && (_jsx(Button, { label: t('undo'), variant: 'simple', icon: true, onClick: undo.onClick, disabled: undo.disabled, children: _jsx(Icon, { name: 'arrow-bend-left' }, void 0) }, void 0)), redo && (_jsx(Button, { label: t('redo'), variant: 'simple', icon: true, onClick: redo.onClick, disabled: redo.disabled, children: _jsx(Icon, { name: 'arrow-bend-right' }, void 0) }, void 0))] }, void 0), _jsx(Flex, { container: { alignItems: 'center' }, children: zoom && (_jsx(NumberInput, { variant: 'stepper', label: t('zoom_level'), labelHidden: true, value: zoomLevel.toString(), onChange: value => onZoomLevelChange(Number(value)), showDecimal: false, showGroupSeparators: false, step: 25, unit: '%', unitPlacement: 'after', min: 25, max: 300 }, void 0)) }, void 0)] }, void 0));
+    return (_jsx(Flex, { as: StyledToolbar, container: { justify: 'between' }, children: _jsxs(Flex, { container: { alignItems: 'center' }, children: [_jsx(Flex, { container: { alignItems: 'center' }, as: StyledPanelToggleWrapper, children: options.map(panelDef => {
+                        const selected = panelDef.id === currentPanelId;
+                        return (_jsx(Button, { variant: 'simple', as: UtilityPanelToggle, icon: true, "aria-selected": selected, onClick: () => {
+                                onToggle(selected ? undefined : panelDef.id);
+                            }, label: t(selected ? 'collapse_noun' : 'expand_noun', [panelDef.title]), children: _jsx(Icon, { name: panelDef.icon }, void 0) }, panelDef.id));
+                    }) }, void 0), undo && (_jsx(Button, { label: t('undo'), variant: 'simple', icon: true, onClick: undo.onClick, disabled: undo.disabled, children: _jsx(Icon, { name: 'arrow-bend-left' }, void 0) }, void 0)), redo && (_jsx(Button, { label: t('redo'), variant: 'simple', icon: true, onClick: redo.onClick, disabled: redo.disabled, children: _jsx(Icon, { name: 'arrow-bend-right' }, void 0) }, void 0))] }, void 0) }, void 0));
 };
 export default Toolbar;
 //# sourceMappingURL=Toolbar.js.map

package/lib/components/Workbench/Toolbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../src/components/Workbench/Toolbar.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,~~WAAW,EAAE,~~MAAM,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;~~AAEnF~~,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;~~AAcjG~~,MAAM,OAAO,~~GAA6D~~,CAAC,~~EACzE~~,~~IAAI,GAAG,KAAK,EACZ,SAAS,EACT,iBAAiB,EACjB,~~OAAO,EACP,cAAc,EACd,QAAQ,EACR,cAAc,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,~~EACkB~~,EAAE,EAAE;~~IACzD~~,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,~~MAAC~~,IAAI,IAAC,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,~~aACxD~~,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aACvC,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,wBAAwB,YACpE,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;~~4BACtB~~,MAAM,QAAQ,GAAG,QAAQ,CAAC,EAAE,KAAK,cAAc,CAAC;~~4BAChD~~,OAAO,CACL,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,EAAE,EAAE,kBAAkB,EACtB,IAAI,yBACW,QAAQ,EACvB,OAAO,EAAE,GAAG,EAAE;~~oCACZ~~,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;~~gCAC~~/C,CAAC,EACD,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,YAGtE,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,WAAI,IAFxB,QAAQ,CAAC,EAAE,CAGT,CACV,CAAC;~~wBACJ~~,CAAC,CAAC,WACG,EACN,IAAI,IAAI,CACP,KAAC,MAAM,IACL,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,EAChB,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,YAEvB,KAAC,IAAI,IAAC,IAAI,EAAC,iBAAiB,WAAG,WACxB,CACV,EACA,IAAI,IAAI,CACP,KAAC,MAAM,IACL,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,EAChB,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,YAEvB,KAAC,IAAI,IAAC,IAAI,EAAC,kBAAkB,WAAG,WACzB,CACV,YACI,~~EACP~~,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,YACtC,IAAI,IAAI,CACP,KAAC,WAAW,IACV,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE,CAAC,CAAC,YAAY,CAAC,EACtB,WAAW,QACX,KAAK,EAAE,SAAS,CAAC,QAAQ,EAAE,EAC3B,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EACnD,WAAW,EAAE,KAAK,EAClB,mBAAmB,EAAE,KAAK,EAC1B,IAAI,EAAE,EAAE,EACR,IAAI,EAAC,GAAG,EACR,aAAa,EAAC,OAAO,EACrB,GAAG,EAAE,EAAE,EACP,GAAG,EAAE,GAAG,WACR,CACH,WACI,YACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { FC } from 'react';\n\nimport { Flex, Icon, ~~NumberInput,~~ Button, useI18n } from '@pega/cosmos-react-core';\n\nimport { StyledPanelToggleWrapper, StyledToolbar, UtilityPanelToggle } from './Workbench.styles';\nimport { ToolbarProps, UtilityPanelProps } from './Workbench.types';\n\ninterface UtilityPanelSelectorProps {\n options: Pick<UtilityPanelProps, 'id' \| 'title' \| 'icon'>[];\n onToggle: (panelId?: UtilityPanelProps['id']) => void;\n currentPanelId: UtilityPanelProps['id'] \| undefined;\n}\n\~~ninterface ZoomProps {\n zoomLevel: number;\n onZoomLevelChange: (value: number) => void;\n}\n\~~nconst Toolbar: FC<ToolbarProps & UtilityPanelSelectorProps ~~& ZoomProps~~> = ({\n ~~zoom = false,\n zoomLevel,\n onZoomLevelChange,\n~~ options,\n currentPanelId,\n onToggle,\n toolbarActions: { undo, redo } = {}\n}: ToolbarProps & UtilityPanelSelectorProps ~~& ZoomProps~~) => {\n const t = useI18n();\n\n return (\n <Flex as={StyledToolbar} container={{ justify: 'between' }}>\n <Flex container={{ alignItems: 'center' }}>\n <Flex container={{ alignItems: 'center' }} as={StyledPanelToggleWrapper}>\n {options.map(panelDef => {\n const selected = panelDef.id === currentPanelId;\n return (\n <Button\n variant='simple'\n as={UtilityPanelToggle}\n icon\n aria-selected={selected}\n onClick={() => {\n onToggle(selected ? undefined : panelDef.id);\n }}\n label={t(selected ? 'collapse_noun' : 'expand_noun', [panelDef.title])}\n key={panelDef.id}\n >\n <Icon name={panelDef.icon} />\n </Button>\n );\n })}\n </Flex>\n {undo && (\n <Button\n label={t('undo')}\n variant='simple'\n icon\n onClick={undo.onClick}\n disabled={undo.disabled}\n >\n <Icon name='arrow-bend-left' />\n </Button>\n )}\n {redo && (\n <Button\n label={t('redo')}\n variant='simple'\n icon\n onClick={redo.onClick}\n disabled={redo.disabled}\n >\n <Icon name='arrow-bend-right' />\n </Button>\n )}\n </Flex>\n <Flex container={{ alignItems: 'center' }}>\n {zoom && (\n <NumberInput\n variant='stepper'\n label={t('zoom_level')}\n labelHidden\n value={zoomLevel.toString()}\n onChange={value => onZoomLevelChange(Number(value))}\n showDecimal={false}\n showGroupSeparators={false}\n step={25}\n unit='%'\n unitPlacement='after'\n min={25}\n max={300}\n />\n )}\n </Flex>\n </Flex>\n );\n};\n\nexport default Toolbar;\n"]}
1	+ {"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../src/components/Workbench/Toolbar.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAEtE,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AASjG,MAAM,OAAO,GAAiD,CAAC,EAC7D,OAAO,EACP,cAAc,EACd,QAAQ,EACR,cAAc,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EACM,EAAE,EAAE;IAC7C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,YACxD,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aACvC,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,wBAAwB,YACpE,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;wBACtB,MAAM,QAAQ,GAAG,QAAQ,CAAC,EAAE,KAAK,cAAc,CAAC;wBAChD,OAAO,CACL,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,EAAE,EAAE,kBAAkB,EACtB,IAAI,yBACW,QAAQ,EACvB,OAAO,EAAE,GAAG,EAAE;gCACZ,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;4BAC/C,CAAC,EACD,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,YAGtE,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,WAAI,IAFxB,QAAQ,CAAC,EAAE,CAGT,CACV,CAAC;oBACJ,CAAC,CAAC,WACG,EACN,IAAI,IAAI,CACP,KAAC,MAAM,IACL,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,EAChB,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,YAEvB,KAAC,IAAI,IAAC,IAAI,EAAC,iBAAiB,WAAG,WACxB,CACV,EACA,IAAI,IAAI,CACP,KAAC,MAAM,IACL,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,EAChB,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,YAEvB,KAAC,IAAI,IAAC,IAAI,EAAC,kBAAkB,WAAG,WACzB,CACV,YACI,WACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { FC } from 'react';\n\nimport { Flex, Icon, Button, useI18n } from '@pega/cosmos-react-core';\n\nimport { StyledPanelToggleWrapper, StyledToolbar, UtilityPanelToggle } from './Workbench.styles';\nimport { ToolbarProps, UtilityPanelProps } from './Workbench.types';\n\ninterface UtilityPanelSelectorProps {\n options: Pick<UtilityPanelProps, 'id' \| 'title' \| 'icon'>[];\n onToggle: (panelId?: UtilityPanelProps['id']) => void;\n currentPanelId: UtilityPanelProps['id'] \| undefined;\n}\n\nconst Toolbar: FC<ToolbarProps & UtilityPanelSelectorProps> = ({\n options,\n currentPanelId,\n onToggle,\n toolbarActions: { undo, redo } = {}\n}: ToolbarProps & UtilityPanelSelectorProps) => {\n const t = useI18n();\n\n return (\n <Flex as={StyledToolbar} container={{ justify: 'between' }}>\n <Flex container={{ alignItems: 'center' }}>\n <Flex container={{ alignItems: 'center' }} as={StyledPanelToggleWrapper}>\n {options.map(panelDef => {\n const selected = panelDef.id === currentPanelId;\n return (\n <Button\n variant='simple'\n as={UtilityPanelToggle}\n icon\n aria-selected={selected}\n onClick={() => {\n onToggle(selected ? undefined : panelDef.id);\n }}\n label={t(selected ? 'collapse_noun' : 'expand_noun', [panelDef.title])}\n key={panelDef.id}\n >\n <Icon name={panelDef.icon} />\n </Button>\n );\n })}\n </Flex>\n {undo && (\n <Button\n label={t('undo')}\n variant='simple'\n icon\n onClick={undo.onClick}\n disabled={undo.disabled}\n >\n <Icon name='arrow-bend-left' />\n </Button>\n )}\n {redo && (\n <Button\n label={t('redo')}\n variant='simple'\n icon\n onClick={redo.onClick}\n disabled={redo.disabled}\n >\n <Icon name='arrow-bend-right' />\n </Button>\n )}\n </Flex>\n </Flex>\n );\n};\n\nexport default Toolbar;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Workbench.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,~~EAAgE~~,MAAM,OAAO,CAAC;~~AAEzF~~,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,~~CA+DhD~~,CAAC;AAEF,eAAe,SAAS,CAAC"}
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,CAuDhD,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -2,11 +2,10 @@ 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 Toolbar from './Toolbar';
-import { StyledMain, StyledWorkbench, ZoomContainer } from './Workbench.styles';
+import { StyledMain, StyledWorkbench } from './Workbench.styles';
 import ConfigurationPanel from './ConfigurationPanel';
 import UtilityPanel from './UtilityPanel';
 const Workbench = forwardRef(({ children, utilityPanels = [], configurationPanel, toolbar, initiallyVisiblePanelId }, ref) => {
-    const [zoomValue, setZoomValue] = useState(100);
     const [currentlyOpenPanelId, setCurrentlyOpenPanelId] = useState(initiallyVisiblePanelId);
     const panelContentRef = useRef(utilityPanels.find(panel => panel.id === initiallyVisiblePanelId));
     const onToggle = (panelId) => {
@@ -18,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: [_jsx(Grid, { item: { area: 'header' }, children: _jsx(Toolbar, { ...toolbar, zoomLevel: zoomValue, onZoomLevelChange: setZoomValue, options: utilityPanels, onToggle: onToggle, currentPanelId: currentlyOpenPanelId }, void 0) }, void 0), panelContentRef.current && (_jsx(Grid, { item: { area: 'utility' }, children: _jsx(UtilityPanel, { ...panelContentRef.current, open: !!currentlyOpenPanelId }, void 0) }, void 0)), _jsx(Grid, { item: { area: 'main' }, children: _jsx(StyledMain, { children: _jsx(ZoomContainer, { style: { '--workbench-zoom-level': zoomValue / 100 }, children: children }, void 0) }, void 0) }, void 0), _jsx(Grid, { item: { area: 'configuration' }, children: _jsx(ConfigurationPanel, { ...configurationPanel }, void 0) }, void 0)] }, void 0));
+        }, as: StyledWorkbench, ref: ref, children: [_jsx(Grid, { item: { area: 'header' }, children: _jsx(Toolbar, { ...toolbar, options: utilityPanels, onToggle: onToggle, currentPanelId: currentlyOpenPanelId }, void 0) }, void 0), panelContentRef.current && (_jsx(Grid, { item: { area: 'utility' }, children: _jsx(UtilityPanel, { ...panelContentRef.current, open: !!currentlyOpenPanelId }, void 0) }, void 0)), _jsx(Grid, { item: { area: 'main' }, children: _jsx(StyledMain, { children: children }, void 0) }, void 0), _jsx(Grid, { item: { area: 'configuration' }, children: _jsx(ConfigurationPanel, { ...configurationPanel }, void 0) }, void 0)] }, void 0));
 });
 export default Workbench;
 //# sourceMappingURL=Workbench.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Workbench.js","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,UAAU,EAAmB,MAAM,~~EAAiB~~,MAAM,OAAO,CAAC;~~AAEzF~~,OAAO,EAAgB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,~~aAAa,EAAE,~~MAAM,oBAAoB,CAAC;~~AAEhF~~,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,~~SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEhD,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,aAER,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,YAC5B,KAAC,OAAO,OACF,OAAO,EACX,~~SAAS,EAAE,SAAS,EACpB,iBAAiB,EAAE,YAAY,EAC/B,~~OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,oBAAoB,WACpC,WACG,EACN,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,WAAI,WACtE,CACR,EACD,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,YAC1B,KAAC,UAAU,~~cACT~~,~~KAAC,aAAa,IAAC,KAAK,EAAE,EAAE,wBAAwB,EAAE,SAAS,GAAG,GAAG,EAAmB,YACjF,~~QAAQ,~~WACK~~,~~WACL~~,~~WACR,~~EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,YACnC,KAAC,kBAAkB,OAAK,kBAAkB,WAAI,WACzC,YACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { FC, useState, forwardRef, PropsWithoutRef, useRef, ~~CSSProperties~~ } from 'react';\n\nimport { ForwardProps, Grid } from '@pega/cosmos-react-core';\n\nimport Toolbar from './Toolbar';\nimport { StyledMain, StyledWorkbench, ~~ZoomContainer~~ } 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 [~~zoomValue, setZoomValue] = useState(100);\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 <Grid item={{ area: 'header' }}>\n <Toolbar\n {...toolbar}\n ~~zoomLevel={zoomValue}\n onZoomLevelChange={setZoomValue}\n~~ options={utilityPanels}\n onToggle={onToggle}\n currentPanelId={currentlyOpenPanelId}\n />\n </Grid>\n {panelContentRef.current && (\n <Grid item={{ area: 'utility' }}>\n <UtilityPanel {...panelContentRef.current} open={!!currentlyOpenPanelId} />\n </Grid>\n )}\n <Grid item={{ area: 'main' }}>\n <StyledMain~~>\n <ZoomContainer style=~~{~~{ '--workbench-zoom-level': zoomValue / 100 } as CSSProperties}>\n {~~children}\n </~~ZoomContainer>\n </~~StyledMain>\n </Grid>\n <Grid item={{ area: 'configuration' }}>\n <ConfigurationPanel {...configurationPanel} />\n </Grid>\n </Grid>\n );\n }\n);\n\nexport default Workbench;\n"]}
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,aAER,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,WACpC,WACG,EACN,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,WAAI,WACtE,CACR,EACD,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,YAC1B,KAAC,UAAU,cAAE,QAAQ,WAAc,WAC9B,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,YACnC,KAAC,kBAAkB,OAAK,kBAAkB,WAAI,WACzC,YACF,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 <Grid item={{ area: 'header' }}>\n <Toolbar\n {...toolbar}\n options={utilityPanels}\n onToggle={onToggle}\n currentPanelId={currentlyOpenPanelId}\n />\n </Grid>\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"]}

package/lib/components/Workbench/Workbench.styles.d.ts CHANGED Viewed

@@ -5,6 +5,5 @@ 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 ZoomContainer: 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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Workbench.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.styles.ts"],"names":[],"mappings":";~~AAMA~~,eAAO,MAAM,wBAAwB,yGAEpC,CAAC;AAIF,eAAO,MAAM,kBAAkB,qOAqB7B,CAAC;AAIH,eAAO,MAAM,aAAa,~~yGA8BzB~~,CAAC;AAIF,eAAO,MAAM,UAAU,~~yGAGtB~~,CAAC;AAIF,eAAO,MAAM,eAAe,yGAE3B,CAAC;AAIF,eAAO,MAAM,WAAW,yGAMtB,CAAC;AAIH,eAAO,MAAM,~~aAAa,yGAEzB,CAAC;AAIF,eAAO,MAAM,~~sBAAsB,mOAIlC,CAAC"}
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"}

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

@@ -1,7 +1,6 @@
 import styled, { css } from 'styled-components';
 import { readableColor } from 'polished';
 import { Button, Text, defaultThemeProp, tryCatch } from '@pega/cosmos-react-core';
-import { StyledStepperInput } from '@pega/cosmos-react-core/lib/components/Number/NumberInput.styles';
 export const StyledPanelToggleWrapper = styled.div `
   height: 100%;
 `;
@@ -20,16 +19,13 @@ export const UtilityPanelToggle = styled(Button)(props => {
   `;
 });
 UtilityPanelToggle.defaultProps = defaultThemeProp;
-export const StyledToolbar = styled.div(({ theme: { base: { spacing, palette, colors } } }) => {
+export const StyledToolbar = styled.div(({ theme: { base: { spacing, palette } } }) => {
     return css `
       height: 2.5rem;
       padding: 0 calc(2 * ${spacing});
       background-color: ${palette['primary-background']};
-      border-bottom: 0.0625rem solid ${colors.gray['extra-light']};
-      ${StyledStepperInput} {
-        width: 8rem;
-      }
+      border-top: 0.0625rem solid ${palette['border-line']};
+      border-bottom: 0.0625rem solid ${palette['border-line']};
       ${StyledPanelToggleWrapper}:empty {
         display: none;
@@ -39,17 +35,20 @@ export const StyledToolbar = styled.div(({ theme: { base: { spacing, palette, co
         ::after {
           content: '';
           margin: 0 calc(2 * ${spacing});
-          height: 80%;
-          border: 0.0625rem solid ${colors.gray['extra-light']};
+          height: 100%;
+          border: 0.0625rem solid ${palette['border-line']};
         }
       }
     `;
 });
 StyledToolbar.defaultProps = defaultThemeProp;
-export const StyledMain = styled.div `
-  height: 100%;
-  overflow: auto;
-`;
+export const StyledMain = styled.div(({ theme: { base: { palette } } }) => {
+    return css `
+      height: 100%;
+      overflow: auto;
+      background-color: ${palette['app-background']};
+    `;
+});
 StyledMain.defaultProps = defaultThemeProp;
 export const StyledWorkbench = styled.div `
   height: 100%;
@@ -63,10 +62,6 @@ export const StyledPanel = styled.div(({ theme }) => {
   `;
 });
 StyledPanel.defaultProps = defaultThemeProp;
-export const ZoomContainer = styled.div `
-  transform: scale(var(--workbench-zoom-level));
-`;
-ZoomContainer.defaultProps = defaultThemeProp;
 export const StyledTextWithEllipsis = styled(Text) `
   overflow: hidden;
   white-space: nowrap;

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

	@@ -1 +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;~~AACnF~~,~~OAAO,EAAE,kBAAkB,EAAE,~~MAAM,~~kEAAkE,~~CAAC~~;AAEtG~~,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,~~MAAM~~,~~EAAE,EACnC,~~EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;4BAEc,OAAO;0BACT,OAAO,CAAC,oBAAoB,CAAC;~~uCAChB~~,~~MAAM~~,CAAC,~~IAAI~~,CAAC,aAAa,CAAC;;~~QAEzD~~,~~kBAAkB;;;;QAIlB,~~wBAAwB;;;;QAIxB,wBAAwB;;;+BAGD,OAAO;;oCAEF,~~MAAM~~,CAAC,~~IAAI,CAAC,~~aAAa,CAAC;;;~~KAGzD~~,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;~~CAGnC~~,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,~~aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEtC,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,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';\~~nimport { StyledStepperInput } from '@pega/cosmos-react-core/lib/components/Number/NumberInput.styles';\~~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, ~~colors~~ }\n }\n }) => {\n return css`\n height: 2.5rem;\n padding: 0 calc(2 * ${spacing});\n background-color: ${palette['primary-background']};\n border-~~bottom~~: 0.0625rem solid ${~~colors.gray~~['~~extra~~-~~light~~']};\n\n ${~~StyledStepperInput~~} ~~{\n width: 8rem~~;\n }\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: 80%;\n border: 0.0625rem solid ${~~colors.gray~~['~~extra~~-~~light~~']};\n }\n }\n `;\n }\n);\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.div`\n height: 100%;\n overflow: auto;\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 ~~ZoomContainer = styled.div`\n transform: scale(var(--workbench-zoom-level));\n`;\n\nZoomContainer.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"]}
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"]}

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

@@ -24,8 +24,6 @@ export interface ConfigurationPanelProps {
     onDismiss: () => void;
 }
 export interface ToolbarProps {
-    /** Whether zoom gadget should be available. */
-    zoom?: boolean;
     /** Toolbar actions available. */
     toolbarActions?: Partial<Record<ActionName, ToolbarAction>>;
 }

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

	@@ -1 +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~~,+CAA+C;IAC/C~~,~~IAAI,CAAC,EAAE,OAAO,CAAC;IACf,~~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"}
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"}

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

	@@ -1 +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 /* Whether zoom gadget should be available. /\n zoom?: boolean;\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"]}
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"]}

package/lib/index.d.ts CHANGED Viewed

@@ -9,6 +9,8 @@ export * from './components/FlowModeller';
 export * from './components/ItemLibrary';
 export { default as LifeCycle } from './components/LifeCycle';
 export * from './components/LifeCycle';
+export { default as ObjectSelect } from './components/ObjectSelect';
+export * from './components/ObjectSelect';
 export * from './components/PageTemplates';
 export * from './components/SummaryCard';
 export * from './components/Visual';

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

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

package/lib/index.js CHANGED Viewed

@@ -10,6 +10,8 @@ export * from './components/FlowModeller';
 export * from './components/ItemLibrary';
 export { default as LifeCycle } from './components/LifeCycle';
 export * from './components/LifeCycle';
+export { default as ObjectSelect } from './components/ObjectSelect';
+export * from './components/ObjectSelect';
 export * from './components/PageTemplates';
 export * from './components/SummaryCard';
 export * from './components/Visual';

package/lib/index.js.map CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-build",
-  "version": "3.0.0-dev.3.0",
+  "version": "3.0.0-dev.4.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,8 +20,8 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "3.0.0-dev.3.0",
-    "@pega/cosmos-react-dnd": "3.0.0-dev.3.0",
+    "@pega/cosmos-react-core": "3.0.0-dev.4.0",
+    "@pega/cosmos-react-dnd": "3.0.0-dev.4.0",
     "dagre": "^0.8.5",
     "polished": "^4.1.0",
     "react": "^16.14.0 || ^17.0.0",
@@ -30,14 +30,14 @@
     "tinymce": "^5.10.2"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.4.12",
-    "@storybook/addon-actions": "^6.4.12",
-    "@storybook/addon-storysource": "^6.4.12",
-    "@storybook/addon-toolbars": "^6.4.12",
-    "@storybook/addons": "^6.4.12",
-    "@storybook/react": "^6.4.12",
+    "@storybook/addon-a11y": "^6.4.19",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-storysource": "^6.4.19",
+    "@storybook/addon-toolbars": "^6.4.19",
+    "@storybook/addons": "^6.4.19",
+    "@storybook/react": "^6.4.19",
     "@storybook/testing-react": "0.0.18",
-    "@storybook/theming": "^6.4.12",
+    "@storybook/theming": "^6.4.19",
     "@types/tinymce": "^4.6.4",
     "enzyme": "^3.11.0",
     "typescript": "~4.5.2"