@selfcommunity/react-ui 0.11.0-alpha.0 → 0.11.0-alpha.1

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

@@ -16,13 +16,13 @@ const CreateLiveStreamDialog_1 = tslib_1.__importDefault(require("../CreateLiveS
 const PREFIX = 'SCComposerIconButton';
 const classes = {
     root: `${PREFIX}-root`,
-    popperRoot: `${PREFIX}-popper-root`
+    menuRoot: `${PREFIX}-menu-root`
 };
 const Root = (0, material_1.styled)(material_1.IconButton, {
     name: PREFIX,
     slot: 'Root'
 })(() => ({}));
-const PopperRoot = (0, material_1.styled)(material_1.Popper, {
+const MenuRoot = (0, material_1.styled)(material_1.Menu, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.popperRoot
@@ -159,7 +159,7 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
         setOpenComposer(false);
         onClose === null || onClose === void 0 ? void 0 : onClose();
     }, [setOpenComposer, onClose]);
-    const handleClosePopper = (0, react_1.useCallback)(() => {
+    const handleCloseMenu = (0, react_1.useCallback)(() => {
         setOpenPopper(false);
     }, [setOpenPopper]);
     const handleCloseCreateGroup = (0, react_1.useCallback)(() => {
@@ -182,5 +182,5 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClick, ref: (innerRef) => {
                     popperRef.current = innerRef;
                     return ref;
-                } }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_circle_outline" }) })), openComposer && (0, jsx_runtime_1.jsx)(Composer_1.default, Object.assign({ open: openComposer, fullWidth: true, onClose: handleCloseComposer, onSuccess: handleSuccess }, ComposerProps)), openPopper && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: true, onClose: handleClosePopper, onOpen: () => null, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent }))) : ((0, jsx_runtime_1.jsx)(PopperRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, transition: true, className: classes.popperRoot }, PopperProps, { placement: "bottom-end" }, { children: ({ TransitionProps, placement }) => ((0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: "outlined" }, { children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, Object.assign({ onClickAway: handleClosePopper }, { children: renderContent })) })) }))) }))) })), openCreateGroup && (0, jsx_runtime_1.jsx)(GroupForm_1.default, Object.assign({ open: openCreateGroup, onClose: handleCloseCreateGroup }, GroupFormProps)), openCreateEvent && (0, jsx_runtime_1.jsx)(EventFormDialog_1.default, Object.assign({ open: openCreateEvent, onClose: handleCloseCreateEvent }, EventFormDialogComponentProps)), openCreateLiveStream && ((0, jsx_runtime_1.jsx)(CreateLiveStreamDialog_1.default, Object.assign({ open: openCreateLiveStream, onClose: handleCloseCreateLiveStream }, CreateLiveStreamDialogComponentProps)))] }));
+                } }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_circle_outline" }) })), openComposer && (0, jsx_runtime_1.jsx)(Composer_1.default, Object.assign({ open: openComposer, fullWidth: true, onClose: handleCloseComposer, onSuccess: handleSuccess }, ComposerProps)), openPopper && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: true, onClose: handleCloseMenu, onOpen: () => null, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, className: classes.menuRoot, onClose: handleCloseMenu }, PopperProps, { children: renderContent }))) })), openCreateGroup && (0, jsx_runtime_1.jsx)(GroupForm_1.default, Object.assign({ open: openCreateGroup, onClose: handleCloseCreateGroup }, GroupFormProps)), openCreateEvent && (0, jsx_runtime_1.jsx)(EventFormDialog_1.default, Object.assign({ open: openCreateEvent, onClose: handleCloseCreateEvent }, EventFormDialogComponentProps)), openCreateLiveStream && ((0, jsx_runtime_1.jsx)(CreateLiveStreamDialog_1.default, Object.assign({ open: openCreateLiveStream, onClose: handleCloseCreateLiveStream }, CreateLiveStreamDialogComponentProps)))] }));
 });

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileActions.js

@@ -183,7 +183,7 @@ function ContributionActionsMenu(props) {
      * Renders section general
      */
     function renderGeneralSection() {
-        return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: canRemoveOrBanUser() && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: currentActionLoading === constants_1.REMOVE_ROOM_USER }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "person" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.removeRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.removeRoomUser" }), onClick: () => handleAction(constants_1.REMOVE_ROOM_USER), classes: { root: classes.itemText } })] })), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: currentActionLoading === constants_1.BAN_ROOM_USER }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "error" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.banRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.banRoomUser" }), onClick: () => handleAction(constants_1.BAN_ROOM_USER), classes: { root: classes.itemText } })] }))] })) }));
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: canRemoveOrBanUser() && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: currentActionLoading === constants_1.REMOVE_ROOM_USER, onClick: () => handleAction(constants_1.REMOVE_ROOM_USER) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "person" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.removeRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.removeRoomUser" }), classes: { root: classes.itemText } })] })), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: currentActionLoading === constants_1.BAN_ROOM_USER, onClick: () => handleAction(constants_1.BAN_ROOM_USER) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "error" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.banRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.banRoomUser" }), classes: { root: classes.itemText } })] }))] })) }));
     }
     /**
      * Renders contribution menu content

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

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Icon, IconButton, useMediaQuery, styled, useTheme, SwipeableDrawer, Grow, Paper, ClickAwayListener, Popper, MenuList, MenuItem, ListItemIcon, ListItemText, Typography, useThemeProps } from '@mui/material';
+import { Icon, IconButton, useMediaQuery, styled, useTheme, SwipeableDrawer, MenuList, MenuItem, ListItemIcon, ListItemText, Typography, useThemeProps, Menu } from '@mui/material';
 import { Link, SCRoutes, UserUtils, useSCContext, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
 import Composer from '../Composer';
@@ -14,13 +14,13 @@ import CreateLiveStreamDialog from '../CreateLiveStreamDialog';
 const PREFIX = 'SCComposerIconButton';
 const classes = {
     root: `${PREFIX}-root`,
-    popperRoot: `${PREFIX}-popper-root`
+    menuRoot: `${PREFIX}-menu-root`
 };
 const Root = styled(IconButton, {
     name: PREFIX,
     slot: 'Root'
 })(() => ({}));
-const PopperRoot = styled(Popper, {
+const MenuRoot = styled(Menu, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.popperRoot
@@ -157,7 +157,7 @@ export default React.forwardRef(function ComposerIconButton(inProps, ref) {
         setOpenComposer(false);
         onClose === null || onClose === void 0 ? void 0 : onClose();
     }, [setOpenComposer, onClose]);
-    const handleClosePopper = useCallback(() => {
+    const handleCloseMenu = useCallback(() => {
         setOpenPopper(false);
     }, [setOpenPopper]);
     const handleCloseCreateGroup = useCallback(() => {
@@ -180,5 +180,5 @@ export default React.forwardRef(function ComposerIconButton(inProps, ref) {
     return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClick, ref: (innerRef) => {
                     popperRef.current = innerRef;
                     return ref;
-                } }, rest, { children: _jsx(Icon, { children: "add_circle_outline" }) })), openComposer && _jsx(Composer, Object.assign({ open: openComposer, fullWidth: true, onClose: handleCloseComposer, onSuccess: handleSuccess }, ComposerProps)), openPopper && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: true, onClose: handleClosePopper, onOpen: () => null, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent }))) : (_jsx(PopperRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, transition: true, className: classes.popperRoot }, PopperProps, { placement: "bottom-end" }, { children: ({ TransitionProps, placement }) => (_jsx(Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: _jsx(Paper, Object.assign({ variant: "outlined" }, { children: _jsx(ClickAwayListener, Object.assign({ onClickAway: handleClosePopper }, { children: renderContent })) })) }))) }))) })), openCreateGroup && _jsx(GroupForm, Object.assign({ open: openCreateGroup, onClose: handleCloseCreateGroup }, GroupFormProps)), openCreateEvent && _jsx(EventFormDialog, Object.assign({ open: openCreateEvent, onClose: handleCloseCreateEvent }, EventFormDialogComponentProps)), openCreateLiveStream && (_jsx(CreateLiveStreamDialog, Object.assign({ open: openCreateLiveStream, onClose: handleCloseCreateLiveStream }, CreateLiveStreamDialogComponentProps)))] }));
+                } }, rest, { children: _jsx(Icon, { children: "add_circle_outline" }) })), openComposer && _jsx(Composer, Object.assign({ open: openComposer, fullWidth: true, onClose: handleCloseComposer, onSuccess: handleSuccess }, ComposerProps)), openPopper && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: true, onClose: handleCloseMenu, onOpen: () => null, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent }))) : (_jsx(MenuRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, className: classes.menuRoot, onClose: handleCloseMenu }, PopperProps, { children: renderContent }))) })), openCreateGroup && _jsx(GroupForm, Object.assign({ open: openCreateGroup, onClose: handleCloseCreateGroup }, GroupFormProps)), openCreateEvent && _jsx(EventFormDialog, Object.assign({ open: openCreateEvent, onClose: handleCloseCreateEvent }, EventFormDialogComponentProps)), openCreateLiveStream && (_jsx(CreateLiveStreamDialog, Object.assign({ open: openCreateLiveStream, onClose: handleCloseCreateLiveStream }, CreateLiveStreamDialogComponentProps)))] }));
 });

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileActions.js

@@ -181,7 +181,7 @@ export default function ContributionActionsMenu(props) {
      * Renders section general
      */
     function renderGeneralSection() {
-        return (_jsx(Box, { children: canRemoveOrBanUser() && (_jsxs(_Fragment, { children: [_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: currentActionLoading === REMOVE_ROOM_USER }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "person" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.removeRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.removeRoomUser" }), onClick: () => handleAction(REMOVE_ROOM_USER), classes: { root: classes.itemText } })] })), _jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: currentActionLoading === BAN_ROOM_USER }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "error" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.banRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.banRoomUser" }), onClick: () => handleAction(BAN_ROOM_USER), classes: { root: classes.itemText } })] }))] })) }));
+        return (_jsx(Box, { children: canRemoveOrBanUser() && (_jsxs(_Fragment, { children: [_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: currentActionLoading === REMOVE_ROOM_USER, onClick: () => handleAction(REMOVE_ROOM_USER) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "person" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.removeRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.removeRoomUser" }), classes: { root: classes.itemText } })] })), _jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: currentActionLoading === BAN_ROOM_USER, onClick: () => handleAction(BAN_ROOM_USER) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "error" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.banRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.banRoomUser" }), classes: { root: classes.itemText } })] }))] })) }));
     }
     /**
      * Renders contribution menu content