@selfcommunity/react-ui 0.10.2-alpha.8 → 0.10.2-courses.100

package/lib/cjs/components/CommentObject/CommentObject.js

@@ -44,7 +44,9 @@ const classes = {
     vote: `${constants_1.PREFIX}-vote`,
     voteAudience: `${constants_1.PREFIX}-vote-audience`,
     reply: `${constants_1.PREFIX}-reply`,
-    contentSubSection: `${constants_1.PREFIX}-comment-sub-section`
+    contentSubSection: `${constants_1.PREFIX}-comment-sub-section`,
+    collapsed: `${constants_1.PREFIX}-collapsed`,
+    flagChip: `${constants_1.PREFIX}-flag-chip`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
@@ -95,7 +97,7 @@ function CommentObject(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { id = `comment_object_${props.commentObjectId ? props.commentObjectId : props.commentObject ? props.commentObject.id : ''}`, className, commentObjectId, commentObject, feedObjectId, feedObject, feedObjectType = types_1.SCContributionType.POST, commentReply, onOpenReply, onDelete, onCollapsed, onRestore, onVote, elevation = 0, truncateContent = false, CommentObjectSkeletonProps = { elevation, WidgetProps: { variant: 'outlined' } }, CommentObjectReplyProps = { elevation, WidgetProps: { variant: 'outlined' } }, linkableCommentDateTime = true, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY, CommentsObjectComponentProps = {} } = props, rest = tslib_1.__rest(props, ["id", "className", "commentObjectId", "commentObject", "feedObjectId", "feedObject", "feedObjectType", "commentReply", "onOpenReply", "onDelete", "onCollapsed", "onRestore", "onVote", "elevation", "truncateContent", "CommentObjectSkeletonProps", "CommentObjectReplyProps", "linkableCommentDateTime", "cacheStrategy", "CommentsObjectComponentProps"]);
+    const { id = `comment_object_${props.commentObjectId ? props.commentObjectId : props.commentObject ? props.commentObject.id : ''}`, className, commentObjectId, commentObject, feedObjectId, feedObject, feedObjectType = types_1.SCContributionType.POST, commentReply, onOpenReply, onDelete, onCollapsed, onRestore, onVote, elevation = 0, truncateContent = false, CommentObjectSkeletonProps = { elevation, WidgetProps: { variant: 'outlined' } }, CommentObjectReplyProps = { elevation, WidgetProps: { variant: 'outlined' } }, linkableCommentDateTime = true, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY, CommentsObjectComponentProps = {}, showActions = true } = props, rest = tslib_1.__rest(props, ["id", "className", "commentObjectId", "commentObject", "feedObjectId", "feedObject", "feedObjectType", "commentReply", "onOpenReply", "onDelete", "onCollapsed", "onRestore", "onVote", "elevation", "truncateContent", "CommentObjectSkeletonProps", "CommentObjectReplyProps", "linkableCommentDateTime", "cacheStrategy", "CommentsObjectComponentProps", "showActions"]);
     // CONTEXT
     const scContext = (0, react_core_1.useSCContext)();
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
@@ -103,6 +105,7 @@ function CommentObject(inProps) {
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     // STATE
     const { obj, setObj } = (0, react_core_1.useSCFetchCommentObject)({ id: commentObjectId, commentObject, cacheStrategy });
+    const [collapsed, setCollapsed] = (0, react_1.useState)(obj === null || obj === void 0 ? void 0 : obj.collapsed);
     const [replyComment, setReplyComment] = (0, react_1.useState)(commentReply);
     const [isReplying, setIsReplying] = (0, react_1.useState)(false);
     const [isSavingComment, setIsSavingComment] = (0, react_1.useState)(false);
@@ -300,8 +303,8 @@ function CommentObject(inProps) {
         }
         const summaryHtmlTruncated = 'summary_truncated' in comment ? comment.summary_truncated : false;
         const commentHtml = 'summary_html' in comment && truncateContent && summaryHtmlTruncated ? comment.summary_html : comment.html;
-        const summaryHtml = (0, contribution_1.getContributionHtml)(commentHtml, scRoutingContext.url);
-        return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [editComment && editComment.id === comment.id ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.comment }, { children: (0, jsx_runtime_1.jsx)(CommentObjectReply_1.default, Object.assign({ text: comment.html, autoFocus: true, id: `edit-${comment.id}`, onSave: handleSave, onCancel: handleCancel, editable: !isReplying || !isSavingComment }, CommentObjectReplyProps)) }))) : ((0, jsx_runtime_1.jsx)(BaseItem_1.default, { elevation: 0, className: classes.comment, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!comment.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !obj.author.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: obj.author.username, variant: "circular", src: comment.author.avatar, className: classes.avatar }) })) })), disableTypography: true, primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: classes.content, elevation: elevation }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: (0, classnames_1.default)({ [classes.deleted]: obj && obj.deleted }) }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ className: classes.author }, (!comment.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: comment.author.username })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }), summaryHtmlTruncated && truncateContent && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COMMENT_ROUTE_NAME, (0, contribution_1.getRouteData)(comment)), className: classes.showMoreContent }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.showMore", defaultMessage: "ui.commentObject.showMore" }) })))] })), scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.commentActionsMenu }, { children: (0, jsx_runtime_1.jsx)(ContributionActionsMenu_1.default, { commentObject: comment, onRestoreContribution: handleRestore, onHideContribution: handleHide, onDeleteContribution: handleDelete, onEditContribution: handleEdit }) })))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "span", className: classes.contentSubSection }, { children: [renderTimeAgo(comment), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(VoteButton_1.default, { size: "small", className: classes.vote, contributionId: comment.id, contributionType: types_1.SCContributionType.COMMENT, contribution: comment, onVote: handleVoteSuccess }), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), renderActionReply(comment), (0, jsx_runtime_1.jsx)(VoteAudienceButton_1.default, { size: "small", className: classes.voteAudience, contributionId: comment.id, contributionType: types_1.SCContributionType.COMMENT, contribution: comment })] }))] }) })), comment.comment_count > 0 && (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.nestedComments }, { children: renderLatestComment(comment) })), scUserContext.user && replyComment && (replyComment.id === comment.id || replyComment.parent === comment.id) && !comment.parent && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.nestedComments }, { children: (0, jsx_runtime_1.jsx)(CommentObjectReply_1.default, Object.assign({ text: `@${replyComment.author.username}, `, autoFocus: true, id: `reply-${replyComment.id}`, onReply: handleReply, editable: !isReplying }, CommentObjectReplyProps), `reply-${replyComment.id}`) })))] }, comment.id));
+        const summaryHtml = (0, contribution_1.getCommentContributionHtml)(commentHtml, scRoutingContext.url);
+        return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [collapsed ? ((0, jsx_runtime_1.jsx)(BaseItem_1.default, { elevation: 0, className: classes.comment, disableTypography: true, primary: (0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: (0, classnames_1.default)(classes.content, classes.collapsed), elevation: elevation }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.CardContent, Object.assign({ className: (0, classnames_1.default)({ [classes.deleted]: obj && obj.deleted }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.collapsed", defaultMessage: "ui.commentObject.collapsed" }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.commentActionsMenu }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => setCollapsed(!collapsed) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility" }) })) }))] })) })) : editComment && editComment.id === comment.id ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.comment }, { children: (0, jsx_runtime_1.jsx)(CommentObjectReply_1.default, Object.assign({ text: comment.html, autoFocus: true, id: `edit-${comment.id}`, onSave: handleSave, onCancel: handleCancel, editable: !isReplying || !isSavingComment }, CommentObjectReplyProps)) }))) : ((0, jsx_runtime_1.jsx)(BaseItem_1.default, { elevation: 0, className: classes.comment, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!comment.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !obj.author.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: obj.author.username, variant: "circular", src: comment.author.avatar, className: classes.avatar }) })) })), disableTypography: true, primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: classes.content, elevation: elevation }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: (0, classnames_1.default)({ [classes.deleted]: obj && obj.deleted }) }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ className: classes.author }, (!comment.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: comment.author.username })) })), comment.collapsed && ((0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.flagChip, color: "error", size: "small", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.flag", defaultMessage: "ui.commentObject.flag" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }), summaryHtmlTruncated && truncateContent && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COMMENT_ROUTE_NAME, (0, contribution_1.getRouteData)(comment)), className: classes.showMoreContent }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.showMore", defaultMessage: "ui.commentObject.showMore" }) })))] })), scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.commentActionsMenu }, { children: (0, jsx_runtime_1.jsx)(ContributionActionsMenu_1.default, { commentObject: comment, onRestoreContribution: handleRestore, onHideContribution: handleHide, onDeleteContribution: handleDelete, onEditContribution: handleEdit }) })))] })), showActions && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "span", className: classes.contentSubSection }, { children: [renderTimeAgo(comment), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(VoteButton_1.default, { size: "small", className: classes.vote, contributionId: comment.id, contributionType: types_1.SCContributionType.COMMENT, contribution: comment, onVote: handleVoteSuccess }), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), renderActionReply(comment), (0, jsx_runtime_1.jsx)(VoteAudienceButton_1.default, { size: "small", className: classes.voteAudience, contributionId: comment.id, contributionType: types_1.SCContributionType.COMMENT, contribution: comment })] })))] }) })), comment.comment_count > 0 && (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.nestedComments }, { children: renderLatestComment(comment) })), scUserContext.user && replyComment && (replyComment.id === comment.id || replyComment.parent === comment.id) && !comment.parent && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.nestedComments }, { children: (0, jsx_runtime_1.jsx)(CommentObjectReply_1.default, Object.assign({ text: `@${replyComment.author.username}, `, autoFocus: true, id: `reply-${replyComment.id}`, onReply: handleReply, editable: !isReplying }, CommentObjectReplyProps), `reply-${replyComment.id}`) })))] }, comment.id));
     }
     /**
      * Render Latest Comment

package/lib/cjs/components/CommentObjectReply/CommentObjectReply.d.ts

@@ -1,4 +1,6 @@
 import { WidgetProps } from '../Widget';
+import { EditorProps } from '../Editor';
+import { SCMediaType } from '@selfcommunity/types';
 export interface CommentObjectReplyProps extends WidgetProps {
     /**
      * Bind focus on mount
@@ -9,12 +11,12 @@ export interface CommentObjectReplyProps extends WidgetProps {
      * Callback invoked after reply
      * @param comment
      */
-    onReply?: (comment: any) => void;
+    onReply?: (comment: any, medias?: any) => void;
     /**
      * Callback invoked after save/edit
      * @param comment
      */
-    onSave?: (comment: any) => void;
+    onSave?: (comment: any, medias?: any) => void;
     /**
      * Callback invoked after disccard save/edit
      * @param comment
@@ -30,11 +32,31 @@ export interface CommentObjectReplyProps extends WidgetProps {
      * @default ''
      */
     text?: string;
+    /**
+     * Initial media content
+     * @default ''
+     */
+    medias?: SCMediaType[];
     /**
      * Initial content
      * @default {variant: 'outlined'}
      */
     WidgetProps?: WidgetProps;
+    /**
+     * Initial content
+     * @default {}
+     */
+    EditorProps?: EditorProps;
+    /**
+     * Prop to show user avatar
+     * @default true
+     */
+    showAvatar?: boolean;
+    /**
+     * Prop to show a reply icon instead of the button
+     * @default false
+     */
+    replyIcon?: boolean;
     /**
      * Other props
      */

package/lib/cjs/components/CommentObjectReply/CommentObjectReply.js

@@ -22,6 +22,7 @@ const classes = {
     avatar: `${PREFIX}-avatar`,
     actions: `${PREFIX}-actions`,
     buttonReply: `${PREFIX}-button-reply`,
+    iconReply: `${PREFIX}-icon-reply`,
     buttonSave: `${PREFIX}-button-save`,
     buttonCancel: `${PREFIX}-button-cancel`
 };
@@ -64,11 +65,12 @@ function CommentObjectReply(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = 'CommentObjectReply', className, elevation = 0, autoFocus = false, onReply, onSave, onCancel, editable = true, text = '', WidgetProps = { variant: 'outlined' } } = props, rest = tslib_1.__rest(props, ["id", "className", "elevation", "autoFocus", "onReply", "onSave", "onCancel", "editable", "text", "WidgetProps"]);
+    const { id = 'CommentObjectReply', className, elevation = 0, autoFocus = false, onReply, onSave, onCancel, editable = true, text = '', medias = [], WidgetProps = { variant: 'outlined' }, EditorProps = {}, showAvatar = true, replyIcon = false } = props, rest = tslib_1.__rest(props, ["id", "className", "elevation", "autoFocus", "onReply", "onSave", "onCancel", "editable", "text", "medias", "WidgetProps", "EditorProps", "showAvatar", "replyIcon"]);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     // RETRIEVE OBJECTS
     const [html, setHtml] = (0, react_1.useState)(text);
+    const [media, setMedia] = (0, react_1.useState)(medias);
     // HOOKS
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
@@ -93,13 +95,13 @@ function CommentObjectReply(inProps) {
      * Handle Replay
      */
     const handleReply = () => {
-        onReply && onReply(html);
+        onReply && onReply(html, media && media.length > 0 ? media : null);
     };
     /**
      * Handle Save
      */
     const handleSave = () => {
-        onSave && onSave(html);
+        onSave && onSave(html, media && media.length > 0 ? media : null);
     };
     /**
      * Handle cancel save
@@ -113,6 +115,9 @@ function CommentObjectReply(inProps) {
     const handleChangeText = (value) => {
         setHtml(value);
     };
+    const handleChangeMedia = (medias) => {
+        setMedia(medias);
+    };
     /**
      * Check if editor is empty
      */
@@ -121,6 +126,8 @@ function CommentObjectReply(inProps) {
         return _html === '' || _html === '<p class="SCEditor-paragraph"></p>' || _html === '<p class="SCEditor-paragraph"><br></p>';
     }, [html]);
     // RENDER
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id }, rest, { disableTypography: true, onClick: handleEditorFocus, elevation: elevation, className: (0, classnames_1.default)(classes.root, className), image: !scUserContext.user ? ((0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "circular", className: classes.avatar })) : ((0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !scUserContext.user.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar, classes: { root: classes.avatar } }) }))), secondary: (0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: (0, classnames_1.default)(classes.comment, { [classes.hasValue]: !isEditorEmpty }) }, WidgetProps, { children: [(0, jsx_runtime_1.jsx)(Editor_1.default, { ref: editor, onChange: handleChangeText, defaultValue: html, editable: editable, uploadImage: true }), !isEditorEmpty && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [onReply && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }) }))), onSave && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onCancel && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: 'text', size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }) }))), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }) }))] }))] })))] })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id }, rest, { disableTypography: true, onClick: handleEditorFocus, elevation: elevation, className: (0, classnames_1.default)(classes.root, className), image: showAvatar &&
+            (!scUserContext.user ? ((0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "circular", className: classes.avatar })) : ((0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !scUserContext.user.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar, classes: { root: classes.avatar } }) })))), secondary: (0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: (0, classnames_1.default)(classes.comment, { [classes.hasValue]: !isEditorEmpty }) }, WidgetProps, { children: [(0, jsx_runtime_1.jsx)(Editor_1.default, Object.assign({ ref: editor, onChange: handleChangeText, onMediaChange: handleChangeMedia, defaultValue: html, editable: editable, uploadImage: true, action: replyIcon &&
+                        onReply && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleReply, className: classes.iconReply }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "send" }) }))) }, EditorProps)), !isEditorEmpty && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [onReply && !replyIcon && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }) }))), onSave && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onCancel && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: 'text', size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }) }))), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }) }))] }))] })))] })) })));
 }
 exports.default = CommentObjectReply;

package/lib/cjs/components/Composer/Composer.js

@@ -30,6 +30,8 @@ const Attributes_1 = tslib_1.__importDefault(require("./Attributes"));
 const constants_1 = require("./constants");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const CloseLayer_1 = tslib_1.__importDefault(require("./Layer/CloseLayer"));
+const BackdropScrollDisabled_1 = tslib_1.__importDefault(require("../../shared/BackdropScrollDisabled"));
+const body_scroll_lock_1 = require("body-scroll-lock");
 const DialogTransition = (0, react_1.forwardRef)(function Transition(props, ref) {
     return (0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ ref: ref }, props));
 });
@@ -131,7 +133,7 @@ function Composer(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { feedObjectId = null, feedObjectType = null, feedObject = null, defaultValue = {}, mediaObjectTypes = [Media_2.File, Media_2.Link, Media_2.Share], EditorProps = {}, onClose = null, onSuccess = null, maxWidth, feedType } = props, rest = tslib_1.__rest(props, ["feedObjectId", "feedObjectType", "feedObject", "defaultValue", "mediaObjectTypes", "EditorProps", "onClose", "onSuccess", "maxWidth", "feedType"]);
+    const { feedObjectId = null, feedObjectType = null, feedObject = null, defaultValue = {}, mediaObjectTypes = [Media_2.File, Media_2.Link, Media_2.Share], EditorProps = {}, onClose = null, onSuccess = null, feedType } = props, rest = tslib_1.__rest(props, ["feedObjectId", "feedObjectType", "feedObject", "defaultValue", "mediaObjectTypes", "EditorProps", "onClose", "onSuccess", "feedType"]);
     // Context
     const { preferences, features } = (0, react_core_1.useSCPreferences)();
     const scUserContext = (0, react_core_1.useSCUser)();
@@ -270,10 +272,28 @@ function Composer(inProps) {
          */
         dialogRef.current.addEventListener('touchstart', handleTouchStart);
         dialogRef.current.addEventListener('touchmove', handleTouchmove);
+        /**
+         * To disable scroll on iOS
+         */
+        // dialogRef.current &&
+        //   disableBodyScroll(dialogRef.current, {
+        //     allowTouchMove: (el) => {
+        //       while (el && el !== document.body) {
+        //         if (el.getAttribute('class') !== null && el.getAttribute('class').includes('SCComposer-content')) {
+        //           return true;
+        //         }
+        //         el = el.parentElement;
+        //       }
+        //     }
+        //   });
         return () => {
             var _a, _b;
             (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchstart', handleTouchStart);
             (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchmove', handleTouchmove);
+            /**
+             * To re-enable scroll on iOS
+             */
+            // dialogRef.current && enableBodyScroll(dialogRef.current);
         };
     }, [dialogRef.current, isIOS]);
     /* Handlers */
@@ -502,6 +522,7 @@ function Composer(inProps) {
             });
         }
         else {
+            (0, body_scroll_lock_1.clearAllBodyScrollLocks)();
             onClose && onClose(e);
             setLayer(null);
             dispatch({ type: 'reset' });
@@ -541,7 +562,7 @@ function Composer(inProps) {
             case Composer_1.COMPOSER_TYPE_POLL:
                 return ((0, jsx_runtime_1.jsx)(ContentPoll_1.default, { onChange: handleChangePoll, value: { html, event, group, addressing, medias, poll, location }, error: pollError, disabled: isSubmitting }, key));
             case types_1.SCContributionType.DISCUSSION:
-                return ((0, jsx_runtime_1.jsx)(ContentDiscussion_1.default, { value: { title, html, categories, event, group, addressing, medias, poll, location }, error: { titleError, error }, onChange: handleChangeDiscussion, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true, uploadImage: true }, EditorProps) }, key));
+                return ((0, jsx_runtime_1.jsx)(ContentDiscussion_1.default, { value: { title, html, categories, event, group, addressing, medias, poll, location }, error: { titleError, error }, onChange: handleChangeDiscussion, disabled: isSubmitting, isContentSwitchButtonVisible: !canSubmit && !editMode, EditorProps: Object.assign({ toolbar: true, uploadImage: true }, EditorProps) }, key));
             default:
                 return ((0, jsx_runtime_1.jsx)(ContentPost_1.default, { value: { html, categories, event, group, addressing, medias, poll, location }, error: { error }, onChange: handleChangePost, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: false, uploadImage: false }, EditorProps) }, key));
         }
@@ -561,12 +582,14 @@ function Composer(inProps) {
         error,
         handleChangePoll,
         handleChangePost,
-        isSubmitting
+        isSubmitting,
+        canSubmit,
+        editMode
     ]);
     if (!scUserContext.user && !(scUserContext.loading && open)) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: dialogRef, TransitionComponent: DialogTransition, keepMounted: true, onClose: handleClose }, rest, { className: (0, classnames_1.default)(classes.root, { [classes.ios]: isIOS }), scroll: "body", fullScreen: fullScreen, tabIndex: -1 }, { children: [(0, jsx_runtime_1.jsxs)("form", Object.assign({ onSubmit: handleSubmit, method: "post" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleClosePrompt }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) })), (0, jsx_runtime_1.jsx)(LoadingButton_1.default, Object.assign({ size: "small", type: "submit", color: "secondary", variant: "contained", disabled: !canSubmit, loading: isSubmitting }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(Attributes_1.default, { value: { categories, event, group, addressing, location }, className: classes.attributes, onChange: handleChangeAttributes, onClick: handleClickAttributes }), content, medias && medias.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.medias }, { children: mediaObjectTypes.map((mediaObjectType) => {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: dialogRef, TransitionComponent: DialogTransition, slots: { backdrop: BackdropScrollDisabled_1.default }, onClose: handleClose }, rest, { disableEscapeKeyDown: true, className: (0, classnames_1.default)(classes.root, { [classes.ios]: isIOS }), scroll: "body", fullScreen: fullScreen, tabIndex: -1 }, { children: [(0, jsx_runtime_1.jsxs)("form", Object.assign({ onSubmit: handleSubmit, method: "post" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleClosePrompt }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) })), (0, jsx_runtime_1.jsx)(LoadingButton_1.default, Object.assign({ size: "small", type: "submit", color: "secondary", variant: "contained", disabled: !canSubmit, loading: isSubmitting }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(Attributes_1.default, { value: { categories, event, group, addressing, location }, className: classes.attributes, onChange: handleChangeAttributes, onClick: handleClickAttributes }), content, medias && medias.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.medias }, { children: mediaObjectTypes.map((mediaObjectType) => {
                                     if (mediaObjectType.previewComponent) {
                                         return (0, jsx_runtime_1.jsx)(mediaObjectType.previewComponent, { value: medias, onChange: handleChangeMedias }, mediaObjectType.name);
                                     }

package/lib/cjs/components/Composer/Content/ContentDiscussion/ContentDiscussion.d.ts

@@ -22,6 +22,24 @@ export interface ContentDiscussionProps extends Omit<BoxProps, 'value' | 'onChan
      * @default empty object
      */
     onChange: (value: ComposerContentType) => void;
+    /**
+     * Value indicating the initial height
+     * @default 370
+     */
+    defaultInitialMaxHeightContentEditor?: number;
+    /**
+     * Value indicating the amount of space to take into account to dynamically
+     * calculate the max-height of the editor content (div.content)
+     * Default is :
+     * 90 (dialog topbar + bottombar) + 55 (editor toolbar) + 45 (selector content type) + 20 (title padding top/bottom)
+     * @default 210
+     */
+    defaultExtraSpaceContentEditor?: number;
+    /**
+     * Props indicate if the content switch button is visible
+     * @default true
+     */
+    isContentSwitchButtonVisible?: boolean;
     /**
      * Props to spread into the editor object
      * @default empty object

package/lib/cjs/components/Composer/Content/ContentDiscussion/ContentDiscussion.js

@@ -10,6 +10,8 @@ const Editor_1 = tslib_1.__importDefault(require("../../../Editor"));
 const react_intl_1 = require("react-intl");
 const Composer_1 = require("../../../../constants/Composer");
 const constants_1 = require("../../constants");
+const constants_2 = require("../../../Editor/constants");
+const utils_1 = require("@selfcommunity/utils");
 const classes = {
     root: `${constants_1.PREFIX}-content-discussion-root`,
     generalError: `${constants_1.PREFIX}-general-error`,
@@ -35,22 +37,52 @@ const DEFAULT_DISCUSSION = {
 };
 exports.default = (props) => {
     // PROPS
-    const { className = null, value = Object.assign({}, DEFAULT_DISCUSSION), error = {}, disabled = false, onChange, EditorProps = {} } = props;
+    const { className = null, value = Object.assign({}, DEFAULT_DISCUSSION), defaultInitialMaxHeightContentEditor = constants_1.DEFAULT_INITIAL_MAX_HEIGHT_CONTENT_EDITOR, defaultExtraSpaceContentEditor = constants_1.DEFAULT_EXTRA_SPACE_CONTENT_EDITOR, isContentSwitchButtonVisible = true, error = {}, disabled = false, onChange, EditorProps = {} } = props;
     const { titleError = null, error: generalError = null } = Object.assign({}, error);
+    const titleRef = (0, react_1.useRef)(null);
+    const [editorMaxHeight, setEditorMaxHeight] = (0, react_1.useState)(defaultInitialMaxHeightContentEditor + (isContentSwitchButtonVisible ? 0 : constants_1.DEFAULT_HEIGHT_SWITCH_CONTENT_TYPE));
     // HOOKS
     const intl = (0, react_intl_1.useIntl)();
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    const isIOS = (0, react_1.useMemo)(() => (0, utils_1.iOS)(), []);
     // HANDLERS
     const handleChangeTitle = (0, react_1.useCallback)((event) => {
         onChange(Object.assign(Object.assign({}, value), { title: event.target.value }));
     }, [value]);
+    const handleKeyDownTitle = (0, react_1.useCallback)((event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+        }
+        else if (value.title.length > Composer_1.COMPOSER_TITLE_MAX_LENGTH &&
+            ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Delete', 'Backspace', 'Shift', 'Home', 'End'].indexOf(event.key) < 0) {
+            event.preventDefault();
+        }
+    }, [value]);
     const handleChangeHtml = (0, react_1.useCallback)((html) => {
         onChange(Object.assign(Object.assign({}, value), { html }));
     }, [value]);
+    const computeEditorContentHeight = (0, react_1.useCallback)(() => {
+        if (titleRef.current) {
+            if (isMobile) {
+                // Measure title input height
+                const rect = titleRef.current.getBoundingClientRect();
+                const _delta = defaultExtraSpaceContentEditor + rect.height + (isIOS ? 30 : 0) - (isContentSwitchButtonVisible ? 0 : constants_1.DEFAULT_HEIGHT_SWITCH_CONTENT_TYPE);
+                setEditorMaxHeight(`calc(100vh - ${_delta}px)`);
+            }
+            else {
+                setEditorMaxHeight(constants_1.DEFAULT_INITIAL_MAX_HEIGHT_CONTENT_EDITOR + (isContentSwitchButtonVisible ? 0 : constants_1.DEFAULT_HEIGHT_SWITCH_CONTENT_TYPE) + 'px');
+            }
+        }
+    }, [isMobile, titleRef.current, setEditorMaxHeight, isIOS, isContentSwitchButtonVisible]);
+    (0, react_1.useEffect)(() => {
+        computeEditorContentHeight();
+    }, [value, isContentSwitchButtonVisible, computeEditorContentHeight, isMobile]);
     // RENDER
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [generalError && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.generalError }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }) }))), (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.title, placeholder: intl.formatMessage({
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [generalError && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.generalError }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }) }))), (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.title, ref: titleRef, placeholder: intl.formatMessage({
                     id: 'ui.composer.content.discussion.title.label',
                     defaultMessage: 'ui.composer.content.discussion.title.label'
-                }), autoFocus: true, fullWidth: true, variant: "outlined", value: value.title, multiline: true, onChange: handleChangeTitle, InputProps: {
+                }), autoFocus: true, fullWidth: true, variant: "outlined", value: value.title, onChange: handleChangeTitle, onKeyDown: handleKeyDownTitle, multiline: true, InputProps: {
                     endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Composer_1.COMPOSER_TITLE_MAX_LENGTH - value.title.length }))
-                }, error: Boolean(titleError), helperText: titleError, disabled: disabled }), (0, jsx_runtime_1.jsx)(Editor_1.default, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html }))] })));
+                }, error: Boolean(titleError), helperText: titleError, disabled: disabled }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { [`& .${constants_2.PREFIX}-content`]: { maxHeight: `${editorMaxHeight} !important` } } }, { children: (0, jsx_runtime_1.jsx)(Editor_1.default, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html })) }))] })));
 };

package/lib/cjs/components/Composer/Content/ContentLesson/ContentLesson.d.ts

@@ -0,0 +1,38 @@
+import { BoxProps } from '@mui/material';
+import { EditorProps } from '../../../Editor';
+import { SCMediaType } from '@selfcommunity/types';
+export interface ContentLessonProps extends Omit<BoxProps, 'value' | 'onChange'> {
+    /**
+     * Value of the component
+     */
+    value?: any;
+    /**
+     * Widgets to insert into the feed
+     * @default empty array
+     */
+    error?: any;
+    /**
+     * All the inputs should be disabled?
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback for change html
+     * @param value
+     * @default empty object
+     */
+    onChange: (html: string) => void;
+    /**
+     * Callback for media change
+     * @param media
+     * @default null
+     */
+    onMediaChange: (medias: SCMediaType[]) => void;
+    /**
+     * Props to spread into the editor object
+     * @default empty object
+     */
+    EditorProps?: EditorProps;
+}
+declare const _default: (props: ContentLessonProps) => JSX.Element;
+export default _default;

package/lib/cjs/components/Composer/Content/ContentLesson/ContentLesson.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Editor_1 = tslib_1.__importDefault(require("../../../Editor"));
+const react_intl_1 = require("react-intl");
+const constants_1 = require("../../constants");
+const classes = {
+    root: `${constants_1.PREFIX}-content-lesson-root`,
+    generalError: `${constants_1.PREFIX}-general-error`,
+    title: `${constants_1.PREFIX}-content-lesson-title`,
+    medias: `${constants_1.PREFIX}-content-lesson-medias`,
+    editor: `${constants_1.PREFIX}-content-lesson-editor`
+};
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'ContentLessonRoot'
+})(({ theme }) => ({}));
+exports.default = (props) => {
+    // PROPS
+    const { className = null, value, error = {}, disabled = false, onChange, onMediaChange, EditorProps = {} } = props;
+    const { error: generalError = null } = Object.assign({}, error);
+    // HANDLERS
+    const handleChangeHtml = (0, react_1.useCallback)((html) => {
+        onChange(html);
+    }, [value]);
+    const handleChangeMedia = (0, react_1.useCallback)((medias) => {
+        onMediaChange(medias);
+    }, []);
+    // RENDER
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [generalError && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.generalError }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }) }))), (0, jsx_runtime_1.jsx)(Editor_1.default, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, onMediaChange: handleChangeMedia, defaultValue: value.html }))] })));
+};

package/lib/cjs/components/Composer/Content/ContentLesson/index.d.ts

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

package/lib/cjs/components/Composer/Content/ContentLesson/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const ContentLesson_1 = tslib_1.__importDefault(require("./ContentLesson"));
+exports.default = ContentLesson_1.default;

package/lib/cjs/components/Composer/constants.d.ts

@@ -1 +1,4 @@
 export declare const PREFIX = "SCComposer";
+export declare const DEFAULT_INITIAL_MAX_HEIGHT_CONTENT_EDITOR = 370;
+export declare const DEFAULT_EXTRA_SPACE_CONTENT_EDITOR = 210;
+export declare const DEFAULT_HEIGHT_SWITCH_CONTENT_TYPE = 45;

package/lib/cjs/components/Composer/constants.js

@@ -1,4 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PREFIX = void 0;
+exports.DEFAULT_HEIGHT_SWITCH_CONTENT_TYPE = exports.DEFAULT_EXTRA_SPACE_CONTENT_EDITOR = exports.DEFAULT_INITIAL_MAX_HEIGHT_CONTENT_EDITOR = exports.PREFIX = void 0;
 exports.PREFIX = 'SCComposer';
+exports.DEFAULT_INITIAL_MAX_HEIGHT_CONTENT_EDITOR = 370;
+exports.DEFAULT_EXTRA_SPACE_CONTENT_EDITOR = 210;
+exports.DEFAULT_HEIGHT_SWITCH_CONTENT_TYPE = 45;

package/lib/cjs/components/ComposerIconButton/ComposerIconButton.d.ts

@@ -1,12 +1,40 @@
 import React from 'react';
-import { IconButtonProps } from '@mui/material';
+import { IconButtonProps, PopperProps } from '@mui/material';
 import { ComposerProps } from '../Composer';
+import { EventFormDialogProps } from '../EventFormDialog';
+import { GroupFormProps } from '../GroupForm';
+import { CreateLiveStreamDialogProps } from '../CreateLiveStreamDialog';
 export interface ComposerIconButtonProps extends IconButtonProps {
     /**
      * Composer Props
      * @default null
      */
     ComposerProps?: ComposerProps;
+    /**
+     * Callback onClose Composer dialog
+     * @default null
+     */
+    onClose?: () => void;
+    /**
+     * Props to spread to popper
+     * @default empty object
+     */
+    PopperProps?: PopperProps;
+    /**
+     * Props to spread to CreateGroup component
+     * @default empty object
+     */
+    GroupFormProps?: GroupFormProps;
+    /**
+     * Props to spread to CreateGroup component
+     * @default empty object
+     */
+    EventFormDialogComponentProps?: EventFormDialogProps;
+    /**
+     * Props to spread to CreateGroup component
+     * @default empty object
+     */
+    CreateLiveStreamDialogComponentProps?: CreateLiveStreamDialogProps;
 }
 /**
  * > API documentation for the Community-JS Composer Icon Button component. Learn about the available props and the CSS API.
@@ -30,5 +58,5 @@ export interface ComposerIconButtonProps extends IconButtonProps {
 
  * @param inProps
  */
-declare const _default: React.ForwardRefExoticComponent<Pick<ComposerIconButtonProps, "id" | "role" | "className" | "style" | "classes" | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "component" | "name" | "type" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "ComposerProps"> & React.RefAttributes<HTMLButtonElement>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<ComposerIconButtonProps, "id" | "role" | "className" | "style" | "classes" | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "component" | "name" | "onClose" | "type" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "PopperProps" | "ComposerProps" | "GroupFormProps" | "EventFormDialogComponentProps" | "CreateLiveStreamDialogComponentProps"> & React.RefAttributes<HTMLButtonElement>>;
 export default _default;