@selfcommunity/react-ui 0.7.0-alpha.99 → 0.7.0

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

@@ -1,26 +1,21 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const Widget_1 = __importDefault(require("../Widget"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const List_1 = __importDefault(require("@mui/material/List"));
-const ListItem_1 = __importDefault(require("@mui/material/ListItem"));
-const Skeleton_1 = __importDefault(require("@mui/material/Skeleton"));
-const ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
-const PREFIX = 'SCPrivateMessageThreadSkeleton';
+const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
+const Skeleton_1 = tslib_1.__importDefault(require("../PrivateMessageThreadItem/Skeleton"));
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    list: `${PREFIX}-list`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    list: `${constants_1.PREFIX}-list`,
+    editor: `${constants_1.PREFIX}-editor`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+const Root = (0, styles_1.styled)(material_1.Card, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PrivateMessage Thread Skeleton component. Learn about the available props and the CSS API.
 
@@ -32,23 +27,26 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
 
  #### Component Name
 
- The name `SCPrivateMessageThreadSkeleton` can be used when providing style overrides in the theme.
+ The name `SCPrivateMessageThread-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPrivateMessageThreadSkeleton-root|Styles applied to the root element.|
- |list|.SCPrivateMessageThreadSkeleton-list|Styles applied to the list element.|
+ |root|.SCPrivateMessageThread-skeleton-root|Styles applied to the root element.|
+ |list|.SCPrivateMessageThread-list|Styles applied to the list element.|
  *
  */
 function PrivateMessageThreadSkeleton(props) {
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
     return (react_1.default.createElement(Root, Object.assign({ className: classes.root }, props),
         react_1.default.createElement(material_1.CardContent, null,
-            react_1.default.createElement(List_1.default, { className: classes.list }, [...Array(6)].map((category, index) => (react_1.default.createElement(ListItem_1.default, { key: index },
-                react_1.default.createElement(ListItemText_1.default, { sx: { display: 'flex', justifyContent: index % 2 === 0 ? 'flex-start' : 'flex-end' }, primary: react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 50, width: 100, style: { borderRadius: 20 } }),
-                        react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 30 })) }))))))));
+            react_1.default.createElement(List_1.default, { className: classes.list },
+                react_1.default.createElement(material_1.ListSubheader, { sx: { display: 'flex', justifyContent: 'center' } },
+                    react_1.default.createElement(material_1.Skeleton, { animation: "wave", height: 30, width: 120, style: { borderRadius: 20 } })),
+                [...Array(isMobile ? 6 : 8)].map((item, index) => (react_1.default.createElement(Skeleton_1.default, { index: index, key: index })))),
+            react_1.default.createElement(material_1.Box, { className: classes.editor },
+                react_1.default.createElement(material_1.Skeleton, { animation: "wave", height: 55, width: '100%', variant: 'rectangular' })))));
 }
 exports.default = PrivateMessageThreadSkeleton;
-//# sourceMappingURL=Skeleton.js.map

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

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

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

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

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

@@ -2,4 +2,3 @@ import PrivateMessageThread, { PrivateMessageThreadProps } from './PrivateMessag
 import PrivateMessageThreadSkeleton from './Skeleton';
 export default PrivateMessageThread;
 export { PrivateMessageThreadProps, PrivateMessageThreadSkeleton };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,11 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PrivateMessageThreadSkeleton = void 0;
-const PrivateMessageThread_1 = __importDefault(require("./PrivateMessageThread"));
-const Skeleton_1 = __importDefault(require("./Skeleton"));
+const tslib_1 = require("tslib");
+const PrivateMessageThread_1 = tslib_1.__importDefault(require("./PrivateMessageThread"));
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 exports.PrivateMessageThreadSkeleton = Skeleton_1.default;
 exports.default = PrivateMessageThread_1.default;
-//# sourceMappingURL=index.js.map

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

@@ -10,11 +10,6 @@ export interface PrivateMessageThreadItemProps {
      * @default null
      */
     message?: SCPrivateMessageThreadType;
-    /**
-     * Hides this component
-     * @default false
-     */
-    autoHide?: boolean;
     /**
      * Mouse Events to spread to the element
      */
@@ -43,8 +38,7 @@ export interface PrivateMessageThreadItemProps {
     [p: string]: any;
 }
 /**
- *
- > API documentation for the Community-JS PrivateMessageItem component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS PrivateMessageItem component. Learn about the available props and the CSS API.
 
  #### Import
 
@@ -66,11 +60,12 @@ export interface PrivateMessageThreadItemProps {
  |img|.SCPrivateMessageThreadItem-img|Styles applied to the img element.|
  |document|.SCPrivateMessageThreadItem-document|Styles applied to the message file element.|
  |video|.SCPrivateMessageThreadItem-video|Styles applied to the message video element.|
+ |other|.SCPrivateMessageThreadItem-other|Styles applied to other media type element.|
  |messageTime|.SCPrivateMessageThreadItem-message-time|Styles applied to the thread message time element.|
  |menuItem|.SCPrivateMessageThreadItem-menu-item|Styles applied to the thread message menu item element.|
- 
- 
+ |dialogRoot|.SCPrivateMessageThreadItem-dialog-root|Styles applied to dialog root element.|
+
+
  * @param inProps
  */
 export default function PrivateMessageThreadItem(inProps: PrivateMessageThreadItemProps): JSX.Element;
-//# sourceMappingURL=PrivateMessageThreadItem.d.ts.map

package/lib/cjs/components/PrivateMessageThreadItem/PrivateMessageThreadItem.js

@@ -1,53 +1,47 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const Skeleton_1 = __importDefault(require("./Skeleton"));
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const react_intl_1 = require("react-intl");
 const types_1 = require("@selfcommunity/types");
-const Icon_1 = __importDefault(require("@mui/material/Icon"));
-const classnames_1 = __importDefault(require("classnames"));
-const AutoPlayer_1 = __importDefault(require("../../shared/AutoPlayer"));
-const react_lazyload_1 = __importDefault(require("react-lazyload"));
-const LazyLoad_1 = require("../../constants/LazyLoad");
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
-const HiddenPlaceholder_1 = __importDefault(require("../../shared/HiddenPlaceholder"));
-const PrivateMessageActionMenu_1 = __importDefault(require("../PrivateMessageActionMenu"));
-const useMediaQuery_1 = __importDefault(require("@mui/material/useMediaQuery"));
-const PrivateMessageActionDrawer_1 = __importDefault(require("../PrivateMessageActionDrawer"));
-const PREFIX = 'SCPrivateMessageThreadItem';
+const useMediaQuery_1 = tslib_1.__importDefault(require("@mui/material/useMediaQuery"));
+const PrivateMessageSettingsIconButton_1 = tslib_1.__importDefault(require("../PrivateMessageSettingsIconButton"));
+const sizeCoverter_1 = require("../../utils/sizeCoverter");
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const Lightbox_1 = tslib_1.__importDefault(require("../../shared/Lightbox"));
+const AutoPlayer_1 = tslib_1.__importDefault(require("../../shared/AutoPlayer"));
+const notistack_1 = require("notistack");
+const constants_1 = require("./constants");
+const thumbnailCoverter_1 = require("../../utils/thumbnailCoverter");
 const classes = {
-    root: `${PREFIX}-root`,
-    text: `${PREFIX}-text`,
-    img: `${PREFIX}-img`,
-    document: `${PREFIX}-document`,
-    video: `${PREFIX}-video`,
-    messageTime: `${PREFIX}-message-time`,
-    menuItem: `${PREFIX}-menu-item`
+    root: `${constants_1.PREFIX}-root`,
+    text: `${constants_1.PREFIX}-text`,
+    img: `${constants_1.PREFIX}-img`,
+    document: `${constants_1.PREFIX}-document`,
+    video: `${constants_1.PREFIX}-video`,
+    other: `${constants_1.PREFIX}-other`,
+    iconButton: `${constants_1.PREFIX}-icon-button`,
+    messageTime: `${constants_1.PREFIX}-message-time`,
+    menuItem: `${constants_1.PREFIX}-menu-item`,
+    downloadButton: `${constants_1.PREFIX}-download-button`,
+    dialogRoot: `${constants_1.PREFIX}-dialog-root`
 };
+const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'DialogRoot'
+})(() => ({}));
 const Root = (0, styles_1.styled)(material_1.ListItem, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
 /**
- *
- > API documentation for the Community-JS PrivateMessageItem component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS PrivateMessageItem component. Learn about the available props and the CSS API.
 
  #### Import
 
@@ -69,75 +63,96 @@ const Root = (0, styles_1.styled)(material_1.ListItem, {
  |img|.SCPrivateMessageThreadItem-img|Styles applied to the img element.|
  |document|.SCPrivateMessageThreadItem-document|Styles applied to the message file element.|
  |video|.SCPrivateMessageThreadItem-video|Styles applied to the message video element.|
+ |other|.SCPrivateMessageThreadItem-other|Styles applied to other media type element.|
  |messageTime|.SCPrivateMessageThreadItem-message-time|Styles applied to the thread message time element.|
  |menuItem|.SCPrivateMessageThreadItem-menu-item|Styles applied to the thread message menu item element.|
- 
- 
+ |dialogRoot|.SCPrivateMessageThreadItem-dialog-root|Styles applied to dialog root element.|
+
+
  * @param inProps
  */
 function PrivateMessageThreadItem(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
-    const { autoHide = false, message = null, className = null, mouseEvents = {}, isHovering = null, showMenuIcon = false, onMenuIconClick = null } = props, rest = __rest(props, ["autoHide", "message", "className", "mouseEvents", "isHovering", "showMenuIcon", "onMenuIconClick"]);
+    const { message = null, className = null, mouseEvents = {}, isHovering = null, showMenuIcon = false, onMenuIconClick = null } = props, rest = tslib_1.__rest(props, ["message", "className", "mouseEvents", "isHovering", "showMenuIcon", "onMenuIconClick"]);
     // INTL
     const intl = (0, react_intl_1.useIntl)();
     // STATE
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, useMediaQuery_1.default)(theme.breakpoints.down('md'));
     const hasFile = message ? message.file : null;
-    const [anchorEl, setAnchorEl] = react_1.default.useState(null);
-    const open = Boolean(anchorEl);
-    function bytesToSize(bytes) {
-        return (bytes / (1024 * 1024)).toFixed(1) + 'MB';
-    }
+    const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
+    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     const getMouseEvents = (mouseEnter, mouseLeave) => ({
         onMouseEnter: mouseEnter,
         onMouseLeave: mouseLeave,
         onTouchStart: mouseEnter,
         onTouchMove: mouseLeave
     });
-    const handleOpenMenu = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleMenuClose = () => {
-        setAnchorEl(null);
-    };
     const handleMenuItemClick = () => {
         onMenuIconClick();
-        handleMenuClose();
     };
+    const handleDownload = (file) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        try {
+            const response = yield fetch(file.url);
+            const data = yield response.blob();
+            const blob = URL.createObjectURL(data);
+            const link = document.createElement('a');
+            link.href = blob;
+            link.download = file.filename;
+            link.click();
+            URL.revokeObjectURL(blob);
+            link.remove();
+        }
+        catch (error) {
+            console.log(error);
+            enqueueSnackbar(error, {
+                variant: 'error',
+                autoHideDuration: 3000
+            });
+        }
+    });
     // RENDERING
     const renderMessageFile = (m) => {
         if (!m) {
             return null;
         }
         let section = null;
+        const defaultSection = (react_1.default.createElement(material_1.Box, { className: classes.other },
+            react_1.default.createElement(material_1.Button, { onClick: () => handleDownload(m.file), startIcon: react_1.default.createElement(Icon_1.default, null, "download") },
+                react_1.default.createElement(material_1.Typography, null, m.file.filename),
+                react_1.default.createElement(material_1.Typography, null, (0, sizeCoverter_1.bytesToSize)(m.file.filesize)))));
         if (m.file) {
             let type = m.file.mimetype;
-            let src = message.file.url;
             switch (true) {
                 case type.startsWith(types_1.SCMessageFileType.IMAGE):
                     section = (react_1.default.createElement(material_1.Box, { className: classes.img },
-                        react_1.default.createElement("img", { src: src, loading: "lazy", alt: 'img' })));
+                        react_1.default.createElement("img", { src: m.file.thumbnail, loading: "lazy", alt: 'img', onClick: () => setOpenDialog(true) })));
                     break;
                 case type.startsWith(types_1.SCMessageFileType.VIDEO):
-                    section = (react_1.default.createElement(react_lazyload_1.default, { className: classes.video, once: true, offset: LazyLoad_1.DEFAULT_PRELOAD_OFFSET_VIEWPORT },
-                        react_1.default.createElement(AutoPlayer_1.default, { url: src, width: '100%' })));
+                    if (!(0, thumbnailCoverter_1.isSupportedVideoFormat)(m.file.filename)) {
+                        section = defaultSection;
+                    }
+                    else {
+                        section = (react_1.default.createElement(material_1.Box, { className: (0, classnames_1.default)(classes.img, classes.video) },
+                            react_1.default.createElement("img", { src: m.file.thumbnail, loading: "lazy", alt: 'img' }),
+                            react_1.default.createElement(material_1.IconButton, { onClick: () => setOpenDialog(true) },
+                                react_1.default.createElement(Icon_1.default, null, "play_circle_outline"))));
+                    }
                     break;
                 case type.startsWith(types_1.SCMessageFileType.DOCUMENT):
-                    section = (react_1.default.createElement(material_1.Box, { className: classes.document },
-                        react_1.default.createElement(material_1.IconButton, { onClick: () => window.open(src, '_blank') },
-                            react_1.default.createElement(Icon_1.default, null, "download")),
-                        react_1.default.createElement(material_1.Typography, null,
-                            m.file.filename,
-                            " "),
-                        react_1.default.createElement(material_1.Typography, { ml: 1 }, bytesToSize(m.file.filesize))));
+                    section = (react_1.default.createElement(material_1.Box, { className: m.file.filename.endsWith('.pdf') ? classes.document : classes.other },
+                        m.file.filename.endsWith('.pdf') && react_1.default.createElement("img", { src: m.file.thumbnail, loading: "lazy", alt: 'img' }),
+                        react_1.default.createElement(material_1.Button, { onClick: () => handleDownload(m.file), startIcon: react_1.default.createElement(Icon_1.default, null, "download") },
+                            react_1.default.createElement(material_1.Typography, null, m.file.filename),
+                            react_1.default.createElement(material_1.Typography, null, (0, sizeCoverter_1.bytesToSize)(m.file.filesize)))));
                     break;
                 default:
-                    section = react_1.default.createElement(Icon_1.default, null, "hide_image");
+                    // section = <Icon>hide_image</Icon>;
+                    section = defaultSection;
                     break;
             }
         }
@@ -147,24 +162,22 @@ function PrivateMessageThreadItem(inProps) {
         return react_1.default.createElement(Skeleton_1.default, { elevation: 0 });
     }
     /**
-     * Renders root object (if not hidden by autoHide prop)
+     * Renders root object
      */
-    if (autoHide) {
-        return react_1.default.createElement(HiddenPlaceholder_1.default, null);
-    }
-    return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, getMouseEvents(mouseEvents.onMouseEnter, mouseEvents.onMouseLeave), rest, { secondaryAction: isHovering &&
+    return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, getMouseEvents(mouseEvents.onMouseEnter, mouseEvents.onMouseLeave), rest, { secondaryAction: (isHovering || isMobile) &&
             showMenuIcon &&
-            message.status !== 'hidden' && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(material_1.IconButton, { onClick: handleOpenMenu },
-                react_1.default.createElement(Icon_1.default, { fontSize: "small" }, "more_vert")),
-            isMobile ? (react_1.default.createElement(PrivateMessageActionDrawer_1.default, { anchor: "bottom", open: open, onClick: handleMenuClose, onOpen: handleOpenMenu, onClose: handleMenuClose, onMenuItemDeleteClick: handleMenuItemClick })) : (react_1.default.createElement(PrivateMessageActionMenu_1.default, { anchorEl: anchorEl, open: open, onClose: handleMenuClose, onMenuItemDeleteClick: handleMenuItemClick })))) }),
+            message.status !== types_1.SCPrivateMessageStatusType.HIDDEN && react_1.default.createElement(PrivateMessageSettingsIconButton_1.default, { onMenuItemDeleteClick: handleMenuItemClick }) }),
         react_1.default.createElement(react_1.default.Fragment, null,
-            hasFile ? (renderMessageFile(message)) : (react_1.default.createElement(material_1.Box, { className: classes.text },
+            hasFile && message.status !== types_1.SCPrivateMessageStatusType.HIDDEN ? (renderMessageFile(message)) : (react_1.default.createElement(material_1.Box, { className: classes.text },
                 react_1.default.createElement(material_1.Typography, { component: "span", dangerouslySetInnerHTML: { __html: message.message } }))),
             react_1.default.createElement(material_1.Typography, { className: classes.messageTime, color: "text.secondary" }, `${intl.formatDate(message.created_at, {
                 hour: 'numeric',
                 minute: 'numeric'
-            })}`))));
+            })}`)),
+        openDialog && (react_1.default.createElement(react_1.default.Fragment, null, (message === null || message === void 0 ? void 0 : message.file.mimetype.startsWith(types_1.SCMessageFileType.VIDEO)) ? (react_1.default.createElement(DialogRoot, { open: openDialog, onClose: () => setOpenDialog(false), className: classes.dialogRoot },
+            react_1.default.createElement(AutoPlayer_1.default, { url: message === null || message === void 0 ? void 0 : message.file.url, width: '100%', enableAutoplay: false }))) : (react_1.default.createElement(Lightbox_1.default, { images: [{ src: message === null || message === void 0 ? void 0 : message.file.url, key: message.file.uuid }], onClose: () => setOpenDialog(false), toolbarButtons: [
+                react_1.default.createElement(material_1.IconButton, { key: 'download', onClick: () => handleDownload(message === null || message === void 0 ? void 0 : message.file), className: classes.downloadButton },
+                    react_1.default.createElement(Icon_1.default, null, "download"))
+            ] }))))));
 }
 exports.default = PrivateMessageThreadItem;
-//# sourceMappingURL=PrivateMessageThreadItem.js.map

package/lib/cjs/components/PrivateMessageThreadItem/Skeleton.d.ts

@@ -9,15 +9,14 @@
 
  #### Component Name
 
- The name `SCPrivateMessageThreadItemSkeleton` can be used when providing style overrides in the theme.
+ The name `SCPrivateMessageThreadItem-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPrivateMessageThreadItemSkeleton-root|Styles applied to the root element.|
- |list|.SCPrivateMessageThreadItemSkeleton-list|Styles applied to the list element.|
+ |root|.SCPrivateMessageThreadItem-skeleton-root|Styles applied to the root element.|
+ |list|.SCPrivateMessageThreadItem-list|Styles applied to the list element.|
  *
  */
 export default function PrivateMessageThreadItemSkeleton(props: any): JSX.Element;
-//# sourceMappingURL=Skeleton.d.ts.map

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

@@ -1,25 +1,21 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const List_1 = __importDefault(require("@mui/material/List"));
-const ListItem_1 = __importDefault(require("@mui/material/ListItem"));
-const ListItemAvatar_1 = __importDefault(require("@mui/material/ListItemAvatar"));
-const ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const ListItem_1 = tslib_1.__importDefault(require("@mui/material/ListItem"));
+const ListItemText_1 = tslib_1.__importDefault(require("@mui/material/ListItemText"));
 const styles_1 = require("@mui/material/styles");
-const Skeleton_1 = __importDefault(require("@mui/material/Skeleton"));
-const Widget_1 = __importDefault(require("../Widget"));
+const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const material_1 = require("@mui/material");
-const PREFIX = 'SCPrivateMessageThreadItemSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    list: `${PREFIX}-list`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    list: `${constants_1.PREFIX}-list`
 };
-const Root = (0, styles_1.styled)(Widget_1.default)(({ theme }) => ({
-    maxWidth: 700
-}));
+const Root = (0, styles_1.styled)(ListItem_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PrivateMessageThreadItem Skeleton component. Learn about the available props and the CSS API.
 
@@ -31,24 +27,20 @@ const Root = (0, styles_1.styled)(Widget_1.default)(({ theme }) => ({
 
  #### Component Name
 
- The name `SCPrivateMessageThreadItemSkeleton` can be used when providing style overrides in the theme.
+ The name `SCPrivateMessageThreadItem-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPrivateMessageThreadItemSkeleton-root|Styles applied to the root element.|
- |list|.SCPrivateMessageThreadItemSkeleton-list|Styles applied to the list element.|
+ |root|.SCPrivateMessageThreadItem-skeleton-root|Styles applied to the root element.|
+ |list|.SCPrivateMessageThreadItem-list|Styles applied to the list element.|
  *
  */
 function PrivateMessageThreadItemSkeleton(props) {
     const theme = (0, material_1.useTheme)();
-    const m = (react_1.default.createElement(ListItem_1.default, null,
-        react_1.default.createElement(ListItemAvatar_1.default, null,
-            react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium })),
-        react_1.default.createElement(ListItemText_1.default, { primary: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }) })));
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     return (react_1.default.createElement(Root, Object.assign({ className: classes.root }, props),
-        react_1.default.createElement(List_1.default, null, m)));
+        react_1.default.createElement(ListItemText_1.default, { sx: { display: 'flex', justifyContent: props.index % 2 === 0 ? 'flex-start' : 'flex-end' }, primary: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 100, width: isMobile ? 200 : 300, style: { borderRadius: theme.shape.borderRadius } }) })));
 }
 exports.default = PrivateMessageThreadItemSkeleton;
-//# sourceMappingURL=Skeleton.js.map

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

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

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

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

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

@@ -2,4 +2,3 @@ import PrivateMessageThreadItem, { PrivateMessageThreadItemProps } from './Priva
 import PrivateMessageThreadItemSkeleton from './Skeleton';
 export default PrivateMessageThreadItem;
 export { PrivateMessageThreadItemProps, PrivateMessageThreadItemSkeleton };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,11 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PrivateMessageThreadItemSkeleton = void 0;
-const PrivateMessageThreadItem_1 = __importDefault(require("./PrivateMessageThreadItem"));
-const Skeleton_1 = __importDefault(require("./Skeleton"));
+const tslib_1 = require("tslib");
+const PrivateMessageThreadItem_1 = tslib_1.__importDefault(require("./PrivateMessageThreadItem"));
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 exports.PrivateMessageThreadItemSkeleton = Skeleton_1.default;
 exports.default = PrivateMessageThreadItem_1.default;
-//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,85 @@
+import { FeedObjectProps } from '../FeedObject';
+import { SCFeedObjectTemplateType } from '../../types/feedObject';
+import { BaseDialogProps } from '../../shared/BaseDialog';
+import { WidgetProps } from '../Widget';
+import { CacheStrategies } from '@selfcommunity/utils';
+import { SCContributionType, SCFeedObjectType } from '@selfcommunity/types';
+import { VirtualScrollerItemProps } from '../../types/virtualScroller';
+export interface RelatedFeedObjectWidgetProps extends VirtualScrollerItemProps, WidgetProps {
+    /**
+     * Type of  feed object
+     * @default 'discussion'
+     */
+    feedObjectType?: Exclude<SCContributionType, SCContributionType.COMMENT>;
+    /**
+     * Feed Object
+     * @default null
+     */
+    feedObject?: SCFeedObjectType;
+    /**
+     * Feed Object template type
+     * @default 'snippet'
+     */
+    template?: SCFeedObjectTemplateType;
+    /**
+     * Props to spread to single feed object
+     * @default empty object
+     */
+    FeedObjectProps?: FeedObjectProps;
+    /**
+     * Hides this component
+     * @default false
+     */
+    autoHide?: boolean;
+    /**
+     * Limit the number of categories to show
+     * @default false
+     */
+    limit?: number;
+    /**
+     * Caching strategies
+     * @default CacheStrategies.CACHE_FIRST
+     */
+    cacheStrategy?: CacheStrategies;
+    /**
+     * Props to spread to followers users dialog
+     * @default {}
+     */
+    DialogProps?: BaseDialogProps;
+    /**
+     * Other props
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Related FeedObjects component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a list of related feed objects (posts, discussions or statuses).
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/RelatedFeedObjects)
+
+ #### Import
+
+ ```jsx
+ import {RelatedFeedObjectsWidget} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCRelatedFeedObjectsWidget` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCRelatedFeedObjectsWidget-root|Styles applied to the root element.|
+ |title|.SCRelatedFeedObjectsWidget-title|Styles applied to the title element.|
+ |noResults|.SCRelatedFeedObjectsWidget-no-results|Styles applied to no results section.|
+ |showMore|.SCRelatedFeedObjectsWidget-show-more|Styles applied to show more button element.|
+ |dialogRoot|.SCRelatedFeedObjectsWidget-dialog-root|Styles applied to the dialog root element.|
+ |endMessage|.SCRelatedFeedObjectsWidget-end-message|Styles applied to the end message element.|
+
+ *
+ * @param inProps
+ */
+export default function RelatedFeedObjectWidget(inProps: RelatedFeedObjectWidgetProps): JSX.Element;