@selfcommunity/react-ui 0.7.0-alpha.334 → 0.7.0-alpha.336

package/lib/esm/components/FeedObject/FeedObject.js

@@ -2,12 +2,11 @@ import { __rest } from "tslib";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import CardContent from '@mui/material/CardContent';
-import { Avatar, Box, Button, CardActions, CardHeader, Collapse, Stack, Tooltip, Typography } from '@mui/material';
+import { Avatar, Box, Button, CardActions, CardHeader, Collapse, Stack, Tooltip, Typography, } from '@mui/material';
 import FeedObjectSkeleton from './Skeleton';
 import DateTimeAgo from '../../shared/DateTimeAgo';
 import Bullet from '../../shared/Bullet';
 import Tags from '../../shared/Tags';
-import MediasPreview from '../../shared/MediasPreview';
 import Actions from './Actions';
 import Icon from '@mui/material/Icon';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -17,7 +16,7 @@ import { SCFeedObjectActivitiesType, SCFeedObjectTemplateType } from '../../type
 import MarkRead from '../../shared/MarkRead';
 import classNames from 'classnames';
 import ContributionActionsMenu from '../../shared/ContributionActionsMenu';
-import { getContributionHtml, getContributionRouteName, getContributionSnippet, getRouteData } from '../../utils/contribution';
+import { getContributionHtml, getContributionRouteName, getContributionSnippet, getRouteData, } from '../../utils/contribution';
 import Follow from './Actions/Follow';
 import Widget from '../Widget';
 import { useThemeProps } from '@mui/system';
@@ -30,11 +29,12 @@ import { SCContributionType } from '@selfcommunity/types';
 import { Endpoints, http } from '@selfcommunity/api-services';
 import { CacheStrategies, Logger, LRUCache } from '@selfcommunity/utils';
 import { catchUnauthorizedActionByBlockedUser } from '../../utils/errors';
-import { Link, SCCache, SCRoutes, UserUtils, useSCContext, useSCFetchFeedObject, useSCRouting, useSCUser } from '@selfcommunity/react-core';
+import { Link, SCCache, SCRoutes, UserUtils, useSCContext, useSCFetchFeedObject, useSCRouting, useSCUser, } from '@selfcommunity/react-core';
 import UserDeletedSnackBar from '../../shared/UserDeletedSnackBar';
 import UserAvatar from '../../shared/UserAvatar';
 import { MAX_SUMMARY_LENGTH } from '../../constants/Feed';
 import Composer from '../Composer';
+import FeedObjectMediaPreview from '../FeedObjectMediaPreview';
 const messages = defineMessages({
     visibleToAll: {
         id: 'ui.feedObject.visibleToAll',
@@ -53,6 +53,7 @@ const classes = {
     tag: `${PREFIX}-tag`,
     location: `${PREFIX}-location`,
     content: `${PREFIX}-content`,
+    showMore: `${PREFIX}-show-more`,
     error: `${PREFIX}-error`,
     titleSection: `${PREFIX}-title-section`,
     title: `${PREFIX}-title`,
@@ -131,7 +132,7 @@ export default function FeedObject(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = `feed_object_${props.feedObjectId ? props.feedObjectId : props.feedObject ? props.feedObject.id : ''}`, className = null, feedObjectId = null, feedObject = null, feedObjectType = SCContributionType.DISCUSSION, feedObjectActivities = null, cacheStrategy = CacheStrategies.CACHE_FIRST, markRead = false, template = SCFeedObjectTemplateType.PREVIEW, hideFollowAction = false, summaryExpanded = false, activitiesExpanded = true, activitiesExpandedType, hideParticipantsPreview = false, pollVisible = false, FollowButtonProps = {}, FeedObjectSkeletonProps = { elevation: 0 }, ActionsProps = {}, CommentObjectReplyComponent = CommentObjectReply, CommentObjectReplyComponentProps = { WidgetProps: { variant: 'outlined' } }, CommentComponentProps = { variant: 'outlined' }, CommentObjectSkeletonProps = { elevation: 0, WidgetProps: { variant: 'outlined' } }, ContributionActionsMenuProps = {}, MediasPreviewProps = {}, ActivitiesProps = { cacheStrategy }, PollObjectProps = { elevation: 0 }, ContributorsFeedObjectProps = {}, onReply, onHeightChange, onStateChange } = props, rest = __rest(props, ["id", "className", "feedObjectId", "feedObject", "feedObjectType", "feedObjectActivities", "cacheStrategy", "markRead", "template", "hideFollowAction", "summaryExpanded", "activitiesExpanded", "activitiesExpandedType", "hideParticipantsPreview", "pollVisible", "FollowButtonProps", "FeedObjectSkeletonProps", "ActionsProps", "CommentObjectReplyComponent", "CommentObjectReplyComponentProps", "CommentComponentProps", "CommentObjectSkeletonProps", "ContributionActionsMenuProps", "MediasPreviewProps", "ActivitiesProps", "PollObjectProps", "ContributorsFeedObjectProps", "onReply", "onHeightChange", "onStateChange"]);
+    const { id = `feed_object_${props.feedObjectId ? props.feedObjectId : props.feedObject ? props.feedObject.id : ''}`, className = null, feedObjectId = null, feedObject = null, feedObjectType = SCContributionType.DISCUSSION, feedObjectActivities = null, cacheStrategy = CacheStrategies.CACHE_FIRST, markRead = false, template = SCFeedObjectTemplateType.PREVIEW, hideFollowAction = false, summaryExpanded = false, activitiesExpanded = true, activitiesExpandedType, hideParticipantsPreview = false, pollVisible = false, FollowButtonProps = {}, FeedObjectSkeletonProps = { elevation: 0 }, ActionsProps = {}, CommentObjectReplyComponent = CommentObjectReply, CommentObjectReplyComponentProps = { WidgetProps: { variant: 'outlined' } }, CommentComponentProps = { variant: 'outlined' }, CommentObjectSkeletonProps = { elevation: 0, WidgetProps: { variant: 'outlined' } }, ContributionActionsMenuProps = {}, FeedObjectMediaPreviewProps = {}, ActivitiesProps = { cacheStrategy }, PollObjectProps = { elevation: 0 }, ContributorsFeedObjectProps = {}, onReply, onHeightChange, onStateChange } = props, rest = __rest(props, ["id", "className", "feedObjectId", "feedObject", "feedObjectType", "feedObjectActivities", "cacheStrategy", "markRead", "template", "hideFollowAction", "summaryExpanded", "activitiesExpanded", "activitiesExpandedType", "hideParticipantsPreview", "pollVisible", "FollowButtonProps", "FeedObjectSkeletonProps", "ActionsProps", "CommentObjectReplyComponent", "CommentObjectReplyComponentProps", "CommentComponentProps", "CommentObjectSkeletonProps", "ContributionActionsMenuProps", "FeedObjectMediaPreviewProps", "ActivitiesProps", "PollObjectProps", "ContributorsFeedObjectProps", "onReply", "onHeightChange", "onStateChange"]);
     // CONTEXT
     const scContext = useSCContext();
     const scRoutingContext = useSCRouting();
@@ -392,7 +393,7 @@ export default function FeedObject(inProps) {
                     React.createElement(Typography, { component: "div", className: classes.text, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: {
                             __html: summaryHtml
                         } })),
-                !expanded && summaryHtmlTruncated && (React.createElement(Button, { size: "small", variant: "text", color: "inherit", onClick: handleToggleSummary },
+                !expanded && summaryHtmlTruncated && (React.createElement(Button, { size: "small", variant: "text", color: "inherit", className: classes.showMore, onClick: handleToggleSummary },
                     React.createElement(FormattedMessage, { id: "ui.feedObject.content.showMore", defaultMessage: "ui.feedObject.content.showMore" })))));
         }
         else if (template === SCFeedObjectTemplateType.DETAIL) {
@@ -405,7 +406,7 @@ export default function FeedObject(inProps) {
                 React.createElement(Typography, { component: "span", dangerouslySetInnerHTML: {
                         __html: summaryHtml
                     } }),
-                !expanded && summaryHtmlTruncated && (React.createElement(Button, { size: "small", variant: "text", color: "inherit", onClick: handleToggleSummary },
+                !expanded && summaryHtmlTruncated && (React.createElement(Button, { size: "small", variant: "text", color: "inherit", className: classes.showMore, onClick: handleToggleSummary },
                     React.createElement(FormattedMessage, { id: "ui.feedObject.content.showMore", defaultMessage: "ui.feedObject.content.showMore" })))));
         }
     }, [obj, template, expanded]);
@@ -444,7 +445,7 @@ export default function FeedObject(inProps) {
                     React.createElement(Typography, { variant: "body1", gutterBottom: true, className: classes.title }, obj.title)))))),
                 React.createElement(Box, { className: classes.textSection }, getContributionSummary(obj, template)),
                 React.createElement(Box, { className: classes.mediasSection },
-                    React.createElement(MediasPreview, Object.assign({ medias: obj.medias }, MediasPreviewProps))),
+                    React.createElement(FeedObjectMediaPreview, Object.assign({ medias: obj.medias }, FeedObjectMediaPreviewProps))),
                 React.createElement(Box, { className: classes.pollsSection }, obj['poll'] && (React.createElement(PollObject, Object.assign({ visible: pollVisible ||
                         template === SCFeedObjectTemplateType.DETAIL ||
                         Boolean(obj.type !== SCContributionType.DISCUSSION && !obj.html && !obj.medias.length), feedObject: obj, pollObject: obj['poll'], onChange: handleChangePoll, onToggleVisibility: handleTogglePollVisibility }, PollObjectProps)))),
@@ -462,7 +463,7 @@ export default function FeedObject(inProps) {
                             CommentComponentProps: Object.assign({ onDelete: handleDeleteComment, truncateContent: true, CommentsObjectComponentProps: { inPlaceLoadMoreContents: false } }, CommentComponentProps),
                             CommentObjectSkeletonProps: CommentObjectSkeletonProps
                         }, cacheStrategy: cacheStrategy }, ActivitiesProps))))),
-            composerOpen && (React.createElement(Composer, { open: composerOpen, feedObject: obj, onClose: handleToggleEdit, onSuccess: handleEditSuccess, maxWidth: "sm", fullWidth: true, scroll: "body" })))) : (React.createElement(FeedObjectSkeleton, Object.assign({ template: template }, FeedObjectSkeletonProps)))));
+            composerOpen && (React.createElement(Composer, { open: composerOpen, feedObject: obj, onClose: handleToggleEdit, onSuccess: handleEditSuccess, maxWidth: "sm", fullWidth: true })))) : (React.createElement(FeedObjectSkeleton, Object.assign({ template: template }, FeedObjectSkeletonProps)))));
     }
     else if (template === SCFeedObjectTemplateType.SHARE) {
         objElement = (React.createElement(React.Fragment, null, obj ? (React.createElement(React.Fragment, null,
@@ -477,7 +478,7 @@ export default function FeedObject(inProps) {
                     React.createElement(Typography, { variant: "body1", gutterBottom: true, className: classes.title }, obj.title)))),
                 React.createElement(Box, { className: classes.textSection }, getContributionSummary(obj, template)),
                 React.createElement(Box, { className: classes.mediasSection },
-                    React.createElement(MediasPreview, Object.assign({ medias: obj.medias }, MediasPreviewProps))),
+                    React.createElement(FeedObjectMediaPreview, Object.assign({ medias: obj.medias }, FeedObjectMediaPreviewProps))),
                 React.createElement(Box, { className: classes.pollsSection }, obj['poll'] && (React.createElement(PollObject, Object.assign({ feedObject: obj, pollObject: obj['poll'], onChange: handleChangePoll, visible: Boolean(obj.type !== SCContributionType.DISCUSSION && !obj.html && !obj.medias.length) }, PollObjectProps))))))) : (React.createElement(FeedObjectSkeleton, Object.assign({ template: template }, FeedObjectSkeletonProps)))));
     }
     else {

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

@@ -0,0 +1,38 @@
+import { SCMediaObjectType } from '../../types/media';
+import { BoxProps } from '@mui/material';
+import { SCMediaType } from '@selfcommunity/types';
+export interface FeedObjectMediaPreviewProps extends BoxProps {
+    /**
+     * Medias preview array
+     */
+    medias: SCMediaType[];
+    /**
+     * Media types
+     * @default 'image', 'document', 'link', 'share'
+     */
+    mediaObjectTypes?: SCMediaObjectType[];
+}
+/**
+ * > API documentation for the Community-JS FeedObjectMediaPreview component. Learn about the available props and the CSS API.
+ *
+ *
+ * The FeedObjectMediaPreview component render the list of medias in a feed object thanks to given configurations.
+
+ #### Import
+ ```jsx
+ import {FeedObjectMediaPreview} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+ The name `SCFeedObjectMediaPreview` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCFeedObjectMediaPreview-root|Styles applied to the root element.|
+
+
+ * @param inProps
+ */
+declare const _default: (inProps: FeedObjectMediaPreviewProps) => JSX.Element;
+export default _default;

package/lib/esm/components/FeedObjectMediaPreview/FeedObjectMediaPreview.js

@@ -0,0 +1,64 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { useSCMediaClick } from '@selfcommunity/react-core';
+import { useThemeProps } from '@mui/system';
+import { File, Link, Share } from '../../shared/Media';
+import classNames from 'classnames';
+const PREFIX = 'SCFeedObjectMediaPreview';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root'
+})(({ theme }) => ({}));
+/**
+ * > API documentation for the Community-JS FeedObjectMediaPreview component. Learn about the available props and the CSS API.
+ *
+ *
+ * The FeedObjectMediaPreview component render the list of medias in a feed object thanks to given configurations.
+
+ #### Import
+ ```jsx
+ import {FeedObjectMediaPreview} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+ The name `SCFeedObjectMediaPreview` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCFeedObjectMediaPreview-root|Styles applied to the root element.|
+
+
+ * @param inProps
+ */
+export default (inProps) => {
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, medias, mediaObjectTypes = [File, Link, Share] } = props, rest = __rest(props, ["className", "medias", "mediaObjectTypes"]);
+    const { handleMediaClick } = useSCMediaClick();
+    if (!medias.length) {
+        /**
+         * Feed without any medias:
+         * don't render anything
+         */
+        return null;
+    }
+    /**
+     * Renders list of media preview
+     * The adornment prop is used to insert the controls
+     * for re-editing the media at the top of the group of elements
+     */
+    return (React.createElement(Root, Object.assign({ className: classNames(className, classes.root) }, rest), mediaObjectTypes.map((mediaObject) => {
+        const { displayProps = {} } = mediaObject;
+        return (React.createElement("div", { key: mediaObject.name },
+            React.createElement(mediaObject.displayComponent, Object.assign({ medias: medias }, displayProps, { onMediaClick: handleMediaClick }))));
+    })));
+};

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

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

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

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

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

@@ -1,39 +1,32 @@
-import React from 'react';
 import { SCCategoryType, SCMediaType, SCPollType, SCTagType } from '@selfcommunity/types';
-import { CardProps } from '@mui/material';
 import { SCMediaObjectType } from '../../types/media';
-import { DistributiveOmit } from '@mui/types';
-import { OverrideProps } from '@mui/material/OverridableComponent';
-export interface InlineComposerTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & DistributiveOmit<CardProps, 'defaultValue'> & {
-        /**
-         * Media objects available
-         * @default Image, Document, Link
-         */
-        mediaObjectTypes?: SCMediaObjectType[];
-        /**
-         * Initialization Data for the Composer, this is a hook to generate custom posts
-         * @default null
-         */
-        defaultValue?: {
-            title?: string;
-            text?: string;
-            categories?: SCCategoryType[];
-            audience?: string;
-            addressing?: SCTagType[];
-            medias?: SCMediaType[];
-            poll?: SCPollType;
-            location?: string;
-        };
-        /**
-         * Callback triggered on success contribution creation
-         * @default null
-         */
-        onSuccess?: (res: any) => void;
+import { WidgetProps } from '../Widget';
+export interface InlineComposerWidgetProps extends Omit<WidgetProps, 'defaultValue'> {
+    /**
+     * Media objects available
+     * @default Image, Document, Link
+     */
+    mediaObjectTypes?: SCMediaObjectType[];
+    /**
+     * Initialization Data for the Composer, this is a hook to generate custom posts
+     * @default null
+     */
+    defaultValue?: {
+        title?: string;
+        text?: string;
+        categories?: SCCategoryType[];
+        audience?: string;
+        addressing?: SCTagType[];
+        medias?: SCMediaType[];
+        poll?: SCPollType;
+        location?: string;
     };
-    defaultComponent: D;
+    /**
+     * Callback triggered on success contribution creation
+     * @default null
+     */
+    onSuccess?: (res: any) => void;
 }
-export declare type InlineComposerWidgetProps<D extends React.ElementType = InlineComposerTypeMap['defaultComponent'], P = {}> = OverrideProps<InlineComposerTypeMap<P, D>, D>;
 /**
  * > API documentation for the Community-JS Inline Composer component. Learn about the available props and the CSS API.
  *
@@ -55,7 +48,6 @@ export declare type InlineComposerWidgetProps<D extends React.ElementType = Inli
  |root|.SCInlineComposerWidget-root|Styles applied to the root element.|
  |content|.SCInlineComposerWidget-content|Styles applied to the content element.|
  |input|.SCInlineComposerWidget-input|Styles applied to the input element.|
- |actions|.SCInlineComposerWidget-actions|Styles applied to the actions section.|
  |avatar|.SCInlineComposerWidget-avatar|Styles applied to the avatar element.|
 
 

package/lib/esm/components/InlineComposerWidget/InlineComposerWidget.js

@@ -1,39 +1,25 @@
 import { __rest } from "tslib";
-import React, { useContext, useMemo, useState } from 'react';
-import { SCContext, SCPreferences, SCPreferencesContext, SCRoutes, SCUserContext, UserUtils, useSCRouting, Link } from '@selfcommunity/react-core';
-import { Avatar, Box, Button, IconButton, CardContent } from '@mui/material';
+import React, { useCallback, useState } from 'react';
+import { Link, SCRoutes, UserUtils, useSCContext, useSCRouting, useSCUser, } from '@selfcommunity/react-core';
+import { Avatar, Box, Button, CardContent } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import { Document, Image, Link as MediaLink } from '../../shared/Media';
-import Composer, { MAIN_VIEW, POLL_VIEW } from '../Composer';
-import Icon from '@mui/material/Icon';
 import { FormattedMessage } from 'react-intl';
 import { useSnackbar } from 'notistack';
 import Widget from '../Widget';
 import { useThemeProps } from '@mui/system';
-const PREFIX = 'SCInlineComposerWidget';
+import Composer from '../Composer';
+import { File, Link as MediaLink } from '../../shared/Media';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     content: `${PREFIX}-content`,
     input: `${PREFIX}-input`,
-    actions: `${PREFIX}-actions`,
     avatar: `${PREFIX}-avatar`
 };
 const Root = styled(Widget, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
-const PREFERENCES = [
-    SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED,
-    SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED,
-    SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED,
-    SCPreferences.ADDONS_POLLS_ENABLED,
-    SCPreferences.ADDONS_VIDEO_UPLOAD_ENABLED
-];
-const INITIAL_STATE = {
-    open: false,
-    view: null
-};
+    slot: 'Root'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Inline Composer component. Learn about the available props and the CSS API.
  *
@@ -55,7 +41,6 @@ const INITIAL_STATE = {
  |root|.SCInlineComposerWidget-root|Styles applied to the root element.|
  |content|.SCInlineComposerWidget-content|Styles applied to the content element.|
  |input|.SCInlineComposerWidget-input|Styles applied to the input element.|
- |actions|.SCInlineComposerWidget-actions|Styles applied to the actions section.|
  |avatar|.SCInlineComposerWidget-avatar|Styles applied to the avatar element.|
 
 
@@ -67,46 +52,34 @@ export default function InlineComposerWidget(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { mediaObjectTypes = [Image, Document, MediaLink], defaultValue, onSuccess = null } = props, rest = __rest(props, ["mediaObjectTypes", "defaultValue", "onSuccess"]);
+    const { mediaObjectTypes = [File, MediaLink], defaultValue, onSuccess = null } = props, rest = __rest(props, ["mediaObjectTypes", "defaultValue", "onSuccess"]);
     // Context
-    const scContext = useContext(SCContext);
-    const scPreferencesContext = useContext(SCPreferencesContext);
-    const scUserContext = useContext(SCUserContext);
+    const scContext = useSCContext();
+    const scUserContext = useSCUser();
     const scRoutingContext = useSCRouting();
     const { enqueueSnackbar } = useSnackbar();
     // State variables
-    const [state, setState] = useState(Object.assign({}, INITIAL_STATE));
-    const { open, view } = state;
-    /*
-     * Compute preferences
-     */
-    const preferences = useMemo(() => {
-        const _preferences = {};
-        PREFERENCES.map((p) => (_preferences[p] = p in scPreferencesContext.preferences ? scPreferencesContext.preferences[p].value : null));
-        return _preferences;
-    }, [scPreferencesContext.preferences]);
+    const [open, setOpen] = useState(false);
     // Handlers
-    const handleOpen = (view) => {
-        return () => {
-            if (scUserContext.user) {
-                if (UserUtils.isBlocked(scUserContext.user)) {
-                    enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
-                        variant: 'warning',
-                        autoHideDuration: 3000
-                    });
-                }
-                else {
-                    setState({ view, open: true });
-                }
+    const handleOpen = useCallback(() => {
+        if (scUserContext.user) {
+            if (UserUtils.isBlocked(scUserContext.user)) {
+                enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
+                    variant: 'warning',
+                    autoHideDuration: 3000
+                });
             }
             else {
-                scContext.settings.handleAnonymousAction();
+                setOpen(true);
             }
-        };
-    };
-    const handleClose = () => {
-        setState(Object.assign({}, INITIAL_STATE));
-    };
+        }
+        else {
+            scContext.settings.handleAnonymousAction();
+        }
+    }, [scUserContext.user, scContext.settings]);
+    const handleClose = useCallback(() => {
+        setOpen(false);
+    }, []);
     const handleSuccess = (feedObject) => {
         if (onSuccess) {
             onSuccess(feedObject);
@@ -117,21 +90,15 @@ export default function InlineComposerWidget(inProps) {
                 autoHideDuration: 3000
             });
         }
-        setState(Object.assign({}, INITIAL_STATE));
+        setOpen(false);
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(Root, Object.assign({ className: classes.root }, rest),
             React.createElement(CardContent, { className: classes.content },
                 React.createElement(Box, { className: classes.input },
-                    React.createElement(Button, { variant: "text", disableFocusRipple: true, disableRipple: true, disableElevation: true, onClick: handleOpen(MAIN_VIEW), fullWidth: true, color: "inherit" },
+                    React.createElement(Button, { variant: "text", disableFocusRipple: true, disableRipple: true, disableElevation: true, onClick: handleOpen, fullWidth: true, color: "inherit" },
                         React.createElement(FormattedMessage, { id: "ui.inlineComposerWidget.label", defaultMessage: "ui.inlineComposerWidget.label" }))),
-                React.createElement(Box, { className: classes.actions },
-                    mediaObjectTypes
-                        .filter((mediaObjectType) => mediaObjectType.editButton !== null)
-                        .map((mediaObjectType) => (React.createElement(mediaObjectType.editButton, { key: mediaObjectType.name, onClick: handleOpen(mediaObjectType.name) }))),
-                    preferences[SCPreferences.ADDONS_POLLS_ENABLED] && (React.createElement(IconButton, { onClick: handleOpen(POLL_VIEW) },
-                        React.createElement(Icon, null, "bar_chart")))),
                 React.createElement(Box, { className: classes.avatar }, !scUserContext.user ? (React.createElement(Avatar, { variant: "circular" })) : (React.createElement(Link, { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user) },
                     React.createElement(Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar })))))),
-        React.createElement(Composer, { open: open, view: view, mediaObjectTypes: mediaObjectTypes, defaultValue: defaultValue, fullWidth: true, scroll: "body", onClose: handleClose, onSuccess: handleSuccess })));
+        React.createElement(Composer, { open: open, mediaObjectTypes: mediaObjectTypes, defaultValue: defaultValue, fullWidth: true, onClose: handleClose, onSuccess: handleSuccess })));
 }

package/lib/esm/components/InlineComposerWidget/Skeleton.d.ts

@@ -15,11 +15,10 @@
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCInlineComposerWidgetSkeleton-root|Styles applied to the root element.|
- |input|.SCInlineComposerWidgetSkeleton-input|Styles applied to the input element.|
- |actions|.SCInlineComposerWidgetSkeleton-actions|Styles applied to the actions section.|
- |action|.SCInlineComposerWidgetSkeleton-action|Styles applied to the action section.|
- |avatar|.SCInlineComposerWidgetSkeleton-avatar|Styles applied to the avatar element.|
+ |root|.SCInlineComposerWidget-skeleton-root|Styles applied to the root element.|
+ |content|.SCInlineComposerWidget-content|Styles applied to the content element.|
+ |input|.SCInlineComposerWidget-input|Styles applied to the input element.|
+ |avatar|.SCInlineComposerWidget-avatar|Styles applied to the avatar element.|
  *
  */
 export default function InlineComposerWidgetSkeleton(): JSX.Element;

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

@@ -1,34 +1,19 @@
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
-import { Box, Stack } from '@mui/material';
+import { Box, CardContent } from '@mui/material';
 import Widget from '../Widget';
-const PREFIX = 'SCInlineComposerWidgetSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
+    content: `${PREFIX}-content`,
     input: `${PREFIX}-input`,
-    actions: `${PREFIX}-actions`,
-    action: `${PREFIX}-action`,
     avatar: `${PREFIX}-avatar`
 };
 const Root = styled(Widget, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    padding: theme.spacing(),
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: theme.spacing(2),
-    [`& .${classes.input}`]: {
-        flexGrow: 2
-    },
-    [`& .${classes.actions}`]: {
-        marginLeft: 15,
-        marginRight: 15
-    }
-}));
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Inline Composer Skeleton component. Learn about the available props and the CSS API.
 
@@ -46,22 +31,17 @@ const Root = styled(Widget, {
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCInlineComposerWidgetSkeleton-root|Styles applied to the root element.|
- |input|.SCInlineComposerWidgetSkeleton-input|Styles applied to the input element.|
- |actions|.SCInlineComposerWidgetSkeleton-actions|Styles applied to the actions section.|
- |action|.SCInlineComposerWidgetSkeleton-action|Styles applied to the action section.|
- |avatar|.SCInlineComposerWidgetSkeleton-avatar|Styles applied to the avatar element.|
+ |root|.SCInlineComposerWidget-skeleton-root|Styles applied to the root element.|
+ |content|.SCInlineComposerWidget-content|Styles applied to the content element.|
+ |input|.SCInlineComposerWidget-input|Styles applied to the input element.|
+ |avatar|.SCInlineComposerWidget-avatar|Styles applied to the avatar element.|
  *
  */
 export default function InlineComposerWidgetSkeleton() {
     return (React.createElement(Root, { className: classes.root },
-        React.createElement(Box, { className: classes.input },
-            React.createElement(Skeleton, { sx: { height: 40 }, animation: "wave", variant: "text" })),
-        React.createElement(Stack, { className: classes.actions, direction: "row", justifyContent: "center", alignItems: "center", spacing: 2 },
-            React.createElement(Skeleton, { className: classes.action, animation: "wave", variant: "circular", width: 27, height: 27 }),
-            React.createElement(Skeleton, { className: classes.action, animation: "wave", variant: "circular", width: 27, height: 27 }),
-            React.createElement(Skeleton, { className: classes.action, animation: "wave", variant: "circular", width: 27, height: 27 }),
-            React.createElement(Skeleton, { className: classes.action, animation: "wave", variant: "circular", width: 27, height: 27 })),
-        React.createElement(Box, { className: classes.avatar },
-            React.createElement(Skeleton, { className: classes.avatar, animation: "wave", variant: "circular", width: 40, height: 40 }))));
+        React.createElement(CardContent, { className: classes.content },
+            React.createElement(Box, { className: classes.input },
+                React.createElement(Skeleton, { animation: "wave", variant: "text" })),
+            React.createElement(Box, { className: classes.avatar },
+                React.createElement(Skeleton, { className: classes.avatar, animation: "wave", variant: "circular" })))));
 }

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

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

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

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

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

@@ -1,7 +1,7 @@
 import { TextFieldProps } from '@mui/material/TextField';
 import { AutocompleteProps } from '@mui/material';
-import { SCLocalityType } from '@selfcommunity/types/src/index';
-export interface LocationAutocompleteProps extends Pick<AutocompleteProps<SCLocalityType, false, false, true>, Exclude<keyof AutocompleteProps<SCLocalityType, false, false, true>, 'options' | 'getOptionLabel' | 'filterOptions' | 'autoComplete' | 'includeInputInList' | 'filterSelectedOptions' | 'value' | 'selectOnFocus' | 'handleHomeEndKeys' | 'noOptionsText' | 'onChange' | 'onInputChange' | 'isOptionEqualToValue' | 'renderInput' | 'renderOption'>> {
+import { SCContributionLocation } from '@selfcommunity/types/src/index';
+export interface LocationAutocompleteProps extends Pick<AutocompleteProps<SCContributionLocation, false, false, true>, Exclude<keyof AutocompleteProps<SCContributionLocation, false, false, true>, 'options' | 'getOptionLabel' | 'filterOptions' | 'autoComplete' | 'includeInputInList' | 'filterSelectedOptions' | 'value' | 'selectOnFocus' | 'handleHomeEndKeys' | 'noOptionsText' | 'onChange' | 'onInputChange' | 'isOptionEqualToValue' | 'renderInput' | 'renderOption'>> {
     /**
      * The props applied to the text field.
      * @default {variant: 'outlined, label: location_label}

package/lib/esm/components/LocationAutocomplete/LocationAutocomplete.js

@@ -86,14 +86,16 @@ export default function LocationAutocomplete(inProps) {
     }, [value]);
     // Handlers
     const handleChange = (event, value) => {
-        setValue(value);
+        setValue({ location: value.full_address, lat: value.lat, lon: value.lng });
         onChange && onChange(value);
     };
     const handleSearch = (event, _search) => {
         setSearch(_search);
     };
     // Render
-    return (React.createElement(Root, Object.assign({ className: classes.root, options: locations || [], getOptionLabel: (option) => option.full_address || '', filterOptions: (x) => x, autoComplete: true, includeInputInList: true, filterSelectedOptions: true, value: value, selectOnFocus: true, handleHomeEndKeys: true, disabled: disabled, noOptionsText: React.createElement(FormattedMessage, { id: "ui.locationAutocomplete.empty", defaultMessage: "ui.locationAutocomplete.empty" }), onChange: handleChange, onInputChange: handleSearch, isOptionEqualToValue: (option, value) => value.lat === option.lat && value.lng === option.lng, renderInput: (params) => {
+    return (React.createElement(Root, Object.assign({ className: classes.root, options: locations || [], 
+        // @ts-ignore
+        getOptionLabel: (option) => (option === null || option === void 0 ? void 0 : option.full_address) || (option === null || option === void 0 ? void 0 : option.location) || '', filterOptions: (x) => x, autoComplete: true, includeInputInList: true, filterSelectedOptions: true, value: value, selectOnFocus: true, handleHomeEndKeys: true, disabled: disabled, noOptionsText: React.createElement(FormattedMessage, { id: "ui.locationAutocomplete.empty", defaultMessage: "ui.locationAutocomplete.empty" }), onChange: handleChange, onInputChange: handleSearch, isOptionEqualToValue: (option, value) => value.lat === option.lat && value.lon === option.lng, renderInput: (params) => {
             return (React.createElement(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'location', endAdornment: (React.createElement(React.Fragment, null,
                         isLoading ? React.createElement(CircularProgress, { color: "inherit", size: 20 }) : null,
                         params.InputProps.endAdornment)) }) })));

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconButtonProps, DrawerProps } from '@mui/material';
+import { DrawerProps, IconButtonProps } from '@mui/material';
 export interface NavigationMenuIconButtonProps extends IconButtonProps {
     /**
      * Props to spread to drawer element

package/lib/esm/components/NavigationMenuIconButton/NavigationMenuIconButton.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import React, { useState } from 'react';
 import { styled } from '@mui/material/styles';
-import { Box, Divider, Icon, IconButton, Drawer, List } from '@mui/material';
+import { Box, Divider, Drawer, Icon, IconButton, List } from '@mui/material';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import ScrollContainer from '../../shared/ScrollContainer';

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

@@ -7,10 +7,6 @@ export interface NavigationToolbarMobileProps extends ToolbarProps {
      * Disable search action if possible
      */
     disableSearch?: boolean;
-    /**
-     * Disable composer action if possible
-     */
-    disableComposer?: boolean;
     /**
      * Props spread to SearchAutocomplete component
      */
@@ -54,7 +50,6 @@ export interface NavigationToolbarMobileProps extends ToolbarProps {
  |logo|.SCNavigationToolbarMobile-logo|Styles applied to the logo element.|
  |search|.SCNavigationToolbarMobile-search|Styles applied to the search button element|
  |searchDialog|.SCNavigationToolbarMobile-search-dialog|Styles applied to the search dialog element|
- |composer|.SCNavigationToolbarMobile-composer|Styles applied to the composer component|
  |settings|.SCNavigationToolbarMobile-settings|Styles applied to the settings button element|
  |settingsDialog|.SCNavigationToolbarMobile-settingsDialog|Styles applied to the settings dialog elements|
  |login|.SCNavigationToolbarMobile-login|Styles applied to the login element.|