npm - @pega/cosmos-react-build - Versions diffs - 3.0.0-dev.2.0 → 3.0.0-dev.4.1 - Mend

@pega/cosmos-react-build 3.0.0-dev.2.0 → 3.0.0-dev.4.1

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 (68) hide show

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Avatar, Flex, Text, Tabs, Button } from '@pega/cosmos-react-core';
 export declare const StyledAppHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTitle: typeof Text;

package/lib/components/AppHeader/AppHeader.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,MAAM,EAEN,IAAI,EAEJ,IAAI,EACJ,IAAI,EACJ,MAAM,EACP,MAAM,yBAAyB,CAAC;AAIjC,eAAO,MAAM,eAAe,4GAQ1B,CAAC;AAIH,eAAO,MAAM,WAAW,EAAE,OAAO,IAU/B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAKxC,CAAC;AAIH,eAAO,MAAM,mBAAmB,EAAE,OAAO,IAcvC,CAAC;AAIH,eAAO,MAAM,iBAAiB,0QAM5B,CAAC;AAIH,eAAO,MAAM,UAAU,EAAE,OAAO,IAqB9B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAmBzC,CAAC;AAIF,eAAO,MAAM,qBAAqB,EAAE,OAAO,IAYzC,CAAC;AAIH,eAAO,MAAM,mBAAmB,EAAE,OAAO,MAExC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,OAAO,MAQnC,CAAC"}
1	+ {"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":";AAEA,OAAO,EACL,MAAM,EAEN,IAAI,EAEJ,IAAI,EACJ,IAAI,EACJ,MAAM,EACP,MAAM,yBAAyB,CAAC;AAIjC,eAAO,MAAM,eAAe,4GAQ1B,CAAC;AAIH,eAAO,MAAM,WAAW,EAAE,OAAO,IAU/B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAKxC,CAAC;AAIH,eAAO,MAAM,mBAAmB,EAAE,OAAO,IAcvC,CAAC;AAIH,eAAO,MAAM,iBAAiB,0QAM5B,CAAC;AAIH,eAAO,MAAM,UAAU,EAAE,OAAO,IAqB9B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAmBzC,CAAC;AAIF,eAAO,MAAM,qBAAqB,EAAE,OAAO,IAYzC,CAAC;AAIH,eAAO,MAAM,mBAAmB,EAAE,OAAO,MAExC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,OAAO,MAQnC,CAAC"}

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { AppShellProps } from './AppShell.types';
 declare const AppShell: import("react").ForwardRefExoticComponent<Pick<AppShellProps, "main" | "children" | "navigation" | "appInfo" | "appHeader" | "utils" | "hideNav"> & import("react").RefAttributes<HTMLElement>>;
 export default AppShell;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AA8CA,OAAO,KAAK,EAAE,aAAa,EAA4B,MAAM,kBAAkB,CAAC;AA+FhF,QAAA,MAAM,QAAQ,iMAkIb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":";AA8CA,OAAO,KAAK,EAAE,aAAa,EAA4B,MAAM,kBAAkB,CAAC;AA+FhF,QAAA,MAAM,QAAQ,iMAkIb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const StyledNavToggle: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledDrawerHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/lib/components/AppShell/AppShell.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AA0BA,eAAO,MAAM,eAAe,qOA4B1B,CAAC;AAIH,eAAO,MAAM,YAAY,yGAUvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC;AAIH,eAAO,MAAM,mBAAmB,mOAI9B,CAAC;AAIH,eAAO,MAAM,cAAc,mOAOzB,CAAC;AAIH,eAAO,MAAM,WAAW;iBAA6B,OAAO;SA8B1D,CAAC;AAIH,eAAO,MAAM,cAAc,wGA2BzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAO3B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAmB3B,CAAC;AAIH,eAAO,MAAM,UAAU,0GAOrB,CAAC;AAIH,eAAO,MAAM,mBAAmB,yGAQ9B,CAAC;AAIH,eAAO,MAAM,qBAAqB;aAAyB,MAAM;SAY/D,CAAC;AAIH,eAAO,MAAM,uBAAuB,qOAYlC,CAAC;AAIH,eAAO,MAAM,cAAc,yGAUzB,CAAC;AAIH,eAAO,MAAM,SAAS,yGAsHpB,CAAC"}
1	+ {"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":";AA0BA,eAAO,MAAM,eAAe,qOA4B1B,CAAC;AAIH,eAAO,MAAM,YAAY,yGAUvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC;AAIH,eAAO,MAAM,mBAAmB,mOAI9B,CAAC;AAIH,eAAO,MAAM,cAAc,mOAOzB,CAAC;AAIH,eAAO,MAAM,WAAW;iBAA6B,OAAO;SA8B1D,CAAC;AAIH,eAAO,MAAM,cAAc,wGA2BzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAO3B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAmB3B,CAAC;AAIH,eAAO,MAAM,UAAU,0GAOrB,CAAC;AAIH,eAAO,MAAM,mBAAmB,yGAQ9B,CAAC;AAIH,eAAO,MAAM,qBAAqB;aAAyB,MAAM;SAY/D,CAAC;AAIH,eAAO,MAAM,uBAAuB,qOAYlC,CAAC;AAIH,eAAO,MAAM,cAAc,yGAUzB,CAAC;AAIH,eAAO,MAAM,SAAS,yGAsHpB,CAAC"}

package/lib/components/AppShell/AppShellContext.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AppShellContextValue } from './AppShell.types';
 declare const AppShellContext: import("react").Context<AppShellContextValue>;
 export default AppShellContext;

package/lib/components/AppShell/AppShellContext.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppShellContext.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,QAAA,MAAM,eAAe,+CAMnB,CAAC;AAEH,eAAe,eAAe,CAAC"}
1	+ {"version":3,"file":"AppShellContext.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,QAAA,MAAM,eAAe,+CAMnB,CAAC;AAEH,eAAe,eAAe,CAAC"}

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

@@ -0,0 +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 ADDED Viewed

@@ -0,0 +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 ADDED Viewed

@@ -0,0 +1,209 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, useRef, useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Editor } from '@pega/cosmos-react-rte';
+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, fieldItems, ...restProps }, ref) => {
+    const { create } = useContext(ModalManagerContext);
+    const t = useI18n();
+    const modalMethods = useRef();
+    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_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);
+            editor.selection.setContent(fieldContent);
+        }
+        else {
+            editor.insertContent(fieldContent);
+        }
+        modalMethods.current?.dismiss();
+    };
+    const modalProps = {
+        children: dynamicContentPicker,
+        heading: t('rte_insert_field'),
+        actions: (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', onClick: () => modalMethods.current?.dismiss(), children: t('cancel') }, void 0), _jsx(Button, { variant: 'primary', onClick: () => onSubmit(insertField), children: t('submit') }, void 0)] }, void 0)),
+        center: true,
+        onAfterClose: () => {
+            setBookmark(undefined);
+            setCurrentElementContent('');
+            onActiveFieldChange({ id: '', text: '' });
+        },
+        onBeforeOpen: () => {
+            if (currentElementContent)
+                onActiveFieldChange({ id: currentElementContent, text: 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 = ({ target }) => {
+        if (editor && target instanceof HTMLElement && target.tagName === 'PEGA-REFERENCE') {
+            updateBookmarkAndCurrentElement(editor.selection);
+        }
+        hidePopover();
+    };
+    const onInsertField = (incEditor) => {
+        const targetEl = incEditor.selection.getNode();
+        if (targetEl.tagName === 'PEGA-REFERENCE') {
+            updateBookmarkAndCurrentElement(incEditor.selection);
+        }
+        else {
+            modalMethods.current = create(Modal, modalProps);
+        }
+    };
+    const isPegaRefActive = (incEditor) => {
+        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 () => {
+            editorRef.current?.element?.removeEventListener('click', handleElementClick);
+        };
+    }, [editor, editorRef.current]);
+    useEffect(() => {
+        if (modalMethods.current) {
+            modalMethods.current.update(modalProps);
+        }
+    }, [modalProps]);
+    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));
+            }
+            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'
+                }
+            ], 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 ADDED Viewed

@@ -0,0 +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 ADDED Viewed

@@ -0,0 +1,21 @@
+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;
+}
+//# sourceMappingURL=DynamicContentEditor.types.d.ts.map

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

@@ -0,0 +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 ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=DynamicContentEditor.types.js.map

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

@@ -0,0 +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/DynamicContentEditor/PegaCustomElement.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export default class PegaCustomElement extends HTMLElement {
+    connectedCallback(): void;
+}
+//# sourceMappingURL=PegaCustomElement.d.ts.map

package/lib/components/DynamicContentEditor/PegaCustomElement.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"PegaCustomElement.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/PegaCustomElement.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,WAAW;IACxD,iBAAiB;CAoBlB"}

package/lib/components/DynamicContentEditor/PegaCustomElement.js ADDED Viewed

@@ -0,0 +1,23 @@
+export default class PegaCustomElement extends HTMLElement {
+    connectedCallback() {
+        const template = document.createElement('template');
+        template.innerHTML = `<style>
+  pega-reference {
+    color:#076bc9;
+    cursor:pointer;
+  }
+  pega-reference:hover{
+    text-decoration:underline;
+  }
+  pega-reference::before{
+    content: '['
+  }
+  pega-reference::after{
+    content: ']'
+  }
+  </style>`;
+        const temp = document.importNode(template.content, true);
+        this.append(temp);
+    }
+}
+//# sourceMappingURL=PegaCustomElement.js.map

package/lib/components/DynamicContentEditor/PegaCustomElement.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PegaCustomElement.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/PegaCustomElement.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,WAAW;IACxD,iBAAiB;QACf,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACpD,QAAQ,CAAC,SAAS,GAAG;;;;;;;;;;;;;;WAcd,CAAC;QACR,MAAM,IAAI,GAAG,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QACzD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC;CACF","sourcesContent":["export default class PegaCustomElement extends HTMLElement {\n connectedCallback() {\n const template = document.createElement('template');\n template.innerHTML = `<style>\n pega-reference {\n color:#076bc9;\n cursor:pointer;\n }\n pega-reference:hover{\n text-decoration:underline;\n }\n pega-reference::before{\n content: '['\n }\n pega-reference::after{\n content: ']'\n }\n </style>`;\n const temp = document.importNode(template.content, true);\n this.append(temp);\n }\n}\n"]}

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

@@ -0,0 +1,3 @@
+export { default } from './DynamicContentEditor';
+export { DynamicContentEditorProps, ItemType } from './DynamicContentEditor.types';
+//# sourceMappingURL=index.d.ts.map

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

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,yBAAyB,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC"}

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

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

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

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

package/lib/components/FlowModeller/Node/NodeTemplate.styles.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NodeType } from './Node.types';
 export declare const StyledCircle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledLabel: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {

package/lib/components/FlowModeller/Node/NodeTemplate.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NodeTemplate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,eAAO,MAAM,YAAY,yGAYvB,CAAC;AAIH,eAAO,MAAM,WAAW;cAA4B,QAAQ;SAW1D,CAAC;AAIH,eAAO,MAAM,UAAU,yGAWrB,CAAC;AAIH,eAAO,MAAM,gBAAgB,4GAQ3B,CAAC;AAIH,eAAO,MAAM,UAAU,mOAOrB,CAAC;AAIH,eAAO,MAAM,UAAU,mOAoBrB,CAAC;AAEH,eAAO,MAAM,gBAAgB,yOAO3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAa5B,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAEhC,CAAC;AAEF,eAAO,MAAM,wBAAwB,yGAMnC,CAAC;AAGH,eAAO,MAAM,sBAAsB,mOAQjC,CAAC"}
1	+ {"version":3,"file":"NodeTemplate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,eAAO,MAAM,YAAY,yGAYvB,CAAC;AAIH,eAAO,MAAM,WAAW;cAA4B,QAAQ;SAW1D,CAAC;AAIH,eAAO,MAAM,UAAU,yGAWrB,CAAC;AAIH,eAAO,MAAM,gBAAgB,4GAQ3B,CAAC;AAIH,eAAO,MAAM,UAAU,mOAOrB,CAAC;AAIH,eAAO,MAAM,UAAU,mOAoBrB,CAAC;AAEH,eAAO,MAAM,gBAAgB,yOAO3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAa5B,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAEhC,CAAC;AAEF,eAAO,MAAM,wBAAwB,yGAMnC,CAAC;AAGH,eAAO,MAAM,sBAAsB,mOAQjC,CAAC"}

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