@selfcommunity/react-ui 0.7.50-event.30 → 0.7.50-events.101

package/lib/esm/components/Editor/nodes/ImageNode.js

@@ -1,4 +1,5 @@
-import React, { Suspense, useCallback, useEffect, useRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, useCallback, useEffect, useRef } from 'react';
 import { $getNodeByKey, $getSelection, $isNodeSelection, $setSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, DecoratorNode, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, TextNode } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
@@ -18,7 +19,7 @@ function useSuspenseImage(src) {
 }
 function LazyImage({ altText, className, imageRef, src, width, height, maxWidth }) {
     useSuspenseImage(src);
-    return (React.createElement("img", { className: className, src: src, alt: altText, ref: imageRef, style: {
+    return (_jsx("img", { className: className, src: src, alt: altText, ref: imageRef, style: {
             height: `${height}${height === 'inherit' ? '' : 'px'}`,
             maxWidth,
             width: `${width}${width === 'inherit' ? '' : 'px'}`
@@ -90,8 +91,7 @@ function ImageComponent({ src, altText, nodeKey, maxWidth }) {
             unregister();
         };
     }, [clearSelection, editor, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
-    return (React.createElement(Suspense, { fallback: null },
-        React.createElement(LazyImage, { className: isSelected ? `selected` : null, src: src, altText: altText, imageRef: imageRef, maxWidth: maxWidth })));
+    return (_jsx(Suspense, Object.assign({ fallback: null }, { children: _jsx(LazyImage, { className: isSelected ? `selected` : null, src: src, altText: altText, imageRef: imageRef, maxWidth: maxWidth }) })));
 }
 function convertImageElement(domNode) {
     if (domNode instanceof HTMLImageElement) {
@@ -155,7 +155,7 @@ export class ImageNode extends DecoratorNode {
         return { element };
     }
     decorate() {
-        return React.createElement(ImageComponent, { src: this.__src, altText: this.__altText, maxWidth: this.__maxWidth, nodeKey: this.getKey() });
+        return _jsx(ImageComponent, { src: this.__src, altText: this.__altText, maxWidth: this.__maxWidth, nodeKey: this.getKey() });
     }
     static importJSON(serializedNode) {
         const { altText, maxWidth, src } = serializedNode;

package/lib/esm/components/Editor/plugins/AutoLinkPlugin.js

@@ -1,12 +1,4 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow strict
- */
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { AutoLinkPlugin as LexicalAutoLinkPlugin } from '@lexical/react/LexicalAutoLinkPlugin';
 const URL_MATCHER = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 const EMAIL_MATCHER = /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
@@ -31,5 +23,5 @@ const MATCHERS = [
     }
 ];
 export default function AutoLinkPlugin() {
-    return React.createElement(LexicalAutoLinkPlugin, { matchers: MATCHERS });
+    return _jsx(LexicalAutoLinkPlugin, { matchers: MATCHERS });
 }

package/lib/esm/components/Editor/plugins/EmojiPlugin.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { CONTROLLED_TEXT_INSERTION_COMMAND } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { Fade, Icon, IconButton, Popover, useMediaQuery, useTheme } from '@mui/material';
@@ -21,19 +22,15 @@ function Emoji({ editor, className = '' }) {
     if (isMobile) {
         return null;
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(IconButton, { className: className, onClick: handleOpen },
-            React.createElement(Icon, null, "sentiment_satisfied_alt")),
-        React.createElement(Popover, { open: Boolean(emojiAnchorEl), anchorEl: emojiAnchorEl, onClose: () => setEmojiAnchorEl(null), TransitionComponent: Fade, anchorOrigin: {
-                vertical: 'top',
-                horizontal: 'right'
-            }, transformOrigin: {
-                vertical: 'bottom',
-                horizontal: 'left'
-            }, sx: (theme) => {
-                return { zIndex: theme.zIndex.tooltip };
-            } },
-            React.createElement(EmojiPicker, { onEmojiClick: handleEmojiClick }))));
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: className, onClick: handleOpen }, { children: _jsx(Icon, { children: "sentiment_satisfied_alt" }) })), _jsx(Popover, Object.assign({ open: Boolean(emojiAnchorEl), anchorEl: emojiAnchorEl, onClose: () => setEmojiAnchorEl(null), TransitionComponent: Fade, anchorOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right'
+                }, transformOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'left'
+                }, sx: (theme) => {
+                    return { zIndex: theme.zIndex.tooltip };
+                } }, { children: _jsx(EmojiPicker, { onEmojiClick: handleEmojiClick }) }))] }));
 }
 const classes = {
     root: `${PREFIX}-emoji-plugin-root`
@@ -44,5 +41,5 @@ const Root = styled(Emoji, {
 })(() => ({}));
 export default function EmojiPlugin() {
     const [editor] = useLexicalComposerContext();
-    return React.createElement(Root, { editor: editor, className: classes.root });
+    return _jsx(Root, { editor: editor, className: classes.root });
 }

package/lib/esm/components/Editor/plugins/FloatingLinkPlugin.js

@@ -1,8 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $findMatchingParent, mergeRegister } from '@lexical/utils';
 import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND } from 'lexical';
-import * as React from 'react';
 import { useCallback, useEffect, useState } from 'react';
 import { getSelectedNode } from '../../../utils/editor';
 import { isValidUrl } from '@selfcommunity/utils';
@@ -93,19 +93,13 @@ function FloatingLinkPlugin({ editor, isLink, setIsLink }) {
     if (!isLink || linkUrl === hideForUrl) {
         return null;
     }
-    return (React.createElement(Root, { className: classes.root, open: Boolean(anchorEl), anchorEl: anchorEl, placement: "right" },
-        React.createElement(Paper, null,
-            React.createElement(TextField, { size: "small", value: linkUrl, variant: "outlined", onChange: (event) => {
+    return (_jsx(Root, Object.assign({ className: classes.root, open: Boolean(anchorEl), anchorEl: anchorEl, placement: "right" }, { children: _jsx(Paper, { children: _jsx(TextField, { size: "small", value: linkUrl, variant: "outlined", onChange: (event) => {
                     setLinkUrl(event.target.value);
                 }, InputProps: {
-                    endAdornment: (React.createElement(InputAdornment, { position: "end" },
-                        React.createElement(IconButton, { size: "small", tabIndex: 0, onClick: () => {
-                                setIsLink(false);
-                            } },
-                            React.createElement(Icon, null, "close")),
-                        React.createElement(IconButton, { size: "small", tabIndex: 1, onClick: handleLinkSubmission },
-                            React.createElement(Icon, null, "check"))))
-                } }))));
+                    endAdornment: (_jsxs(InputAdornment, Object.assign({ position: "end" }, { children: [_jsx(IconButton, Object.assign({ size: "small", tabIndex: 0, onClick: () => {
+                                    setIsLink(false);
+                                } }, { children: _jsx(Icon, { children: "close" }) })), _jsx(IconButton, Object.assign({ size: "small", tabIndex: 1, onClick: handleLinkSubmission }, { children: _jsx(Icon, { children: "check" }) }))] })))
+                } }) }) })));
 }
 function useFloatingLinkEditorToolbar(editor) {
     const [activeEditor, setActiveEditor] = useState(editor);
@@ -136,7 +130,7 @@ function useFloatingLinkEditorToolbar(editor) {
             return false;
         }, COMMAND_PRIORITY_CRITICAL));
     }, [editor, updateToolbar]);
-    return React.createElement(FloatingLinkPlugin, { editor: activeEditor, isLink: isLink, setIsLink: setIsLink });
+    return _jsx(FloatingLinkPlugin, { editor: activeEditor, isLink: isLink, setIsLink: setIsLink });
 }
 export default () => {
     const [editor] = useLexicalComposerContext();

package/lib/esm/components/Editor/plugins/HashtagPlugin.js

@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useIsomorphicLayoutEffect } from '@selfcommunity/react-core';
 import { $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
@@ -59,7 +60,7 @@ function useHashtagLookupService(hashtagString) {
 }
 function HashtagsTypeaheadItem({ index, isHovered, isSelected, onClick, onMouseEnter, onMouseLeave, result }) {
     const liRef = useRef(null);
-    return (React.createElement("li", { key: result.id, tabIndex: -1, className: classNames('item', { ['selected']: isSelected, ['hovered']: isHovered }), ref: liRef, role: "option", "aria-selected": isSelected, id: 'typeahead-item-' + index, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick }, result.name));
+    return (_jsx("li", Object.assign({ tabIndex: -1, className: classNames('item', { ['selected']: isSelected, ['hovered']: isHovered }), ref: liRef, role: "option", "aria-selected": isSelected, id: 'typeahead-item-' + index, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick }, { children: result.name }), result.id));
 }
 function HashtagsTypeahead({ close, editor, resolution, className = '', containerEl = null }) {
     const divRef = useRef(null);
@@ -175,14 +176,13 @@ function HashtagsTypeahead({ close, editor, resolution, className = '', containe
     if (results === null) {
         return null;
     }
-    return (React.createElement("div", { className: className, "aria-label": "Suggested hashtags", ref: divRef, role: "listbox" },
-        React.createElement("ul", null, results.slice(0, SUGGESTION_LIST_LENGTH_LIMIT).map((result, i) => (React.createElement(HashtagsTypeaheadItem, { index: i, isHovered: i === hoveredIndex, isSelected: i === selectedIndex, onClick: () => {
-                applyCurrentSelected(i);
-            }, onMouseEnter: () => {
-                setHoveredIndex(i);
-            }, onMouseLeave: () => {
-                setHoveredIndex(null);
-            }, key: result.id, result: result }))))));
+    return (_jsx("div", Object.assign({ className: className, "aria-label": "Suggested hashtags", ref: divRef, role: "listbox" }, { children: _jsx("ul", { children: results.slice(0, SUGGESTION_LIST_LENGTH_LIMIT).map((result, i) => (_jsx(HashtagsTypeaheadItem, { index: i, isHovered: i === hoveredIndex, isSelected: i === selectedIndex, onClick: () => {
+                    applyCurrentSelected(i);
+                }, onMouseEnter: () => {
+                    setHoveredIndex(i);
+                }, onMouseLeave: () => {
+                    setHoveredIndex(null);
+                }, result: result }, result.id))) }) })));
 }
 function checkForCapitalizedNameHashtags(text, minMatchLength) {
     const match = CapitalizedNameHashtagsRegex.exec(text);
@@ -404,7 +404,7 @@ function useHashtags(editor, containerSelector = null) {
     const portalContainer = containerSelector
         ? editor.getRootElement().parentElement.closest(containerSelector)
         : editor.getRootElement().parentElement;
-    return createPortal(React.createElement(Root, { close: closeTypeahead, resolution: resolution, editor: editor, className: classes.root, containerEl: portalContainer }), portalContainer);
+    return createPortal(_jsx(Root, { close: closeTypeahead, resolution: resolution, editor: editor, className: classes.root, containerEl: portalContainer }), portalContainer);
 }
 export default function HashtagsPlugin({ containerSelector = 'body' }) {
     const [editor] = useLexicalComposerContext();

package/lib/esm/components/Editor/plugins/ImagePlugin.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { forwardRef, useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from 'react';
 import { COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
 import { $insertNodeToNearestRoot } from '@lexical/utils';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
@@ -16,7 +17,7 @@ import { PREFIX } from '../constants';
 export const INSERT_IMAGE_COMMAND = createCommand();
 const UploadButton = asUploadButton(forwardRef((_a, ref) => {
     var { progress = null } = _a, rest = __rest(_a, ["progress"]);
-    return (React.createElement(IconButton, Object.assign({}, rest, { "aria-label": "upload image", ref: ref }), progress ? React.createElement(CircularProgress, { variant: "determinate", value: progress, size: "1rem" }) : React.createElement(Icon, { color: "inherit" }, "image")));
+    return (_jsx(IconButton, Object.assign({}, rest, { "aria-label": "upload image", ref: ref }, { children: progress ? _jsx(CircularProgress, { variant: "determinate", value: progress, size: "1rem" }) : _jsx(Icon, Object.assign({ color: "inherit" }, { children: "image" })) })));
 }));
 function Image({ editor, className = '' }) {
     // CONTEXT
@@ -52,19 +53,17 @@ function Image({ editor, className = '' }) {
     if (!scUserContext.user) {
         return null;
     }
-    return (React.createElement(ChunkedUploady, { destination: {
+    return (_jsxs(ChunkedUploady, Object.assign({ destination: {
             url: `${scContext.settings.portal}${Endpoints.ComposerChunkUploadMedia.url()}`,
             headers: Object.assign({}, (scContext.settings.session &&
                 scContext.settings.session.authToken && {
                 Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}`
             })),
             method: Endpoints.ComposerChunkUploadMedia.method
-        }, chunkSize: 204800, multiple: true, accept: "image/*", fileFilter: handleFileUploadFilter },
-        React.createElement(MediaChunkUploader, { type: "eimage", onSuccess: handleUploadSuccess, onProgress: handleUploadProgress, onError: handleUploadError }),
-        React.createElement(UploadButton, { className: className, extraProps: {
-                disabled: Object.keys(uploading).length !== 0,
-                progress: Object.keys(uploading).length !== 0 ? Object.values(uploading)[0].completed : null
-            } })));
+        }, chunkSize: 204800, multiple: true, accept: "image/*", fileFilter: handleFileUploadFilter }, { children: [_jsx(MediaChunkUploader, { type: "eimage", onSuccess: handleUploadSuccess, onProgress: handleUploadProgress, onError: handleUploadError }), _jsx(UploadButton, { className: className, extraProps: {
+                    disabled: Object.keys(uploading).length !== 0,
+                    progress: Object.keys(uploading).length !== 0 ? Object.values(uploading)[0].completed : null
+                } })] })));
 }
 const classes = {
     root: `${PREFIX}-image-plugin-root`
@@ -99,5 +98,5 @@ export default function ImagePlugin() {
     if (!editor.hasNodes([ImageNode])) {
         return null;
     }
-    return React.createElement(Root, { editor: editor, className: classes.root });
+    return _jsx(Root, { editor: editor, className: classes.root });
 }

package/lib/esm/components/Editor/plugins/LexicalRichTextPlugin.js

@@ -1,11 +1,4 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import * as React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import useLexicalEditable from '@lexical/react/useLexicalEditable';
 import { useDecorators } from '../shared/useDecorators';
@@ -16,10 +9,7 @@ export function RichTextPlugin({ contentEditable, placeholder, ErrorBoundary })
     const [editor] = useLexicalComposerContext();
     const decorators = useDecorators(editor, ErrorBoundary);
     useRichTextSetup(editor);
-    return (React.createElement(React.Fragment, null,
-        contentEditable,
-        React.createElement(Placeholder, { content: placeholder }),
-        decorators));
+    return (_jsxs(_Fragment, { children: [contentEditable, _jsx(Placeholder, { content: placeholder }), decorators] }));
 }
 function Placeholder({ content }) {
     const [editor] = useLexicalComposerContext();

package/lib/esm/components/Editor/plugins/MentionsPlugin.js

@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useIsomorphicLayoutEffect } from '@selfcommunity/react-core';
 import { $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
@@ -200,10 +201,7 @@ function useMentionLookupService(mentionString) {
 }
 function MentionsTypeaheadItem({ index, isHovered, isSelected, onClick, onMouseEnter, onMouseLeave, result }) {
     const liRef = useRef(null);
-    return (React.createElement("li", { key: result.id, tabIndex: -1, className: classNames('item', { ['selected']: isSelected, ['hovered']: isHovered }), ref: liRef, role: "option", "aria-selected": isSelected, id: 'typeahead-item-' + index, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick },
-        React.createElement(Avatar, { alt: result.username, src: result.avatar }),
-        " ",
-        result.username));
+    return (_jsxs("li", Object.assign({ tabIndex: -1, className: classNames('item', { ['selected']: isSelected, ['hovered']: isHovered }), ref: liRef, role: "option", "aria-selected": isSelected, id: 'typeahead-item-' + index, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick }, { children: [_jsx(Avatar, { alt: result.username, src: result.avatar }), " ", result.username] }), result.id));
 }
 function MentionsTypeahead({ close, editor, resolution, className = '' }) {
     const divRef = useRef(null);
@@ -297,14 +295,13 @@ function MentionsTypeahead({ close, editor, resolution, className = '' }) {
     if (results === null) {
         return null;
     }
-    return (React.createElement("div", { className: className, "aria-label": "Suggested mentions", ref: divRef, role: "listbox" },
-        React.createElement("ul", null, results.slice(0, SUGGESTION_LIST_LENGTH_LIMIT).map((result, i) => (React.createElement(MentionsTypeaheadItem, { index: i, isHovered: i === hoveredIndex, isSelected: i === selectedIndex, onClick: () => {
-                applyCurrentSelected(i);
-            }, onMouseEnter: () => {
-                setHoveredIndex(i);
-            }, onMouseLeave: () => {
-                setHoveredIndex(null);
-            }, key: result.id, result: result }))))));
+    return (_jsx("div", Object.assign({ className: className, "aria-label": "Suggested mentions", ref: divRef, role: "listbox" }, { children: _jsx("ul", { children: results.slice(0, SUGGESTION_LIST_LENGTH_LIMIT).map((result, i) => (_jsx(MentionsTypeaheadItem, { index: i, isHovered: i === hoveredIndex, isSelected: i === selectedIndex, onClick: () => {
+                    applyCurrentSelected(i);
+                }, onMouseEnter: () => {
+                    setHoveredIndex(i);
+                }, onMouseLeave: () => {
+                    setHoveredIndex(null);
+                }, result: result }, result.id))) }) })));
 }
 function checkForCapitalizedNameMentions(text, minMatchLength) {
     const match = CapitalizedNameMentionsRegex.exec(text);
@@ -529,9 +526,7 @@ function useMentions(editor, anchorClassName = null) {
     if (!anchorElementRef) {
         return null;
     }
-    return (React.createElement(ClickAwayListener, { onClickAway: closeTypeahead },
-        React.createElement(Portal, { container: anchorElementRef },
-            React.createElement(Root, { close: closeTypeahead, resolution: resolution, editor: editor, className: classes.root }))));
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: closeTypeahead }, { children: _jsx(Portal, Object.assign({ container: anchorElementRef }, { children: _jsx(Root, { close: closeTypeahead, resolution: resolution, editor: editor, className: classes.root }) })) })));
 }
 export default function MentionsPlugin() {
     const [editor] = useLexicalComposerContext();

package/lib/esm/components/Editor/plugins/OnChangePlugin.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { OnChangePlugin as LexicalOnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { $generateHtmlFromNodes } from '@lexical/html';
 const OnChangePlugin = (props) => {
@@ -10,6 +10,6 @@ const OnChangePlugin = (props) => {
             onChange(htmlString);
         });
     };
-    return React.createElement(LexicalOnChangePlugin, { onChange: handleChange });
+    return _jsx(LexicalOnChangePlugin, { onChange: handleChange });
 };
 export default OnChangePlugin;

package/lib/esm/components/Editor/plugins/ToolbarPlugin.js

@@ -1,10 +1,4 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { $createParagraphNode, $getSelection, $isRangeSelection, $isRootOrShadowRoot, $isTextNode, COMMAND_PRIORITY_CRITICAL, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, SELECTION_CHANGE_COMMAND } from 'lexical';
 import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
 import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode, REMOVE_LIST_COMMAND } from '@lexical/list';
@@ -115,14 +109,7 @@ function BlockFormatIconButton({ className = '', editor, blockType, disabled = f
     const handleClose = () => {
         setAnchorEl(null);
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(IconButton, { className: className, disabled: disabled, onClick: handleOpen },
-            React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.editor.toolbarPlugin.blockType", defaultMessage: "ui.editor.toolbarPlugin.blockType" }) },
-                React.createElement(React.Fragment, null,
-                    React.createElement(Icon, null, blockTypeToBlockIcon[blockType]),
-                    React.createElement(Icon, null, anchorEl ? 'expand_less' : 'expand_more')))),
-        React.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose }, Object.keys(blockTypeToBlockIcon).map((block) => (React.createElement(MenuItem, { key: block, onClick: handleSelect(block) },
-            React.createElement(Icon, null, blockTypeToBlockIcon[block])))))));
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: className, disabled: disabled, onClick: handleOpen }, { children: _jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.editor.toolbarPlugin.blockType", defaultMessage: "ui.editor.toolbarPlugin.blockType" }) }, { children: _jsxs(_Fragment, { children: [_jsx(Icon, { children: blockTypeToBlockIcon[blockType] }), _jsx(Icon, { children: anchorEl ? 'expand_less' : 'expand_more' })] }) })) })), _jsx(Menu, Object.assign({ anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose }, { children: Object.keys(blockTypeToBlockIcon).map((block) => (_jsx(MenuItem, Object.assign({ onClick: handleSelect(block) }, { children: _jsx(Icon, { children: blockTypeToBlockIcon[block] }) }), block))) }))] }));
 }
 const classes = {
     root: `${PREFIX}-toolbar-plugin-root`,
@@ -275,29 +262,11 @@ export default function ToolbarPlugin(inProps) {
             editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
         }
     }, [editor, isLink]);
-    return (React.createElement(Root, { className: classes.root },
-        blockType in blockTypeToBlockIcon && activeEditor === editor && (React.createElement(BlockFormatIconButton, { className: classes.blockFormat, disabled: !isEditable, blockType: blockType, editor: editor })),
-        React.createElement(IconButton, { disabled: !isEditable, onClick: () => {
-                activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, ALIGNMENTS[(ALIGNMENTS.findIndex((a) => alignment === a) + 1) % ALIGNMENTS.length]);
-            } },
-            React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: `ui.editor.toolbarPlugin.${alignment}`, defaultMessage: `ui.editor.toolbarPlugin.${alignment}` }) },
-                React.createElement(Icon, null, `format_align_${alignment}`))),
-        React.createElement(ToggleButtonGroup, { value: formats }, FORMATS.map((format) => (React.createElement(ToggleButton, { key: format, value: format, disabled: !isEditable, onClick: () => {
-                activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
-            } },
-            React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: `ui.editor.toolbarPlugin.${format}`, defaultMessage: `ui.editor.toolbarPlugin.${format}` }) },
-                React.createElement(Icon, null, `format_${format}`)))))),
-        React.createElement(IconButton, { disabled: !isEditable, onClick: clearFormatting },
-            React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.editor.toolbarPlugin.clear", defaultMessage: "ui.editor.toolbarPlugin.clear" }) },
-                React.createElement(Icon, null, "format_clear"))),
-        React.createElement(IconButton, { disabled: !isEditable, onClick: () => {
-                activeEditor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined);
-            } },
-            React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.editor.toolbarPlugin.horizontalRule", defaultMessage: "ui.editor.toolbarPlugin.horizontalRule" }) },
-                React.createElement(Icon, null, "format_horizontal_rule"))),
-        uploadImage && React.createElement(ImagePlugin, null),
-        React.createElement(IconButton, { disabled: !isEditable, onClick: insertLink },
-            React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.editor.toolbarPlugin.link", defaultMessage: "ui.editor.toolbarPlugin.link" }) },
-                React.createElement(Icon, null, "format_link"))),
-        React.createElement(EmojiPlugin, null)));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [blockType in blockTypeToBlockIcon && activeEditor === editor && (_jsx(BlockFormatIconButton, { className: classes.blockFormat, disabled: !isEditable, blockType: blockType, editor: editor })), _jsx(IconButton, Object.assign({ disabled: !isEditable, onClick: () => {
+                    activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, ALIGNMENTS[(ALIGNMENTS.findIndex((a) => alignment === a) + 1) % ALIGNMENTS.length]);
+                } }, { children: _jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: `ui.editor.toolbarPlugin.${alignment}`, defaultMessage: `ui.editor.toolbarPlugin.${alignment}` }) }, { children: _jsx(Icon, { children: `format_align_${alignment}` }) })) })), _jsx(ToggleButtonGroup, Object.assign({ value: formats }, { children: FORMATS.map((format) => (_jsx(ToggleButton, Object.assign({ value: format, disabled: !isEditable, onClick: () => {
+                        activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
+                    } }, { children: _jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: `ui.editor.toolbarPlugin.${format}`, defaultMessage: `ui.editor.toolbarPlugin.${format}` }) }, { children: _jsx(Icon, { children: `format_${format}` }) })) }), format))) })), _jsx(IconButton, Object.assign({ disabled: !isEditable, onClick: clearFormatting }, { children: _jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.editor.toolbarPlugin.clear", defaultMessage: "ui.editor.toolbarPlugin.clear" }) }, { children: _jsx(Icon, { children: "format_clear" }) })) })), _jsx(IconButton, Object.assign({ disabled: !isEditable, onClick: () => {
+                    activeEditor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined);
+                } }, { children: _jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.editor.toolbarPlugin.horizontalRule", defaultMessage: "ui.editor.toolbarPlugin.horizontalRule" }) }, { children: _jsx(Icon, { children: "format_horizontal_rule" }) })) })), uploadImage && _jsx(ImagePlugin, {}), _jsx(IconButton, Object.assign({ disabled: !isEditable, onClick: insertLink }, { children: _jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.editor.toolbarPlugin.link", defaultMessage: "ui.editor.toolbarPlugin.link" }) }, { children: _jsx(Icon, { children: "format_link" }) })) })), _jsx(EmojiPlugin, {})] })));
 }

package/lib/esm/components/Editor/shared/useDecorators.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Suspense, useEffect, useMemo, useState } from 'react';
-import * as React from 'react';
 import { createPortal, flushSync } from 'react-dom';
 import { useIsomorphicLayoutEffect } from '@selfcommunity/react-core';
 export function useDecorators(editor, ErrorBoundary) {
@@ -24,8 +24,7 @@ export function useDecorators(editor, ErrorBoundary) {
         const decoratorKeys = Object.keys(decorators);
         for (let i = 0; i < decoratorKeys.length; i++) {
             const nodeKey = decoratorKeys[i];
-            const reactDecorator = (React.createElement(ErrorBoundary, { onError: (e) => editor._onError(e) },
-                React.createElement(Suspense, { fallback: null }, decorators[nodeKey])));
+            const reactDecorator = (_jsx(ErrorBoundary, Object.assign({ onError: (e) => editor._onError(e) }, { children: _jsx(Suspense, Object.assign({ fallback: null }, { children: decorators[nodeKey] })) })));
             const element = editor.getElementByKey(nodeKey);
             if (element !== null) {
                 decoratedPortals.push(createPortal(reactDecorator, element, nodeKey));

package/lib/esm/components/Event/Event.d.ts

@@ -1,5 +1,9 @@
 import { SCEventType } from '@selfcommunity/types';
+import React from 'react';
+import { SCEventTemplateType } from '../../types/event';
+import { EventParticipantsButtonProps } from '../EventParticipantsButton';
 import { WidgetProps } from '../Widget';
+import { EventSkeletonProps } from './Skeleton';
 export interface EventProps extends WidgetProps {
     /**
      * Event Object
@@ -11,6 +15,36 @@ export interface EventProps extends WidgetProps {
      * @default null
      */
     eventId?: number;
+    /**
+     * Event template type
+     * @default 'preview'
+     */
+    template?: SCEventTemplateType;
+    /**
+     * Actions
+     * @default null
+     */
+    actions?: React.ReactNode;
+    /**
+     * Hide participants
+     * @default false
+     */
+    hideEventParticipants?: boolean;
+    /**
+     * Props to spread to EventParticipantsButton component
+     * @default {}
+     */
+    EventParticipantsButtonComponentProps?: EventParticipantsButtonProps;
+    /**
+     * Hide event planner
+     * @default false
+     */
+    hideEventPlanner?: boolean;
+    /**
+     * Props to spread to EventSkeleton component
+     * @default {}
+     */
+    EventSkeletonComponentProps?: EventSkeletonProps;
     /**
      * Any other properties
      */

package/lib/esm/components/Event/Event.js

@@ -1,27 +1,66 @@
 import { __rest } from "tslib";
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Avatar, Box, Button, CardActions, CardContent, CardMedia, Divider, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import { Avatar, Button, Typography } from '@mui/material';
-import { SCEventLocationType } from '@selfcommunity/types';
+import { useThemeProps } from '@mui/system';
 import { Link, SCRoutes, useSCFetchEvent, useSCRouting } from '@selfcommunity/react-core';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { SCEventLocationType } from '@selfcommunity/types';
 import classNames from 'classnames';
-import { useThemeProps } from '@mui/system';
+import { FormattedMessage, useIntl } from 'react-intl';
 import BaseItem from '../../shared/BaseItem';
+import Calendar from '../../shared/Calendar';
+import EventInfoDetails from '../../shared/EventInfoDetails';
+import { SCEventTemplateType } from '../../types/event';
+import EventParticipantsButton from '../EventParticipantsButton';
+import User from '../User';
+import Widget from '../Widget';
 import { PREFIX } from './constants';
 import EventSkeleton from './Skeleton';
 const classes = {
     root: `${PREFIX}-root`,
-    avatar: `${PREFIX}-avatar`,
-    primary: `${PREFIX}-primary`,
-    secondary: `${PREFIX}-secondary`,
-    actions: `${PREFIX}-actions`
+    detailRoot: `${PREFIX}-detail-root`,
+    previewRoot: `${PREFIX}-preview-root`,
+    snippetRoot: `${PREFIX}-snippet-root`,
+    detailImageWrapper: `${PREFIX}-detail-image-wrapper`,
+    detailImage: `${PREFIX}-detail-image`,
+    detailNameWrapper: `${PREFIX}-detail-name-wrapper`,
+    detailName: `${PREFIX}-detail-name`,
+    detailContent: `${PREFIX}-detail-content`,
+    detailUser: `${PREFIX}-detail-user`,
+    detailFirstDivider: `${PREFIX}-detail-first-divider`,
+    detailSecondDivider: `${PREFIX}-detail-second-divider`,
+    detailActions: `${PREFIX}-detail-actions`,
+    previewImageWrapper: `${PREFIX}-preview-image-wrapper`,
+    previewImage: `${PREFIX}-preview-image`,
+    previewNameWrapper: `${PREFIX}-preview-name-wrapper`,
+    previewName: `${PREFIX}-preview-name`,
+    previewContent: `${PREFIX}-preview-content`,
+    previewActions: `${PREFIX}-preview-actions`,
+    snippetAvatar: `${PREFIX}-snippet-avatar`,
+    snippetPrimary: `${PREFIX}-snippet-primary`,
+    snippetSecondary: `${PREFIX}-snippet-secondary`,
+    snippetActions: `${PREFIX}-snippet-actions`
 };
-const Root = styled(BaseItem, {
+const Root = styled(Widget, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
 })(() => ({}));
+const DetailRoot = styled(Box, {
+    name: PREFIX,
+    slot: 'DetailRoot',
+    overridesResolver: (props, styles) => styles.detailRoot
+})(() => ({}));
+const PreviewRoot = styled(Box, {
+    name: PREFIX,
+    slot: 'PreviewRoot',
+    overridesResolver: (props, styles) => styles.previewRoot
+})(() => ({}));
+const SnippetRoot = styled(BaseItem, {
+    name: PREFIX,
+    slot: 'SnippetRoot',
+    overridesResolver: (props, styles) => styles.snippetRoot
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Event component. Learn about the available props and the CSS API.
  *
@@ -60,7 +99,7 @@ export default function Event(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { eventId = null, event = null, className = null, elevation = 0 } = props, rest = __rest(props, ["eventId", "event", "className", "elevation"]);
+    const { id = `event_object_${props.eventId ? props.eventId : props.event ? props.event.id : ''}`, eventId = null, event = null, className = null, template = SCEventTemplateType.SNIPPET, hideEventParticipants = false, hideEventPlanner = false, actions, EventParticipantsButtonComponentProps = {}, EventSkeletonComponentProps = {} } = props, rest = __rest(props, ["id", "eventId", "event", "className", "template", "hideEventParticipants", "hideEventPlanner", "actions", "EventParticipantsButtonComponentProps", "EventSkeletonComponentProps"]);
     // STATE
     const { scEvent } = useSCFetchEvent({ id: eventId, event });
     // CONTEXT
@@ -71,17 +110,27 @@ export default function Event(inProps) {
      * Renders event object
      */
     if (!scEvent) {
-        return React.createElement(EventSkeleton, { elevation: elevation });
+        return _jsx(EventSkeleton, Object.assign({ template: template }, EventSkeletonComponentProps, rest, { actions: actions }));
+    }
+    /**
+     * Renders event object
+     */
+    let contentObj;
+    if (template === SCEventTemplateType.DETAIL) {
+        contentObj = (_jsxs(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [_jsxs(Box, Object.assign({ className: classes.detailImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.detailImage }), _jsx(Calendar, { day: new Date(scEvent.start_date).getDate() })] })), _jsxs(CardContent, Object.assign({ className: classes.detailContent }, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.detailNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) })), _jsx(EventInfoDetails, { event: scEvent }), !hideEventPlanner && (_jsx(User, { user: scEvent.managed_by, elevation: 0, secondary: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: _jsx(_Fragment, {}), className: classes.detailUser })), !hideEventParticipants && (_jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.detailFirstDivider }), _jsx(EventParticipantsButton, Object.assign({ event: scEvent, eventId: scEvent.id }, EventParticipantsButtonComponentProps))] })), _jsx(Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.detailActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
+    }
+    else if (template === SCEventTemplateType.PREVIEW) {
+        contentObj = (_jsxs(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [_jsx(Box, Object.assign({ position: "relative", className: classes.previewImageWrapper }, { children: _jsx(CardMedia, { component: "img", height: "100px", image: scEvent.image_medium, alt: scEvent.name, className: classes.previewImage }) })), _jsxs(CardContent, Object.assign({ className: classes.previewContent }, { children: [_jsx(EventInfoDetails, { event: scEvent, hidePrivacyIcon: true, hasLocationInfo: false, beforePrivacyInfo: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.previewNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h5", className: classes.previewName }, { children: scEvent.name })) })) }), !hideEventParticipants && _jsx(EventParticipantsButton, Object.assign({ event: scEvent, hideCaption: true }, EventParticipantsButtonComponentProps))] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.previewActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
+    }
+    else {
+        contentObj = (_jsx(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: _jsx(Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_medium, className: classes.snippetAvatar }), primary: _jsxs(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.snippetPrimary }, { children: [_jsx(Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scEvent.start_date, {
+                            weekday: 'long',
+                            month: 'long',
+                            day: 'numeric'
+                        })}` })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: scEvent.name }))] })), secondary: _jsxs(Typography, Object.assign({ component: "p", variant: "body2", className: classes.snippetSecondary }, { children: [_jsx(FormattedMessage, { id: `ui.eventForm.privacy.${scEvent.privacy}`, defaultMessage: `ui.eventForm.privacy.${scEvent.privacy}` }), " -", ' ', (scEvent === null || scEvent === void 0 ? void 0 : scEvent.location) === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: `ui.eventForm.address.live.label`, defaultMessage: `ui.eventForm.address.live.label` })) : (_jsx(FormattedMessage, { id: `ui.eventForm.address.online.label`, defaultMessage: `ui.eventForm.address.online.label` }))] })), actions: actions !== null && actions !== void 0 ? actions : (_jsx(Box, Object.assign({ className: classes.snippetActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) }))) }));
     }
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ elevation: elevation, disableTypography: true }, rest, { className: classNames(classes.root, className), image: React.createElement(Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_medium, className: classes.avatar }), primary: React.createElement(Typography, { component: "div", className: classes.primary },
-            React.createElement(Typography, { component: "span" }, `${intl.formatDate(scEvent.start_date, { weekday: 'long', month: 'long', day: 'numeric' })}`),
-            React.createElement(Typography, { variant: "body1" }, scEvent.name)), secondary: React.createElement(Typography, { component: "p", variant: "body2", className: classes.secondary },
-            React.createElement(FormattedMessage, { id: `ui.eventForm.privacy.${scEvent.privacy}`, defaultMessage: `ui.eventForm.privacy.${scEvent.privacy}` }),
-            " -",
-            ' ',
-            (scEvent === null || scEvent === void 0 ? void 0 : scEvent.location) === SCEventLocationType.PERSON ? (React.createElement(FormattedMessage, { id: `ui.eventForm.address.live.label`, defaultMessage: `ui.eventForm.address.live.label` })) : (React.createElement(FormattedMessage, { id: `ui.eventForm.address.online.label`, defaultMessage: `ui.eventForm.address.online.label` }))), actions: React.createElement(Button, { size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) },
-            React.createElement(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" })) })));
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`) }, rest, { children: contentObj })));
 }