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

package/lib/esm/components/PrivateMessageSettingsIconButton/PrivateMessageSettingsIconButton.js

@@ -0,0 +1,134 @@
+import { __rest } from "tslib";
+import React, { useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { SwipeableDrawer, MenuItem, ListItemIcon, IconButton, Menu, useTheme, useMediaQuery, List, ListItem } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import Icon from '@mui/material/Icon';
+import classNames from 'classnames';
+import { useThemeProps } from '@mui/system';
+import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
+import ConfirmDialog from '../../shared/ConfirmDialog/ConfirmDialog';
+import { PrivateMessageService } from '@selfcommunity/api-services';
+import PubSub from 'pubsub-js';
+const PREFIX = 'SCPrivateMessageSettingsIconButton';
+const classes = {
+    root: `${PREFIX}-root`,
+    drawerRoot: `${PREFIX}-drawer-root`,
+    menuRoot: `${PREFIX}-menu-root`,
+    paper: `${PREFIX}-paper`,
+    item: `${PREFIX}-item`
+};
+const Root = styled(IconButton, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+const SwipeableDrawerRoot = styled(SwipeableDrawer, {
+    name: PREFIX,
+    slot: 'DrawerRoot'
+})(() => ({}));
+const MenuRoot = styled(Menu, {
+    name: PREFIX,
+    slot: 'MenuRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS PrivateMessageSettingsIconButton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PrivateMessageSettingsIconButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPrivateMessageSettingsIconButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPrivateMessageSettingsIconButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function PrivateMessageSettingsIconButton(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className = null, onMenuItemDeleteClick, user, onItemDeleteConfirm, threadToDelete } = props, rest = __rest(props, ["className", "onMenuItemDeleteClick", "user", "onItemDeleteConfirm", "threadToDelete"]);
+    // STATE
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    // HOOKS
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const scRoutingContext = useSCRouting();
+    // HANDLERS
+    const handleOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleOpenDialog = () => {
+        setOpenConfirmDialog(true);
+        setAnchorEl(null);
+    };
+    const handleCloseDialog = () => {
+        setOpenConfirmDialog(false);
+        setAnchorEl(null);
+        onItemDeleteConfirm && onItemDeleteConfirm();
+    };
+    /**
+     * Handles thread deletion
+     */
+    function handleDeleteThread() {
+        PrivateMessageService.deleteAThread({ user: threadToDelete })
+            .then(() => {
+            PubSub.publish('snippetsChannelDelete', threadToDelete);
+            handleCloseDialog();
+        })
+            .catch((error) => {
+            setOpenConfirmDialog(false);
+            console.log(error);
+        });
+    }
+    /**
+     *
+     */
+    const renderList = () => {
+        if (isMobile) {
+            return [
+                user && (React.createElement(ListItem, { className: classes.item, key: "profile", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, user) },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(Icon, { fontSize: "small" }, "people_alt")),
+                    React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" }))),
+                React.createElement(ListItem, { className: classes.item, key: "delete", onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(Icon, { fontSize: "small" }, "delete")),
+                    React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" }))
+            ];
+        }
+        else {
+            return [
+                user && (React.createElement(MenuItem, { className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, user), key: "profile" },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(Icon, { fontSize: "small" }, "people_alt")),
+                    React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" }))),
+                React.createElement(MenuItem, { className: classes.item, onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick, key: "delete" },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(Icon, { fontSize: "small" }, "delete")),
+                    React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" }))
+            ];
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }),
+            React.createElement(Icon, null, "more_vert")),
+        isMobile ? (React.createElement(SwipeableDrawerRoot, { className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true },
+            React.createElement(List, null, renderList()))) : (React.createElement(MenuRoot, { className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, renderList())),
+        openConfirmDialog && (React.createElement(ConfirmDialog, { open: openConfirmDialog, title: React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.msg", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.msg" }), btnConfirm: React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.confirm", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog }))));
+}

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

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

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

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

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SCPrivateMessageSnippetType } from '@selfcommunity/types';
 export interface PrivateMessageSnippetItemProps {
     /**
@@ -11,25 +12,20 @@ export interface PrivateMessageSnippetItemProps {
      */
     message?: SCPrivateMessageSnippetType;
     /**
-     * Hides this component
-     * @default false
+     * Callback fired on item click
      */
-    autoHide?: boolean;
+    onItemClick?: () => void;
     /**
-     * Props to spread item actions
+     * Item secondary action (visible only on mobile view)
      */
-    actions?: {
-        onItemClick?: () => void;
-        onMenuClick?: () => void;
-    };
+    secondaryAction?: React.ReactNode;
     /**
      * Any other properties
      */
     [p: string]: any;
 }
 /**
- *
- > API documentation for the Community-JS PrivateMessageSnippetItem component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS PrivateMessageSnippetItem component. Learn about the available props and the CSS API.
 
  #### Import
 
@@ -51,8 +47,8 @@ export interface PrivateMessageSnippetItemProps {
  |badgeLabel|.SCPrivateMessageSnippetItem-badgeLabel|Styles applied to the badgeLabel element.|
  |time|.SCPrivateMessageSnippetItem-time|Styles applied to the time element.|
  |menuItem|.SCPrivateMessageSnippetItem-menu-item|Styles applied to the menu item element.|
+ |unread|.SCPrivateMessageSnippetItem-unread|Styles applied to snippet item if there's an unread message.|
 
  * @param inProps
  */
 export default function PrivateMessageSnippetItem(inProps: PrivateMessageSnippetItemProps): JSX.Element;
-//# sourceMappingURL=PrivateMessageSnippetItem.d.ts.map

package/lib/esm/components/PrivateMessageSnippetItem/PrivateMessageSnippetItem.js

@@ -1,43 +1,30 @@
-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;
-};
+import { __rest } from "tslib";
 import React, { useContext, useMemo } from 'react';
 import { styled } from '@mui/material/styles';
-import { Avatar, ListItemButton, ListItemAvatar, ListItemText, Typography, Chip, IconButton, useTheme, ListItem } from '@mui/material';
+import { Avatar, ListItemButton, ListItemAvatar, ListItemText, Typography, Chip, ListItem } from '@mui/material';
 import PrivateMessageSnippetItemSkeleton from './Skeleton';
 import { useIntl } from 'react-intl';
+import { SCPrivateMessageStatusType } from '@selfcommunity/types';
 import { SCUserContext, SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
-import Icon from '@mui/material/Icon';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
-import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import PrivateMessageActionMenu from '../PrivateMessageActionMenu';
-const PREFIX = 'SCPrivateMessageSnippetItem';
+import UserAvatar from '../../shared/UserAvatar';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     username: `${PREFIX}-username`,
     badgeLabel: `${PREFIX}-badge-label`,
     time: `${PREFIX}-time`,
-    menuItem: `${PREFIX}-menu-item`
+    menuItem: `${PREFIX}-menu-item`,
+    unread: `${PREFIX}-unread`
 };
 const Root = styled(ListItem, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'Root'
+})(() => ({}));
 const PREFERENCES = [SCPreferences.STAFF_STAFF_BADGE_LABEL, SCPreferences.STAFF_STAFF_BADGE_ICON];
 /**
- *
- > API documentation for the Community-JS PrivateMessageSnippetItem component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS PrivateMessageSnippetItem component. Learn about the available props and the CSS API.
 
  #### Import
 
@@ -59,17 +46,18 @@ const PREFERENCES = [SCPreferences.STAFF_STAFF_BADGE_LABEL, SCPreferences.STAFF_
  |badgeLabel|.SCPrivateMessageSnippetItem-badgeLabel|Styles applied to the badgeLabel element.|
  |time|.SCPrivateMessageSnippetItem-time|Styles applied to the time element.|
  |menuItem|.SCPrivateMessageSnippetItem-menu-item|Styles applied to the menu item element.|
+ |unread|.SCPrivateMessageSnippetItem-unread|Styles applied to snippet item if there's an unread message.|
 
  * @param inProps
  */
 export default function PrivateMessageSnippetItem(inProps) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     // PROPS
     const props = useThemeProps({
         props: inProps,
         name: PREFIX
     });
-    const { autoHide = false, message = null, className = null, actions = {} } = props, rest = __rest(props, ["autoHide", "message", "className", "actions"]);
+    const { message = null, className = null, onItemClick = null, secondaryAction = null } = props, rest = __rest(props, ["message", "className", "onItemClick", "secondaryAction"]);
     // CONTEXT
     const scUserContext = useContext(SCUserContext);
     // PREFERENCES
@@ -82,49 +70,31 @@ export default function PrivateMessageSnippetItem(inProps) {
     // INTL
     const intl = useIntl();
     // STATE
-    const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-    const isNew = message ? message.thread_status === 'new' : null;
-    const hasBadge = message === null || message === void 0 ? void 0 : message.receiver.community_badge;
-    const [anchorEl, setAnchorEl] = React.useState(null);
-    const open = Boolean(anchorEl);
-    //HANDLERS
-    const handleOpenMenu = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleMenuClose = () => {
-        setAnchorEl(null);
-    };
-    const handleMenuItemClick = () => {
-        actions.onMenuClick();
-        handleMenuClose();
+    const hasBadge = () => {
+        var _a;
+        if ((message === null || message === void 0 ? void 0 : message.receiver.id) !== ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id)) {
+            return message === null || message === void 0 ? void 0 : message.receiver.community_badge;
+        }
+        return message === null || message === void 0 ? void 0 : message.sender.community_badge;
     };
-    /**
-     *
-     */
     if (!message) {
         return React.createElement(PrivateMessageSnippetItemSkeleton, { elevation: 0 });
     }
     /**
-     * Renders root object (if not hidden by autoHide prop)
+     * Renders root object
      */
-    if (autoHide) {
-        return React.createElement(HiddenPlaceholder, null);
-    }
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { secondaryAction: !isMobile && (React.createElement(React.Fragment, null,
-            React.createElement(IconButton, { size: "small", onClick: handleOpenMenu },
-                React.createElement(Icon, null, "more_vert")),
-            React.createElement(PrivateMessageActionMenu, { anchorEl: anchorEl, open: open, onClose: handleMenuClose, onMenuItemDeleteClick: handleMenuItemClick }))), disablePadding: true }),
-        React.createElement(ListItemButton, { onClick: actions.onItemClick },
-            React.createElement(ListItemAvatar, null, ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) === message.receiver.username ? (React.createElement(Avatar, { alt: message.sender.username, src: message.sender.avatar })) : (React.createElement(Avatar, { alt: message.receiver.username, src: message.receiver.avatar }))),
+    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { secondaryAction: secondaryAction, disablePadding: true }),
+        React.createElement(ListItemButton, { onClick: onItemClick, classes: { root: classNames({ [classes.unread]: message.thread_status === SCPrivateMessageStatusType.NEW }) } },
+            React.createElement(ListItemAvatar, null,
+                React.createElement(UserAvatar, { hide: !hasBadge() },
+                    React.createElement(Avatar, { alt: ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) === message.receiver.username ? message.sender.username : message.receiver.username, src: ((_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.username) === message.receiver.username ? message.sender.avatar : message.receiver.avatar }))),
             React.createElement(ListItemText, { primary: React.createElement(React.Fragment, null,
-                    React.createElement(Typography, { component: "span", className: classes.username }, ((_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.username) === message.receiver.username ? message.sender.username : message.receiver.username),
-                    hasBadge && preferences && (React.createElement(Chip, { component: "span", className: classes.badgeLabel, size: "small", label: preferences[SCPreferences.STAFF_STAFF_BADGE_LABEL] })),
+                    React.createElement(Typography, { component: "span", className: classes.username }, ((_c = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _c === void 0 ? void 0 : _c.username) === message.receiver.username ? message.sender.username : message.receiver.username),
+                    hasBadge() && preferences && (React.createElement(Chip, { component: "span", className: classes.badgeLabel, size: "small", label: preferences[SCPreferences.STAFF_STAFF_BADGE_LABEL] })),
                     React.createElement(Typography, { color: "secondary", className: classes.time, component: "span" }, `${intl.formatDate(message.last_message_at, {
-                        weekday: 'long',
-                        day: 'numeric'
+                        day: '2-digit',
+                        month: '2-digit',
+                        year: '2-digit'
                     })}`)), secondary: React.createElement(React.Fragment, null,
-                    React.createElement(Typography, { component: "span", color: "text.secondary", dangerouslySetInnerHTML: { __html: (_c = message.headline) !== null && _c !== void 0 ? _c : message.message } }),
-                    isNew && (React.createElement(Icon, { fontSize: "small", color: "secondary" }, "fiber_manual_record"))) }))));
+                    React.createElement(Typography, { component: "span", color: "text.secondary", dangerouslySetInnerHTML: { __html: (_d = message.headline) !== null && _d !== void 0 ? _d : message.message } })) }))));
 }
-//# sourceMappingURL=PrivateMessageSnippetItem.js.map

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

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

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

@@ -1,21 +1,19 @@
 import React from 'react';
-import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
 import ListItemText from '@mui/material/ListItemText';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
-import Widget from '../Widget';
 import { useTheme } from '@mui/material';
-import Icon from '@mui/material/Icon';
-const PREFIX = 'SCPrivateMessageSnippetItemSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
     list: `${PREFIX}-list`
 };
-const Root = styled(Widget)(({ theme }) => ({
-    maxWidth: 700
-}));
+const Root = styled(ListItem, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PrivateMessageSnippetItem Skeleton component. Learn about the available props and the CSS API.
 
@@ -27,23 +25,20 @@ const Root = styled(Widget)(({ theme }) => ({
 
  #### Component Name
 
- The name `SCPrivateMessageSnippetItemSkeleton` can be used when providing style overrides in the theme.
+ The name `SCPrivateMessageSnippetItem-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPrivateMessageSnippetItemSkeleton-root|Styles applied to the root element.|
- |list|.SCPrivateMessageSnippetItemSkeleton-list|Styles applied to the list element.|
+ |root|.SCPrivateMessageSnippetItem-skeleton-root|Styles applied to the root element.|
+ |list|.SCPrivateMessageSnippetItem-list|Styles applied to the list element.|
  *
  */
 export default function PrivateMessageSnippetItemSkeleton(props) {
     const theme = useTheme();
-    const m = (React.createElement(ListItem, { secondaryAction: React.createElement(Icon, null, "more_vert") },
+    return (React.createElement(Root, Object.assign({ className: classes.root }, props, { secondaryAction: React.createElement(Skeleton, { animation: "wave", height: 30, width: 5 }) }),
         React.createElement(ListItemAvatar, null,
             React.createElement(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium })),
         React.createElement(ListItemText, { primary: React.createElement(Skeleton, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: React.createElement(Skeleton, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }) })));
-    return (React.createElement(Root, Object.assign({ className: classes.root }, props),
-        React.createElement(List, null, m)));
 }
-//# sourceMappingURL=Skeleton.js.map

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

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

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

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

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

@@ -2,4 +2,3 @@ import PrivateMessageSnippetItem, { PrivateMessageSnippetItemProps } from './Pri
 import PrivateMessageSnippetItemSkeleton from './Skeleton';
 export default PrivateMessageSnippetItem;
 export { PrivateMessageSnippetItemProps, PrivateMessageSnippetItemSkeleton };
-//# sourceMappingURL=index.d.ts.map

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

@@ -2,4 +2,3 @@ import PrivateMessageSnippetItem from './PrivateMessageSnippetItem';
 import PrivateMessageSnippetItemSkeleton from './Skeleton';
 export default PrivateMessageSnippetItem;
 export { PrivateMessageSnippetItemSkeleton };
-//# sourceMappingURL=index.js.map

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

@@ -1,5 +1,6 @@
-import { SCPrivateMessageSnippetType, SCPrivateMessageThreadType } from '@selfcommunity/types';
-export interface PrivateMessageSnippetsProps {
+import { CardProps } from '@mui/material';
+import { SCPrivateMessageSnippetType } from '@selfcommunity/types';
+export interface PrivateMessageSnippetsProps extends CardProps {
     /**
      * Snippets list
      * @default[]
@@ -15,32 +16,30 @@ export interface PrivateMessageSnippetsProps {
      * @default null
      */
     className?: string;
-    /**
-     * Hides this component
-     * @default false
-     */
-    autoHide?: boolean;
     /**
      *
      */
     snippetActions?: {
         onSnippetClick?: (msg: any) => void;
         onNewMessageClick?: () => void;
-        onMenuItemClick?: (msg: any) => void;
+        onDeleteConfirm?: (msg: any) => void;
     };
     /**
      * Any other properties
      */
     [p: string]: any;
     /**
-     * Clicked thread object
+     * thread user object
      * @default null
      */
-    threadObj?: SCPrivateMessageThreadType;
+    userObj?: any;
 }
 /**
+ * > API documentation for the Community-JS PrivateMessageSnippets component. Learn about the available props and the CSS API.
+ *
  *
- > API documentation for the Community-JS PrivateMessageSnippets component. Learn about the available props and the CSS API.
+ * This component renders the list of conversations preview between users.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Snippets)
 
  #### Import
 
@@ -67,4 +66,3 @@ export interface PrivateMessageSnippetsProps {
  * @param inProps
  */
 export default function PrivateMessageSnippets(inProps: PrivateMessageSnippetsProps): JSX.Element;
-//# sourceMappingURL=PrivateMessageSnippets.d.ts.map