@selfcommunity/react-ui 0.7.56-alpha.0 → 0.8.0-alpha.1

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

@@ -1,4 +1,5 @@
-import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { FormattedMessage } from 'react-intl';
 import { Box, Stack } from '@mui/material';
@@ -141,25 +142,6 @@ const Editor = (inProps, ref) => {
         nodes: [...nodes],
         theme: editorTheme
     }), [editable]);
-    return (React.createElement(Root, { id: id, className: classNames(classes.root, className, { [classes.toolbar]: toolbar, [classes.focused]: focused }) },
-        React.createElement(LexicalComposer, { initialConfig: initialConfig },
-            toolbar ? (React.createElement(React.Fragment, null,
-                React.createElement(ToolbarPlugin, { uploadImage: uploadImage }),
-                React.createElement(ListPlugin, null),
-                React.createElement(HorizontalRulePlugin, null))) : (React.createElement(Stack, { className: classes.actions, direction: "row" },
-                uploadImage && React.createElement(ImagePlugin, null),
-                React.createElement(EmojiPlugin, null))),
-            React.createElement(RichTextPlugin, { contentEditable: React.createElement(ContentEditable, { className: classes.content }), placeholder: React.createElement(Box, { className: classes.placeholder, onClick: handleFocus },
-                    React.createElement(FormattedMessage, { id: "ui.editor.placeholder", defaultMessage: "ui.editor.placeholder" })), ErrorBoundary: LexicalErrorBoundary }),
-            React.createElement(DefaultHtmlValuePlugin, { defaultValue: defaultValue }),
-            React.createElement(HistoryPlugin, null),
-            React.createElement(OnChangePlugin, { onChange: handleChange }),
-            React.createElement(OnBlurPlugin, { onBlur: handleHasBlur }),
-            React.createElement(OnFocusPlugin, { onFocus: handleHasFocus }),
-            React.createElement(AutoLinkPlugin, null),
-            React.createElement(MentionsPlugin, null),
-            React.createElement(LinkPlugin, null),
-            React.createElement(FloatingLinkPlugin, null),
-            React.createElement(ApiPlugin, { ref: apiRef }))));
+    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 })] })) })));
 };
 export default forwardRef(Editor);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { GenericSkeleton } from '../Skeleton';
 import { styled } from '@mui/material/styles';
 import { PREFIX } from './constants';
@@ -30,5 +30,5 @@ const Root = styled(GenericSkeleton, {
  *
  */
 export default function EditorSkeleton() {
-    return React.createElement(Root, { className: classes.root });
+    return _jsx(Root, { className: classes.root });
 }

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

@@ -0,0 +1,90 @@
+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
+     * @default null
+     */
+    event?: SCEventType;
+    /**
+     * Id of the event for filter the feed
+     * @default null
+     */
+    eventId?: number;
+    /**
+     * Event template type
+     * @default 'preview'
+     */
+    template?: SCEventTemplateType;
+    /**
+     * Actions
+     * @default null
+     */
+    actions?: React.ReactNode;
+    /**
+     * Hide in progress
+     * @default false
+     */
+    hideInProgress?: boolean;
+    /**
+     * 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
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Event component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders an event item.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Event)
+
+ #### Import
+
+ ```jsx
+ import {event} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCEvent` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEvent-root|Styles applied to the root element.|
+ |avatar|.SCEvent-avatar|Styles applied to the avatar element.|
+ |primary|.SCEvent-primary|Styles applied to the primary item element section|
+ |secondary|.SCEvent-secondary|Styles applied to the secondary item element section|
+ |actions|.SCEvent-actions|Styles applied to the actions section.|
+
+
+ *
+ * @param inProps
+ */
+export default function Event(inProps: EventProps): JSX.Element;