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

package/lib/cjs/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/cjs/components/FeedObjectMediaPreview/FeedObjectMediaPreview.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const styles_1 = require("@mui/material/styles");
+const Box_1 = tslib_1.__importDefault(require("@mui/material/Box"));
+const react_core_1 = require("@selfcommunity/react-core");
+const system_1 = require("@mui/system");
+const Media_1 = require("../../shared/Media");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const PREFIX = 'SCFeedObjectMediaPreview';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = (0, styles_1.styled)(Box_1.default, {
+    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
+ */
+exports.default = (inProps) => {
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, medias, mediaObjectTypes = [Media_1.File, Media_1.Link, Media_1.Share] } = props, rest = tslib_1.__rest(props, ["className", "medias", "mediaObjectTypes"]);
+    const { handleMediaClick } = (0, react_core_1.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_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest), mediaObjectTypes.map((mediaObject) => {
+        const { displayProps = {} } = mediaObject;
+        return (react_1.default.createElement("div", { key: mediaObject.name },
+            react_1.default.createElement(mediaObject.displayComponent, Object.assign({ medias: medias }, displayProps, { onMediaClick: handleMediaClick }))));
+    })));
+};

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

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

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

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

package/lib/cjs/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/cjs/components/InlineComposerWidget/InlineComposerWidget.js

@@ -5,37 +5,23 @@ const react_1 = tslib_1.__importStar(require("react"));
 const react_core_1 = require("@selfcommunity/react-core");
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
-const Media_1 = require("../../shared/Media");
-const Composer_1 = tslib_1.__importStar(require("../Composer"));
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const react_intl_1 = require("react-intl");
 const notistack_1 = require("notistack");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const system_1 = require("@mui/system");
-const PREFIX = 'SCInlineComposerWidget';
+const Composer_1 = tslib_1.__importDefault(require("../Composer"));
+const Media_1 = require("../../shared/Media");
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    content: `${PREFIX}-content`,
-    input: `${PREFIX}-input`,
-    actions: `${PREFIX}-actions`,
-    avatar: `${PREFIX}-avatar`
+    root: `${constants_1.PREFIX}-root`,
+    content: `${constants_1.PREFIX}-content`,
+    input: `${constants_1.PREFIX}-input`,
+    avatar: `${constants_1.PREFIX}-avatar`
 };
 const Root = (0, styles_1.styled)(Widget_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
-const PREFERENCES = [
-    react_core_1.SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED,
-    react_core_1.SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED,
-    react_core_1.SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED,
-    react_core_1.SCPreferences.ADDONS_POLLS_ENABLED,
-    react_core_1.SCPreferences.ADDONS_VIDEO_UPLOAD_ENABLED
-];
-const INITIAL_STATE = {
-    open: false,
-    view: null
-};
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Inline Composer component. Learn about the available props and the CSS API.
  *
@@ -57,7 +43,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,48 +52,36 @@ function InlineComposerWidget(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
-    const { mediaObjectTypes = [Media_1.Image, Media_1.Document, Media_1.Link], defaultValue, onSuccess = null } = props, rest = tslib_1.__rest(props, ["mediaObjectTypes", "defaultValue", "onSuccess"]);
+    const { mediaObjectTypes = [Media_1.File, Media_1.Link], defaultValue, onSuccess = null } = props, rest = tslib_1.__rest(props, ["mediaObjectTypes", "defaultValue", "onSuccess"]);
     // Context
-    const scContext = (0, react_1.useContext)(react_core_1.SCContext);
-    const scPreferencesContext = (0, react_1.useContext)(react_core_1.SCPreferencesContext);
-    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
+    const scContext = (0, react_core_1.useSCContext)();
+    const scUserContext = (0, react_core_1.useSCUser)();
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     // State variables
-    const [state, setState] = (0, react_1.useState)(Object.assign({}, INITIAL_STATE));
-    const { open, view } = state;
-    /*
-     * Compute preferences
-     */
-    const preferences = (0, react_1.useMemo)(() => {
-        const _preferences = {};
-        PREFERENCES.map((p) => (_preferences[p] = p in scPreferencesContext.preferences ? scPreferencesContext.preferences[p].value : null));
-        return _preferences;
-    }, [scPreferencesContext.preferences]);
+    const [open, setOpen] = (0, react_1.useState)(false);
     // Handlers
-    const handleOpen = (view) => {
-        return () => {
-            if (scUserContext.user) {
-                if (react_core_1.UserUtils.isBlocked(scUserContext.user)) {
-                    enqueueSnackbar(react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
-                        variant: 'warning',
-                        autoHideDuration: 3000
-                    });
-                }
-                else {
-                    setState({ view, open: true });
-                }
+    const handleOpen = (0, react_1.useCallback)(() => {
+        if (scUserContext.user) {
+            if (react_core_1.UserUtils.isBlocked(scUserContext.user)) {
+                enqueueSnackbar(react_1.default.createElement(react_intl_1.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 = (0, react_1.useCallback)(() => {
+        setOpen(false);
+    }, []);
     const handleSuccess = (feedObject) => {
         if (onSuccess) {
             onSuccess(feedObject);
@@ -119,22 +92,16 @@ function InlineComposerWidget(inProps) {
                 autoHideDuration: 3000
             });
         }
-        setState(Object.assign({}, INITIAL_STATE));
+        setOpen(false);
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Root, Object.assign({ className: classes.root }, rest),
             react_1.default.createElement(material_1.CardContent, { className: classes.content },
                 react_1.default.createElement(material_1.Box, { className: classes.input },
-                    react_1.default.createElement(material_1.Button, { variant: "text", disableFocusRipple: true, disableRipple: true, disableElevation: true, onClick: handleOpen(Composer_1.MAIN_VIEW), fullWidth: true, color: "inherit" },
+                    react_1.default.createElement(material_1.Button, { variant: "text", disableFocusRipple: true, disableRipple: true, disableElevation: true, onClick: handleOpen, fullWidth: true, color: "inherit" },
                         react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.inlineComposerWidget.label", defaultMessage: "ui.inlineComposerWidget.label" }))),
-                react_1.default.createElement(material_1.Box, { className: classes.actions },
-                    mediaObjectTypes
-                        .filter((mediaObjectType) => mediaObjectType.editButton !== null)
-                        .map((mediaObjectType) => (react_1.default.createElement(mediaObjectType.editButton, { key: mediaObjectType.name, onClick: handleOpen(mediaObjectType.name) }))),
-                    preferences[react_core_1.SCPreferences.ADDONS_POLLS_ENABLED] && (react_1.default.createElement(material_1.IconButton, { onClick: handleOpen(Composer_1.POLL_VIEW) },
-                        react_1.default.createElement(Icon_1.default, null, "bar_chart")))),
                 react_1.default.createElement(material_1.Box, { className: classes.avatar }, !scUserContext.user ? (react_1.default.createElement(material_1.Avatar, { variant: "circular" })) : (react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user) },
                     react_1.default.createElement(material_1.Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar })))))),
-        react_1.default.createElement(Composer_1.default, { open: open, view: view, mediaObjectTypes: mediaObjectTypes, defaultValue: defaultValue, fullWidth: true, scroll: "body", onClose: handleClose, onSuccess: handleSuccess })));
+        react_1.default.createElement(Composer_1.default, { open: open, mediaObjectTypes: mediaObjectTypes, defaultValue: defaultValue, fullWidth: true, onClose: handleClose, onSuccess: handleSuccess })));
 }
 exports.default = InlineComposerWidget;

package/lib/cjs/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/cjs/components/InlineComposerWidget/Skeleton.js

@@ -6,32 +6,17 @@ const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const material_1 = require("@mui/material");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
-const PREFIX = 'SCInlineComposerWidgetSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    input: `${PREFIX}-input`,
-    actions: `${PREFIX}-actions`,
-    action: `${PREFIX}-action`,
-    avatar: `${PREFIX}-avatar`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    content: `${constants_1.PREFIX}-content`,
+    input: `${constants_1.PREFIX}-input`,
+    avatar: `${constants_1.PREFIX}-avatar`
 };
 const Root = (0, styles_1.styled)(Widget_1.default, {
-    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
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Inline Composer Skeleton component. Learn about the available props and the CSS API.
 
@@ -49,23 +34,18 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
 
  |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.|
  *
  */
 function InlineComposerWidgetSkeleton() {
     return (react_1.default.createElement(Root, { className: classes.root },
-        react_1.default.createElement(material_1.Box, { className: classes.input },
-            react_1.default.createElement(Skeleton_1.default, { sx: { height: 40 }, animation: "wave", variant: "text" })),
-        react_1.default.createElement(material_1.Stack, { className: classes.actions, direction: "row", justifyContent: "center", alignItems: "center", spacing: 2 },
-            react_1.default.createElement(Skeleton_1.default, { className: classes.action, animation: "wave", variant: "circular", width: 27, height: 27 }),
-            react_1.default.createElement(Skeleton_1.default, { className: classes.action, animation: "wave", variant: "circular", width: 27, height: 27 }),
-            react_1.default.createElement(Skeleton_1.default, { className: classes.action, animation: "wave", variant: "circular", width: 27, height: 27 }),
-            react_1.default.createElement(Skeleton_1.default, { className: classes.action, animation: "wave", variant: "circular", width: 27, height: 27 })),
-        react_1.default.createElement(material_1.Box, { className: classes.avatar },
-            react_1.default.createElement(Skeleton_1.default, { className: classes.avatar, animation: "wave", variant: "circular", width: 40, height: 40 }))));
+        react_1.default.createElement(material_1.CardContent, { className: classes.content },
+            react_1.default.createElement(material_1.Box, { className: classes.input },
+                react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "text" })),
+            react_1.default.createElement(material_1.Box, { className: classes.avatar },
+                react_1.default.createElement(Skeleton_1.default, { className: classes.avatar, animation: "wave", variant: "circular" })))));
 }
 exports.default = InlineComposerWidgetSkeleton;

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCInlineComposerWidget';

package/lib/cjs/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/cjs/components/LocationAutocomplete/LocationAutocomplete.js

@@ -88,14 +88,16 @@ 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_1.default.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_1.default.createElement(react_intl_1.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_1.default.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_1.default.createElement(react_intl_1.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_1.default.createElement(TextField_1.default, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'location', endAdornment: (react_1.default.createElement(react_1.default.Fragment, null,
                         isLoading ? react_1.default.createElement(CircularProgress_1.default, { color: "inherit", size: 20 }) : null,
                         params.InputProps.endAdornment)) }) })));

package/lib/cjs/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/cjs/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/cjs/components/NavigationToolbarMobile/NavigationToolbarMobile.js

@@ -11,25 +11,21 @@ const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const react_intl_1 = require("react-intl");
 const SearchDialog_1 = tslib_1.__importDefault(require("../SearchDialog"));
 const NavigationSettingsIconButton_1 = tslib_1.__importDefault(require("../NavigationSettingsIconButton"));
-const ComposerIconButton_1 = tslib_1.__importDefault(require("../ComposerIconButton"));
 const NavigationMenuIconButton_1 = tslib_1.__importDefault(require("../NavigationMenuIconButton"));
-const PREFIX = 'SCNavigationToolbarMobile';
+const constants_1 = require("./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`
+    root: `${constants_1.PREFIX}-root`,
+    logo: `${constants_1.PREFIX}-logo`,
+    search: `${constants_1.PREFIX}-search`,
+    searchDialog: `${constants_1.PREFIX}-search-dialog`,
+    settings: `${constants_1.PREFIX}-settings`,
+    settingsDialog: `${constants_1.PREFIX}-settings-dialog`,
+    login: `${constants_1.PREFIX}-login`
 };
 const Root = (0, material_1.styled)(material_1.Toolbar, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    name: constants_1.PREFIX,
+    slot: 'Root'
 })(() => ({}));
-const PREFERENCES = [react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY, react_core_1.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE];
 /**
  * > API documentation for the Community-JS Navigation Toolbar Mobile component. Learn about the available props and the CSS API.
  *
@@ -56,7 +52,6 @@ const PREFERENCES = [react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABIL
  |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,28 +62,23 @@ function NavigationToolbarMobile(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
-    const { className = '', disableSearch = false, disableComposer = false, SearchAutocompleteProps = {}, children = null, startActions = null, endActions = null, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton_1.default } = props, rest = tslib_1.__rest(props, ["className", "disableSearch", "disableComposer", "SearchAutocompleteProps", "children", "startActions", "endActions", "NavigationSettingsIconButtonComponent"]);
+    const { className = '', disableSearch = false, SearchAutocompleteProps = {}, children = null, startActions = null, endActions = null, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton_1.default } = props, rest = tslib_1.__rest(props, ["className", "disableSearch", "SearchAutocompleteProps", "children", "startActions", "endActions", "NavigationSettingsIconButtonComponent"]);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     // PREFERENCES
-    const scPreferences = (0, react_core_1.useSCPreferences)();
-    const preferences = (0, react_1.useMemo)(() => {
-        const _preferences = {};
-        PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
-        return _preferences;
-    }, [scPreferences.preferences]);
+    const { preferences } = (0, react_core_1.useSCPreferences)();
     // STATE
     const [searchOpen, setSearchOpen] = (0, react_1.useState)(false);
     // HANDLERS
-    const handleOpenSearch = () => {
+    const handleOpenSearch = (0, react_1.useCallback)(() => {
         setSearchOpen(true);
-    };
-    const handleCloseSearch = () => {
+    }, []);
+    const handleCloseSearch = (0, react_1.useCallback)(() => {
         setSearchOpen(false);
-    };
+    }, []);
     // RENDER
     if (scUserContext.loading) {
         return react_1.default.createElement(Skeleton_1.default, null);
@@ -96,15 +86,14 @@ function NavigationToolbarMobile(inProps) {
     const _children = children || (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(NavigationMenuIconButton_1.default, null),
         react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo },
-            react_1.default.createElement("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE], alt: "logo" }))));
+            react_1.default.createElement("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE].value, alt: "logo" }))));
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest),
         _children,
         startActions,
-        (preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch && (react_1.default.createElement(react_1.default.Fragment, null,
+        (preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value || scUserContext.user) && !disableSearch && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(material_1.IconButton, { className: classes.search, onClick: handleOpenSearch },
                 react_1.default.createElement(Icon_1.default, null, "search")),
             react_1.default.createElement(SearchDialog_1.default, { className: classes.searchDialog, fullScreen: true, open: searchOpen, SearchAutocompleteProps: Object.assign(Object.assign({}, SearchAutocompleteProps), { onClear: handleCloseSearch }) }))),
-        scUserContext.user && !disableComposer && react_1.default.createElement(ComposerIconButton_1.default, { className: classes.composer }),
         endActions,
         scUserContext.user ? (react_1.default.createElement(NavigationSettingsIconButtonComponent, { className: classes.settings })) : (react_1.default.createElement(material_1.Button, { className: classes.login, color: "inherit", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.SIGNIN_ROUTE_NAME, {}) },
             react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.appBar.navigation.login", defaultMessage: "ui.appBar.navigation.login" })))));

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

@@ -5,15 +5,14 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
-const PREFIX = 'SCNavigationToolbarMobileSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    logo: `${PREFIX}-logo`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    logo: `${constants_1.PREFIX}-logo`
 };
 const Root = (0, styles_1.styled)(material_1.Toolbar, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
 })(() => ({}));
 /**
  * > API documentation for the Community-JS Navigation Toolbar Mobile Skeleton component. Learn about the available props and the CSS API.

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

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