@selfcommunity/react-ui 0.11.0-alpha.9 → 0.11.0-alpha.90

package/lib/esm/shared/Media/File/PreviewComponent.js

@@ -1,33 +1,31 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useMemo } from 'react';
-import { Box, IconButton, Typography, useMediaQuery, useTheme } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import Icon from '@mui/material/Icon';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useMemo } from 'react';
+import { Box, IconButton, Typography, styled, Icon } from '@mui/material';
 import classNames from 'classnames';
 import { ReactSortable } from 'react-sortablejs';
 import { PREFIX } from './constants';
-import filter from './filter';
-import { MEDIA_TYPE_DOCUMENT } from '../../../constants/Media';
+import { filteredDocs, filteredImages } from './filter';
+import DocComponent from './DocComponent';
 const classes = {
     previewRoot: `${PREFIX}-preview-root`,
     media: `${PREFIX}-media`,
     delete: `${PREFIX}-delete`,
-    title: `${PREFIX}-title`
+    title: `${PREFIX}-title`,
+    docsWrapper: `${PREFIX}-docs-wrapper`
 };
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'PreviewRoot'
 })(() => ({}));
 const SORTABLE_ID = 'file_sort';
-const PreviewComponent = React.forwardRef((props, ref) => {
+const PreviewComponent = forwardRef((props, ref) => {
     // PROPS
     const { className, onChange, value = [] } = props, rest = __rest(props, ["className", "onChange", "value"]);
-    // HOOKS
-    const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     // MEMO
-    const medias = useMemo(() => value.filter(filter), [value]);
+    const images = useMemo(() => value.filter(filteredImages), [value]);
+    const docs = useMemo(() => value.filter(filteredDocs), [value]);
+    const mediasLength = useMemo(() => images.length + docs.length, [images, docs]);
     // EFFECTS
     useEffect(() => {
         if (typeof document === undefined) {
@@ -37,15 +35,13 @@ const PreviewComponent = React.forwardRef((props, ref) => {
         if (sortable) {
             sortable.scrollLeft = sortable.scrollWidth;
         }
-    }, [medias]);
+    }, [images]);
     // HANDLERS
-    const handleSort = useCallback((medias) => {
-        onChange && onChange([...value.filter((media) => medias.findIndex((m) => m.id === media.id) === -1), ...medias]);
-    }, [onChange, value]);
-    const handleDelete = useCallback((id) => () => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
+    const handleSort = useCallback((medias) => onChange && onChange([...value.filter((media) => medias.findIndex((m) => m.id === media.id) === -1), ...medias]), [onChange, value]);
+    const handleDelete = useCallback((id) => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
     // RENDER
-    const mediaElements = useMemo(() => medias.map((media) => (_jsxs(Box, Object.assign({ className: classes.media, sx: { backgroundImage: `url(${(media === null || media === void 0 ? void 0 : media.image_thumbnail) ? media.image_thumbnail.url : media.image})` } }, { children: [_jsx(IconButton, Object.assign({ className: classes.delete, onClick: handleDelete(media.id), size: "small" }, { children: _jsx(Icon, { children: "delete" }) })), media.title && (_jsxs(Typography, Object.assign({ className: classes.title }, { children: [media.type === MEDIA_TYPE_DOCUMENT && _jsx(Icon, { children: "picture_as_pdf" }), media.title] })))] }), media.id))), [medias]);
-    return (_jsx(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest, { children: medias.length > 0 &&
-            (isMobile ? (_jsx(Box, Object.assign({ id: SORTABLE_ID }, { children: mediaElements }))) : (_jsx(ReactSortable, Object.assign({ list: medias, setList: handleSort, scroll: true, animation: 200, scrollSensitivity: 50 }, { children: mediaElements })))) })));
+    const imageElements = useMemo(() => images.map((media) => (_jsxs(Box, Object.assign({ className: classes.media, sx: { backgroundImage: `url(${(media === null || media === void 0 ? void 0 : media.image_thumbnail) ? media.image_thumbnail.url : media.image})` } }, { children: [_jsx(IconButton, Object.assign({ className: classes.delete, onClick: () => handleDelete(media.id), size: "small" }, { children: _jsx(Icon, { children: "delete" }) })), media.title && _jsx(Typography, Object.assign({ className: classes.title }, { children: media.title }))] }), media.id))), [images]);
+    const docElements = useMemo(() => docs.map((doc) => _jsx(DocComponent, { doc: doc, onDelete: handleDelete }, doc.id)), [docs]);
+    return (_jsx(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest, { children: mediasLength > 0 && (_jsxs(_Fragment, { children: [_jsx(ReactSortable, Object.assign({ list: images, setList: handleSort, scroll: true, animation: 200, scrollSensitivity: 50 }, { children: imageElements })), _jsx(ReactSortable, Object.assign({ list: docs, setList: handleSort, animation: 200, direction: "vertical", className: classes.docsWrapper }, { children: docElements }))] })) })));
 });
 export default PreviewComponent;

package/lib/esm/shared/Media/File/TriggerButton.js

@@ -1,10 +1,8 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useMemo, useState } from 'react';
-import { CircularProgress, IconButton, List, ListItem, ListItemButton, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme, } from '@mui/material';
-import Icon from '@mui/material/Icon';
+import { CircularProgress, IconButton, List, ListItem, ListItemButton, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme, Icon, styled } from '@mui/material';
 import { PREFIX } from './constants';
-import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
 import { useSCContext } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
@@ -18,7 +16,7 @@ const classes = {
     triggerDrawerRoot: `${PREFIX}-trigger-drawer-root`,
     triggerMenuRoot: `${PREFIX}-trigger-menu-root`,
     paper: `${PREFIX}-paper`,
-    item: `${PREFIX}-item`,
+    item: `${PREFIX}-item`
 };
 const Root = styled(IconButton, {
     name: PREFIX,
@@ -32,11 +30,11 @@ const MenuRoot = styled(Menu, {
     name: PREFIX,
     slot: 'TriggerMenuRoot'
 })(() => ({}));
-const PhotoUploadListItemButton = asUploadButton(forwardRef((props, ref) => (_jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*', capture: 'camera' });
-const GalleryUploadListItemButton = asUploadButton(forwardRef((props, ref) => (_jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*' });
-const DocumentUploadListItemButton = asUploadButton(forwardRef((props, ref) => (_jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'application/pdf' });
-const GalleryUploadMenuItem = asUploadButton(forwardRef((props, ref) => (_jsx(MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*' });
-const DocumentUploadMenuItem = asUploadButton(forwardRef((props, ref) => (_jsx(MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'application/pdf' });
+const PhotoUploadListItemButton = asUploadButton(forwardRef((props, ref) => _jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'image/*', capture: 'camera' });
+const GalleryUploadListItemButton = asUploadButton(forwardRef((props, ref) => _jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'image/*' });
+const DocumentUploadListItemButton = asUploadButton(forwardRef((props, ref) => _jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'application/pdf' });
+const GalleryUploadMenuItem = asUploadButton(forwardRef((props, ref) => _jsx(MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'image/*' });
+const DocumentUploadMenuItem = asUploadButton(forwardRef((props, ref) => _jsx(MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'application/pdf' });
 export default (_a) => {
     var { className, onAdd = null } = _a, rest = __rest(_a, ["className", "onAdd"]);
     // STATE
@@ -56,7 +54,20 @@ export default (_a) => {
         setAnchorEl(null);
     }, []);
     const handleFilterByMime = useCallback((file) => {
-        return file.type.startsWith('image/') || file.type === 'application/pdf';
+        if (file.type.startsWith('image/') || file.type === 'application/pdf') {
+            return true;
+        }
+        const _snackBar = enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.composer.media.file.error", defaultMessage: "ui.composer.media.file.error" }), {
+            variant: 'error',
+            anchorOrigin: { horizontal: 'center', vertical: 'top' },
+            autoHideDuration: 5000,
+            SnackbarProps: {
+                onClick: () => {
+                    closeSnackbar(_snackBar);
+                }
+            }
+        });
+        return false;
     }, []);
     const handleSuccess = useCallback((media) => {
         onAdd && onAdd(media);

package/lib/esm/shared/Media/File/asUploadButton.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentType } from "react";
-type FileInputProps = {
+declare type FileInputProps = {
     capture?: string;
     accept: string;
 };

package/lib/esm/shared/Media/File/filter.d.ts

@@ -1,3 +1,3 @@
 import { SCMediaType } from '@selfcommunity/types/src/types';
-declare const _default: (media: SCMediaType) => boolean;
-export default _default;
+export declare const filteredImages: (media: SCMediaType) => boolean;
+export declare const filteredDocs: (media: SCMediaType) => boolean;

package/lib/esm/shared/Media/File/filter.js

@@ -1,2 +1,3 @@
 import { MEDIA_TYPE_DOCUMENT, MEDIA_TYPE_IMAGE } from '../../../constants/Media';
-export default (media) => media.type === MEDIA_TYPE_IMAGE || media.type === MEDIA_TYPE_DOCUMENT;
+export const filteredImages = (media) => media.type === MEDIA_TYPE_IMAGE;
+export const filteredDocs = (media) => media.type === MEDIA_TYPE_DOCUMENT;

package/lib/esm/shared/Media/File/index.js

@@ -1,13 +1,13 @@
 import DisplayComponent from './DisplayComponent';
 import TriggerButton from './TriggerButton';
 import PreviewComponent from './PreviewComponent';
-import filter from './filter';
+import { filteredImages } from './filter';
 const File = {
     name: 'file',
     displayComponent: DisplayComponent,
     triggerButton: TriggerButton,
     layerComponent: null,
     previewComponent: PreviewComponent,
-    filter
+    filter: filteredImages
 };
 export default File;

package/lib/esm/shared/Media/Link/DisplayComponent.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { BoxProps } from '@mui/material';
-import { SCMediaType } from '@selfcommunity/types/src/types';
+import { SCMediaType } from '@selfcommunity/types';
 export interface DisplayComponentProps extends BoxProps {
     /**
      * Medias

package/lib/esm/shared/Media/Link/DisplayComponent.js

@@ -1,13 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
-import { styled } from '@mui/material/styles';
 import { MEDIA_TYPE_VIDEO } from '../../../constants/Media';
 import AutoPlayer from '../../AutoPlayer';
-import Box from '@mui/material/Box';
 import classNames from 'classnames';
 import { PREFIX } from './constants';
-import { CircularProgress } from '@mui/material';
+import { styled, CircularProgress, Box } from '@mui/material';
 import filter from './filter';
 const classes = {
     displayRoot: `${PREFIX}-display-root`,

package/lib/esm/shared/Media/Link/LayerComponent.js

@@ -2,10 +2,7 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Box, Button, DialogTitle, IconButton, Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import Icon from '@mui/material/Icon';
-import DialogContent from '@mui/material/DialogContent';
+import { Box, Button, DialogTitle, IconButton, Typography, Icon, styled, DialogContent } from '@mui/material';
 import classNames from 'classnames';
 import { PREFIX } from './constants';
 import PreviewComponent from './PreviewComponent';
@@ -30,6 +27,6 @@ const LayerComponent = React.forwardRef((props, ref) => {
     const handleSave = useCallback(() => onSave(value), [value]);
     const handleAdd = useCallback((media) => setValue([...value, media]), [value]);
     const handleChange = useCallback((medias) => setValue(medias), []);
-    return _jsxs(Root, Object.assign({ ref: ref, className: classNames(className, classes.layerRoot) }, rest, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: onClose }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.composer.media.link.layer.title", defaultMessage: "ui.composer.media.link.layer.title" }) }), _jsx(Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), _jsxs(DialogContent, Object.assign({ className: classes.content }, { children: [_jsx(UrlTextField, { id: "page", name: "page", label: _jsx(FormattedMessage, { id: "ui.composer.media.link.add.label", defaultMessage: "ui.composer.media.link.add.label" }), fullWidth: true, variant: "outlined", placeholder: "https://", onSuccess: handleAdd }), _jsx(PreviewComponent, { onChange: handleChange, value: value })] }))] }));
+    return (_jsxs(Root, Object.assign({ ref: ref, className: classNames(className, classes.layerRoot) }, rest, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: onClose }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.composer.media.link.layer.title", defaultMessage: "ui.composer.media.link.layer.title" }) }), _jsx(Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), _jsxs(DialogContent, Object.assign({ className: classes.content }, { children: [_jsx(UrlTextField, { id: "page", name: "page", label: _jsx(FormattedMessage, { id: "ui.composer.media.link.add.label", defaultMessage: "ui.composer.media.link.add.label" }), fullWidth: true, variant: "outlined", placeholder: "https://", onSuccess: handleAdd }), _jsx(PreviewComponent, { onChange: handleChange, value: value })] }))] })));
 });
 export default LayerComponent;

package/lib/esm/shared/Media/Link/PreviewComponent.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BoxProps } from '@mui/material';
-import { SCMediaType } from '@selfcommunity/types/src/index';
+import { SCMediaType } from '@selfcommunity/types';
 export interface PreviewComponentProps extends Omit<BoxProps, 'value' | 'onChange'> {
     onChange: (value: SCMediaType[]) => void;
     value: SCMediaType[];

package/lib/esm/shared/Media/Link/PreviewComponent.js

@@ -1,9 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useMemo } from 'react';
-import { Box, IconButton } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import Icon from '@mui/material/Icon';
+import { Box, IconButton, styled, Icon } from '@mui/material';
 import classNames from 'classnames';
 import { ReactSortable } from 'react-sortablejs';
 import DisplayComponent from './DisplayComponent';

package/lib/esm/shared/Media/Link/TriggerButton.js

@@ -1,9 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { IconButton } from '@mui/material';
-import Icon from '@mui/material/Icon';
+import { Icon, IconButton, styled } from '@mui/material';
 import { PREFIX } from './constants';
-import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
 const classes = {
     triggerRoot: `${PREFIX}-trigger-root`

package/lib/esm/shared/Media/Link/UrlTextField/index.d.ts

@@ -1,8 +1,5 @@
+import { BaseTextFieldProps, InputProps as StandardInputProps, FilledInputProps, OutlinedInputProps } from '@mui/material';
 import { SCMediaType } from '@selfcommunity/types';
-import { BaseTextFieldProps } from '@mui/material/TextField/TextField';
-import { InputProps as StandardInputProps } from '@mui/material/Input/Input';
-import { FilledInputProps } from '@mui/material/FilledInput';
-import { OutlinedInputProps } from '@mui/material/OutlinedInput';
 export interface BaseUrlTextFieldProps extends BaseTextFieldProps {
     /**
      * Callback fired when the media is created.
@@ -75,6 +72,6 @@ export interface OutlinedUrlTextFieldProps extends BaseUrlTextFieldProps {
      */
     InputProps?: Partial<OutlinedInputProps>;
 }
-export type UrlTextFieldProps = StandardUrlTextFieldProps | FilledUrlTextFieldProps | OutlinedUrlTextFieldProps;
+export declare type UrlTextFieldProps = StandardUrlTextFieldProps | FilledUrlTextFieldProps | OutlinedUrlTextFieldProps;
 declare const _default: (props: UrlTextFieldProps) => JSX.Element;
 export default _default;

package/lib/esm/shared/Media/Link/UrlTextField/index.js

@@ -1,19 +1,17 @@
 import { __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
-import InputAdornment from '@mui/material/InputAdornment';
-import IconButton from '@mui/material/IconButton';
-import TextField from '@mui/material/TextField';
+import { InputAdornment, IconButton, TextField, CircularProgress, Fade } from '@mui/material';
 import { Endpoints, formatHttpErrorCode, http } from '@selfcommunity/api-services';
 import { isValidUrl } from '@selfcommunity/utils';
 import { MEDIA_TYPE_URL } from '../../../../constants/Media';
 import { FormattedMessage } from 'react-intl';
-import { CircularProgress, Fade } from '@mui/material';
 const INITIAL_STATE = {
     url: '',
     urlError: null
 };
 export default (props) => {
+    var _a, _b;
     // STATE
     const [isCreating, setIsCreating] = useState(false);
     const [state, setState] = useState(Object.assign({}, INITIAL_STATE));
@@ -73,7 +71,5 @@ export default (props) => {
      * Renders url text field
      */
     return (_jsx("form", Object.assign({ method: "post", onSubmit: handleSubmit }, { children: _jsx(TextField, Object.assign({ value: url, type: "url", onChange: handleChange, onPaste: handlePaste, error: error || Boolean(urlError), helperText: helperText ||
-                (urlError && (_jsx(FormattedMessage, { id: `ui.composer.media.link.add.error.${urlError}`, defaultMessage: `ui.composer.media.link.add.error.${urlError}` }))) || _jsx(FormattedMessage, { id: "ui.composer.media.link.add.help", defaultMessage: "ui.composer.media.link.add.help" }), disabled: isCreating }, rest, { InputProps: {
-                endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(Fade, Object.assign({ in: urlError === null && url !== '' }, { children: _jsx(IconButton, Object.assign({ size: "small", disabled: isCreating, type: "submit" }, { children: isCreating ? _jsx(CircularProgress, { color: "primary", size: 20 }) : _jsx(FormattedMessage, { id: "ui.composer.media.link.add.submit", defaultMessage: "ui.composer.media.link.add.submit" }) })) })) })))
-            } })) })));
+                (urlError && (_jsx(FormattedMessage, { id: `ui.composer.media.link.add.error.${urlError}`, defaultMessage: `ui.composer.media.link.add.error.${urlError}` }))) || _jsx(FormattedMessage, { id: "ui.composer.media.link.add.help", defaultMessage: "ui.composer.media.link.add.help" }), disabled: isCreating }, rest, { InputProps: Object.assign(Object.assign({}, rest.InputProps), { endAdornment: (_jsx(_Fragment, { children: url === '' && ((_a = rest.InputProps) === null || _a === void 0 ? void 0 : _a.endAdornment) ? ((_b = rest.InputProps) === null || _b === void 0 ? void 0 : _b.endAdornment) : (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(Fade, Object.assign({ in: urlError === null && url !== '' }, { children: _jsx(IconButton, Object.assign({ size: "small", disabled: isCreating, type: "submit" }, { children: isCreating ? (_jsx(CircularProgress, { color: "primary", size: 20 })) : (_jsx(FormattedMessage, { id: "ui.composer.media.link.add.submit", defaultMessage: "ui.composer.media.link.add.submit" })) })) })) }))) })) }) })) })));
 };

package/lib/esm/shared/Media/Share/DisplayComponent.d.ts

@@ -6,10 +6,6 @@ export interface DisplayComponentProps extends BoxProps {
      * Medias
      */
     medias: SCMediaType[];
-    /**
-     * Handles on media click
-     */
-    onMediaClick?: (any: any) => void;
 }
-declare const _default: ({ className, medias, onMediaClick, ...rest }: DisplayComponentProps) => ReactElement;
+declare const _default: ({ className, medias, ...rest }: DisplayComponentProps) => ReactElement;
 export default _default;

package/lib/esm/shared/Media/Share/DisplayComponent.js

@@ -1,12 +1,11 @@
 import { __rest } from "tslib";
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
 import FeedObject from '../../../components/FeedObject';
 import { SCFeedObjectTemplateType } from '../../../types/feedObject';
 import { CacheStrategies } from '@selfcommunity/utils';
 import classNames from 'classnames';
+import { styled, Box } from '@mui/material';
 import filter from './filter';
 import { PREFIX } from './constants';
 import { MEDIA_EMBED_SC_SHARED_EVENT, MEDIA_TYPE_EVENT } from '../../../constants/Media';
@@ -20,13 +19,13 @@ const classes = {
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'DisplayRoot'
-})(({ theme }) => ({}));
+})(() => ({}));
 export default (_a) => {
-    var { className, medias = [], onMediaClick = null } = _a, rest = __rest(_a, ["className", "medias", "onMediaClick"]);
+    var { className, medias = [] } = _a, rest = __rest(_a, ["className", "medias"]);
     // MEMO
     const _medias = useMemo(() => medias.filter(filter), [medias]);
     if (_medias.length === 0) {
         return null;
     }
-    return (_jsx(Root, Object.assign({ className: classNames(className, classes.displayRoot) }, rest, { children: _medias.map((media, i) => (_jsx(Box, Object.assign({ className: classes.sharePreview, onClick: onMediaClick }, { children: media.type === MEDIA_TYPE_EVENT || (media.embed && media.embed.embed_type === MEDIA_EMBED_SC_SHARED_EVENT) ? (_jsx(Event, { event: media.embed.metadata, template: SCEventTemplateType.DETAIL, variant: "outlined", square: true, hideEventParticipants: true, hideEventPlanner: true, actions: _jsx(_Fragment, {}) })) : (_jsx(FeedObject, { feedObjectId: media.embed.metadata.id, feedObjectType: media.embed.metadata.type, variant: 'outlined', template: SCFeedObjectTemplateType.SHARE, cacheStrategy: CacheStrategies.CACHE_FIRST })) }), i))) })));
+    return (_jsx(Root, Object.assign({ className: classNames(className, classes.displayRoot) }, rest, { children: _medias.map((media, i) => (_jsx(Box, Object.assign({ className: classes.sharePreview }, { children: media.type === MEDIA_TYPE_EVENT || (media.embed && media.embed.embed_type === MEDIA_EMBED_SC_SHARED_EVENT) ? (_jsx(Event, { event: media.embed.metadata, template: SCEventTemplateType.DETAIL, variant: "outlined", square: true, hideEventParticipants: true, hideEventPlanner: true, actions: _jsx(_Fragment, {}) })) : (_jsx(FeedObject, { feedObjectId: media.embed.metadata.id, feedObjectType: media.embed.metadata.type, variant: "outlined", template: SCFeedObjectTemplateType.SHARE, cacheStrategy: CacheStrategies.CACHE_FIRST })) }), i))) })));
 };

package/lib/esm/shared/MetadataField/MetadataField.d.ts

@@ -1,6 +1,6 @@
 import { TextFieldProps } from '@mui/material';
 import { SCMetadataType } from '@selfcommunity/types';
-export type MetadataFieldProps = TextFieldProps & {
+export declare type MetadataFieldProps = TextFieldProps & {
     metadata: SCMetadataType;
 };
 declare const MetadataField: (props: MetadataFieldProps) => JSX.Element;

package/lib/esm/shared/NewChip/NewChip.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
-import { Chip } from '@mui/material';
+import { Chip, styled } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';

package/lib/esm/shared/NotificationItem/NotificationItem.js

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
-import { Box, Typography } from '@mui/material';
+import { Box, Typography, styled } from '@mui/material';
 import classNames from 'classnames';
 import Widget from '../../components/Widget';
 import { useThemeProps } from '@mui/system';

package/lib/esm/shared/PasswordTextField/index.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { IconButton, InputAdornment, TextField } from '@mui/material';
-import Icon from '@mui/material/Icon';
+import { styled, IconButton, InputAdornment, TextField, Icon } from '@mui/material';
 const PREFIX = 'SCPasswordTextField';
 const Root = styled(TextField, {
     name: PREFIX,

package/lib/esm/shared/PhoneTextField/index.js

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { TextField } from '@mui/material';
+import { styled, TextField } from '@mui/material';
 import { defineMessages, useIntl } from 'react-intl';
 import { isValidPhoneNumber } from 'libphonenumber-js';
 const messages = defineMessages({

package/lib/esm/shared/ProgressBar/index.d.ts

@@ -1,4 +1,4 @@
-import { LinearProgressProps } from '@mui/material/LinearProgress';
+import { LinearProgressProps } from '@mui/material';
 import React from 'react';
 export interface ProgressBarProps extends LinearProgressProps {
     /**

package/lib/esm/shared/ProgressBar/index.js

@@ -1,8 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import LinearProgress from '@mui/material/LinearProgress';
-import { Box, Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Box, Typography, LinearProgress, styled } from '@mui/material';
 import classNames from 'classnames';
 const PREFIX = 'SCProgressBar';
 const classes = {

package/lib/esm/shared/ScrollContainer/index.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import classNames from 'classnames';
 import { Scrollbars } from 'react-custom-scrollbars-2';
 import { AUTO_HIDE, AUTO_HIDE_TIMEOUT } from '../../constants/ScrollContainer';

package/lib/esm/shared/StickyBox/index.d.ts

@@ -32,18 +32,18 @@ import React from 'react';
 /**
  * Types/interfaces
  */
-export type UseStickyBoxProps = {
+export declare type UseStickyBoxProps = {
     offsetTop?: number;
     offsetBottom?: number;
     bottom?: boolean;
 };
-export type StickyBoxProps = UseStickyBoxProps & {
+export declare type StickyBoxProps = UseStickyBoxProps & {
     style?: React.CSSProperties;
     className?: string;
     children?: React.ReactNode;
 };
-export type useStickyBox = <T = any>(options?: UseStickyBoxProps) => React.RefCallback<T>;
-export type StickyBoxComponent = React.FunctionComponent<StickyBoxProps>;
+export declare type useStickyBox = <T = any>(options?: UseStickyBoxProps) => React.RefCallback<T>;
+export declare type StickyBoxComponent = React.FunctionComponent<StickyBoxProps>;
 /**
  * useStickyBox
  * @param offsetTop

package/lib/esm/shared/TagChip/index.d.ts

@@ -1,10 +1,8 @@
 import React from 'react';
+import { ChipClasses, Theme, ChipPropsSizeOverrides, ChipPropsVariantOverrides } from '@mui/material';
 import { SCTagType } from '@selfcommunity/types';
-import { ChipClasses } from '@mui/material/Chip/chipClasses';
 import { OverridableStringUnion } from '@mui/types';
 import { SxProps } from '@mui/system';
-import { Theme } from '@mui/material';
-import { ChipPropsSizeOverrides, ChipPropsVariantOverrides } from '@mui/material/Chip/Chip';
 export interface TagChipProps {
     className?: string;
     /**

package/lib/esm/shared/TagChip/index.js

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import Chip from '@mui/material/Chip';
+import { styled, Chip } from '@mui/material';
 import classNames from 'classnames';
-import { styled } from '@mui/material/styles';
 const PREFIX = 'SCTagChip';
 const classes = {
     ellipsis: `${PREFIX}-ellipsis`

package/lib/esm/shared/Tags/index.js

@@ -1,13 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useRef, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import { Box, Divider, Stack, Typography } from '@mui/material';
-import Grow from '@mui/material/Grow';
-import Paper from '@mui/material/Paper';
-import Popper from '@mui/material/Popper';
-import Icon from '@mui/material/Icon';
+import { Box, Divider, Stack, Typography, styled, ClickAwayListener, Grow, Paper, Popper, Icon } from '@mui/material';
 import TagChip from '../TagChip';
 const PREFIX = 'SCTags';
 const TagsPopperRoot = styled(Box, {
@@ -108,13 +102,17 @@ export default function Tags(props) {
     /**
      * Renders component
      */
-    return (_jsx(_Fragment, { children: tags.length && (_jsx(React.Fragment, { children: type === TagsComponentType.POPPER ? (_jsxs(TagsPopperRoot, Object.assign({}, rest, { children: [_jsx(Icon, Object.assign({ ref: popperRef, fontSize: "small", onClick: handleToggle, "aria-haspopup": "true" }, { children: "label" })), _jsx(TagsPopper, Object.assign({ open: open, anchorEl: popperRef.current, transition: true, placement: "bottom-start", modifiers: [
+    return (_jsx(_Fragment, { children: tags.length && tags.filter((tag) => tag.visible).length > 0 && (_jsx(React.Fragment, { children: type === TagsComponentType.POPPER ? (_jsxs(TagsPopperRoot, Object.assign({}, rest, { children: [_jsx(Icon, Object.assign({ ref: popperRef, fontSize: "small", onClick: handleToggle, "aria-haspopup": "true" }, { children: "label" })), _jsx(TagsPopper, Object.assign({ open: open, anchorEl: popperRef.current, transition: true, placement: "bottom-start", modifiers: [
                             {
                                 name: 'preventOverflow',
                                 enabled: true
                             }
                         ] }, { children: (_a) => {
                             var { TransitionProps, placement } = _a, rest = __rest(_a, ["TransitionProps", "placement"]);
-                            return (_jsx(Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: _jsx(Paper, Object.assign({ variant: 'outlined', className: classes.paper }, { children: _jsx(ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: _jsxs(_Fragment, { children: [renderTitle(), _jsx(StackList, Object.assign({ spacing: 2 }, rest, { children: tags.map((tag) => (_jsx(ItemList, { children: _jsx(TagChip, Object.assign({ tag: tag, onClick: onClickTag }, TagChipProps)) }, tag.id))) }))] }) })) })) })));
-                        } }))] }))) : (_jsxs(ListRoot, { children: [renderTitle(), _jsx(StackList, Object.assign({ spacing: 1, direction: rest.direction ? rest.direction : 'column' }, { children: tags.map((tag) => (_jsx(ItemList, { children: _jsx(TagChip, Object.assign({ tag: tag, onClick: onClickTag }, TagChipProps)) }, tag.id))) }))] })) })) }));
+                            return (_jsx(Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: _jsx(Paper, Object.assign({ variant: 'outlined', className: classes.paper }, { children: _jsx(ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: _jsxs(_Fragment, { children: [renderTitle(), _jsx(StackList, Object.assign({ spacing: 2 }, rest, { children: tags
+                                                        .filter((tag) => tag.visible)
+                                                        .map((tag) => (_jsx(ItemList, { children: _jsx(TagChip, Object.assign({ tag: tag, onClick: onClickTag }, TagChipProps)) }, tag.id))) }))] }) })) })) })));
+                        } }))] }))) : (_jsxs(ListRoot, { children: [renderTitle(), _jsx(StackList, Object.assign({ spacing: 1, direction: rest.direction ? rest.direction : 'column' }, { children: tags
+                            .filter((tag) => tag.visible)
+                            .map((tag) => (_jsx(ItemList, { children: _jsx(TagChip, Object.assign({ tag: tag, onClick: onClickTag }, TagChipProps)) }, tag.id))) }))] })) })) }));
 }

package/lib/esm/shared/UpScalingTierBadge/index.js

@@ -1,9 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 import { FormattedMessage } from 'react-intl';
-import { Chip, Tooltip } from '@mui/material';
+import { SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
+import { Chip, Tooltip, styled } from '@mui/material';
 import { useMemo } from 'react';
 import { SCCommunitySubscriptionTier } from '@selfcommunity/types';
 import classNames from 'classnames';
@@ -28,6 +28,11 @@ export default function UpScalingTierBadge(inProps) {
         name: PREFIX
     });
     const { className, desiredTier = SCCommunitySubscriptionTier.GO } = props, rest = __rest(props, ["className", "desiredTier"]);
+    const { preferences } = useSCPreferences();
+    const isEnterpriseTier = useMemo(() => preferences &&
+        SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
+        preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === SCCommunitySubscriptionTier.ENTERPRISE, [preferences]);
     const tooltipMsg = useMemo(() => {
         let _msg = _jsx(FormattedMessage, { id: "ui.upScalingTierBadge.goFeature", defaultMessage: "ui.upScalingTierBadge.goFeature" });
         switch (desiredTier) {
@@ -56,5 +61,8 @@ export default function UpScalingTierBadge(inProps) {
         }
         return _label;
     }, [desiredTier]);
+    if (desiredTier === SCCommunitySubscriptionTier.ENTERPRISE && isEnterpriseTier) {
+        return null;
+    }
     return (_jsx(Root, Object.assign({ classes: { root: classNames(className, classes.root) }, title: tooltipMsg, placement: "top" }, rest, { children: _jsx(Badge, { color: "secondary", size: "small", label: badgeLabel, className: classes.badge }) })));
 }

package/lib/esm/shared/UrlTextField/index.js

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { TextField } from '@mui/material';
+import { styled, TextField } from '@mui/material';
 import { defineMessages, useIntl } from 'react-intl';
 const messages = defineMessages({
     urlError: {

package/lib/esm/shared/UserAvatar/UserAvatar.js

@@ -1,9 +1,8 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
-import { Badge, Avatar } from '@mui/material';
+import { styled, Badge, Avatar } from '@mui/material';
 import classNames from 'classnames';
 import { SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
 const PREFERENCES = [SCPreferences.STAFF_STAFF_BADGE_LABEL, SCPreferences.STAFF_STAFF_BADGE_ICON];

package/lib/esm/shared/UserDeletedSnackBar/UserDeletedSnackBar.js

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
-import { Snackbar, Alert } from '@mui/material';
+import { styled, Snackbar, Alert } from '@mui/material';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 const PREFIX = 'SCUserDeletedSnackBar';

package/lib/esm/shared/UsernameTextField/index.d.ts

@@ -1,5 +1,5 @@
 import { TextFieldProps } from '@mui/material';
-export type UsernameTextFieldProps = {
+export declare type UsernameTextFieldProps = {
     /**
      * Allows the field to accept an email format as well
      */

package/lib/esm/shared/UsernameTextField/index.js

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { TextField } from '@mui/material';
+import { styled, TextField } from '@mui/material';
 import { defineMessages, useIntl } from 'react-intl';
 import { EMAIL_REGEX, USERNAME_REGEX } from '../../constants/Account';
 const messages = defineMessages({