@selfcommunity/react-ui 0.7.0-alpha.364 → 0.7.0-alpha.366

package/lib/cjs/components/BottomNavigation/BottomNavigation.js

@@ -70,7 +70,7 @@ function BottomNavigation(inProps) {
             react_1.default.createElement(material_1.BottomNavigationAction, { key: "home", className: classes.action, component: react_core_1.Link, to: scUserContext.user ? scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: react_1.default.createElement(material_1.Icon, null, "home") }),
             (scUserContext.user || preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value) &&
                 preferences[react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "explore", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Icon, null, "explore") })) : null,
-            react_1.default.createElement(material_1.BottomNavigationAction, { key: "composer", className: (0, classnames_1.default)(classes.composer, classes.action), component: ComposerIconButton_1.default }),
+            react_1.default.createElement(material_1.BottomNavigationAction, { key: "composer", className: (0, classnames_1.default)(classes.composer, classes.action), component: ComposerIconButton_1.default, disableRipple: true }),
             scUserContext.user ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "notifications", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
                     react_1.default.createElement(material_1.Icon, null, "notifications_active")) })) : null,
             privateMessagingEnabled && scUserContext.user ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "messages", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Badge, { badgeContent: 0, color: "secondary" },

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

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import React from 'react';
 import { IconButtonProps } from '@mui/material';
 import { ComposerProps } from '../Composer';
 export interface ComposerIconButtonProps extends IconButtonProps {
@@ -7,10 +7,6 @@ export interface ComposerIconButtonProps extends IconButtonProps {
      * @default null
      */
     ComposerProps?: ComposerProps;
-    /**
-     * Other props
-     */
-    items?: any;
 }
 /**
  * > API documentation for the Community-JS Composer Icon Button component. Learn about the available props and the CSS API.
@@ -34,4 +30,5 @@ export interface ComposerIconButtonProps extends IconButtonProps {
 
  * @param inProps
  */
-export default function ComposerIconButton(inProps: ComposerIconButtonProps): ReactElement;
+declare const _default: React.ForwardRefExoticComponent<Pick<ComposerIconButtonProps, "form" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "sx" | "name" | "classes" | "value" | "type" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "ComposerProps"> & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/lib/cjs/components/ComposerIconButton/ComposerIconButton.js

@@ -41,7 +41,7 @@ const Root = (0, styles_1.styled)(material_1.IconButton, {
 
  * @param inProps
  */
-function ComposerIconButton(inProps) {
+exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps, ref) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -86,8 +86,7 @@ function ComposerIconButton(inProps) {
         });
     }, []);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleClick }),
+        react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleClick, ref: ref }),
             react_1.default.createElement(material_1.Icon, null, "add_circle_outline")),
         react_1.default.createElement(Composer_1.default, Object.assign({ open: open, fullWidth: true, onClose: handleClose, onSuccess: handleSuccess }, ComposerProps))));
-}
-exports.default = ComposerIconButton;
+});

package/lib/cjs/components/PrivateMessageSettingsIconButton/PrivateMessageSettingsIconButton.js

@@ -22,19 +22,16 @@ const classes = {
 };
 const Root = (0, styles_1.styled)(material_1.IconButton, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'Root'
+})(() => ({}));
 const SwipeableDrawerRoot = (0, styles_1.styled)(material_1.SwipeableDrawer, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.drawerRoot
-})(({ theme }) => ({}));
+    slot: 'DrawerRoot'
+})(() => ({}));
 const MenuRoot = (0, styles_1.styled)(material_1.Menu, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.menuRoot
-})(({ theme }) => ({}));
+    slot: 'MenuRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PrivateMessageSettingsIconButton component. Learn about the available props and the CSS API.
 

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

@@ -10,6 +10,7 @@ const types_1 = require("@selfcommunity/types");
 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 react_core_1 = require("@selfcommunity/react-core");
 const useMediaQuery_1 = tslib_1.__importDefault(require("@mui/material/useMediaQuery"));
 const PrivateMessageSettingsIconButton_1 = tslib_1.__importDefault(require("../PrivateMessageSettingsIconButton"));
 const sizeCoverter_1 = require("../../utils/sizeCoverter");
@@ -86,6 +87,12 @@ function PrivateMessageThreadItem(inProps) {
     const hasFile = message ? message.file : null;
     const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    const messageReceiver = (item, loggedUserId) => {
+        var _a;
+        return ((_a = item === null || item === void 0 ? void 0 : item.receiver) === null || _a === void 0 ? void 0 : _a.id) !== loggedUserId ? item === null || item === void 0 ? void 0 : item.receiver : item === null || item === void 0 ? void 0 : item.sender;
+    };
     const getMouseEvents = (mouseEnter, mouseLeave) => ({
         onMouseEnter: mouseEnter,
         onMouseLeave: mouseLeave,
@@ -122,8 +129,7 @@ function PrivateMessageThreadItem(inProps) {
         }
         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) },
-                react_1.default.createElement(Icon_1.default, null, "download"),
+            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) {
@@ -147,8 +153,7 @@ function PrivateMessageThreadItem(inProps) {
                 case type.startsWith(types_1.SCMessageFileType.DOCUMENT):
                     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) },
-                            react_1.default.createElement(Icon_1.default, null, "download"),
+                        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;
@@ -168,7 +173,7 @@ function PrivateMessageThreadItem(inProps) {
      */
     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 !== types_1.SCPrivateMessageStatusType.HIDDEN && react_1.default.createElement(PrivateMessageSettingsIconButton_1.default, { onMenuItemDeleteClick: handleMenuItemClick }) }),
+            message.status !== types_1.SCPrivateMessageStatusType.HIDDEN && (react_1.default.createElement(PrivateMessageSettingsIconButton_1.default, { onMenuItemDeleteClick: handleMenuItemClick, user: messageReceiver(message, authUserId) })) }),
         react_1.default.createElement(react_1.default.Fragment, null,
             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 } }))),

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

@@ -17,6 +17,8 @@
  |---|---|---|
  |root|.SCUserProfileHeader-skeleton-root|Styles applied to the root element.|
  |avatar|.SCUserProfileHeader-avatar|Styles applied to the avatar element.|
+ |actions|.SCUserProfileHeader-actions|Styles applied to the actions section.|
+ |section|.SCUserProfileHeader-section|Styles applied to the info section.|
  |username|.SCUserProfileHeader-username|Styles applied to the username element.|
  *
  */

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

@@ -9,6 +9,8 @@ const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
     avatar: `${constants_1.PREFIX}-avatar`,
+    actions: `${constants_1.PREFIX}-actions`,
+    section: `${constants_1.PREFIX}-section`,
     username: `${constants_1.PREFIX}-username`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
@@ -34,6 +36,8 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  |---|---|---|
  |root|.SCUserProfileHeader-skeleton-root|Styles applied to the root element.|
  |avatar|.SCUserProfileHeader-avatar|Styles applied to the avatar element.|
+ |actions|.SCUserProfileHeader-actions|Styles applied to the actions section.|
+ |section|.SCUserProfileHeader-section|Styles applied to the info section.|
  |username|.SCUserProfileHeader-username|Styles applied to the username element.|
  *
  */
@@ -43,7 +47,13 @@ function UserProfileHeaderSkeleton() {
         react_1.default.createElement(Skeleton_1.default, { sx: { height: 350 }, animation: "wave", variant: "rectangular" }),
         react_1.default.createElement(material_1.Box, { className: classes.avatar },
             react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeXLarge, height: theme.selfcommunity.user.avatar.sizeXLarge })),
-        react_1.default.createElement(material_1.Typography, { variant: "h5", className: classes.username },
-            react_1.default.createElement(Skeleton_1.default, { animation: "wave", sx: { height: 20, width: 100, margin: '0 auto' } }))));
+        react_1.default.createElement(material_1.Box, { className: classes.section },
+            react_1.default.createElement(material_1.Typography, { variant: "h5", className: classes.username },
+                react_1.default.createElement(Skeleton_1.default, { animation: "wave", sx: { height: 30, width: 100, margin: '0 auto' } })),
+            react_1.default.createElement(material_1.Stack, { direction: "row", className: classes.actions },
+                react_1.default.createElement(material_1.Button, { variant: "contained", disabled: true },
+                    react_1.default.createElement(Skeleton_1.default, { animation: "wave", sx: { height: 20, width: 60 } })),
+                react_1.default.createElement(material_1.IconButton, { disabled: true },
+                    react_1.default.createElement(material_1.Icon, null, "more_vert"))))));
 }
 exports.default = UserProfileHeaderSkeleton;

package/lib/esm/components/BottomNavigation/BottomNavigation.js

@@ -68,7 +68,7 @@ export default function BottomNavigation(inProps) {
             React.createElement(BottomNavigationAction, { key: "home", className: classes.action, component: Link, to: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: React.createElement(Icon, null, "home") }),
             (scUserContext.user || preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value) &&
                 preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value ? (React.createElement(BottomNavigationAction, { key: "explore", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: React.createElement(Icon, null, "explore") })) : null,
-            React.createElement(BottomNavigationAction, { key: "composer", className: classNames(classes.composer, classes.action), component: ComposerIconButton }),
+            React.createElement(BottomNavigationAction, { key: "composer", className: classNames(classes.composer, classes.action), component: ComposerIconButton, disableRipple: true }),
             scUserContext.user ? (React.createElement(BottomNavigationAction, { key: "notifications", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: React.createElement(Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
                     React.createElement(Icon, null, "notifications_active")) })) : null,
             privateMessagingEnabled && scUserContext.user ? (React.createElement(BottomNavigationAction, { key: "messages", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), icon: React.createElement(Badge, { badgeContent: 0, color: "secondary" },

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

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import React from 'react';
 import { IconButtonProps } from '@mui/material';
 import { ComposerProps } from '../Composer';
 export interface ComposerIconButtonProps extends IconButtonProps {
@@ -7,10 +7,6 @@ export interface ComposerIconButtonProps extends IconButtonProps {
      * @default null
      */
     ComposerProps?: ComposerProps;
-    /**
-     * Other props
-     */
-    items?: any;
 }
 /**
  * > API documentation for the Community-JS Composer Icon Button component. Learn about the available props and the CSS API.
@@ -34,4 +30,5 @@ export interface ComposerIconButtonProps extends IconButtonProps {
 
  * @param inProps
  */
-export default function ComposerIconButton(inProps: ComposerIconButtonProps): ReactElement;
+declare const _default: React.ForwardRefExoticComponent<Pick<ComposerIconButtonProps, "form" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "sx" | "name" | "classes" | "value" | "type" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "ComposerProps"> & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/lib/esm/components/ComposerIconButton/ComposerIconButton.js

@@ -39,7 +39,7 @@ const Root = styled(IconButton, {
 
  * @param inProps
  */
-export default function ComposerIconButton(inProps) {
+export default React.forwardRef(function ComposerIconButton(inProps, ref) {
     // PROPS
     const props = useThemeProps({
         props: inProps,
@@ -84,7 +84,7 @@ export default function ComposerIconButton(inProps) {
         });
     }, []);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleClick }),
+        React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleClick, ref: ref }),
             React.createElement(Icon, null, "add_circle_outline")),
         React.createElement(Composer, Object.assign({ open: open, fullWidth: true, onClose: handleClose, onSuccess: handleSuccess }, ComposerProps))));
-}
+});

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

@@ -20,19 +20,16 @@ const classes = {
 };
 const Root = styled(IconButton, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'Root'
+})(() => ({}));
 const SwipeableDrawerRoot = styled(SwipeableDrawer, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.drawerRoot
-})(({ theme }) => ({}));
+    slot: 'DrawerRoot'
+})(() => ({}));
 const MenuRoot = styled(Menu, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.menuRoot
-})(({ theme }) => ({}));
+    slot: 'MenuRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PrivateMessageSettingsIconButton component. Learn about the available props and the CSS API.
 

package/lib/esm/components/PrivateMessageThreadItem/PrivateMessageThreadItem.js

@@ -1,5 +1,5 @@
 import { __awaiter, __rest } from "tslib";
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { ListItem, Typography, IconButton, Box, useTheme, Button } from '@mui/material';
 import PrivateMessageThreadItemSkeleton from './Skeleton';
@@ -8,6 +8,7 @@ import { SCMessageFileType, SCPrivateMessageStatusType } from '@selfcommunity/ty
 import Icon from '@mui/material/Icon';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
+import { SCUserContext } from '@selfcommunity/react-core';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import PrivateMessageSettingsIconButton from '../PrivateMessageSettingsIconButton';
 import { bytesToSize } from '../../utils/sizeCoverter';
@@ -84,6 +85,12 @@ export default function PrivateMessageThreadItem(inProps) {
     const hasFile = message ? message.file : null;
     const [openDialog, setOpenDialog] = useState(false);
     const { enqueueSnackbar } = useSnackbar();
+    const scUserContext = useContext(SCUserContext);
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    const messageReceiver = (item, loggedUserId) => {
+        var _a;
+        return ((_a = item === null || item === void 0 ? void 0 : item.receiver) === null || _a === void 0 ? void 0 : _a.id) !== loggedUserId ? item === null || item === void 0 ? void 0 : item.receiver : item === null || item === void 0 ? void 0 : item.sender;
+    };
     const getMouseEvents = (mouseEnter, mouseLeave) => ({
         onMouseEnter: mouseEnter,
         onMouseLeave: mouseLeave,
@@ -120,8 +127,7 @@ export default function PrivateMessageThreadItem(inProps) {
         }
         let section = null;
         const defaultSection = (React.createElement(Box, { className: classes.other },
-            React.createElement(Button, { onClick: () => handleDownload(m.file) },
-                React.createElement(Icon, null, "download"),
+            React.createElement(Button, { onClick: () => handleDownload(m.file), startIcon: React.createElement(Icon, null, "download") },
                 React.createElement(Typography, null, m.file.filename),
                 React.createElement(Typography, null, bytesToSize(m.file.filesize)))));
         if (m.file) {
@@ -145,8 +151,7 @@ export default function PrivateMessageThreadItem(inProps) {
                 case type.startsWith(SCMessageFileType.DOCUMENT):
                     section = (React.createElement(Box, { className: m.file.filename.endsWith('.pdf') ? classes.document : classes.other },
                         m.file.filename.endsWith('.pdf') && React.createElement("img", { src: m.file.thumbnail, loading: "lazy", alt: 'img' }),
-                        React.createElement(Button, { onClick: () => handleDownload(m.file) },
-                            React.createElement(Icon, null, "download"),
+                        React.createElement(Button, { onClick: () => handleDownload(m.file), startIcon: React.createElement(Icon, null, "download") },
                             React.createElement(Typography, null, m.file.filename),
                             React.createElement(Typography, null, bytesToSize(m.file.filesize)))));
                     break;
@@ -166,7 +171,7 @@ export default function PrivateMessageThreadItem(inProps) {
      */
     return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, getMouseEvents(mouseEvents.onMouseEnter, mouseEvents.onMouseLeave), rest, { secondaryAction: (isHovering || isMobile) &&
             showMenuIcon &&
-            message.status !== SCPrivateMessageStatusType.HIDDEN && React.createElement(PrivateMessageSettingsIconButton, { onMenuItemDeleteClick: handleMenuItemClick }) }),
+            message.status !== SCPrivateMessageStatusType.HIDDEN && (React.createElement(PrivateMessageSettingsIconButton, { onMenuItemDeleteClick: handleMenuItemClick, user: messageReceiver(message, authUserId) })) }),
         React.createElement(React.Fragment, null,
             hasFile && message.status !== SCPrivateMessageStatusType.HIDDEN ? (renderMessageFile(message)) : (React.createElement(Box, { className: classes.text },
                 React.createElement(Typography, { component: "span", dangerouslySetInnerHTML: { __html: message.message } }))),

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

@@ -17,6 +17,8 @@
  |---|---|---|
  |root|.SCUserProfileHeader-skeleton-root|Styles applied to the root element.|
  |avatar|.SCUserProfileHeader-avatar|Styles applied to the avatar element.|
+ |actions|.SCUserProfileHeader-actions|Styles applied to the actions section.|
+ |section|.SCUserProfileHeader-section|Styles applied to the info section.|
  |username|.SCUserProfileHeader-username|Styles applied to the username element.|
  *
  */

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

@@ -1,11 +1,13 @@
 import React from 'react';
-import { Box, Typography, useTheme } from '@mui/material';
+import { Box, Button, Icon, IconButton, Stack, Typography, useTheme } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
 import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-skeleton-root`,
     avatar: `${PREFIX}-avatar`,
+    actions: `${PREFIX}-actions`,
+    section: `${PREFIX}-section`,
     username: `${PREFIX}-username`
 };
 const Root = styled(Box, {
@@ -31,6 +33,8 @@ const Root = styled(Box, {
  |---|---|---|
  |root|.SCUserProfileHeader-skeleton-root|Styles applied to the root element.|
  |avatar|.SCUserProfileHeader-avatar|Styles applied to the avatar element.|
+ |actions|.SCUserProfileHeader-actions|Styles applied to the actions section.|
+ |section|.SCUserProfileHeader-section|Styles applied to the info section.|
  |username|.SCUserProfileHeader-username|Styles applied to the username element.|
  *
  */
@@ -40,7 +44,13 @@ function UserProfileHeaderSkeleton() {
         React.createElement(Skeleton, { sx: { height: 350 }, animation: "wave", variant: "rectangular" }),
         React.createElement(Box, { className: classes.avatar },
             React.createElement(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeXLarge, height: theme.selfcommunity.user.avatar.sizeXLarge })),
-        React.createElement(Typography, { variant: "h5", className: classes.username },
-            React.createElement(Skeleton, { animation: "wave", sx: { height: 20, width: 100, margin: '0 auto' } }))));
+        React.createElement(Box, { className: classes.section },
+            React.createElement(Typography, { variant: "h5", className: classes.username },
+                React.createElement(Skeleton, { animation: "wave", sx: { height: 30, width: 100, margin: '0 auto' } })),
+            React.createElement(Stack, { direction: "row", className: classes.actions },
+                React.createElement(Button, { variant: "contained", disabled: true },
+                    React.createElement(Skeleton, { animation: "wave", sx: { height: 20, width: 60 } })),
+                React.createElement(IconButton, { disabled: true },
+                    React.createElement(Icon, null, "more_vert"))))));
 }
 export default UserProfileHeaderSkeleton;