@selfcommunity/react-ui 0.11.0-mui7.29 → 0.11.0-react-17.0.1.2

package/lib/cjs/components/InviteUserEventButton/InviteUserEventButton.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const lab_1 = require("@mui/lab");
 const material_1 = require("@mui/material");
 const system_1 = require("@mui/system");
 const api_services_1 = require("@selfcommunity/api-services");
@@ -15,7 +16,7 @@ const PREFIX = 'SCInviteUserEventButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const InviteButton = (0, material_1.styled)(material_1.Button, {
+const InviteButton = (0, material_1.styled)(lab_1.LoadingButton, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root

package/lib/cjs/components/LessonAppbar/LessonAppbar.js

@@ -8,6 +8,7 @@ const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
 const types_1 = require("../../types");
 const react_intl_1 = require("react-intl");
+const lab_1 = require("@mui/lab");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     startItems: `${constants_1.PREFIX}-start-items`,
@@ -17,9 +18,9 @@ const classes = {
 const Root = (0, material_1.styled)(material_1.AppBar, {
     name: constants_1.PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => [styles.root],
+    overridesResolver: (props, styles) => [styles.root],
     shouldForwardProp: (prop) => prop !== 'open'
-})(() => ({}));
+})(({ theme }) => ({}));
 function LessonAppbar(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
@@ -27,6 +28,6 @@ function LessonAppbar(inProps) {
         name: constants_1.PREFIX
     });
     const { className = null, title = '', showComments, activePanel = null, handleOpen, onSave, editMode, onArrowBackClick, updating } = props, rest = tslib_1.__rest(props, ["className", "title", "showComments", "activePanel", "handleOpen", "onSave", "editMode", "onArrowBackClick", "updating"]);
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ position: "fixed", open: Boolean(activePanel), className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Toolbar, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.startItems }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ edge: "start", onClick: onArrowBackClick }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.title }, { children: title }))] })), editMode ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(types_1.SCLessonActionsType.SETTINGS), color: "primary" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "settings" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", onClick: onSave, loading: updating }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonAppbar.button.save", defaultMessage: "ui.lessonAppbar.button.save" }) }))] })) : ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endItems }, { children: [showComments && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(types_1.SCLessonActionsType.COMMENTS) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "chat_bubble_outline" }) }))), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(types_1.SCLessonActionsType.LESSONS) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "courses" }) }))] })))] }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ position: "fixed", open: Boolean(activePanel), className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Toolbar, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.startItems }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ edge: "start", onClick: onArrowBackClick }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.title }, { children: title }))] })), editMode ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(types_1.SCLessonActionsType.SETTINGS), color: "primary" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "settings" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "contained", size: "small", onClick: onSave, loading: updating }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonAppbar.button.save", defaultMessage: "ui.lessonAppbar.button.save" }) }))] })) : ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endItems }, { children: [showComments && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(types_1.SCLessonActionsType.COMMENTS) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "chat_bubble_outline" }) }))), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(types_1.SCLessonActionsType.LESSONS) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "courses" }) }))] })))] }) })));
 }
 exports.default = LessonAppbar;

package/lib/cjs/components/LessonCommentObjects/LessonCommentObjects.js

@@ -174,7 +174,7 @@ function LessonCommentObjects(inProps) {
     if (!commentsObject.comments.length && commentsObject.isLoadingNext) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ count: 5 }, CommentsObjectSkeletonProps));
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: commentsObject.comments.length > 0 ? ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ height: "100%", dataLength: commentsObject.comments.length, next: handleNext, hasMoreNext: Boolean(commentsObject.next), loaderNext: (0, jsx_runtime_1.jsx)(LessonCommentObject_1.LessonCommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps, { count: 1 })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ ref: commentsEndRef }, { children: commentsObject.comments.map((c, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(LessonCommentObject_1.default, Object.assign({ commentObject: c, lessonObject: commentsObject.lessonObject, onDelete: (comment) => handleCommentsUpdate(comment, true), isEditing: (editing) => setIsEditing(editing) }, CommentComponentProps, { CommentObjectSkeletonProps: CommentObjectSkeletonProps }), c.id) }, index))) })) }))) : null }), !editing && ((0, jsx_runtime_1.jsx)(CommentObjectReply_1.default, { id: `reply-lessonCommentObjects`, showAvatar: false, replyIcon: true, editable: !commenting, onReply: handleCommentAction, EditorProps: {
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: commentsObject.comments.length > 0 ? ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ height: '100%', dataLength: commentsObject.comments.length, next: handleNext, hasMoreNext: Boolean(commentsObject.next), loaderNext: (0, jsx_runtime_1.jsx)(LessonCommentObject_1.LessonCommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps, { count: 1 })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ ref: commentsEndRef }, { children: commentsObject.comments.map((c, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(LessonCommentObject_1.default, Object.assign({ commentObject: c, lessonObject: commentsObject.lessonObject, onDelete: (comment) => handleCommentsUpdate(comment, true), isEditing: (editing) => setIsEditing(editing) }, CommentComponentProps, { CommentObjectSkeletonProps: CommentObjectSkeletonProps }), c.id) }, index))) })) }))) : null }), !editing && ((0, jsx_runtime_1.jsx)(CommentObjectReply_1.default, { id: `reply-lessonCommentObjects`, showAvatar: false, replyIcon: true, editable: !commenting, onReply: handleCommentAction, EditorProps: {
                         placeholder: intl.formatMessage(messages.commentEditorPlaceholder),
                         uploadFile: true,
                         uploadImage: false,

package/lib/cjs/components/LessonEditForm/LessonEditForm.js

@@ -9,6 +9,7 @@ const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
 const react_intl_1 = require("react-intl");
 const types_1 = require("@selfcommunity/types");
+const lab_1 = require("@mui/lab");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     form: `${constants_1.PREFIX}-form`,
@@ -38,6 +39,6 @@ function LessonEditForm(inProps) {
     /**
      * Rendering
      */
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsxs)(material_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, Object.assign({ id: "status" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonEditForm.status.title", defaultMessage: "ui.lessonEditForm.status.title" }) })), (0, jsx_runtime_1.jsxs)(material_1.RadioGroup, Object.assign({ "aria-labelledby": "course-status-radio-buttons-group", name: "course-status-radio-buttons-group", value: settings.status, onChange: (e) => handleChange('status', e.target.value) }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { value: types_1.SCCourseLessonStatusType.DRAFT, control: (0, jsx_runtime_1.jsx)(material_1.Radio, {}), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonEditForm.status.draft", defaultMessage: "ui.lessonEditForm.status.draft" }) }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { value: types_1.SCCourseLessonStatusType.PUBLISHED, control: (0, jsx_runtime_1.jsx)(material_1.Radio, {}), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonEditForm.status.published", defaultMessage: "ui.lessonEditForm.status.published" }) })] }))] }), (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ className: classes.settings }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, Object.assign({ id: "settings" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonEditForm.settings.title", defaultMessage: "ui.lessonEditForm.settings.title" }) })), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: settings.comments_enabled, onChange: (e) => handleChange('comments_enabled', e.target.checked) }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonEditForm.settings.enableComments", defaultMessage: "ui.lessonEditForm.settings.enableComments" }) })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.button, variant: "contained", size: "small", onClick: onSave, loading: updating }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonEditForm.button.save", defaultMessage: "ui.lessonEditForm.button.save" }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsxs)(material_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, Object.assign({ id: "status" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonEditForm.status.title", defaultMessage: "ui.lessonEditForm.status.title" }) })), (0, jsx_runtime_1.jsxs)(material_1.RadioGroup, Object.assign({ "aria-labelledby": "course-status-radio-buttons-group", name: "course-status-radio-buttons-group", value: settings.status, onChange: (e) => handleChange('status', e.target.value) }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { value: types_1.SCCourseLessonStatusType.DRAFT, control: (0, jsx_runtime_1.jsx)(material_1.Radio, {}), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonEditForm.status.draft", defaultMessage: "ui.lessonEditForm.status.draft" }) }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { value: types_1.SCCourseLessonStatusType.PUBLISHED, control: (0, jsx_runtime_1.jsx)(material_1.Radio, {}), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonEditForm.status.published", defaultMessage: "ui.lessonEditForm.status.published" }) })] }))] }), (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ className: classes.settings }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, Object.assign({ id: "settings" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonEditForm.settings.title", defaultMessage: "ui.lessonEditForm.settings.title" }) })), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: settings.comments_enabled, onChange: (e) => handleChange('comments_enabled', e.target.checked) }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonEditForm.settings.enableComments", defaultMessage: "ui.lessonEditForm.settings.enableComments" }) })] }))] })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.button, variant: "contained", size: "small", onClick: onSave, loading: updating }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonEditForm.button.save", defaultMessage: "ui.lessonEditForm.button.save" }) }))] })));
 }
 exports.default = LessonEditForm;

package/lib/cjs/components/LessonReleaseMenu/LessonReleaseMenu.js

@@ -13,8 +13,8 @@ const x_date_pickers_1 = require("@mui/x-date-pickers");
 const types_1 = require("@selfcommunity/types");
 const AdapterDateFns_1 = require("@mui/x-date-pickers/AdapterDateFns");
 const react_core_1 = require("@selfcommunity/react-core");
-const it_1 = require("date-fns/locale/it");
-const en_US_1 = require("date-fns/locale/en-US");
+const it_1 = tslib_1.__importDefault(require("date-fns/locale/it"));
+const en_US_1 = tslib_1.__importDefault(require("date-fns/locale/en-US"));
 const api_services_1 = require("@selfcommunity/api-services");
 const Errors_1 = require("../../constants/Errors");
 const utils_1 = require("@selfcommunity/utils");
@@ -135,45 +135,37 @@ function LessonReleaseMenu(inProps) {
             id: 'ui.lessonReleaseMenu.now.label',
             defaultMessage: 'ui.lessonReleaseMenu.now.label'
         });
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: course && course.type === types_1.SCCourseTypologyType.SCHEDULED ? ((0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.it : en_US_1.enUS, localeText: {
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: course && course.type === types_1.SCCourseTypologyType.SCHEDULED ? ((0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default, localeText: {
                 okButtonLabel: `${intl.formatMessage(messages.pickerOkMessage)}`,
                 cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelMessage)}`,
                 clearButtonLabel: `${intl.formatMessage(messages.pickerClearMessage)}`
-            } }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDateTimePicker, { className: classes.picker, disablePast: true, label: drippedAt && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonReleaseMenu.scheduled.picker.placeholder", defaultMessage: "ui.lessonReleaseMenu.scheduled.picker.placeholder" })), value: drippedAt, enableAccessibleFieldDOMStructure: false, localeText: {
-                    toolbarTitle: intl.formatMessage(messages.pickerPlaceholder)
-                }, slots: {
+            } }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDateTimePicker, { className: classes.picker, disablePast: true, label: drippedAt && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonReleaseMenu.scheduled.picker.placeholder", defaultMessage: "ui.lessonReleaseMenu.scheduled.picker.placeholder" })), value: drippedAt, slots: {
+                    //actionBar: PickerActionBar,
                     tabs: (props) => (0, jsx_runtime_1.jsx)(x_date_pickers_1.DateTimePickerTabs, Object.assign({}, props)),
-                    openPickerButton: (params) => ((0, jsx_runtime_1.jsx)(material_2.IconButton, Object.assign({}, params, { children: (0, jsx_runtime_1.jsx)(material_2.Icon, { children: "expand_more" }) })))
+                    textField: (params) => ((0, jsx_runtime_1.jsx)(material_2.TextField, Object.assign({}, params, { error: false, InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.pickerPlaceholder)}`, endAdornment: ((0, jsx_runtime_1.jsx)(material_2.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_2.IconButton, Object.assign({ disabled: isDisabled }, { children: (0, jsx_runtime_1.jsx)(material_2.Icon, { children: "expand_more" }) })) }))) }) })))
                 }, slotProps: {
                     tabs: {
                         hidden: false
                     },
+                    toolbar: {
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
+                        // @ts-ignore
+                        toolbarTitle: ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonReleaseMenu.scheduled.picker.placeholder", defaultMessage: "ui.lessonReleaseMenu.scheduled.picker.placeholder" }))
+                    },
                     actionBar: {
                         actions: ['cancel', 'clear', 'accept']
-                    },
-                    textField: {
-                        error: false,
-                        slotProps: {
-                            input: {
-                                placeholder: intl.formatMessage(messages.pickerPlaceholder)
-                            }
-                        }
                     }
-                }, onChange: setDrippedAt, onAccept: handleUpdate, disabled: isDisabled }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_2.TextField, { size: "small", value: placeholderStructured, onClick: isDisabled ? undefined : handleClick, slotProps: {
-                        input: {
-                            endAdornment: ((0, jsx_runtime_1.jsx)(material_2.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_2.IconButton, Object.assign({ onClick: handleClick, disabled: isDisabled }, { children: (0, jsx_runtime_1.jsx)(material_2.Icon, { children: "expand_more" }) })) })))
-                        }
+                }, onChange: (value) => setDrippedAt(value), onAccept: handleUpdate, onClear: () => setDrippedAt(null), disabled: isDisabled }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_2.TextField, { size: "small", value: placeholderStructured, onClick: isDisabled ? undefined : handleClick, InputProps: {
+                        endAdornment: ((0, jsx_runtime_1.jsx)(material_2.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_2.IconButton, Object.assign({ onClick: handleClick, disabled: isDisabled }, { children: (0, jsx_runtime_1.jsx)(material_2.Icon, { children: "expand_more" }) })) })))
                     }, disabled: isDisabled }), (0, jsx_runtime_1.jsxs)(PopoverRoot, Object.assign({ className: classes.popoverRoot, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
                         vertical: 'bottom',
                         horizontal: 'left'
                     }, transformOrigin: {
                         vertical: 'top',
                         horizontal: 'left'
-                    } }, { children: [(0, jsx_runtime_1.jsx)(material_2.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.title", defaultMessage: "ui.lessonReleaseMenu.dialog.title" }) })), (0, jsx_runtime_1.jsxs)(material_2.Box, Object.assign({ className: classes.popoverContent }, { children: [(0, jsx_runtime_1.jsxs)(material_2.Box, Object.assign({ className: classes.popoverSelection }, { children: [(0, jsx_runtime_1.jsx)(material_2.TextField, { type: "number", value: dripDelay, onChange: handleValueChange, slotProps: {
-                                                input: {
-                                                    inputProps: {
-                                                        min: 0
-                                                    }
+                    } }, { children: [(0, jsx_runtime_1.jsx)(material_2.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.title", defaultMessage: "ui.lessonReleaseMenu.dialog.title" }) })), (0, jsx_runtime_1.jsxs)(material_2.Box, Object.assign({ className: classes.popoverContent }, { children: [(0, jsx_runtime_1.jsxs)(material_2.Box, Object.assign({ className: classes.popoverSelection }, { children: [(0, jsx_runtime_1.jsx)(material_2.TextField, { type: "number", value: dripDelay, onChange: handleValueChange, InputProps: {
+                                                inputProps: {
+                                                    min: 0
                                                 }
                                             } }), (0, jsx_runtime_1.jsx)(material_2.FormControl, { children: (0, jsx_runtime_1.jsxs)(material_2.RadioGroup, Object.assign({ value: unit, onChange: handleUnitChange }, { children: [(0, jsx_runtime_1.jsx)(material_2.FormControlLabel, { value: constants_1.unitType.DAYS, control: (0, jsx_runtime_1.jsx)(material_2.Radio, { size: "small" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.days", defaultMessage: "ui.lessonReleaseMenu.dialog.days" }) }), (0, jsx_runtime_1.jsx)(material_2.FormControlLabel, { value: constants_1.unitType.WEEKS, control: (0, jsx_runtime_1.jsx)(material_2.Radio, { size: "small" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.weeks", defaultMessage: "ui.lessonReleaseMenu.dialog.weeks" }) })] })) })] })), (0, jsx_runtime_1.jsx)(material_2.Typography, Object.assign({ variant: "body1" }, { children: dripDelay > 0 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.lessonReleaseMenu.dialog.info.structured.${unit}`, defaultMessage: `ui.lessonReleaseMenu.dialog.info.structured.${unit}`, values: { total: dripDelay } })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.info.now", defaultMessage: "ui.lessonReleaseMenu.dialog.info.now" })) })), (0, jsx_runtime_1.jsx)(material_2.Button, Object.assign({ className: classes.popoverAction, variant: "contained", disabled: section.drip_delay === dripDelay, onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.button.done", defaultMessage: "ui.lessonReleaseMenu.dialog.button.done" }) }))] }))] }))] })) })));
 }

package/lib/cjs/components/LiveStreamForm/LiveStreamForm.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const lab_1 = require("@mui/lab");
 const material_1 = require("@mui/material");
 const system_1 = require("@mui/system");
 const types_1 = require("@selfcommunity/types");
@@ -35,7 +36,7 @@ const classes = {
 const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
-})(() => ({}));
+})(({ theme }) => ({}));
 const messages = (0, react_intl_1.defineMessages)({
     title: {
         id: 'ui.liveStreamForm.title.placeholder',
@@ -199,7 +200,9 @@ function LiveStreamForm(inProps) {
         let _message;
         if (isFreeTrialTier && isCommunityOwner && !isEnterpriseTier) {
             _message = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.selector.warningSubscriptionRequired", defaultMessage: "ui.liveStreamForm.selector.warningSubscriptionRequired", values: {
-                    link: (chunks) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "_blank", to: `${isStage ? constants_2.HUB_STAGE : constants_2.HUB_PROD}dashboard/community/${communityStackId}/subscription` }, { children: chunks }), "ui.liveStreamForm.selector.warningSubscriptionRequired.link"))
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                    // @ts-ignore
+                    link: (...chunks) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "_blank", to: `${isStage ? constants_2.HUB_STAGE : constants_2.HUB_PROD}dashboard/community/${communityStackId}/subscription` }, { children: chunks })))
                 } }));
         }
         else if (timeRemaining !== null && timeRemaining <= constants_3.WARNING_THRESHOLD_EXPIRING_SOON) {
@@ -230,19 +233,13 @@ function LiveStreamForm(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [warning, (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadEventCover_1.default, { isCreationMode: true, onChange: handleChangeCover }) })), Boolean(error['coverError']) && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "error" }, { children: error['coverError'] })), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.title, placeholder: `${intl.formatMessage(messages.title)}`, margin: "normal", value: field.title, name: "title", onChange: handleChange, slotProps: {
-                            input: {
-                                endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: LiveStream_1.LIVE_STREAM_TITLE_MAX_LENGTH - field.title.length }))
-                            }
-                        }, error: Boolean(field.title.length > LiveStream_1.LIVE_STREAM_TITLE_MAX_LENGTH) || Boolean(error['titleError']), helperText: field.title.length > LiveStream_1.LIVE_STREAM_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.title.error.maxLength", defaultMessage: "ui.liveStreamForm.title.error.maxLength" })) : error['titleError'] ? (error['titleError']) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.slug, placeholder: `${intl.formatMessage(messages.slug)}`, margin: "normal", value: field.slug, name: "slug", onChange: handleChange, slotProps: {
-                            input: {
-                                endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: LiveStream_1.LIVE_STREAM_SLUG_MAX_LENGTH - field.slug.length }))
-                            }
-                        }, error: Boolean(field.slug.length > LiveStream_1.LIVE_STREAM_SLUG_MAX_LENGTH) || Boolean(error['slugError']), helperText: field.title.length > LiveStream_1.LIVE_STREAM_SLUG_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.slug.error.maxLength", defaultMessage: "ui.liveStreamForm.slug.error.maxLength" })) : error['slugError'] ? (error['slugError']) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, rows: 4, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, slotProps: {
-                            input: {
-                                endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) ? LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH - field.description.length : LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH })))
-                            }
-                        }, error: Boolean(((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH), helperText: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.description.error.maxLength", defaultMessage: "ui.liveStreamForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(LiveStreamFormSettings_1.default, { settings: field.settings, onChange: handleChangeSettings }), genericError && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.genericError }, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ loading: field.isSubmitting, disabled: !field.title ||
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [warning, (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadEventCover_1.default, { isCreationMode: true, onChange: handleChangeCover }) })), Boolean(error['coverError']) && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "error" }, { children: error['coverError'] })), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.title, placeholder: `${intl.formatMessage(messages.title)}`, margin: "normal", value: field.title, name: "title", onChange: handleChange, InputProps: {
+                            endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: LiveStream_1.LIVE_STREAM_TITLE_MAX_LENGTH - field.title.length }))
+                        }, error: Boolean(field.title.length > LiveStream_1.LIVE_STREAM_TITLE_MAX_LENGTH) || Boolean(error['titleError']), helperText: field.title.length > LiveStream_1.LIVE_STREAM_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.title.error.maxLength", defaultMessage: "ui.liveStreamForm.title.error.maxLength" })) : error['titleError'] ? (error['titleError']) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.slug, placeholder: `${intl.formatMessage(messages.slug)}`, margin: "normal", value: field.slug, name: "slug", onChange: handleChange, InputProps: {
+                            endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: LiveStream_1.LIVE_STREAM_SLUG_MAX_LENGTH - field.slug.length }))
+                        }, error: Boolean(field.slug.length > LiveStream_1.LIVE_STREAM_SLUG_MAX_LENGTH) || Boolean(error['slugError']), helperText: field.title.length > LiveStream_1.LIVE_STREAM_SLUG_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.slug.error.maxLength", defaultMessage: "ui.liveStreamForm.slug.error.maxLength" })) : error['slugError'] ? (error['slugError']) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, rows: 4, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
+                            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) ? LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH - field.description.length : LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH })))
+                        }, error: Boolean(((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH), helperText: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.description.error.maxLength", defaultMessage: "ui.liveStreamForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(LiveStreamFormSettings_1.default, { settings: field.settings, onChange: handleChangeSettings }), genericError && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.genericError }, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.title ||
                                 field.isSubmitting ||
                                 field.title.length > LiveStream_1.LIVE_STREAM_TITLE_MAX_LENGTH ||
                                 field.description.length > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH ||

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

@@ -42,12 +42,12 @@ const classes = {
 const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
-})(() => ({}));
+})(({ theme }) => ({}));
 const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => styles.dialogRoot
-})(() => ({}));
+    overridesResolver: (props, styles) => styles.dialogRoot
+})(({ theme }) => ({}));
 /**
  *> API documentation for the Community-JS LiveStreamRoom component. Learn about the available props and the CSS API.
  *
@@ -133,16 +133,14 @@ function LiveStreamRoom(inProps) {
                     typeof error.response.data === 'object' &&
                     error.response.data.errors &&
                     error.response.data.errors.length) {
-                    let _msg = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.connect.error.generic", defaultMessage: "ui.liveStreamRoom.connect.error.generic", values: {
-                            link: (chunks) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: "/" }, { children: chunks }), "ui.liveStreamRoom.connect.error.generic.link"))
-                        } }));
+                    let _msg = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.connect.error.generic", defaultMessage: "'ui.liveStreamRoom.connect.error.generic", values: { link: (...chunks) => (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: '/' }, { children: chunks })) } }));
                     if (error.response.data.errors[0].code) {
                         const _error = `ui.liveStreamRoom.connect.error.${(0, utils_1.camelCase)(error.response.data.errors[0].code)}`;
                         _msg = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: _error, defaultMessage: _error, values: {
-                                link: (chunks) => ((0, jsx_runtime_1.jsx)("a", Object.assign({ style: { color: '#FFF' }, href: error.response.data.errors[0].code === types_1.SCLiveStreamConnectionDetailsErrorType.PARTICIPATE_THE_EVENT_TO_JOIN_LIVE_STREAM &&
+                                link: (...chunks) => ((0, jsx_runtime_1.jsx)("a", Object.assign({ style: { color: '#FFF' }, href: error.response.data.errors[0].code === types_1.SCLiveStreamConnectionDetailsErrorType.PARTICIPATE_THE_EVENT_TO_JOIN_LIVE_STREAM &&
                                         scLiveStream.event
                                         ? scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scLiveStream.event)
-                                        : '/' }, { children: chunks }), `ui.liveStreamRoom.connect.error.${(0, utils_1.camelCase)(error.response.data.errors[0].code)}.link`))
+                                        : '/' }, { children: chunks })))
                             } }));
                         if (error.response.data.errors[0].code === types_1.SCLiveStreamConnectionDetailsErrorType.WAITING_HOST_TO_START_LIVE_STREAM ||
                             error.response.data.errors[0].code === types_1.SCLiveStreamConnectionDetailsErrorType.PARTICIPANTS_LIMIT_REACHED) {
@@ -203,10 +201,10 @@ function LiveStreamRoom(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: scLiveStream.closed_at_by_host ? ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ open: true, maxWidth: "md", fullWidth: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.DialogContent, Object.assign({ className: classes.endConferenceWrap }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO].value, alt: "logo" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.conference.closed", defaultMessage: "ui.liveStreamRoom.conference.closed" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: "secondary", component: react_core_1.Link, to: "/", className: classes.btnBackHome }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.button.backHome", defaultMessage: "ui.liveStreamRoom.button.backHome" }) }))] })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.content, "data-lk-theme": "default" }, { children: connectionDetails === undefined || preJoinChoices === undefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [startPrejoinContent && (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.startPrejoinContent }, { children: startPrejoinContent })), (scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.title) && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", variant: "h4", className: classes.title, alignContent: "center" }, { children: scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.title }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.preJoin, { [classes.preJoinLoading]: loading || error }) }, { children: [(0, jsx_runtime_1.jsx)(LiveStreamProvider_1.LiveStreamContext.Provider, Object.assign({ value: { liveStream: scLiveStream } }, { children: (0, jsx_runtime_1.jsx)(PreJoin_1.PreJoin, { defaults: preJoinDefaults, onSubmit: handlePreJoinSubmit, onError: handlePreJoinError, joinLabel: intl.formatMessage({ id: 'ui.liveStreamRoom.preJoin.joinRoom', defaultMessage: 'ui.liveStreamRoom.preJoin.joinRoom' }), micLabel: intl.formatMessage({
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: scLiveStream.closed_at_by_host ? ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ open: true, maxWidth: 'md', fullWidth: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.DialogContent, Object.assign({ className: classes.endConferenceWrap }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO].value, alt: "logo" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.conference.closed", defaultMessage: "ui.liveStreamRoom.conference.closed" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: "secondary", component: react_core_1.Link, to: '/', className: classes.btnBackHome }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.button.backHome", defaultMessage: "ui.liveStreamRoom.button.backHome" }) }))] })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.content, "data-lk-theme": "default" }, { children: connectionDetails === undefined || preJoinChoices === undefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [startPrejoinContent && (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.startPrejoinContent }, { children: startPrejoinContent })), (scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.title) && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'div', variant: "h4", className: classes.title, alignContent: 'center' }, { children: scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.title }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.preJoin, { [classes.preJoinLoading]: loading || error }) }, { children: [(0, jsx_runtime_1.jsx)(LiveStreamProvider_1.LiveStreamContext.Provider, Object.assign({ value: { liveStream: scLiveStream } }, { children: (0, jsx_runtime_1.jsx)(PreJoin_1.PreJoin, { defaults: preJoinDefaults, onSubmit: handlePreJoinSubmit, onError: handlePreJoinError, joinLabel: intl.formatMessage({ id: 'ui.liveStreamRoom.preJoin.joinRoom', defaultMessage: 'ui.liveStreamRoom.preJoin.joinRoom' }), micLabel: intl.formatMessage({
                                         id: 'ui.liveStreamRoom.preJoin.microphone',
                                         defaultMessage: 'ui.liveStreamRoom.preJoin.microphone'
-                                    }), camLabel: intl.formatMessage({ id: 'ui.liveStreamRoom.preJoin.camera', defaultMessage: 'ui.liveStreamRoom.preJoin.camera' }), userLabel: intl.formatMessage({ id: 'ui.liveStreamRoom.preJoin.username', defaultMessage: 'ui.liveStreamRoom.preJoin.username' }) }) })), loading && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.prejoinLoader }, { children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.connecting", defaultMessage: "ui.liveStreamRoom.connecting" }) }))] })))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endPrejoinContent }, { children: [scLiveStream && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ sx: { width: '47%' }, spacing: 1, className: classes.endPrejoinContentBox }, { children: [scLiveStream &&
+                                    }), camLabel: intl.formatMessage({ id: 'ui.liveStreamRoom.preJoin.camera', defaultMessage: 'ui.liveStreamRoom.preJoin.camera' }), userLabel: intl.formatMessage({ id: 'ui.liveStreamRoom.preJoin.username', defaultMessage: 'ui.liveStreamRoom.preJoin.username' }) }) })), loading && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.prejoinLoader }, { children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'div', variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.connecting", defaultMessage: "ui.liveStreamRoom.connecting" }) }))] })))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endPrejoinContent }, { children: [scLiveStream && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ sx: { width: '47%' }, spacing: 1, className: classes.endPrejoinContentBox }, { children: [scLiveStream &&
                                         scUserContext.user &&
                                         scUserContext.user.id !== scLiveStream.host.id &&
                                         scLiveStream &&

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

@@ -72,9 +72,5 @@ exports.DisconnectButton =
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", Object.assign({ ref: ref }, rest, { onClick: handleOnLeave }, { children: props.children })), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openConfirmDialog, title: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.live.terminate", defaultMessage: "ui.liveStreamRoom.live.terminate" }), (0, jsx_runtime_1.jsx)(material_1.FormGroup, { children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: closeLive, onChange: handleChangeCloseLive, slotProps: {
-                                        input: {
-                                            'aria-label': 'controlled'
-                                        }
-                                    } }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.live.terminatePermanently", defaultMessage: "ui.liveStreamRoom.live.terminatePermanently" }) }) })] }), onConfirm: handleLeaveAction, isUpdating: isUpdating, onClose: () => setOpenConfirmDialog(false) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", Object.assign({ ref: ref }, rest, { onClick: handleOnLeave }, { children: props.children })), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openConfirmDialog, title: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.live.terminate", defaultMessage: "ui.liveStreamRoom.live.terminate" }), (0, jsx_runtime_1.jsx)(material_1.FormGroup, { children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: closeLive, onChange: handleChangeCloseLive, inputProps: { 'aria-label': 'controlled' } }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.live.terminatePermanently", defaultMessage: "ui.liveStreamRoom.live.terminatePermanently" }) }) })] }), onConfirm: handleLeaveAction, isUpdating: isUpdating, onClose: () => setOpenConfirmDialog(false) }))] }));
 });

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

@@ -17,7 +17,7 @@ const classes = {
 const Root = (0, material_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => styles.root
+    overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({
     borderRadius: 7,
     color: theme.palette.common.white,
@@ -28,7 +28,7 @@ const Root = (0, material_1.styled)(material_1.Button, {
 const MenuRoot = (0, material_1.styled)(material_1.Menu, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => styles.menuRoot
+    overridesResolver: (props, styles) => styles.menuRoot
 })(({ theme }) => ({
     '& .MuiPaper-root': {
         minWidth: 120,
@@ -92,11 +92,7 @@ function LiveStreamSettingsMenu(inProps) {
           }
     };
       */
-    const MenuContent = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", component: "div" }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.settingsMenu.visualEffect", defaultMessage: "ui.liveStreamRoom.settingsMenu.visualEffect" }) }) })), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { labelPlacement: "start", control: (0, jsx_runtime_1.jsx)(material_1.Switch, { checked: blurEnabled, disabled: actionBlurDisabled, onChange: handleBlur, slotProps: {
-                        input: {
-                            'aria-label': 'controlled'
-                        }
-                    } }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.settingsMenu.visualEffect.blurEffect", defaultMessage: "ui.liveStreamRoom.settingsMenu.visualEffect.blurEffect" }) })] })), [blurEnabled, actionBlurDisabled, handleBlur]);
+    const MenuContent = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", component: "div" }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.settingsMenu.visualEffect", defaultMessage: "ui.liveStreamRoom.settingsMenu.visualEffect" }) }) })), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { labelPlacement: "start", control: (0, jsx_runtime_1.jsx)(material_1.Switch, { checked: blurEnabled, disabled: actionBlurDisabled, onChange: handleBlur, inputProps: { 'aria-label': 'controlled' } }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.settingsMenu.visualEffect.blurEffect", defaultMessage: "ui.liveStreamRoom.settingsMenu.visualEffect.blurEffect" }) })] })), [blurEnabled, actionBlurDisabled, handleBlur]);
     if (onlyContentMenu) {
         return MenuContent;
     }

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

@@ -30,12 +30,12 @@ const classes = {
 const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
-})(() => ({}));
+})(({ theme }) => ({}));
 const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.dialogRoot
-})(() => ({}));
+})(({ theme }) => ({}));
 const PREFERENCES = [react_core_1.SCPreferences.LOGO_NAVBAR_LOGO];
 /**
  *> API documentation for the Community-JS LiveStreamVideoConference component. Learn about the available props and the CSS API.
@@ -148,6 +148,6 @@ function LiveStreamVideoConference(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: liveActive && !error ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_react_1.LiveKitRoom, Object.assign({ connect: Boolean(liveActive), token: connectionDetails['participantToken'], serverUrl: connectionDetails['serverUrl'], connectOptions: connectOptions, video: userChoices.videoEnabled, audio: userChoices.audioEnabled, onDisconnected: handleOnLeave, onEncryptionError: handleEncryptionError, onError: handleError }, LiveKitRoomComponentProps, { children: (0, jsx_runtime_1.jsxs)(components_react_1.LayoutContextProvider, { children: [(0, jsx_runtime_1.jsx)(VideoConference_1.VideoConference, Object.assign({ chatMessageFormatter: components_react_1.formatChatMessageLinks }, (speakerFocused && { speakerFocused: liveStream.host }), VideoConferenceComponentProps, { disableMicrophone: !canUseAudio, disableCamera: !canUseVideo, disableChat: !canUseChat, disableShareScreen: !canUseShareScreen, hideParticipantsList: hideParticipantsList })), (0, jsx_runtime_1.jsx)(components_react_1.ConnectionState, {})] }) })) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: error ? ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ open: true, maxWidth: "md", fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endConferenceWrap }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), startConferenceEndContent, error, (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: "secondary", component: react_core_1.Link, to: "/", className: classes.btnBackHome }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.button.backHome", defaultMessage: "ui.liveStreamRoom.button.backHome" }) })), endConferenceEndContent] })) }) }))) : liveActive === false ? ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ open: true, maxWidth: "md", fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endConferenceWrap }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), startConferenceEndContent, (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.conference.end", defaultMessage: "ui.liveStreamRoom.conference.end" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: "secondary", component: react_core_1.Link, to: "/", onClick: handleBackHome, className: classes.btnBackHome }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.button.backHome", defaultMessage: "ui.liveStreamRoom.button.backHome" }) })), endConferenceEndContent] })) }) }))) : ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: liveActive && !error ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_react_1.LiveKitRoom, Object.assign({ connect: Boolean(liveActive), token: connectionDetails['participantToken'], serverUrl: connectionDetails['serverUrl'], connectOptions: connectOptions, video: userChoices.videoEnabled, audio: userChoices.audioEnabled, onDisconnected: handleOnLeave, onEncryptionError: handleEncryptionError, onError: handleError }, LiveKitRoomComponentProps, { children: (0, jsx_runtime_1.jsxs)(components_react_1.LayoutContextProvider, { children: [(0, jsx_runtime_1.jsx)(VideoConference_1.VideoConference, Object.assign({ chatMessageFormatter: components_react_1.formatChatMessageLinks }, (speakerFocused && { speakerFocused: liveStream.host }), VideoConferenceComponentProps, { disableMicrophone: !canUseAudio, disableCamera: !canUseVideo, disableChat: !canUseChat, disableShareScreen: !canUseShareScreen, hideParticipantsList: hideParticipantsList })), (0, jsx_runtime_1.jsx)(components_react_1.ConnectionState, {})] }) })) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: error ? ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ open: true, maxWidth: 'md', fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endConferenceWrap }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), startConferenceEndContent, error, (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: "secondary", component: react_core_1.Link, to: '/', className: classes.btnBackHome }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.button.backHome", defaultMessage: "ui.liveStreamRoom.button.backHome" }) })), endConferenceEndContent] })) }) }))) : liveActive === false ? ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ open: true, maxWidth: 'md', fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endConferenceWrap }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), startConferenceEndContent, (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.conference.end", defaultMessage: "ui.liveStreamRoom.conference.end" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: "secondary", component: react_core_1.Link, to: '/', onClick: handleBackHome, className: classes.btnBackHome }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.button.backHome", defaultMessage: "ui.liveStreamRoom.button.backHome" }) })), endConferenceEndContent] })) }) }))) : ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) })) })));
 }
 exports.default = LiveStreamVideoConference;

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

@@ -9,6 +9,7 @@ const components_core_1 = require("@livekit/components-core");
 const components_react_1 = require("@livekit/components-react");
 const ParticipantTileAvatar_1 = tslib_1.__importDefault(require("./ParticipantTileAvatar"));
 const ParticipantTileActions_1 = tslib_1.__importDefault(require("./ParticipantTileActions"));
+const react_core_1 = require("@selfcommunity/react-core");
 /**
  * The `ParticipantContextIfNeeded` component only creates a `ParticipantContext`
  * if there is no `ParticipantContext` already.
@@ -34,6 +35,7 @@ exports.ParticipantTile =
 /* @__PURE__ */ React.forwardRef(function ParticipantTile(_a, ref) {
     var _b, _c;
     var { trackRef, children, onParticipantClick, disableSpeakingIndicator, disableTileFocusToggle = false, disableTileActions = false } = _a, htmlProps = tslib_1.__rest(_a, ["trackRef", "children", "onParticipantClick", "disableSpeakingIndicator", "disableTileFocusToggle", "disableTileActions"]);
+    const scUserContext = (0, react_core_1.useSCUser)();
     const trackReference = (0, components_react_1.useEnsureTrackRef)(trackRef);
     const { elementProps } = (0, components_react_1.useParticipantTile)({
         htmlProps,
@@ -59,5 +61,5 @@ exports.ParticipantTile =
                                     trackReference.source === livekit_client_1.Track.Source.ScreenShare) ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_react_1.VideoTrack, { trackRef: trackReference, onSubscriptionStatusChanged: handleSubscribe, manageSubscription: autoManageSubscription }) })) : ((0, components_core_1.isTrackReference)(trackReference) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_react_1.AudioTrack, { trackRef: trackReference, onSubscriptionStatusChanged: handleSubscribe }) }))), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-participant-placeholder" }, { children: (0, jsx_runtime_1.jsx)(ParticipantTileAvatar_1.default, { participant: trackReference.participant }) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-participant-metadata" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-participant-metadata-item" }, { children: trackReference.source === livekit_client_1.Track.Source.Camera ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEncrypted && (0, jsx_runtime_1.jsx)(components_react_1.LockLockedIcon, { style: { marginRight: '0.25rem' } }), (0, jsx_runtime_1.jsx)(components_react_1.TrackMutedIndicator, { trackRef: {
                                                         participant: trackReference.participant,
                                                         source: livekit_client_1.Track.Source.Microphone
-                                                    }, show: "muted" }), (0, jsx_runtime_1.jsx)(components_react_1.ParticipantName, { children: !disableTileActions && (0, jsx_runtime_1.jsx)(ParticipantTileActions_1.default, {}) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_react_1.ScreenShareIcon, { style: { marginRight: '0.25rem' } }), (0, jsx_runtime_1.jsx)(components_react_1.ParticipantName, { children: "'s screen" })] })) })), (0, jsx_runtime_1.jsx)(components_react_1.ConnectionQualityIndicator, { className: "lk-participant-metadata-item" })] }))] })), !disableTileFocusToggle && (0, jsx_runtime_1.jsx)(components_react_1.FocusToggle, { trackRef: trackReference })] })) })) })));
+                                                    }, show: 'muted' }), (0, jsx_runtime_1.jsx)(components_react_1.ParticipantName, { children: !disableTileActions && (0, jsx_runtime_1.jsx)(ParticipantTileActions_1.default, {}) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_react_1.ScreenShareIcon, { style: { marginRight: '0.25rem' } }), (0, jsx_runtime_1.jsx)(components_react_1.ParticipantName, { children: "'s screen" })] })) })), (0, jsx_runtime_1.jsx)(components_react_1.ConnectionQualityIndicator, { className: "lk-participant-metadata-item" })] }))] })), !disableTileFocusToggle && (0, jsx_runtime_1.jsx)(components_react_1.FocusToggle, { trackRef: trackReference })] })) })) })));
 });

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

@@ -200,7 +200,7 @@ function ContributionActionsMenu(props) {
      */
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_2.IconButton, Object.assign({ ref: (ref) => {
                     popperRef.current = ref;
-                }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" }) })), open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_2.SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, 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: "right" }, { children: ({ TransitionProps, placement }) => ((0, jsx_runtime_1.jsx)(material_2.Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: (0, jsx_runtime_1.jsx)(material_2.Paper, Object.assign({ variant: "outlined", className: classes.paper }, { children: (0, jsx_runtime_1.jsx)(material_2.ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: renderContent() })) })) }))) }))) })), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, Object.assign({ open: openConfirmDialog }, (currentAction === constants_1.REMOVE_ROOM_USER
+                }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" }) })), open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_2.SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, 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: "right" }, { children: ({ TransitionProps, placement }) => ((0, jsx_runtime_1.jsx)(material_2.Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: (0, jsx_runtime_1.jsx)(material_2.Paper, Object.assign({ variant: 'outlined', className: classes.paper }, { children: (0, jsx_runtime_1.jsx)(material_2.ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: renderContent() })) })) }))) }))) })), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, Object.assign({ open: openConfirmDialog }, (currentAction === constants_1.REMOVE_ROOM_USER
                 ? {
                     content: ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.removeRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.removeRoomUser" }))
                 }

package/lib/cjs/components/LocationAutocomplete/LocationAutocomplete.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = require("react");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_2 = require("react");
+const react_1 = tslib_1.__importStar(require("react"));
 const react_intl_1 = require("react-intl");
 const material_1 = require("@mui/material");
 const api_services_1 = require("@selfcommunity/api-services");
@@ -17,7 +16,7 @@ const classes = {
 const Root = (0, material_1.styled)(material_1.Autocomplete, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => styles.root
+    overridesResolver: (props, styles) => styles.root
 })(() => ({
     minWidth: 120
 }));
@@ -54,10 +53,10 @@ function LocationAutocomplete(inProps) {
         label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.locationAutocomplete.label", defaultMessage: "ui.composer.locations.label" })
     } } = props, rest = tslib_1.__rest(props, ["defaultValue", "disabled", "onChange", "TextFieldProps"]);
     // State
-    const [isLoading, setIsLoading] = (0, react_2.useState)(false);
-    const [locations, setLocations] = (0, react_2.useState)([]);
-    const [value, setValue] = (0, react_2.useState)(defaultValue);
-    const [search, setSearch] = (0, react_2.useState)('');
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [locations, setLocations] = (0, react_1.useState)([]);
+    const [value, setValue] = (0, react_1.useState)(defaultValue);
+    const [search, setSearch] = (0, react_1.useState)('');
     const load = (offset = 0, limit = 20) => {
         api_services_1.http
             .request({
@@ -75,39 +74,39 @@ function LocationAutocomplete(inProps) {
             .then(() => setIsLoading(false));
     };
     // Component update
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (!isLoading && search.trim().length > 0) {
             load();
         }
     }, [search]);
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (value) {
             onChange && onChange(value);
         }
     }, [value]);
     // Handlers
-    const handleChange = (_event, value) => {
+    const handleChange = (event, value) => {
         setValue(value ? { location: value.full_address, lat: value.lat, lng: value.lng } : null);
         onChange && onChange(value);
     };
-    const handleSearch = (_event, _search) => {
+    const handleSearch = (event, _search) => {
         setSearch(_search);
     };
     // Render
-    const options = (0, react_2.useMemo)(() => {
+    const options = (0, react_1.useMemo)(() => {
         if (!value || typeof value === 'string' || locations.find((loc) => value.lat === loc.lat && value.lng === loc.lng)) {
             return locations;
         }
         return [...locations, { lat: value.lat, lng: value.lng, full_address: value.location }];
     }, [value, locations]);
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root, options: options || [], getOptionLabel: (option) => (option === null || option === void 0 ? void 0 : option['full_address']) || (option === null || option === void 0 ? void 0 : option['location']) || '', filterOptions: (x) => x, autoComplete: true, includeInputInList: true, value: value || null, selectOnFocus: true, handleHomeEndKeys: true, disabled: disabled, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.locationAutocomplete.empty", defaultMessage: "ui.locationAutocomplete.empty" }), onChange: handleChange, onInputChange: handleSearch, isOptionEqualToValue: (option, value) => value.lat === option.lat && value.lng === option.lng, renderInput: (params) => {
-            return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", slotProps: {
-                    input: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'location', endAdornment: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isLoading ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) })
-                } })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root, options: options || [], 
+        // @ts-ignore
+        getOptionLabel: (option) => (option === null || option === void 0 ? void 0 : option.full_address) || (option === null || option === void 0 ? void 0 : option.location) || '', filterOptions: (x) => x, autoComplete: true, includeInputInList: true, value: value || null, selectOnFocus: true, handleHomeEndKeys: true, disabled: disabled, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.locationAutocomplete.empty", defaultMessage: "ui.locationAutocomplete.empty" }), onChange: handleChange, onInputChange: handleSearch, isOptionEqualToValue: (option, value) => value.lat === option.lat && value.lng === option.lng, renderInput: (params) => {
+            return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'location', endAdornment: ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [isLoading ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) })));
         }, renderOption: (props, option, { inputValue }) => {
             const matches = (0, match_1.default)(option.full_address, inputValue);
             const parts = (0, parse_1.default)(option.full_address, matches);
-            return ((0, react_1.createElement)("li", Object.assign({}, props, { key: `${option.lat}_${option.lng}`, style: { whiteSpace: 'break-spaces' } }), parts.map((part, index) => part.highlight ? ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: { fontWeight: 700 } }, { children: part.text }), index)) : (part.text))));
+            return ((0, jsx_runtime_1.jsx)("li", Object.assign({}, props, { style: { whiteSpace: 'break-spaces' } }, { children: parts.map((part, index) => part.highlight ? ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: { fontWeight: 700 } }, { children: part.text }), index)) : (part.text)) }), `${option.lat}_${option.lng}`));
         } }, rest)));
 }
 exports.default = LocationAutocomplete;

package/lib/cjs/components/LoyaltyProgramWidget/LoyaltyProgramWidget.js

@@ -111,6 +111,6 @@ function LoyaltyProgramWidget(inProps) {
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.loyaltyProgramWidget.title", defaultMessage: "ui.loyaltyProgramWidget.title" }) })) }), (0, jsx_runtime_1.jsxs)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.points }, { children: [(0, jsx_runtime_1.jsx)(material_1.Chip, { size: "medium", component: "span", label: points }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.loyaltyProgramWidget.points", defaultMessage: "ui.loyaltyProgramWidget.points" })] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", className: classes.discoverMore, component: react_core_2.Link, to: scRoutingContext.url(react_core_2.SCRoutes.LOYALTY_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.loyaltyProgramWidget.discover", defaultMessage: "ui.loyaltyProgramWidget.discover" }) }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.loyaltyProgramWidget.title", defaultMessage: "ui.loyaltyProgramWidget.title" }) })) }), (0, jsx_runtime_1.jsxs)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.points }, { children: [(0, jsx_runtime_1.jsx)(material_1.Chip, { size: 'medium', component: "span", label: points }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.loyaltyProgramWidget.points", defaultMessage: "ui.loyaltyProgramWidget.points" })] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", className: classes.discoverMore, component: react_core_2.Link, to: scRoutingContext.url(react_core_2.SCRoutes.LOYALTY_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.loyaltyProgramWidget.discover", defaultMessage: "ui.loyaltyProgramWidget.discover" }) }))] }))] })));
 }
 exports.default = LoyaltyProgramWidget;

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

@@ -43,6 +43,6 @@ const Root = (0, material_1.styled)(Widget_1.default, {
  *
  */
 function LoyaltyProgramWidgetSkeleton() {
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardContent, Object.assign({ className: classes.content }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 25, width: "40%", variant: "rectangular" }) })) })), (0, jsx_runtime_1.jsxs)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.points }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: 60, height: 30, className: classes.chip }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: 90, variant: "rectangular" })] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ disabled: true, variant: "outlined", size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: 70, variant: "text" }) }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardContent, Object.assign({ className: classes.content }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 25, width: "40%", variant: "rectangular" }) })) })), (0, jsx_runtime_1.jsxs)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.points }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: 60, height: 30, className: classes.chip }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: 90, variant: "rectangular" })] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ disabled: true, variant: 'outlined', size: 'small' }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: 70, variant: "text" }) }))] }))] })));
 }
 exports.default = LoyaltyProgramWidgetSkeleton;

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

@@ -1,4 +1,4 @@
 import MyEventsWidget, { MyEventsWidgetProps } from './MyEventsWidget';
 import MyEventsWidgetSkeleton from './Skeleton';
 export default MyEventsWidget;
-export { MyEventsWidgetSkeleton, MyEventsWidgetProps };
+export { MyEventsWidgetSkeleton, type MyEventsWidgetProps };

package/lib/cjs/components/NavigationSettingsIconButton/NavigationSettingsIconButton.js

@@ -247,14 +247,6 @@ function NavigationSettingsIconButton(inProps) {
     if (!scUserContext.user) {
         return null;
     }
-    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) }, rest, { onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "more_vert" }) })), Boolean(anchorEl) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, slotProps: {
-                        paper: {
-                            className: classes.paper
-                        }
-                    }, disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: renderList() }) }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, slotProps: {
-                        paper: {
-                            className: classes.paper
-                        }
-                    } }, { children: renderList() }))) }))] }));
+    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) }, rest, { onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "more_vert" }) })), Boolean(anchorEl) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: renderList() }) }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))) }))] }));
 }
 exports.default = NavigationSettingsIconButton;