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

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.|

package/lib/esm/components/NavigationToolbarMobile/NavigationToolbarMobile.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { Button, IconButton, styled, Toolbar } from '@mui/material';
-import React, { useMemo, useState } from 'react';
-import { Link, SCPreferences, SCRoutes, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
+import React, { useCallback, useState } from 'react';
+import { Link, SCPreferences, SCRoutes, useSCPreferences, useSCRouting, useSCUser, } from '@selfcommunity/react-core';
 import Icon from '@mui/material/Icon';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
@@ -9,25 +9,21 @@ import NavigationToolbarMobileSkeleton from './Skeleton';
 import { FormattedMessage } from 'react-intl';
 import SearchDialog from '../SearchDialog';
 import NavigationSettingsIconButton from '../NavigationSettingsIconButton';
-import ComposerIconButton from '../ComposerIconButton';
 import NavigationMenuIconButton from '../NavigationMenuIconButton';
-const PREFIX = 'SCNavigationToolbarMobile';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     logo: `${PREFIX}-logo`,
     search: `${PREFIX}-search`,
     searchDialog: `${PREFIX}-search-dialog`,
-    composer: `${PREFIX}-composer`,
     settings: `${PREFIX}-settings`,
     settingsDialog: `${PREFIX}-settings-dialog`,
     login: `${PREFIX}-login`
 };
 const Root = styled(Toolbar, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    slot: 'Root'
 })(() => ({}));
-const PREFERENCES = [SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY, SCPreferences.LOGO_NAVBAR_LOGO_MOBILE];
 /**
  * > API documentation for the Community-JS Navigation Toolbar Mobile component. Learn about the available props and the CSS API.
  *
@@ -54,7 +50,6 @@ const PREFERENCES = [SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY, SCPrefer
  |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.|
@@ -67,26 +62,21 @@ export default function NavigationToolbarMobile(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className = '', disableSearch = false, disableComposer = false, SearchAutocompleteProps = {}, children = null, startActions = null, endActions = null, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton } = props, rest = __rest(props, ["className", "disableSearch", "disableComposer", "SearchAutocompleteProps", "children", "startActions", "endActions", "NavigationSettingsIconButtonComponent"]);
+    const { className = '', disableSearch = false, SearchAutocompleteProps = {}, children = null, startActions = null, endActions = null, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton } = props, rest = __rest(props, ["className", "disableSearch", "SearchAutocompleteProps", "children", "startActions", "endActions", "NavigationSettingsIconButtonComponent"]);
     // CONTEXT
     const scUserContext = useSCUser();
     const scRoutingContext = useSCRouting();
     // PREFERENCES
-    const scPreferences = useSCPreferences();
-    const preferences = useMemo(() => {
-        const _preferences = {};
-        PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
-        return _preferences;
-    }, [scPreferences.preferences]);
+    const { preferences } = useSCPreferences();
     // STATE
     const [searchOpen, setSearchOpen] = useState(false);
     // HANDLERS
-    const handleOpenSearch = () => {
+    const handleOpenSearch = useCallback(() => {
         setSearchOpen(true);
-    };
-    const handleCloseSearch = () => {
+    }, []);
+    const handleCloseSearch = useCallback(() => {
         setSearchOpen(false);
-    };
+    }, []);
     // RENDER
     if (scUserContext.loading) {
         return React.createElement(NavigationToolbarMobileSkeleton, null);
@@ -94,15 +84,14 @@ export default function NavigationToolbarMobile(inProps) {
     const _children = children || (React.createElement(React.Fragment, null,
         React.createElement(NavigationMenuIconButton, null),
         React.createElement(Link, { to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo },
-            React.createElement("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE], alt: "logo" }))));
+            React.createElement("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE].value, alt: "logo" }))));
     return (React.createElement(Root, Object.assign({ className: classNames(className, classes.root) }, rest),
         _children,
         startActions,
-        (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch && (React.createElement(React.Fragment, null,
+        (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value || scUserContext.user) && !disableSearch && (React.createElement(React.Fragment, null,
             React.createElement(IconButton, { className: classes.search, onClick: handleOpenSearch },
                 React.createElement(Icon, null, "search")),
             React.createElement(SearchDialog, { className: classes.searchDialog, fullScreen: true, open: searchOpen, SearchAutocompleteProps: Object.assign(Object.assign({}, SearchAutocompleteProps), { onClear: handleCloseSearch }) }))),
-        scUserContext.user && !disableComposer && React.createElement(ComposerIconButton, { className: classes.composer }),
         endActions,
         scUserContext.user ? (React.createElement(NavigationSettingsIconButtonComponent, { className: classes.settings })) : (React.createElement(Button, { className: classes.login, color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNIN_ROUTE_NAME, {}) },
             React.createElement(FormattedMessage, { id: "ui.appBar.navigation.login", defaultMessage: "ui.appBar.navigation.login" })))));

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

@@ -2,15 +2,14 @@ import React from 'react';
 import { Toolbar } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
-const PREFIX = 'SCNavigationToolbarMobileSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
     logo: `${PREFIX}-logo`
 };
 const Root = styled(Toolbar, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    slot: 'SkeletonRoot'
 })(() => ({}));
 /**
  * > API documentation for the Community-JS Navigation Toolbar Mobile Skeleton component. Learn about the available props and the CSS API.

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

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

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

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

package/lib/esm/constants/Composer.d.ts

@@ -1,8 +1,10 @@
 export declare const COMPOSER_TYPE_DISCUSSION = "discussion";
 export declare const COMPOSER_TYPE_POST = "post";
+export declare const COMPOSER_TYPE_POLL = "poll";
 export declare const COMPOSER_TYPES: {
     discussion: string;
     post: string;
+    poll: string;
 };
 export declare const COMPOSER_TITLE_MAX_LENGTH = 160;
 export declare const COMPOSER_POLL_TITLE_MAX_LENGTH = 160;