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

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

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

package/lib/cjs/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/cjs/components/User/Skeleton.js

@@ -1,18 +1,19 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
-const Skeleton_1 = __importDefault(require("@mui/material/Skeleton"));
-const BaseItem_1 = __importDefault(require("../../shared/BaseItem"));
-const PREFIX = 'SCUserSkeleton';
+const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
+const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(BaseItem_1.default)(({ theme }) => ({}));
+const Root = (0, styles_1.styled)(BaseItem_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS User Skeleton component. Learn about the available props and the CSS API.
 
@@ -24,19 +25,18 @@ const Root = (0, styles_1.styled)(BaseItem_1.default)(({ 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.|
  *
  */
 function UserSkeleton(props) {
     const theme = (0, material_1.useTheme)();
     return (react_1.default.createElement(Root, Object.assign({ className: classes.root }, props, { image: react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), primary: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }), actions: react_1.default.createElement(material_1.Button, { size: "small", variant: "outlined", disabled: true },
-            react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 50, style: { marginTop: 5, marginBottom: 5 } })) })));
+            react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } })) })));
 }
 exports.default = UserSkeleton;
-//# sourceMappingURL=Skeleton.js.map

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

@@ -29,18 +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.
-     */
-    reaction?: any;
-    /**
-     * A search term used for highlighting matching results
+     * Badge content to show as user avatar badge if show reaction is true.
      */
-    search?: string;
+    badgeContent?: any;
     /**
      * Any other properties
      */
@@ -48,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
 
@@ -65,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/cjs/components/User/User.js

@@ -1,91 +1,42 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
 const styles_1 = require("@mui/material/styles");
-const Skeleton_1 = __importDefault(require("./Skeleton"));
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const react_intl_1 = require("react-intl");
-const classnames_1 = __importDefault(require("classnames"));
-const ConnectionUserButton_1 = __importDefault(require("../ConnectionUserButton"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const ConnectionUserButton_1 = tslib_1.__importDefault(require("../ConnectionUserButton"));
 const system_1 = require("@mui/system");
-const BaseItemButton_1 = __importDefault(require("../../shared/BaseItemButton"));
-const index_1 = require("../../index");
+const BaseItemButton_1 = tslib_1.__importDefault(require("../../shared/BaseItemButton"));
+const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../shared/UserDeletedSnackBar"));
+const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
+const constants_1 = require("./constants");
 const messages = (0, react_intl_1.defineMessages)({
     userFollowers: {
         id: 'ui.user.userFollowers',
         defaultMessage: 'ui.user.userFollowers'
     }
 });
-const PREFIX = 'SCUser';
 const classes = {
-    root: `${PREFIX}-root`,
-    avatar: `${PREFIX}-avatar`,
-    staffBadgeLabel: `${PREFIX}-staff-badge-label`,
-    staffBadgeIcon: `${PREFIX}-staff-badge-icon`
+    root: `${constants_1.PREFIX}-root`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    staffBadgeLabel: `${constants_1.PREFIX}-staff-badge-label`
 };
 const Root = (0, styles_1.styled)(BaseItemButton_1.default, {
-    name: PREFIX,
+    name: constants_1.PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    '& .MuiChip-root': {
-        height: '18px'
-    },
-    [`& .${classes.avatar}`]: {
-        width: theme.selfcommunity.user.avatar.sizeMedium,
-        height: theme.selfcommunity.user.avatar.sizeMedium
-    },
-    [`& .${classes.staffBadgeLabel}`]: {
-        marginLeft: theme.spacing(1),
-        borderRadius: 0,
-        fontSize: '0.5rem'
-    },
-    [`& .${classes.staffBadgeIcon}`]: {
-        top: '25%',
-        right: '5%'
-    }
-}));
+})(({ theme }) => ({}));
 const PREFERENCES = [react_core_1.SCPreferences.STAFF_STAFF_BADGE_LABEL, react_core_1.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
 
@@ -103,24 +54,19 @@ const PREFERENCES = [react_core_1.SCPreferences.STAFF_STAFF_BADGE_LABEL, react_c
  |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
  */
 function User(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
-    const { userId = null, user = null, handleIgnoreAction, className = null, followConnectUserButtonProps = {}, showFollowers = false, elevation, showReaction = false, reaction, search = '' } = props, rest = __rest(props, ["userId", "user", "handleIgnoreAction", "className", "followConnectUserButtonProps", "showFollowers", "elevation", "showReaction", "reaction", "search"]);
-    const SmallAvatar = (0, styles_1.styled)(material_1.Avatar)(({ theme }) => ({
-        width: theme.selfcommunity.user.avatar.sizeSmall,
-        height: theme.selfcommunity.user.avatar.sizeSmall,
-        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 = tslib_1.__rest(props, ["userId", "user", "handleIgnoreAction", "className", "followConnectUserButtonProps", "showFollowers", "elevation", "badgeContent"]);
     // STATE
     const { scUser, setSCUser } = (0, react_core_1.useSCFetchUser)({ id: userId, user });
     // CONTEXT
@@ -133,6 +79,7 @@ function User(inProps) {
         return _preferences;
     }, [scPreferences.preferences]);
     const hasBadge = scUser && scUser.community_badge;
+    const [openAlert, setOpenAlert] = (0, react_1.useState)(false);
     // INTL
     const intl = (0, react_intl_1.useIntl)();
     /**
@@ -154,11 +101,12 @@ function User(inProps) {
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(Root, Object.assign({ elevation: elevation }, rest, { className: (0, classnames_1.default)(classes.root, className), ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scUser) }, image: showReaction ? (react_1.default.createElement(material_1.Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: react_1.default.createElement(SmallAvatar, { alt: reaction.label, src: reaction.image }) },
-            react_1.default.createElement(material_1.Avatar, { alt: scUser.username, src: scUser.avatar, className: classes.avatar }))) : (react_1.default.createElement(material_1.Badge, { invisible: !hasBadge, classes: { badge: classes.staffBadgeIcon }, overlap: "circular", anchorOrigin: { vertical: 'top', horizontal: 'right' }, badgeContent: preferences ? (react_1.default.createElement(SmallAvatar, { alt: preferences[react_core_1.SCPreferences.STAFF_STAFF_BADGE_LABEL], src: preferences[react_core_1.SCPreferences.STAFF_STAFF_BADGE_ICON] })) : null },
-            react_1.default.createElement(material_1.Avatar, { alt: scUser.username, src: scUser.avatar, className: classes.avatar }))), primary: hasBadge && preferences ? (react_1.default.createElement(material_1.Typography, { component: 'span' },
-            search !== '' ? (0, index_1.highlight)(scUser.username, search) : scUser.username,
-            react_1.default.createElement(material_1.Chip, { component: "span", className: classes.staffBadgeLabel, size: "small", label: preferences[react_core_1.SCPreferences.STAFF_STAFF_BADGE_LABEL] }))) : search !== '' ? ((0, index_1.highlight)(scUser.username, search)) : (scUser.username), secondary: showFollowers ? `${intl.formatMessage(messages.userFollowers, { total: scUser.followers_counter })}` : scUser.description, actions: renderAuthenticatedActions() })));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Root, Object.assign({ elevation: elevation }, rest, { className: (0, classnames_1.default)(classes.root, className), ButtonBaseProps: scUser.deleted ? { onClick: () => setOpenAlert(true) } : { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scUser) }, image: badgeContent ? (react_1.default.createElement(material_1.Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: badgeContent },
+                react_1.default.createElement(material_1.Avatar, { alt: scUser.username, src: scUser.avatar, className: classes.avatar }))) : (react_1.default.createElement(UserAvatar_1.default, { hide: !hasBadge },
+                react_1.default.createElement(material_1.Avatar, { alt: scUser.username, src: scUser.avatar, className: classes.avatar }))), primary: hasBadge && preferences ? (react_1.default.createElement(react_1.default.Fragment, null,
+                scUser.username,
+                react_1.default.createElement(material_1.Chip, { component: "span", className: classes.staffBadgeLabel, size: "small", label: preferences[react_core_1.SCPreferences.STAFF_STAFF_BADGE_LABEL] }))) : (scUser.username), secondary: showFollowers ? `${intl.formatMessage(messages.userFollowers, { total: scUser.followers_counter })}` : scUser.description, actions: renderAuthenticatedActions() })),
+        openAlert && react_1.default.createElement(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })));
 }
 exports.default = User;
-//# sourceMappingURL=User.js.map

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

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

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

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

package/lib/cjs/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/cjs/components/User/index.js

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

package/lib/cjs/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/cjs/components/UserActionIconButton/UserActionIconButton.js

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const react_core_1 = require("@selfcommunity/react-core");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const system_1 = require("@mui/system");
+const react_intl_1 = require("react-intl");
+const UserInfoDialog_1 = tslib_1.__importDefault(require("../UserInfoDialog"));
+const ConfirmDialog_1 = tslib_1.__importDefault(require("../../shared/ConfirmDialog/ConfirmDialog"));
+const notistack_1 = require("notistack");
+const PREFIX = 'SCUserActionIconButton';
+const classes = {
+    root: `${PREFIX}-root`,
+    drawerRoot: `${PREFIX}-drawer-root`,
+    menuRoot: `${PREFIX}-menu-root`
+};
+const Root = (0, styles_1.styled)(material_1.IconButton, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
+const SwipeableDrawerRoot = (0, styles_1.styled)(material_1.SwipeableDrawer, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.drawerRoot
+})(({ theme }) => ({}));
+const MenuRoot = (0, styles_1.styled)(material_1.Menu, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.menuRoot
+})(({ theme }) => ({}));
+const Transition = react_1.default.forwardRef(function Transition(props, ref) {
+    return react_1.default.createElement(material_1.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
+ */
+function UserActionIconButton(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className = null, userId = null, user = null, items = [] } = props, rest = tslib_1.__rest(props, ["className", "userId", "user", "items"]);
+    // CONTEXT
+    const scUserContext = (0, react_core_1.useSCUser)();
+    const scContext = (0, react_core_1.useSCContext)();
+    // STATE
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const [infoOpen, setInfoOpen] = (0, react_1.useState)(false);
+    const [isHiddenLoading, setHiddenLoading] = (0, react_1.useState)(false);
+    const [hidden, setHidden] = (0, react_1.useState)(null);
+    const [openHideDialog, setOpenHideDialog] = (0, react_1.useState)(false);
+    // HOOKS
+    const { scUser } = (0, react_core_1.useSCFetchUser)({ id: userId, user });
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    const { enqueueSnackbar } = (0, notistack_1.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_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.common.action.notPermitted", defaultMessage: "ui.common.action.notPermitted" }), {
+                variant: 'warning',
+                autoHideDuration: 7000
+            });
+            setHiddenLoading(false);
+            handleHide();
+        });
+    };
+    const handleHide = (0, react_1.useMemo)(() => () => {
+        setOpenHideDialog((prev) => !prev);
+        handleClose();
+    }, [setOpenHideDialog, handleClose]);
+    // MEMO
+    const isMe = scUserContext.user && scUser.id === scUserContext.user.id;
+    const roles = (0, react_1.useMemo)(() => scUserContext.user && (scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user.role), [scUserContext.user]);
+    const canModerate = (0, react_1.useMemo)(() => roles && (roles.includes('admin') || roles.includes('moderator')) && !isMe, [roles, isMe]);
+    // EFFECTS
+    (0, react_1.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_1.default.createElement(material_1.ListItem, { key: index },
+                    react_1.default.createElement(material_1.ListItemButton, { component: react_core_1.Link, to: item.to },
+                        react_1.default.createElement(material_1.ListItemText, { primary: item.label }))))),
+                react_1.default.createElement(material_1.ListItem, { key: "info" },
+                    react_1.default.createElement(material_1.ListItemButton, { onClick: handleInfoOpen },
+                        react_1.default.createElement(material_1.ListItemText, { primary: react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.userActionIconButton.information", id: "ui.userActionIconButton.information" }) }))),
+                ...(isMe
+                    ? []
+                    : [
+                        react_1.default.createElement(material_1.Divider, { key: "divider" }),
+                        react_1.default.createElement(material_1.ListItem, { key: "hide" },
+                            react_1.default.createElement(material_1.ListItemButton, { onClick: handleHideToggle, disabled: isHiddenLoading || scUser.community_badge || (!hidden && react_core_1.UserUtils.isStaff(scUser)) },
+                                react_1.default.createElement(material_1.ListItemText, { primary: hidden ? (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.userActionIconButton.show", id: "ui.userActionIconButton.show" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.userActionIconButton.hide", id: "ui.userActionIconButton.hide" })) }))),
+                        ...(canModerate
+                            ? [
+                                react_1.default.createElement(material_1.Divider, { key: "divider_moderate" }),
+                                react_1.default.createElement(material_1.ListItem, { key: "moderate" },
+                                    react_1.default.createElement(material_1.ListItemButton, { component: react_core_1.Link, to: `${scContext.settings.portal}/platform/access?next=/moderation/user/?username=${scUser.username}` },
+                                        react_1.default.createElement(material_1.ListItemText, { primary: react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.userActionIconButton.moderate", id: "ui.userActionIconButton.moderate" }) })))
+                            ]
+                            : [])
+                    ])
+            ];
+        }
+        else {
+            return [
+                ...items.map((item, index) => (react_1.default.createElement(material_1.MenuItem, { key: index, component: react_core_1.Link, to: item.to, onClick: handleClose }, item.label))),
+                react_1.default.createElement(material_1.MenuItem, { key: "info", onClick: handleInfoOpen },
+                    react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.userActionIconButton.information", id: "ui.userActionIconButton.information" })),
+                ...(isMe
+                    ? []
+                    : [
+                        react_1.default.createElement(material_1.Divider, { key: "divider" }),
+                        react_1.default.createElement(material_1.MenuItem, { key: "hide", onClick: handleHide, disabled: isHiddenLoading || scUser.community_badge }, hidden ? (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.userActionIconButton.show", id: "ui.userActionIconButton.show" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.userActionIconButton.hide", id: "ui.userActionIconButton.hide" }))),
+                        ...(canModerate
+                            ? [
+                                react_1.default.createElement(material_1.Divider, { key: "divider_moderate" }),
+                                react_1.default.createElement(material_1.MenuItem, { key: "moderate", component: react_core_1.Link, to: `${scContext.settings.portal}/platform/access?next=/moderation/user/?username=${scUser.username}`, onClick: handleClose },
+                                    react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.userActionIconButton.moderate", id: "ui.userActionIconButton.moderate" }))
+                            ]
+                            : [])
+                    ])
+            ];
+        }
+    };
+    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: handleOpen }),
+            react_1.default.createElement(material_1.Icon, null, "more_vert")),
+        isMobile ? (react_1.default.createElement(SwipeableDrawerRoot, { className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, disableSwipeToOpen: true },
+            react_1.default.createElement(material_1.List, null, renderList()))) : (react_1.default.createElement(MenuRoot, { className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose }, renderList())),
+        react_1.default.createElement(UserInfoDialog_1.default, { userId: userId, user: scUser, open: infoOpen, onClose: handleInfoClose }),
+        openHideDialog && (react_1.default.createElement(ConfirmDialog_1.default, { open: openHideDialog, isUpdating: isHiddenLoading, TransitionComponent: Transition, keepMounted: true, title: hidden ? (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.userActionIconButton.show", id: "ui.userActionIconButton.show" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.userActionIconButton.hide", id: "ui.userActionIconButton.hide" })), content: hidden ? (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.userActionIconButton.dialogShowAction", id: "ui.userActionIconButton.dialogShowAction" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.userActionIconButton.dialogHideAction", id: "ui.userActionIconButton.dialogHideAction" })), onConfirm: handleHideToggle, onClose: () => setOpenHideDialog(false) }))));
+}
+exports.default = UserActionIconButton;

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const UserActionIconButton_1 = tslib_1.__importDefault(require("./UserActionIconButton"));
+exports.default = UserActionIconButton_1.default;

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

@@ -0,0 +1,22 @@
+import { WidgetProps } from '../Widget';
+/**
+ * > API documentation for the Community-JS User Connections Requests Sent Widget Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserConnectionsRequestsSentSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserConnectionsRequestsSentWidget-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserConnectionsRequestsSentWidget-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function UserConnectionsRequestsSentSkeleton(props: WidgetProps): JSX.Element;

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const CategoryTrendingUsersWidget_1 = require("../CategoryTrendingUsersWidget");
+const styles_1 = require("@mui/material/styles");
+const constants_1 = require("./constants");
+const classes = {
+    root: `${constants_1.PREFIX}-skeleton-root`
+};
+const Root = (0, styles_1.styled)(CategoryTrendingUsersWidget_1.CategoryTrendingPeopleWidgetSkeleton, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS User Connections Requests Sent Widget Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserConnectionsRequestsSentSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserConnectionsRequestsSentWidget-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserConnectionsRequestsSentWidget-skeleton-root|Styles applied to the root element.|
+ *
+ */
+function UserConnectionsRequestsSentSkeleton(props) {
+    return react_1.default.createElement(Root, Object.assign({ className: classes.root }, props));
+}
+exports.default = UserConnectionsRequestsSentSkeleton;