@selfcommunity/react-ui 0.7.0-alpha.36 → 0.7.0-alpha.361

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

@@ -1,15 +1,14 @@
 import React from 'react';
 import { NotificationSkeleton } from '../Notification';
 import { styled } from '@mui/material/styles';
-const PREFIX = 'SCToastNotificationsSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}-skeleton-root`
 };
 const Root = styled(NotificationSkeleton, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Toast Notifications Skeleton component. Learn about the available props and the CSS API.
 
@@ -21,16 +20,15 @@ const Root = styled(NotificationSkeleton, {
 
  #### Component Name
 
- The name `SCToastNotificationsSkeleton` can be used when providing style overrides in the theme.
+ The name `SCToastNotifications-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCToastNotificationsSkeleton-root|Styles applied to the root element.|
+ |root|.SCToastNotifications-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function ToastNotificationsSkeleton() {
     return React.createElement(Root, { className: classes.root });
 }
-//# sourceMappingURL=Skeleton.js.map

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

@@ -1,10 +1,5 @@
 import { BoxProps } from '@mui/material';
 export interface ToastNotificationsProps extends BoxProps {
-    /**
-     * Props for toast message
-     * @default null
-     */
-    ToastMessageProps?: any;
     /**
      * Handle notification
      */
@@ -19,8 +14,7 @@ export interface ToastNotificationsProps extends BoxProps {
     [p: string]: any;
 }
 /**
- *
- > API documentation for the Community-JS Toast Notifications component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Toast Notifications component. Learn about the available props and the CSS API.
 
  #### Import
 
@@ -45,4 +39,3 @@ export interface ToastNotificationsProps extends BoxProps {
  * @param inProps
  */
 export default function UserToastNotifications(inProps: ToastNotificationsProps): JSX.Element;
-//# sourceMappingURL=ToastNotifications.d.ts.map

package/lib/esm/components/ToastNotifications/ToastNotifications.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box } from '@mui/material';
-import { SCNotification, useSCContext } from '@selfcommunity/react-core';
+import { SCNotification, useSCAlertMessages, useSCContext, useSCUser } from '@selfcommunity/react-core';
 import { SCNotificationTopicType, SCNotificationTypologyType } from '@selfcommunity/types';
 import PubSub from 'pubsub-js';
 import { useSnackbar } from 'notistack';
@@ -20,15 +20,13 @@ import UserBlockedNotification from '../Notification/UserBlocked';
 import Message from '../BroadcastMessages/Message';
 import { useThemeProps } from '@mui/system';
 import ContributionNotification from '../Notification/Contribution';
-const PREFIX = 'SCToastNotifications';
+import { PREFIX } from './constants';
 const Root = styled(Box, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'Root'
+})(() => ({}));
 /**
- *
- > API documentation for the Community-JS Toast Notifications component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Toast Notifications component. Learn about the available props and the CSS API.
 
  #### Import
 
@@ -58,13 +56,15 @@ export default function UserToastNotifications(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { ToastMessageProps = {}, handleNotification, disableToastNotification = false } = props;
+    const { handleNotification, disableToastNotification = false } = props;
     // CONTEXT
     const scContext = useSCContext();
+    const scUserContext = useSCUser();
     // REFS
     const notificationSubscription = useRef(null);
     // CONTEXT
     const { enqueueSnackbar } = useSnackbar();
+    const { options, setOptions } = useSCAlertMessages();
     /**
      * Render every single notification content
      * @param n
@@ -130,22 +130,25 @@ export default function UserToastNotifications(inProps) {
             (data.data.activity_type === SCNotificationTypologyType.NOTIFICATION_BANNER || SCNotification.SCNotificationMapping[data.data.activity_type]) &&
             !SCNotification.SCSilentToastNotifications.includes(data.data.activity_type) &&
             !disableToastNotification &&
-            !scContext.settings.notifications.webSocket.disableToastMessage) {
+            !scContext.settings.notifications.webSocket.disableToastMessage &&
+            scUserContext.managers.settings.get(SCNotification.NOTIFICATIONS_SETTINGS_SHOW_TOAST)) {
             /**
              * !IMPORTANT
              * - messageKey for the notification_banner is 'id', for others type 'feed_serialization_id'
              * - the enqueue message is persistent (it remains on the screen while the others replace each other) if type notification_banner
              */
             const messageKey = data.data.feed_serialization_id ? data.data.feed_serialization_id : data.data.id;
-            enqueueSnackbar(null, Object.assign({}, {
-                content: React.createElement(CustomSnackMessage, { id: messageKey, message: getContent(data.data) }),
+            enqueueSnackbar(getContent(data.data), {
                 preventDuplicate: true,
                 key: messageKey,
-                variant: 'default',
+                variant: 'notification',
                 persist: data.data.activity_type === SCNotificationTypologyType.NOTIFICATION_BANNER ? true : false,
                 anchorOrigin: { horizontal: 'left', vertical: 'bottom' },
-                action: null
-            }, ToastMessageProps));
+                action: null,
+                SnackbarProps: {
+                    id: messageKey
+                }
+            });
         }
     };
     /**
@@ -157,7 +160,9 @@ export default function UserToastNotifications(inProps) {
         return () => {
             PubSub.unsubscribe(notificationSubscription.current);
         };
-    }, []);
+    }, [scUserContext.managers.settings.all]);
+    useEffect(() => {
+        setOptions(Object.assign(Object.assign({}, options), { Components: Object.assign(Object.assign({}, options === null || options === void 0 ? void 0 : options.Components), { notification: CustomSnackMessage }) }));
+    }, [scUserContext.managers.settings.all]);
     return React.createElement(Root, null);
 }
-//# sourceMappingURL=ToastNotifications.js.map

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

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

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

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

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

@@ -2,4 +2,3 @@ import ToastNotifications, { ToastNotificationsProps } from './ToastNotification
 import ToastNotificationsSkeleton from './Skeleton';
 export default ToastNotifications;
 export { ToastNotificationsProps, ToastNotificationsSkeleton };
-//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -10,14 +10,13 @@ import { WidgetProps } from '../Widget';
 
  #### Component Name
 
- The name `SCUserSkeleton` can be used when providing style overrides in the theme.
+ The name `SCUser-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCUserSkeleton-root|Styles applied to the root element.|
+ |root|.SCUser-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function UserSkeleton(props: WidgetProps): JSX.Element;
-//# sourceMappingURL=Skeleton.d.ts.map

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

@@ -1,13 +1,16 @@
 import React from 'react';
-import { Button } from '@mui/material';
+import { Button, useTheme } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
 import BaseItem from '../../shared/BaseItem';
-const PREFIX = 'SCUserSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}-skeleton-root`
 };
-const Root = styled(BaseItem)(({ theme }) => ({}));
+const Root = styled(BaseItem, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS User Skeleton component. Learn about the available props and the CSS API.
 
@@ -19,17 +22,17 @@ const Root = styled(BaseItem)(({ theme }) => ({}));
 
  #### Component Name
 
- The name `SCUserSkeleton` can be used when providing style overrides in the theme.
+ The name `SCUser-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCUserSkeleton-root|Styles applied to the root element.|
+ |root|.SCUser-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function UserSkeleton(props) {
-    return (React.createElement(Root, Object.assign({ className: classes.root }, props, { image: React.createElement(Skeleton, { animation: "wave", variant: "circular", width: 40, height: 40 }), 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 } }), actions: React.createElement(Button, { size: "small", variant: "outlined", disabled: true },
-            React.createElement(Skeleton, { animation: "wave", height: 10, width: 50, style: { marginTop: 5, marginBottom: 5 } })) })));
+    const theme = useTheme();
+    return (React.createElement(Root, Object.assign({ className: classes.root }, props, { image: React.createElement(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), 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 } }), actions: React.createElement(Button, { size: "small", variant: "outlined", disabled: true },
+            React.createElement(Skeleton, { animation: "wave", height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } })) })));
 }
-//# sourceMappingURL=Skeleton.js.map

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

@@ -29,14 +29,9 @@ export interface UserProps extends WidgetProps {
      */
     showFollowers?: boolean;
     /**
-     *  Prop to show reaction badge on user avatar when showing feedObj reactions list
-     * @default false
-     */
-    showReaction?: boolean;
-    /**
-     * Reaction icon to show as user avatar badge if show reaction is true.
+     * Badge content to show as user avatar badge if show reaction is true.
      */
-    reaction?: any;
+    badgeContent?: any;
     /**
      * Any other properties
      */
@@ -44,6 +39,10 @@ export interface UserProps extends WidgetProps {
 }
 /**
  * > API documentation for the Community-JS User component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a user item.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/User)
 
  #### Import
 
@@ -61,10 +60,10 @@ export interface UserProps extends WidgetProps {
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCUser-root|Styles applied to the root element.|
+ |avatar|.SCUser-avatar|Styles applied to the avatar element.|
  |staffBadgeLabel|.SCUser-staff-badge-label|Styles applied to the staff badge label element.|
- |staffBadgeIcon|.SCUser-staff-badge-icon|Styles applied to the staff badge icon element.|
 
+ *
  * @param inProps
  */
 export default function User(inProps: UserProps): JSX.Element;
-//# sourceMappingURL=User.d.ts.map

package/lib/esm/components/User/User.js

@@ -1,57 +1,40 @@
-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 React, { useMemo } from 'react';
+import { __rest } from "tslib";
+import React, { useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import UserSkeleton from './Skeleton';
-import { Avatar, Badge, Button, Chip, Typography } from '@mui/material';
+import { Avatar, Badge, Button, Chip } from '@mui/material';
 import { Link, SCPreferences, SCRoutes, useSCFetchUser, useSCPreferences, useSCRouting } from '@selfcommunity/react-core';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import classNames from 'classnames';
 import ConnectionUserButton from '../ConnectionUserButton';
 import { useThemeProps } from '@mui/system';
 import BaseItemButton from '../../shared/BaseItemButton';
+import UserDeletedSnackBar from '../../shared/UserDeletedSnackBar';
+import UserAvatar from '../../shared/UserAvatar';
+import { PREFIX } from './constants';
 const messages = defineMessages({
     userFollowers: {
         id: 'ui.user.userFollowers',
         defaultMessage: 'ui.user.userFollowers'
     }
 });
-const PREFIX = 'SCUser';
 const classes = {
     root: `${PREFIX}-root`,
-    staffBadgeLabel: `${PREFIX}-staff-badge-label`,
-    staffBadgeIcon: `${PREFIX}-staff-badge-icon`
+    avatar: `${PREFIX}-avatar`,
+    staffBadgeLabel: `${PREFIX}-staff-badge-label`
 };
 const Root = styled(BaseItemButton, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    '& .MuiChip-root': {
-        height: '18px'
-    },
-    [`& .${classes.staffBadgeLabel}`]: {
-        marginLeft: theme.spacing(1),
-        borderRadius: 0,
-        fontSize: '0.5rem'
-    },
-    [`& .${classes.staffBadgeIcon}`]: {
-        top: '25%',
-        right: '5%'
-    }
-}));
+})(({ theme }) => ({}));
 const PREFERENCES = [SCPreferences.STAFF_STAFF_BADGE_LABEL, SCPreferences.STAFF_STAFF_BADGE_ICON];
 /**
  * > API documentation for the Community-JS User component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a user item.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/User)
 
  #### Import
 
@@ -69,9 +52,10 @@ const PREFERENCES = [SCPreferences.STAFF_STAFF_BADGE_LABEL, SCPreferences.STAFF_
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCUser-root|Styles applied to the root element.|
+ |avatar|.SCUser-avatar|Styles applied to the avatar element.|
  |staffBadgeLabel|.SCUser-staff-badge-label|Styles applied to the staff badge label element.|
- |staffBadgeIcon|.SCUser-staff-badge-icon|Styles applied to the staff badge icon element.|
 
+ *
  * @param inProps
  */
 export default function User(inProps) {
@@ -80,13 +64,7 @@ export default function User(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { userId = null, user = null, handleIgnoreAction, className = null, followConnectUserButtonProps = {}, showFollowers = false, elevation, showReaction = false, reaction } = props, rest = __rest(props, ["userId", "user", "handleIgnoreAction", "className", "followConnectUserButtonProps", "showFollowers", "elevation", "showReaction", "reaction"]);
-    const SmallAvatar = styled(Avatar)(({ theme }) => ({
-        width: 12,
-        height: 12,
-        backgroundColor: theme.palette.common.white,
-        border: `2px solid ${theme.palette.background.paper}`
-    }));
+    const { userId = null, user = null, handleIgnoreAction, className = null, followConnectUserButtonProps = {}, showFollowers = false, elevation, badgeContent = null } = props, rest = __rest(props, ["userId", "user", "handleIgnoreAction", "className", "followConnectUserButtonProps", "showFollowers", "elevation", "badgeContent"]);
     // STATE
     const { scUser, setSCUser } = useSCFetchUser({ id: userId, user });
     // CONTEXT
@@ -99,6 +77,7 @@ export default function User(inProps) {
         return _preferences;
     }, [scPreferences.preferences]);
     const hasBadge = scUser && scUser.community_badge;
+    const [openAlert, setOpenAlert] = useState(false);
     // INTL
     const intl = useIntl();
     /**
@@ -120,11 +99,11 @@ export default function User(inProps) {
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ elevation: elevation }, rest, { className: classNames(classes.root, className), ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUser) }, image: showReaction ? (React.createElement(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: React.createElement(SmallAvatar, { alt: reaction.label, src: reaction.image }) },
-            React.createElement(Avatar, { alt: scUser.username, src: scUser.avatar }))) : (React.createElement(Badge, { invisible: !hasBadge, classes: { badge: classes.staffBadgeIcon }, overlap: "circular", anchorOrigin: { vertical: 'top', horizontal: 'right' }, badgeContent: preferences ? (React.createElement(SmallAvatar, { alt: preferences[SCPreferences.STAFF_STAFF_BADGE_LABEL], src: preferences[SCPreferences.STAFF_STAFF_BADGE_ICON] })) : null },
-            React.createElement(Avatar, { alt: scUser.username, src: scUser.avatar }))), primary: hasBadge && preferences ? (React.createElement(Typography, { component: 'span' },
-            scUser.username,
-            " ",
-            React.createElement(Chip, { className: classes.staffBadgeLabel, size: "small", label: preferences[SCPreferences.STAFF_STAFF_BADGE_LABEL] }))) : (scUser.username), secondary: showFollowers ? `${intl.formatMessage(messages.userFollowers, { total: scUser.followers_counter })}` : scUser.description, actions: renderAuthenticatedActions() })));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Root, Object.assign({ elevation: elevation }, rest, { className: classNames(classes.root, className), ButtonBaseProps: scUser.deleted ? { onClick: () => setOpenAlert(true) } : { component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUser) }, image: badgeContent ? (React.createElement(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: badgeContent },
+                React.createElement(Avatar, { alt: scUser.username, src: scUser.avatar, className: classes.avatar }))) : (React.createElement(UserAvatar, { hide: !hasBadge },
+                React.createElement(Avatar, { alt: scUser.username, src: scUser.avatar, className: classes.avatar }))), primary: hasBadge && preferences ? (React.createElement(React.Fragment, null,
+                scUser.username,
+                React.createElement(Chip, { component: "span", className: classes.staffBadgeLabel, size: "small", label: preferences[SCPreferences.STAFF_STAFF_BADGE_LABEL] }))) : (scUser.username), secondary: showFollowers ? `${intl.formatMessage(messages.userFollowers, { total: scUser.followers_counter })}` : scUser.description, actions: renderAuthenticatedActions() })),
+        openAlert && React.createElement(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })));
 }
-//# sourceMappingURL=User.js.map

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

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

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

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

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

@@ -2,4 +2,3 @@ import User, { UserProps } from './User';
 import UserSkeleton from './Skeleton';
 export default User;
 export { UserProps, UserSkeleton };
-//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,38 @@
+import { IconButtonProps } from '@mui/material';
+import { SCUserType } from '@selfcommunity/types';
+export interface UserActionIconButtonProps extends IconButtonProps {
+    /**
+     * Id of user object
+     * @default null
+     */
+    userId?: number;
+    /**
+     * User Object
+     * @default null
+     */
+    user?: SCUserType;
+    items?: any;
+}
+/**
+ * > API documentation for the Community-JS User Action Menu component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserActionIconButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SUserActionIconButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SUserActionIconButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function UserActionIconButton(inProps: UserActionIconButtonProps): JSX.Element;

package/lib/esm/components/UserActionIconButton/UserActionIconButton.js

@@ -0,0 +1,183 @@
+import { __rest } from "tslib";
+import React, { useEffect, useMemo, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { Divider, Icon, IconButton, List, ListItem, ListItemButton, ListItemText, Menu, MenuItem, Slide, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
+import { Link, UserUtils, useSCContext, useSCFetchUser, useSCUser } from '@selfcommunity/react-core';
+import classNames from 'classnames';
+import { useThemeProps } from '@mui/system';
+import { FormattedMessage } from 'react-intl';
+import UserInfoDialog from '../UserInfoDialog';
+import ConfirmDialog from '../../shared/ConfirmDialog/ConfirmDialog';
+import { useSnackbar } from 'notistack';
+const PREFIX = 'SCUserActionIconButton';
+const classes = {
+    root: `${PREFIX}-root`,
+    drawerRoot: `${PREFIX}-drawer-root`,
+    menuRoot: `${PREFIX}-menu-root`
+};
+const Root = styled(IconButton, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
+const SwipeableDrawerRoot = styled(SwipeableDrawer, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.drawerRoot
+})(({ theme }) => ({}));
+const MenuRoot = styled(Menu, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.menuRoot
+})(({ theme }) => ({}));
+const Transition = React.forwardRef(function Transition(props, ref) {
+    return React.createElement(Slide, Object.assign({ direction: "up", ref: ref }, props));
+});
+/**
+ * > API documentation for the Community-JS User Action Menu component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserActionIconButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SUserActionIconButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SUserActionIconButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function UserActionIconButton(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className = null, userId = null, user = null, items = [] } = props, rest = __rest(props, ["className", "userId", "user", "items"]);
+    // CONTEXT
+    const scUserContext = useSCUser();
+    const scContext = useSCContext();
+    // STATE
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [infoOpen, setInfoOpen] = useState(false);
+    const [isHiddenLoading, setHiddenLoading] = useState(false);
+    const [hidden, setHidden] = useState(null);
+    const [openHideDialog, setOpenHideDialog] = useState(false);
+    // HOOKS
+    const { scUser } = useSCFetchUser({ id: userId, user });
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const { enqueueSnackbar } = useSnackbar();
+    // HANDLERS
+    const handleOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleInfoOpen = () => {
+        setInfoOpen(true);
+        setAnchorEl(null);
+    };
+    const handleInfoClose = () => {
+        setInfoOpen(false);
+    };
+    const handleHideToggle = () => {
+        setHiddenLoading(true);
+        scUserContext.managers.blockedUsers
+            .block(scUser)
+            .then((blocked) => {
+            setHidden(blocked);
+        })
+            .then(() => setHiddenLoading(false))
+            .catch(() => {
+            enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.action.notPermitted", defaultMessage: "ui.common.action.notPermitted" }), {
+                variant: 'warning',
+                autoHideDuration: 7000
+            });
+            setHiddenLoading(false);
+            handleHide();
+        });
+    };
+    const handleHide = useMemo(() => () => {
+        setOpenHideDialog((prev) => !prev);
+        handleClose();
+    }, [setOpenHideDialog, handleClose]);
+    // MEMO
+    const isMe = scUserContext.user && scUser.id === scUserContext.user.id;
+    const roles = useMemo(() => scUserContext.user && (scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user.role), [scUserContext.user]);
+    const canModerate = useMemo(() => roles && (roles.includes('admin') || roles.includes('moderator')) && !isMe, [roles, isMe]);
+    // EFFECTS
+    useEffect(() => {
+        if (anchorEl && hidden === null && scUser) {
+            setHidden(scUserContext.managers.blockedUsers.isBlocked(scUser));
+        }
+    }, [anchorEl, scUser]);
+    // RENDER
+    if (!scUserContext.user) {
+        return null;
+    }
+    const renderList = () => {
+        if (isMobile) {
+            return [
+                ...items.map((item, index) => (React.createElement(ListItem, { key: index },
+                    React.createElement(ListItemButton, { component: Link, to: item.to },
+                        React.createElement(ListItemText, { primary: item.label }))))),
+                React.createElement(ListItem, { key: "info" },
+                    React.createElement(ListItemButton, { onClick: handleInfoOpen },
+                        React.createElement(ListItemText, { primary: React.createElement(FormattedMessage, { defaultMessage: "ui.userActionIconButton.information", id: "ui.userActionIconButton.information" }) }))),
+                ...(isMe
+                    ? []
+                    : [
+                        React.createElement(Divider, { key: "divider" }),
+                        React.createElement(ListItem, { key: "hide" },
+                            React.createElement(ListItemButton, { onClick: handleHideToggle, disabled: isHiddenLoading || scUser.community_badge || (!hidden && UserUtils.isStaff(scUser)) },
+                                React.createElement(ListItemText, { primary: hidden ? (React.createElement(FormattedMessage, { defaultMessage: "ui.userActionIconButton.show", id: "ui.userActionIconButton.show" })) : (React.createElement(FormattedMessage, { defaultMessage: "ui.userActionIconButton.hide", id: "ui.userActionIconButton.hide" })) }))),
+                        ...(canModerate
+                            ? [
+                                React.createElement(Divider, { key: "divider_moderate" }),
+                                React.createElement(ListItem, { key: "moderate" },
+                                    React.createElement(ListItemButton, { component: Link, to: `${scContext.settings.portal}/platform/access?next=/moderation/user/?username=${scUser.username}` },
+                                        React.createElement(ListItemText, { primary: React.createElement(FormattedMessage, { defaultMessage: "ui.userActionIconButton.moderate", id: "ui.userActionIconButton.moderate" }) })))
+                            ]
+                            : [])
+                    ])
+            ];
+        }
+        else {
+            return [
+                ...items.map((item, index) => (React.createElement(MenuItem, { key: index, component: Link, to: item.to, onClick: handleClose }, item.label))),
+                React.createElement(MenuItem, { key: "info", onClick: handleInfoOpen },
+                    React.createElement(FormattedMessage, { defaultMessage: "ui.userActionIconButton.information", id: "ui.userActionIconButton.information" })),
+                ...(isMe
+                    ? []
+                    : [
+                        React.createElement(Divider, { key: "divider" }),
+                        React.createElement(MenuItem, { key: "hide", onClick: handleHide, disabled: isHiddenLoading || scUser.community_badge }, hidden ? (React.createElement(FormattedMessage, { defaultMessage: "ui.userActionIconButton.show", id: "ui.userActionIconButton.show" })) : (React.createElement(FormattedMessage, { defaultMessage: "ui.userActionIconButton.hide", id: "ui.userActionIconButton.hide" }))),
+                        ...(canModerate
+                            ? [
+                                React.createElement(Divider, { key: "divider_moderate" }),
+                                React.createElement(MenuItem, { key: "moderate", component: Link, to: `${scContext.settings.portal}/platform/access?next=/moderation/user/?username=${scUser.username}`, onClick: handleClose },
+                                    React.createElement(FormattedMessage, { defaultMessage: "ui.userActionIconButton.moderate", id: "ui.userActionIconButton.moderate" }))
+                            ]
+                            : [])
+                    ])
+            ];
+        }
+    };
+    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, disableSwipeToOpen: true },
+            React.createElement(List, null, renderList()))) : (React.createElement(MenuRoot, { className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose }, renderList())),
+        React.createElement(UserInfoDialog, { userId: userId, user: scUser, open: infoOpen, onClose: handleInfoClose }),
+        openHideDialog && (React.createElement(ConfirmDialog, { open: openHideDialog, isUpdating: isHiddenLoading, TransitionComponent: Transition, keepMounted: true, title: hidden ? (React.createElement(FormattedMessage, { defaultMessage: "ui.userActionIconButton.show", id: "ui.userActionIconButton.show" })) : (React.createElement(FormattedMessage, { defaultMessage: "ui.userActionIconButton.hide", id: "ui.userActionIconButton.hide" })), content: hidden ? (React.createElement(FormattedMessage, { defaultMessage: "ui.userActionIconButton.dialogShowAction", id: "ui.userActionIconButton.dialogShowAction" })) : (React.createElement(FormattedMessage, { defaultMessage: "ui.userActionIconButton.dialogHideAction", id: "ui.userActionIconButton.dialogHideAction" })), onConfirm: handleHideToggle, onClose: () => setOpenHideDialog(false) }))));
+}

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

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