@selfcommunity/react-ui 0.8.0-embeds.17 → 0.8.0-live.40

package/lib/esm/components/CreateLiveStreamDialog/LiveStreamSelector/LiveStreamSelector.js

@@ -0,0 +1,163 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { Box, Typography, Button, Paper, Container, Radio } from '@mui/material';
+import Icon from '@mui/material/Icon';
+import { PREFIX } from '../constants';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { LiveStreamType } from '../types';
+import { useSnackbar } from 'notistack';
+import { FormattedMessage } from 'react-intl';
+const classes = {
+    root: `${PREFIX}-root`,
+    options: `${PREFIX}-options`,
+    actions: `${PREFIX}-actions`
+};
+const Root = styled(Container, {
+    name: PREFIX,
+    slot: 'Root'
+})(({ theme }) => ({
+    [`& .${classes.options}`]: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    [`& .${classes.actions}`]: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'flex-end',
+        marginTop: theme.spacing(4)
+    }
+}));
+// Styled components
+const OptionCard = styled(Paper, {
+    shouldForwardProp: (prop) => prop !== 'selected'
+})(({ theme, selected }) => ({
+    maxWidth: '300px',
+    padding: theme.spacing(3),
+    margin: theme.spacing(0, 3),
+    cursor: 'pointer',
+    transition: theme.transitions.create(['background-color', 'box-shadow'], {
+        duration: theme.transitions.duration.short
+    }),
+    backgroundColor: selected ? theme.palette.grey[100] : theme.palette.background.paper,
+    '&:hover': {
+        backgroundColor: theme.palette.grey[50],
+        boxShadow: theme.shadows[2]
+    },
+    border: `1px solid ${theme.palette.divider}`,
+    [`& > div`]: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 2,
+        maxWidth: '300px'
+    },
+    [`& ul`]: {
+        marginTop: theme.spacing(2),
+        padding: 0,
+        listStyle: 'none'
+    }
+}));
+const RadioIndicator = styled(Radio, {
+    shouldForwardProp: (prop) => prop !== 'selected'
+})(({ theme, selected }) => ({
+    width: 16,
+    height: 16,
+    borderRadius: '50%',
+    border: `2px solid ${selected ? theme.palette.secondary.main : theme.palette.grey[300]}`,
+    backgroundColor: selected ? theme.palette.secondary.main : 'transparent',
+    transition: theme.transitions.create(['border-color', 'background-color'], {
+        duration: theme.transitions.duration.shortest
+    })
+}));
+const FeatureItem = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: theme.spacing(1.5),
+    marginBottom: theme.spacing(2),
+    '&:last-child': {
+        marginBottom: 0
+    }
+}));
+/**
+ *> API documentation for the Community-JS LiveStreamSelector component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {LiveStreamSelector} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCLiveStreamSelector` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateLivestreamDialog-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function LiveStreamSelector(inProps) {
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, liveSelected, onLiveSelected, onNext } = props, rest = __rest(props, ["className", "liveSelected", "onLiveSelected", "onNext"]);
+    // CONTEXT
+    const { enqueueSnackbar } = useSnackbar();
+    // STATE
+    const [selectedOption, setSelectedOption] = useState(liveSelected);
+    const options = [
+        {
+            title: 'Schedule a live event',
+            type: LiveStreamType.EVENT_LIVE,
+            features: [
+                'Schedule a live room or stream in your event space',
+                'Allow your members to RSVP, add to calendar, and receive event reminders',
+                'Automatically post the event recording to your space',
+                'Allow your members to host the event'
+            ],
+            icons: [_jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" })]
+        },
+        {
+            title: 'Start a live stream',
+            type: LiveStreamType.DIRECT_LIVE,
+            features: [
+                'Best for webinars, Q&As, AMAs, and for presentations',
+                'Up to 100 people',
+                'Only co-hosts can talk to each other with audio/video',
+                'View-only participants can only chat or be promoted to the stage'
+            ],
+            icons: [_jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" })]
+        }
+    ];
+    const handleOptionSelect = (type) => {
+        setSelectedOption(type);
+        onLiveSelected(type);
+    };
+    const handleNext = () => {
+        if (!selectedOption) {
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error", defaultMessage: "ui.common.error" }), {
+                variant: 'error',
+                autoHideDuration: 3000
+            });
+        }
+        else {
+            onNext && onNext(selectedOption);
+        }
+    };
+    return (_jsxs(Root, { className: classNames(classes.root, className), maxWidth: "lg", sx: { py: 4 }, children: [_jsx(Typography, { variant: "h4", component: "h1", align: "center", gutterBottom: true, sx: { mb: 4, fontWeight: 500 }, children: "How do you want to go live?" }), _jsx(Box, { className: classes.options, children: options.map((option, index) => (_jsxs(OptionCard, { selected: selectedOption === option.type, onClick: () => handleOptionSelect(option.type), elevation: 0, role: "button", tabIndex: 0, onKeyDown: (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            handleOptionSelect(index);
+                            e.preventDefault();
+                        }
+                    }, theme: undefined, children: [_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", component: "h2", sx: { fontWeight: 500 }, children: option.title }), _jsx(RadioIndicator, { selected: selectedOption === option.type, theme: undefined })] }), _jsx(Box, { component: "ul", children: option.features.map((feature, featureIndex) => {
+                                const _Icon = option.icons[featureIndex];
+                                return (_jsxs(FeatureItem, { component: "li", children: [_Icon, _jsx(Typography, { variant: "body2", color: "text.secondary", sx: { flex: 1 }, children: feature })] }, featureIndex));
+                            }) })] }, index))) }), _jsx(Box, { className: classes.actions, children: _jsx(Button, { disabled: !selectedOption, variant: "contained", onClick: handleNext, color: "secondary", children: "Next" }) })] }));
+}

package/lib/esm/components/CreateLiveStreamDialog/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCCreateLiveStreamDialog";

package/lib/esm/components/CreateLiveStreamDialog/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCCreateLiveStreamDialog';

package/lib/esm/components/CreateLiveStreamDialog/index.d.ts

@@ -0,0 +1,3 @@
+import CreateLiveStreamDialog, { CreateLiveStreamDialogProps } from './CreateLiveStreamDialog';
+export default CreateLiveStreamDialog;
+export { CreateLiveStreamDialogProps };

package/lib/esm/components/CreateLiveStreamDialog/index.js

@@ -0,0 +1,2 @@
+import CreateLiveStreamDialog from './CreateLiveStreamDialog';
+export default CreateLiveStreamDialog;

package/lib/esm/components/CreateLiveStreamDialog/types.d.ts

@@ -0,0 +1,8 @@
+export declare enum CreateLiveStreamStep {
+    SELECT_TYPE = "_select_type",
+    CREATE_LIVE = "_create_live"
+}
+export declare enum LiveStreamType {
+    EVENT_LIVE = "_event_live",
+    DIRECT_LIVE = "_direct_live"
+}

package/lib/esm/components/CreateLiveStreamDialog/types.js

@@ -0,0 +1,10 @@
+export var CreateLiveStreamStep;
+(function (CreateLiveStreamStep) {
+    CreateLiveStreamStep["SELECT_TYPE"] = "_select_type";
+    CreateLiveStreamStep["CREATE_LIVE"] = "_create_live";
+})(CreateLiveStreamStep || (CreateLiveStreamStep = {}));
+export var LiveStreamType;
+(function (LiveStreamType) {
+    LiveStreamType["EVENT_LIVE"] = "_event_live";
+    LiveStreamType["DIRECT_LIVE"] = "_direct_live";
+})(LiveStreamType || (LiveStreamType = {}));

package/lib/esm/components/CustomAdv/CustomAdv.js

@@ -130,6 +130,6 @@ export default function CustomAdv(inProps) {
     if (!scCustomAdv) {
         return _jsx(HiddenPlaceholder, {});
     }
-    const adv = (_jsxs(Box, Object.assign({ className: classes.wrap }, { children: [scCustomAdv.image && (_jsx("img", { src: scCustomAdv.image, alt: scCustomAdv.title, className: classNames(classes.image, { [classes.prefixedHeight]: Boolean(prefixedHeight) }) })), scCustomAdv.embed_code && (_jsx(Box, { ref: embedRef, className: classNames(classes.embedCode, { [classes.prefixedHeight]: Boolean(prefixedHeight) }), dangerouslySetInnerHTML: { __html: scCustomAdv.embed_code } }))] })));
-    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className), ref: ref, style: Object.assign({}, (prefixedHeight ? { paddingBottom: prefixedHeight } : { width: '100%' })) }, { children: scCustomAdv.link ? (_jsx("a", Object.assign({ href: scCustomAdv.link, title: scCustomAdv.title }, { children: adv }))) : (adv) })));
+    const adv = (_jsxs(Box, { className: classes.wrap, children: [scCustomAdv.image && (_jsx("img", { src: scCustomAdv.image, alt: scCustomAdv.title, className: classNames(classes.image, { [classes.prefixedHeight]: Boolean(prefixedHeight) }) })), scCustomAdv.embed_code && (_jsx(Box, { ref: embedRef, className: classNames(classes.embedCode, { [classes.prefixedHeight]: Boolean(prefixedHeight) }), dangerouslySetInnerHTML: { __html: scCustomAdv.embed_code } }))] }));
+    return (_jsx(Root, { id: id, className: classNames(classes.root, className), ref: ref, style: Object.assign({}, (prefixedHeight ? { paddingBottom: prefixedHeight } : { width: '100%' })), children: scCustomAdv.link ? (_jsx("a", { href: scCustomAdv.link, title: scCustomAdv.title, children: adv })) : (adv) }));
 }

package/lib/esm/components/EditEventButton/EditEventButton.js

@@ -53,5 +53,5 @@ export default function EditEventButton(inProps) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ variant: "outlined", className: classNames(classes.root, className), EventFormProps: { event: scEvent, onSuccess: handleSuccess } }, rest, { children: _jsx(FormattedMessage, { id: "ui.editEventButton", defaultMessage: "ui.editEventButton" }) })));
+    return (_jsx(Root, Object.assign({ variant: "outlined", className: classNames(classes.root, className), EventFormDialogComponentProps: { EventFormComponentProps: { event: scEvent, onSuccess: handleSuccess } } }, rest, { children: _jsx(FormattedMessage, { id: "ui.editEventButton", defaultMessage: "ui.editEventButton" }) })));
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type EditorRef = {
+export type EditorRef = {
     focus: () => void;
 };
 export interface EditorProps {

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

@@ -142,6 +142,6 @@ const Editor = (inProps, ref) => {
         nodes: [...nodes],
         theme: editorTheme
     }), [editable]);
-    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, { [classes.toolbar]: toolbar, [classes.focused]: focused }) }, { children: _jsxs(LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [toolbar ? (_jsxs(_Fragment, { children: [_jsx(ToolbarPlugin, { uploadImage: uploadImage }), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {})] })) : (_jsxs(Stack, Object.assign({ className: classes.actions, direction: "row" }, { children: [uploadImage && _jsx(ImagePlugin, {}), _jsx(EmojiPlugin, {})] }))), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: classes.content }), placeholder: _jsx(Box, Object.assign({ className: classes.placeholder, onClick: handleFocus }, { children: _jsx(FormattedMessage, { id: "ui.editor.placeholder", defaultMessage: "ui.editor.placeholder" }) })), ErrorBoundary: LexicalErrorBoundary }), _jsx(DefaultHtmlValuePlugin, { defaultValue: defaultValue }), _jsx(HistoryPlugin, {}), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(OnBlurPlugin, { onBlur: handleHasBlur }), _jsx(OnFocusPlugin, { onFocus: handleHasFocus }), _jsx(AutoLinkPlugin, {}), _jsx(MentionsPlugin, {}), _jsx(LinkPlugin, {}), _jsx(FloatingLinkPlugin, {}), _jsx(ApiPlugin, { ref: apiRef })] })) })));
+    return (_jsx(Root, { id: id, className: classNames(classes.root, className, { [classes.toolbar]: toolbar, [classes.focused]: focused }), children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [toolbar ? (_jsxs(_Fragment, { children: [_jsx(ToolbarPlugin, { uploadImage: uploadImage }), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {})] })) : (_jsxs(Stack, { className: classes.actions, direction: "row", children: [uploadImage && _jsx(ImagePlugin, {}), _jsx(EmojiPlugin, {})] })), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: classes.content }), placeholder: _jsx(Box, { className: classes.placeholder, onClick: handleFocus, children: _jsx(FormattedMessage, { id: "ui.editor.placeholder", defaultMessage: "ui.editor.placeholder" }) }), ErrorBoundary: LexicalErrorBoundary }), _jsx(DefaultHtmlValuePlugin, { defaultValue: defaultValue }), _jsx(HistoryPlugin, {}), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(OnBlurPlugin, { onBlur: handleHasBlur }), _jsx(OnFocusPlugin, { onFocus: handleHasFocus }), _jsx(AutoLinkPlugin, {}), _jsx(MentionsPlugin, {}), _jsx(LinkPlugin, {}), _jsx(FloatingLinkPlugin, {}), _jsx(ApiPlugin, { ref: apiRef })] }) }));
 };
 export default forwardRef(Editor);

package/lib/esm/components/Editor/nodes/HashtagNode.d.ts

@@ -1,7 +1,7 @@
 import { DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedTextNode, Spread, TextNode } from 'lexical';
 import { SCCategoryType } from '@selfcommunity/types';
 import { DOMConversionMap } from 'lexical/LexicalNode';
-export declare type SerializedHashtagNode = Spread<{
+export type SerializedHashtagNode = Spread<{
     category: SCCategoryType;
     type: 'hashtag';
     version: 1;

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

@@ -9,16 +9,16 @@ function convertHashtagElement(domNode) {
     };
 }
 export class HashtagNode extends TextNode {
-    constructor(category, text, key) {
-        super(text !== null && text !== void 0 ? text : `#${category.name}`, key);
-        this.__category = category;
-    }
     static getType() {
         return 'hashtag';
     }
     static clone(node) {
         return new HashtagNode(node.__category, node.__text, node.__key);
     }
+    constructor(category, text, key) {
+        super(text !== null && text !== void 0 ? text : `#${category.name}`, key);
+        this.__category = category;
+    }
     createDOM(config) {
         const tag = 'hashtag';
         const dom = document.createElement(tag);

package/lib/esm/components/Editor/nodes/ImageNode.d.ts

@@ -12,7 +12,7 @@ export interface ImagePayload {
 declare function convertImageElement(domNode: any): {
     node: ImageNode;
 };
-export declare type SerializedImageNode = Spread<{
+export type SerializedImageNode = Spread<{
     altText: string;
     maxWidth: number | string;
     src: string;

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

@@ -91,7 +91,7 @@ function ImageComponent({ src, altText, nodeKey, maxWidth }) {
             unregister();
         };
     }, [clearSelection, editor, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
-    return (_jsx(Suspense, Object.assign({ fallback: null }, { children: _jsx(LazyImage, { className: isSelected ? `selected` : null, src: src, altText: altText, imageRef: imageRef, maxWidth: maxWidth }) })));
+    return (_jsx(Suspense, { fallback: null, children: _jsx(LazyImage, { className: isSelected ? `selected` : null, src: src, altText: altText, imageRef: imageRef, maxWidth: maxWidth }) }));
 }
 function convertImageElement(domNode) {
     if (domNode instanceof HTMLImageElement) {
@@ -104,18 +104,18 @@ function convertImageElement(domNode) {
 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore
 export class ImageNode extends DecoratorNode {
-    constructor(src, altText, maxWidth, key) {
-        super(key);
-        this.__src = src;
-        this.__altText = altText;
-        this.__maxWidth = maxWidth;
-    }
     static getType() {
         return 'image';
     }
     static clone(node) {
         return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__key);
     }
+    constructor(src, altText, maxWidth, key) {
+        super(key);
+        this.__src = src;
+        this.__altText = altText;
+        this.__maxWidth = maxWidth;
+    }
     setWidthAndHeight(width, height) {
         const writable = this.getWritable();
         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore

package/lib/esm/components/Editor/nodes/MentionNode.d.ts

@@ -1,7 +1,7 @@
 import { DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedTextNode, Spread, TextNode } from 'lexical';
 import { SCUserType } from '@selfcommunity/types';
 import { DOMConversionMap } from 'lexical/LexicalNode';
-export declare type SerializedMentionNode = Spread<{
+export type SerializedMentionNode = Spread<{
     user: SCUserType;
     type: 'mention';
     version: 1;

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

@@ -22,16 +22,16 @@ function convertMentionElement(domNode) {
     };
 }
 export class MentionNode extends TextNode {
-    constructor(user, text, key) {
-        super(text !== null && text !== void 0 ? text : `@${user.username}`, key);
-        this.__user = user;
-    }
     static getType() {
         return 'mention';
     }
     static clone(node) {
         return new MentionNode(node.__user, node.__text, node.__key);
     }
+    constructor(user, text, key) {
+        super(text !== null && text !== void 0 ? text : `@${user.username}`, key);
+        this.__user = user;
+    }
     createDOM(config) {
         const tag = 'mention';
         const dom = document.createElement(tag);

package/lib/esm/components/Editor/plugins/ApiPlugin.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type ApiRef = {
+export type ApiRef = {
     focus: () => void;
 };
 declare const _default: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<ApiRef>>;

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

@@ -22,7 +22,7 @@ function Emoji({ editor, className = '' }) {
     if (isMobile) {
         return null;
     }
-    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: {
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { className: className, onClick: handleOpen, children: _jsx(Icon, { children: "sentiment_satisfied_alt" }) }), _jsx(Popover, { open: Boolean(emojiAnchorEl), anchorEl: emojiAnchorEl, onClose: () => setEmojiAnchorEl(null), TransitionComponent: Fade, anchorOrigin: {
                     vertical: 'top',
                     horizontal: 'right'
                 }, transformOrigin: {
@@ -30,7 +30,7 @@ function Emoji({ editor, className = '' }) {
                     horizontal: 'left'
                 }, sx: (theme) => {
                     return { zIndex: theme.zIndex.tooltip };
-                } }, { children: _jsx(EmojiPicker, { onEmojiClick: handleEmojiClick }) }))] }));
+                }, children: _jsx(EmojiPicker, { onEmojiClick: handleEmojiClick }) })] }));
 }
 const classes = {
     root: `${PREFIX}-emoji-plugin-root`

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

@@ -93,13 +93,13 @@ function FloatingLinkPlugin({ editor, isLink, setIsLink }) {
     if (!isLink || linkUrl === hideForUrl) {
         return null;
     }
-    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) => {
+    return (_jsx(Root, { 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: (_jsxs(InputAdornment, Object.assign({ position: "end" }, { children: [_jsx(IconButton, Object.assign({ size: "small", tabIndex: 0, onClick: () => {
+                    endAdornment: (_jsxs(InputAdornment, { position: "end", children: [_jsx(IconButton, { 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" }) }))] })))
-                } }) }) })));
+                                }, children: _jsx(Icon, { children: "close" }) }), _jsx(IconButton, { size: "small", tabIndex: 1, onClick: handleLinkSubmission, children: _jsx(Icon, { children: "check" }) })] }))
+                } }) }) }));
 }
 function useFloatingLinkEditorToolbar(editor) {
     const [activeEditor, setActiveEditor] = useState(editor);

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

@@ -60,7 +60,7 @@ function useHashtagLookupService(hashtagString) {
 }
 function HashtagsTypeaheadItem({ index, isHovered, isSelected, onClick, onMouseEnter, onMouseLeave, result }) {
     const liRef = useRef(null);
-    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));
+    return (_jsx("li", { 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);
@@ -176,13 +176,13 @@ function HashtagsTypeahead({ close, editor, resolution, className = '', containe
     if (results === null) {
         return null;
     }
-    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: () => {
+    return (_jsx("div", { 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))) }) })));
+                }, result: result }, result.id))) }) }));
 }
 function checkForCapitalizedNameHashtags(text, minMatchLength) {
     const match = CapitalizedNameHashtagsRegex.exec(text);

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

@@ -17,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 (_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" })) })));
+    return (_jsx(IconButton, Object.assign({}, rest, { "aria-label": "upload image", ref: ref, children: progress ? _jsx(CircularProgress, { variant: "determinate", value: progress, size: "1rem" }) : _jsx(Icon, { color: "inherit", children: "image" }) })));
 }));
 function Image({ editor, className = '' }) {
     // CONTEXT
@@ -53,17 +53,17 @@ function Image({ editor, className = '' }) {
     if (!scUserContext.user) {
         return null;
     }
-    return (_jsxs(ChunkedUploady, Object.assign({ destination: {
+    return (_jsxs(ChunkedUploady, { 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 }, { children: [_jsx(MediaChunkUploader, { type: "eimage", onSuccess: handleUploadSuccess, onProgress: handleUploadProgress, onError: handleUploadError }), _jsx(UploadButton, { className: className, extraProps: {
+        }, 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`

package/lib/esm/components/Editor/plugins/MentionsPlugin.d.ts

@@ -1,9 +1,9 @@
-declare type MentionMatch = {
+type MentionMatch = {
     leadOffset: number;
     matchingString: string;
     replaceableString: string;
 };
-declare type Resolution = {
+type Resolution = {
     match: MentionMatch;
     range: Range;
 };

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

@@ -201,7 +201,7 @@ function useMentionLookupService(mentionString) {
 }
 function MentionsTypeaheadItem({ index, isHovered, isSelected, onClick, onMouseEnter, onMouseLeave, result }) {
     const liRef = useRef(null);
-    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));
+    return (_jsxs("li", { 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);
@@ -295,13 +295,13 @@ function MentionsTypeahead({ close, editor, resolution, className = '' }) {
     if (results === null) {
         return null;
     }
-    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: () => {
+    return (_jsx("div", { 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))) }) })));
+                }, result: result }, result.id))) }) }));
 }
 function checkForCapitalizedNameMentions(text, minMatchLength) {
     const match = CapitalizedNameMentionsRegex.exec(text);
@@ -526,7 +526,7 @@ function useMentions(editor, anchorClassName = null) {
     if (!anchorElementRef) {
         return null;
     }
-    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 }) })) })));
+    return (_jsx(ClickAwayListener, { onClickAway: closeTypeahead, children: _jsx(Portal, { 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/ToolbarPlugin.js

@@ -109,7 +109,7 @@ function BlockFormatIconButton({ className = '', editor, blockType, disabled = f
     const handleClose = () => {
         setAnchorEl(null);
     };
-    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))) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { className: className, disabled: disabled, onClick: handleOpen, children: _jsx(Tooltip, { 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, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, children: Object.keys(blockTypeToBlockIcon).map((block) => (_jsx(MenuItem, { onClick: handleSelect(block), children: _jsx(Icon, { children: blockTypeToBlockIcon[block] }) }, block))) })] }));
 }
 const classes = {
     root: `${PREFIX}-toolbar-plugin-root`,
@@ -262,11 +262,11 @@ export default function ToolbarPlugin(inProps) {
             editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
         }
     }, [editor, isLink]);
-    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: () => {
+    return (_jsxs(Root, { className: classes.root, children: [blockType in blockTypeToBlockIcon && activeEditor === editor && (_jsx(BlockFormatIconButton, { className: classes.blockFormat, disabled: !isEditable, blockType: blockType, editor: editor })), _jsx(IconButton, { 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: () => {
+                }, children: _jsx(Tooltip, { title: _jsx(FormattedMessage, { id: `ui.editor.toolbarPlugin.${alignment}`, defaultMessage: `ui.editor.toolbarPlugin.${alignment}` }), children: _jsx(Icon, { children: `format_align_${alignment}` }) }) }), _jsx(ToggleButtonGroup, { value: formats, children: FORMATS.map((format) => (_jsx(ToggleButton, { 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: () => {
+                    }, children: _jsx(Tooltip, { title: _jsx(FormattedMessage, { id: `ui.editor.toolbarPlugin.${format}`, defaultMessage: `ui.editor.toolbarPlugin.${format}` }), children: _jsx(Icon, { children: `format_${format}` }) }) }, format))) }), _jsx(IconButton, { disabled: !isEditable, onClick: clearFormatting, children: _jsx(Tooltip, { title: _jsx(FormattedMessage, { id: "ui.editor.toolbarPlugin.clear", defaultMessage: "ui.editor.toolbarPlugin.clear" }), children: _jsx(Icon, { children: "format_clear" }) }) }), _jsx(IconButton, { 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, {})] })));
+                }, children: _jsx(Tooltip, { 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, { disabled: !isEditable, onClick: insertLink, children: _jsx(Tooltip, { 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.d.ts

@@ -7,10 +7,10 @@
  */
 import type { LexicalEditor } from 'lexical';
 import * as React from 'react';
-declare type ErrorBoundaryProps = {
+type ErrorBoundaryProps = {
     children: JSX.Element;
     onError: (error: Error) => void;
 };
-export declare type ErrorBoundaryType = React.ComponentClass<ErrorBoundaryProps> | React.FC<ErrorBoundaryProps>;
+export type ErrorBoundaryType = React.ComponentClass<ErrorBoundaryProps> | React.FC<ErrorBoundaryProps>;
 export declare function useDecorators(editor: LexicalEditor, ErrorBoundary: ErrorBoundaryType): Array<JSX.Element>;
 export {};

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

@@ -24,7 +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 = (_jsx(ErrorBoundary, Object.assign({ onError: (e) => editor._onError(e) }, { children: _jsx(Suspense, Object.assign({ fallback: null }, { children: decorators[nodeKey] })) })));
+            const reactDecorator = (_jsx(ErrorBoundary, { onError: (e) => editor._onError(e), children: _jsx(Suspense, { 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.js

@@ -106,7 +106,7 @@ export default function Event(inProps) {
     });
     const { id = `event_object_${props.eventId ? props.eventId : props.event ? props.event.id : ''}`, eventId = null, event = null, className = null, template = SCEventTemplateType.SNIPPET, hideInProgress = false, hideEventParticipants = false, hideEventPlanner = false, actions, EventParticipantsButtonComponentProps = {}, EventSkeletonComponentProps = {} } = props, rest = __rest(props, ["id", "eventId", "event", "className", "template", "hideInProgress", "hideEventParticipants", "hideEventPlanner", "actions", "EventParticipantsButtonComponentProps", "EventSkeletonComponentProps"]);
     // STATE
-    const { scEvent } = useSCFetchEvent({ id: eventId, event });
+    const { scEvent } = useSCFetchEvent({ id: eventId, event, autoSubscribe: false });
     const inProgress = useMemo(() => scEvent && scEvent.active && scEvent.running, [scEvent]);
     // CONTEXT
     const scRoutingContext = useSCRouting();
@@ -123,17 +123,17 @@ export default function Event(inProps) {
      */
     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 }), !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.detailInProgress })), _jsx(Calendar, { day: new Date(scEvent.start_date).getDate() })] })), _jsxs(CardContent, Object.assign({ className: classes.detailContent }, { children: [scEvent.active ? (_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(Box, Object.assign({ 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 }, 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" }) })) })))] })));
+        contentObj = (_jsxs(DetailRoot, { className: classes.detailRoot, children: [_jsxs(Box, { className: classes.detailImageWrapper, children: [_jsx(CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.detailImage }), !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.detailInProgress })), _jsx(Calendar, { day: new Date(scEvent.start_date).getDate() })] }), _jsxs(CardContent, { className: classes.detailContent, children: [scEvent.active ? (_jsx(Link, { to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.detailNameWrapper, children: _jsx(Typography, { variant: "h3", className: classes.detailName, children: scEvent.name }) })) : (_jsx(Box, { className: classes.detailNameWrapper, children: _jsx(Typography, { variant: "h3", className: classes.detailName, children: scEvent.name }) })), _jsx(EventInfoDetails, { event: scEvent }), !hideEventPlanner && (_jsx(User, { user: scEvent.managed_by, elevation: 0, secondary: _jsx(Typography, { 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 }, EventParticipantsButtonComponentProps))] })), _jsx(Divider, { className: classes.detailSecondDivider })] }), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, { className: classes.detailActions, children: _jsx(Button, { 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: [_jsxs(Box, Object.assign({ position: "relative", className: classes.previewImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.previewImage }), !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.previewInProgress }))] })), _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" }) })) })))] })));
+        contentObj = (_jsxs(PreviewRoot, { className: classes.previewRoot, children: [_jsxs(Box, { position: "relative", className: classes.previewImageWrapper, children: [_jsx(CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.previewImage }), !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.previewInProgress }))] }), _jsxs(CardContent, { className: classes.previewContent, children: [_jsx(EventInfoDetails, { event: scEvent, hidePrivacyIcon: true, hasLocationInfo: false, beforePrivacyInfo: _jsx(Link, { to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.previewNameWrapper, children: _jsx(Typography, { 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, { className: classes.previewActions, children: _jsx(Button, { 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: _jsxs(Box, Object.assign({ className: classes.snippetImage }, { children: [_jsx(Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_medium, className: classes.snippetAvatar }), ' ', !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.snippetInProgress }))] })), 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, {
+        contentObj = (_jsx(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: _jsxs(Box, { className: classes.snippetImage, children: [_jsx(Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_medium, className: classes.snippetAvatar }), ' ', !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.snippetInProgress }))] }), primary: _jsxs(Link, { to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.snippetPrimary, children: [_jsx(Typography, { 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" }) })) }))) }));
+                        })}` }), _jsx(Typography, { variant: "body1", children: scEvent.name })] }), secondary: _jsxs(Typography, { 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, { className: classes.snippetActions, children: _jsx(Button, { 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