@selfcommunity/react-ui 0.10.2-courses.206 → 0.10.2-courses.208

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

@@ -1,5 +1,4 @@
 import { ButtonProps } from '@mui/material/Button/Button';
-import { SCEventType, SCLiveStreamType } from '@selfcommunity/types';
 import { CreateLiveStreamDialogProps } from '../CreateLiveStreamDialog';
 export interface CreateLiveStreamButtonProps extends ButtonProps {
     /**
@@ -12,11 +11,6 @@ export interface CreateLiveStreamButtonProps extends ButtonProps {
      * @default empty object
      */
     CreateLiveStreamDialogComponentProps?: CreateLiveStreamDialogProps;
-    /**
-     * On success callback function
-     * @default null
-     */
-    onSuccess?: (data: SCEventType | SCLiveStreamType) => void;
     /**
      * Any other properties
      */

package/lib/cjs/components/CreateLiveStreamButton/CreateLiveStreamButton.js

@@ -45,7 +45,7 @@ function CreateLiveStreamButton(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, CreateLiveStreamDialogComponentProps = {}, onSuccess, children } = props, rest = tslib_1.__rest(props, ["className", "CreateLiveStreamDialogComponentProps", "onSuccess", "children"]);
+    const { className, CreateLiveStreamDialogComponentProps = {}, children } = props, rest = tslib_1.__rest(props, ["className", "CreateLiveStreamDialogComponentProps", "children"]);
     // CONTEXT
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
     const { preferences, features } = (0, react_core_1.useSCPreferences)();
@@ -71,13 +71,6 @@ function CreateLiveStreamButton(inProps) {
     const handleClose = () => {
         setOpen((o) => !o);
     };
-    /**
-     * Handle close
-     */
-    const handleSuccess = (data) => {
-        onSuccess && onSuccess(data);
-        setOpen((o) => !o);
-    };
     /**
      * If there's no authUserId, component is hidden.
      */
@@ -87,6 +80,6 @@ function CreateLiveStreamButton(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClose, variant: "contained", color: "secondary", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "movie" }) }, rest, { children: children !== null && children !== void 0 ? children : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createEventButton.goLive", defaultMessage: "ui.createEventButton.goLive" }) })), open && (0, jsx_runtime_1.jsx)(CreateLiveStreamDialog_1.default, Object.assign({ open: true, onClose: handleClose, onSuccess: handleSuccess }, CreateLiveStreamDialogComponentProps))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClose, variant: "contained", color: "secondary", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "movie" }) }, rest, { children: children !== null && children !== void 0 ? children : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createEventButton.goLive", defaultMessage: "ui.createEventButton.goLive" }) })), open && (0, jsx_runtime_1.jsx)(CreateLiveStreamDialog_1.default, Object.assign({ open: true, onClose: handleClose }, CreateLiveStreamDialogComponentProps))] }));
 }
 exports.default = CreateLiveStreamButton;

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

@@ -1,5 +1,6 @@
-import { SCEventType, SCLiveStreamType } from '@selfcommunity/types';
 import { BaseDialogProps } from '../../shared/BaseDialog';
+import { EventFormProps } from '../EventForm';
+import { LiveStreamFormProps } from '../LiveStreamForm';
 export interface CreateLiveStreamDialogProps extends BaseDialogProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -17,10 +18,15 @@ export interface CreateLiveStreamDialogProps extends BaseDialogProps {
      */
     onClose?: () => void;
     /**
-     * On success callback function
-     * @default null
+     * Props to spread to EventForm component
+     * @default {}
+     */
+    EventFormComponentProps?: EventFormProps;
+    /**
+     * Props to spread to LiveStreamForm component
+     * @default {}
      */
-    onSuccess?: (data: SCEventType | SCLiveStreamType) => void;
+    LiveStreamFormComponentProps?: LiveStreamFormProps;
     /**
      * Any other properties
      */

package/lib/cjs/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js

@@ -65,7 +65,7 @@ function CreateLiveStreamDialog(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className, open = true, onClose, onSuccess } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "onSuccess"]);
+    const { className, open = true, onClose, EventFormComponentProps = {}, LiveStreamFormComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "EventFormComponentProps", "LiveStreamFormComponentProps"]);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     // PERMISSION
@@ -86,8 +86,12 @@ function CreateLiveStreamDialog(inProps) {
         setStep(types_2.CreateLiveStreamStep.SELECT_TYPE);
     }, []);
     const handleSubmit = (0, react_1.useCallback)((e) => {
-        onSuccess && onSuccess(e);
-    }, [onSuccess]);
+        var _a, _b;
+        liveType === types_2.LiveStreamType.EVENT_LIVE
+            ? (_a = EventFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(EventFormComponentProps, e)
+            : (_b = LiveStreamFormComponentProps.onSuccess) === null || _b === void 0 ? void 0 : _b.call(LiveStreamFormComponentProps, e);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [liveType, onClose, EventFormComponentProps, LiveStreamFormComponentProps]);
     (0, react_1.useEffect)(() => {
         if (!canCreateEvent) {
             setLiveType(types_2.LiveStreamType.DIRECT_LIVE);
@@ -100,6 +104,6 @@ function CreateLiveStreamDialog(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: "md", title: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.title, component: "span" }, { children: [canShowBackButton && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.button.back", defaultMessage: "ui.createLivestreamDialog.button.back" }) }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: "body", onClose: !canShowBackButton ? onClose : undefined, className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [step === types_2.CreateLiveStreamStep.SELECT_TYPE && ((0, jsx_runtime_1.jsx)(LiveStreamSelector_1.default, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === types_2.CreateLiveStreamStep.CREATE_LIVE && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: liveType === types_2.LiveStreamType.EVENT_LIVE ? ((0, jsx_runtime_1.jsx)(EventForm_1.default, { EventAddressComponentProps: { locations: [types_1.SCEventLocationType.LIVESTREAM] }, onSuccess: handleSubmit })) : ((0, jsx_runtime_1.jsx)(LiveStreamForm_1.default, { onSuccess: handleSubmit })) }))] })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: "md", title: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.title, component: "span" }, { children: [canShowBackButton && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.button.back", defaultMessage: "ui.createLivestreamDialog.button.back" }) }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: "body", onClose: !canShowBackButton ? onClose : undefined, className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [step === types_2.CreateLiveStreamStep.SELECT_TYPE && ((0, jsx_runtime_1.jsx)(LiveStreamSelector_1.default, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === types_2.CreateLiveStreamStep.CREATE_LIVE && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: liveType === types_2.LiveStreamType.EVENT_LIVE ? ((0, jsx_runtime_1.jsx)(EventForm_1.default, Object.assign({}, EventFormComponentProps, { EventAddressComponentProps: { locations: [types_1.SCEventLocationType.LIVESTREAM] }, onSuccess: handleSubmit }))) : ((0, jsx_runtime_1.jsx)(LiveStreamForm_1.default, Object.assign({}, LiveStreamFormComponentProps, { onSuccess: handleSubmit }))) }))] })) })));
 }
 exports.default = CreateLiveStreamDialog;

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

@@ -18,7 +18,7 @@ export interface EventFormDialogProps extends BaseDialogProps {
     onClose?: () => void;
     /**
      * Props to spread to EventForm component
-     * @default undefined
+     * @default {}
      */
     EventFormComponentProps?: EventFormProps;
     /**

package/lib/cjs/components/EventFormDialog/EventFormDialog.js

@@ -42,15 +42,15 @@ function EventFormDialog(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className, open = true, onClose, EventFormComponentProps } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "EventFormComponentProps"]);
+    const { className, open = true, onClose, EventFormComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "EventFormComponentProps"]);
     const handleSuccess = (0, react_1.useCallback)((event) => {
         var _a;
-        (_a = EventFormComponentProps === null || EventFormComponentProps === void 0 ? void 0 : EventFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(EventFormComponentProps, event);
+        (_a = EventFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(EventFormComponentProps, event);
         onClose === null || onClose === void 0 ? void 0 : onClose();
     }, [onClose, EventFormComponentProps]);
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, title: (EventFormComponentProps === null || EventFormComponentProps === void 0 ? void 0 : EventFormComponentProps.event) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.title.edit", defaultMessage: "ui.eventForm.title.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.title", defaultMessage: "ui.eventForm.title" })), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(EventForm_1.default, Object.assign({}, (EventFormComponentProps && EventFormComponentProps), { onSuccess: handleSuccess })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, title: (EventFormComponentProps === null || EventFormComponentProps === void 0 ? void 0 : EventFormComponentProps.event) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.title.edit", defaultMessage: "ui.eventForm.title.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.title", defaultMessage: "ui.eventForm.title" })), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(EventForm_1.default, Object.assign({}, EventFormComponentProps, { onSuccess: handleSuccess })) })));
 }
 exports.default = EventFormDialog;

package/lib/cjs/components/GroupForm/GroupForm.js

@@ -195,10 +195,10 @@ function GroupForm(inProps) {
         }
         groupService
             .then((data) => {
-            onSuccess && onSuccess(data);
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
             notifyChanges(data);
-            onClose && onClose();
             setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
+            onClose === null || onClose === void 0 ? void 0 : onClose();
         })
             .catch((e) => {
             setError(Object.assign(Object.assign({}, error), (0, api_services_1.formatHttpErrorCode)(e)));

package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.d.ts

@@ -26,7 +26,9 @@ export interface NavigationMenuDrawerProps extends DrawerProps {
      * Custom Drawer footer content
      * @default null
      */
-    drawerFooterContent?: React.ReactNode;
+    drawerFooterContent?: React.ReactNode | ((props: {
+        handleCloseMenuDrawer: (event: any, reason: 'backdropClick' | 'escapeKeyDown') => void;
+    }) => React.ReactNode);
     /**
      * Props to spread to ScrollContainer component
      * This lib use 'react-custom-scrollbars' component to perform scrollbars

package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = tslib_1.__importDefault(require("react"));
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -11,7 +11,6 @@ const ScrollContainer_1 = tslib_1.__importDefault(require("../../shared/ScrollCo
 const DefaultDrawerContent_1 = tslib_1.__importDefault(require("./DefaultDrawerContent"));
 const DefaultHeaderContent_1 = tslib_1.__importDefault(require("./DefaultHeaderContent"));
 const CreateLiveStreamButton_1 = tslib_1.__importDefault(require("../CreateLiveStreamButton"));
-const react_core_1 = require("@selfcommunity/react-core");
 const PREFIX = 'SCNavigationMenuDrawer';
 const classes = {
     root: `${PREFIX}-root`,
@@ -30,15 +29,23 @@ const Root = (0, styles_1.styled)(material_1.Drawer, {
     overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({}));
 function NavigationMenuDrawer(inProps) {
-    var _a;
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
         name: PREFIX
     });
     const { className = null, showDrawerHeader = true, drawerHeaderContent = (0, jsx_runtime_1.jsx)(DefaultHeaderContent_1.default, {}), drawerContent = (0, jsx_runtime_1.jsx)(DefaultDrawerContent_1.default, {}), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = { hideTracksWhenNotNeeded: true }, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = tslib_1.__rest(props, ["className", "showDrawerHeader", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
-    const scUserContext = (0, react_core_1.useSCUser)();
-    const canCreateLiveStream = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ anchor: "left", className: (0, classnames_1.default)(classes.root, className), open: open, onClose: onClose }, rest, { children: [showDrawerHeader && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.drawerHeader }, { children: [drawerHeaderContent, (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {})] })), (0, jsx_runtime_1.jsx)(ScrollContainer_1.default, Object.assign({}, ScrollContainerProps, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.drawerContent, onClick: onClose }, { children: drawerContent })) })), showDrawerFooterContent && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.drawerFooter }, { children: drawerFooterContent ? (drawerFooterContent) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.drawerFooterLiveStream }, { children: (0, jsx_runtime_1.jsx)(CreateLiveStreamButton_1.default, Object.assign({ color: "primary", className: classes.drawerFooterLiveStreamButton, fullWidth: true }, CreateLiveStreamButtonComponentProps)) }))) })) }))] })));
+    const footerContent = (() => {
+        if (typeof drawerFooterContent === 'function') {
+            return drawerFooterContent({ handleCloseMenuDrawer: onClose });
+        }
+        if (react_1.default.isValidElement(drawerFooterContent)) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            return react_1.default.cloneElement(drawerFooterContent, { handleCloseMenuDrawer: onClose });
+        }
+        return drawerFooterContent;
+    })();
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ anchor: "left", className: (0, classnames_1.default)(classes.root, className), open: open, onClose: onClose }, rest, { children: [showDrawerHeader && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.drawerHeader }, { children: [drawerHeaderContent, (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {})] })), (0, jsx_runtime_1.jsx)(ScrollContainer_1.default, Object.assign({}, ScrollContainerProps, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.drawerContent, onClick: onClose }, { children: drawerContent })) })), showDrawerFooterContent && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "div", className: classes.drawerFooter }, { children: footerContent || ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.drawerFooterLiveStream }, { children: (0, jsx_runtime_1.jsx)(CreateLiveStreamButton_1.default, Object.assign({ color: "primary", className: classes.drawerFooterLiveStreamButton, fullWidth: true }, CreateLiveStreamButtonComponentProps)) }))) })) }))] })));
 }
 exports.default = NavigationMenuDrawer;

package/lib/cjs/components/Notification/Course/Course.js

@@ -18,6 +18,7 @@ const UserAvatar_1 = tslib_1.__importDefault(require("../../../shared/UserAvatar
 const constants_1 = require("../constants");
 const Course_1 = tslib_1.__importDefault(require("../../Course"));
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../../shared/HiddenPlaceholder"));
+const utils_1 = require("./utils");
 const classes = {
     root: `${constants_1.PREFIX}-course-root`,
     avatar: `${constants_1.PREFIX}-avatar`,
@@ -31,14 +32,6 @@ const Root = (0, styles_1.styled)(NotificationItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'CourseRoot'
 })(() => ({}));
-function formatLessonUrl(notificationObject) {
-    return {
-        id: notificationObject.course.id,
-        slug: notificationObject.course.slug,
-        section_id: notificationObject.comment.section_id,
-        lesson_id: notificationObject.comment.lesson_id
-    };
-}
 /**
  * This component render the content of the notification of type course
  * @constructor
@@ -70,15 +63,11 @@ function CourseNotification(props) {
                                 ? notificationObject.comment.lesson_name
                                 : notificationObject.course.name,
                             link: (...chunks) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
-                                    ? react_core_1.SCRoutes.COURSE_LESSON_COMMENTS_ROUTE_NAME
+                                    ? react_core_1.SCRoutes.COURSE_LESSON_ROUTE_NAME
                                     : react_core_1.SCRoutes.COURSE_ROUTE_NAME, notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
-                                    ? formatLessonUrl(notificationObject)
+                                    ? (0, utils_1.formatLessonUrl)(notificationObject)
                                     : notificationObject.course) }, { children: chunks })))
-                        } })] }), footer: isToastTemplate ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "primary" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
-                                ? react_core_1.SCRoutes.COURSE_LESSON_COMMENTS_ROUTE_NAME
-                                : react_core_1.SCRoutes.COURSE_ROUTE_NAME, notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
-                                ? formatLessonUrl(notificationObject)
-                                : notificationObject.course) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.button.see" }) })) }))] }))) : ((0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
+                        } })] }), footer: isToastTemplate ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "primary" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url((0, utils_1.getRouteName)(notificationObject), (0, utils_1.getRouteParams)(notificationObject)) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.button.see" }) })) }))] }))) : ((0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
     }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && {
                     to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
@@ -91,14 +80,10 @@ function CourseNotification(props) {
                                     ? notificationObject.comment.lesson_name
                                     : notificationObject.course.name,
                                 link: (...chunks) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
-                                        ? react_core_1.SCRoutes.COURSE_LESSON_COMMENTS_ROUTE_NAME
+                                        ? react_core_1.SCRoutes.COURSE_LESSON_ROUTE_NAME
                                         : react_core_1.SCRoutes.COURSE_ROUTE_NAME, notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
-                                        ? formatLessonUrl(notificationObject)
+                                        ? (0, utils_1.formatLessonUrl)(notificationObject)
                                         : notificationObject.course) }, { children: chunks })))
-                            } }), notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", dangerouslySetInnerHTML: { __html: notificationObject.comment.html } })) : ((0, jsx_runtime_1.jsx)(Course_1.default, { course: notificationObject.course, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), template: types_2.SCCourseTemplateType.SNIPPET, elevation: 0 }))] }), actions: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: react_core_1.Link, to: scRoutingContext.url(notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
-                                ? react_core_1.SCRoutes.COURSE_LESSON_COMMENTS_ROUTE_NAME
-                                : react_core_1.SCRoutes.COURSE_ROUTE_NAME, notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
-                                ? formatLessonUrl(notificationObject)
-                                : notificationObject.course) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.button.see" }) }))] })) }, rest)), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+                            } }), notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", dangerouslySetInnerHTML: { __html: notificationObject.comment.html } })) : ((0, jsx_runtime_1.jsx)(Course_1.default, { course: notificationObject.course, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), template: types_2.SCCourseTemplateType.SNIPPET, elevation: 0 }))] }), actions: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: react_core_1.Link, to: scRoutingContext.url((0, utils_1.getRouteName)(notificationObject), (0, utils_1.getRouteParams)(notificationObject)) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.button.see" }) }))] })) }, rest)), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }
 exports.default = CourseNotification;

package/lib/cjs/components/Notification/Course/utils.d.ts

@@ -0,0 +1,5 @@
+import { SCNotificationCourseActivityType } from '@selfcommunity/types';
+declare function formatLessonUrl(notificationObject: SCNotificationCourseActivityType): any;
+declare const getRouteName: (notificationObject: SCNotificationCourseActivityType) => "course_edit" | "course_lesson_comments" | "course";
+declare const getRouteParams: (notificationObject: SCNotificationCourseActivityType) => any;
+export { getRouteName, getRouteParams, formatLessonUrl };

package/lib/cjs/components/Notification/Course/utils.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatLessonUrl = exports.getRouteParams = exports.getRouteName = void 0;
+const course_1 = require("../../../types/course");
+const types_1 = require("@selfcommunity/types");
+const react_core_1 = require("@selfcommunity/react-core");
+function formatLessonUrl(notificationObject) {
+    return {
+        id: notificationObject.course.id,
+        slug: notificationObject.course.slug,
+        section_id: notificationObject.comment.section_id,
+        lesson_id: notificationObject.comment.lesson_id
+    };
+}
+exports.formatLessonUrl = formatLessonUrl;
+function formatCourseRequestsUrl(notificationObject) {
+    return {
+        id: notificationObject.course.id,
+        slug: notificationObject.course.slug,
+        tab: course_1.SCCourseEditTabType.REQUESTS
+    };
+}
+const getRouteName = (notificationObject) => {
+    switch (notificationObject.type) {
+        case types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON:
+            return react_core_1.SCRoutes.COURSE_LESSON_COMMENTS_ROUTE_NAME;
+        case types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_COURSE:
+            return react_core_1.SCRoutes.COURSE_EDIT_ROUTE_NAME;
+        default:
+            return react_core_1.SCRoutes.COURSE_ROUTE_NAME;
+    }
+};
+exports.getRouteName = getRouteName;
+const getRouteParams = (notificationObject) => {
+    switch (notificationObject.type) {
+        case types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON:
+            return formatLessonUrl(notificationObject);
+        case types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_COURSE:
+            return formatCourseRequestsUrl(notificationObject);
+        default:
+            return notificationObject.course;
+    }
+};
+exports.getRouteParams = getRouteParams;

package/lib/cjs/components/Notification/Event/Event.js

@@ -42,10 +42,20 @@ function EventNotification(props) {
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     // STATE
     const [openAlert, setOpenAlert] = (0, react_1.useState)(false);
+    // const [loading, setLoading] = useState<boolean>(false);
+    // const [disabled, setDisabled] = useState<boolean>(!notificationObject.is_new);
     // CONST
     const isSnippetTemplate = template === types_2.SCNotificationObjectTemplateType.SNIPPET;
     const isToastTemplate = template === types_2.SCNotificationObjectTemplateType.TOAST;
     const intl = (0, react_intl_1.useIntl)();
+    //HANDLERS
+    // const acceptRequest = (event) => {
+    //   setLoading(true);
+    //   EventService.inviteOrAcceptEventRequest(event.id, {users: [notificationObject.user.id]}).then(() => {
+    //     setLoading(false);
+    //     setDisabled(true);
+    //   });
+    // };
     // RENDER
     if (isSnippetTemplate || isToastTemplate) {
         return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && {

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

@@ -1,5 +1,4 @@
 import { ButtonProps } from '@mui/material/Button/Button';
-import { SCEventType, SCLiveStreamType } from '@selfcommunity/types';
 import { CreateLiveStreamDialogProps } from '../CreateLiveStreamDialog';
 export interface CreateLiveStreamButtonProps extends ButtonProps {
     /**
@@ -12,11 +11,6 @@ export interface CreateLiveStreamButtonProps extends ButtonProps {
      * @default empty object
      */
     CreateLiveStreamDialogComponentProps?: CreateLiveStreamDialogProps;
-    /**
-     * On success callback function
-     * @default null
-     */
-    onSuccess?: (data: SCEventType | SCLiveStreamType) => void;
     /**
      * Any other properties
      */

package/lib/esm/components/CreateLiveStreamButton/CreateLiveStreamButton.js

@@ -43,7 +43,7 @@ export default function CreateLiveStreamButton(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, CreateLiveStreamDialogComponentProps = {}, onSuccess, children } = props, rest = __rest(props, ["className", "CreateLiveStreamDialogComponentProps", "onSuccess", "children"]);
+    const { className, CreateLiveStreamDialogComponentProps = {}, children } = props, rest = __rest(props, ["className", "CreateLiveStreamDialogComponentProps", "children"]);
     // CONTEXT
     const scUserContext = useContext(SCUserContext);
     const { preferences, features } = useSCPreferences();
@@ -69,13 +69,6 @@ export default function CreateLiveStreamButton(inProps) {
     const handleClose = () => {
         setOpen((o) => !o);
     };
-    /**
-     * Handle close
-     */
-    const handleSuccess = (data) => {
-        onSuccess && onSuccess(data);
-        setOpen((o) => !o);
-    };
     /**
      * If there's no authUserId, component is hidden.
      */
@@ -85,5 +78,5 @@ export default function CreateLiveStreamButton(inProps) {
     /**
      * Renders root object
      */
-    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClose, variant: "contained", color: "secondary", startIcon: _jsx(Icon, { children: "movie" }) }, rest, { children: children !== null && children !== void 0 ? children : _jsx(FormattedMessage, { id: "ui.createEventButton.goLive", defaultMessage: "ui.createEventButton.goLive" }) })), open && _jsx(CreateLivestreamDialog, Object.assign({ open: true, onClose: handleClose, onSuccess: handleSuccess }, CreateLiveStreamDialogComponentProps))] }));
+    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClose, variant: "contained", color: "secondary", startIcon: _jsx(Icon, { children: "movie" }) }, rest, { children: children !== null && children !== void 0 ? children : _jsx(FormattedMessage, { id: "ui.createEventButton.goLive", defaultMessage: "ui.createEventButton.goLive" }) })), open && _jsx(CreateLivestreamDialog, Object.assign({ open: true, onClose: handleClose }, CreateLiveStreamDialogComponentProps))] }));
 }

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

@@ -1,5 +1,6 @@
-import { SCEventType, SCLiveStreamType } from '@selfcommunity/types';
 import { BaseDialogProps } from '../../shared/BaseDialog';
+import { EventFormProps } from '../EventForm';
+import { LiveStreamFormProps } from '../LiveStreamForm';
 export interface CreateLiveStreamDialogProps extends BaseDialogProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -17,10 +18,15 @@ export interface CreateLiveStreamDialogProps extends BaseDialogProps {
      */
     onClose?: () => void;
     /**
-     * On success callback function
-     * @default null
+     * Props to spread to EventForm component
+     * @default {}
+     */
+    EventFormComponentProps?: EventFormProps;
+    /**
+     * Props to spread to LiveStreamForm component
+     * @default {}
      */
-    onSuccess?: (data: SCEventType | SCLiveStreamType) => void;
+    LiveStreamFormComponentProps?: LiveStreamFormProps;
     /**
      * Any other properties
      */

package/lib/esm/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js

@@ -63,7 +63,7 @@ export default function CreateLiveStreamDialog(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, open = true, onClose, onSuccess } = props, rest = __rest(props, ["className", "open", "onClose", "onSuccess"]);
+    const { className, open = true, onClose, EventFormComponentProps = {}, LiveStreamFormComponentProps = {} } = props, rest = __rest(props, ["className", "open", "onClose", "EventFormComponentProps", "LiveStreamFormComponentProps"]);
     // CONTEXT
     const scUserContext = useSCUser();
     // PERMISSION
@@ -84,8 +84,12 @@ export default function CreateLiveStreamDialog(inProps) {
         setStep(CreateLiveStreamStep.SELECT_TYPE);
     }, []);
     const handleSubmit = useCallback((e) => {
-        onSuccess && onSuccess(e);
-    }, [onSuccess]);
+        var _a, _b;
+        liveType === LiveStreamType.EVENT_LIVE
+            ? (_a = EventFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(EventFormComponentProps, e)
+            : (_b = LiveStreamFormComponentProps.onSuccess) === null || _b === void 0 ? void 0 : _b.call(LiveStreamFormComponentProps, e);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [liveType, onClose, EventFormComponentProps, LiveStreamFormComponentProps]);
     useEffect(() => {
         if (!canCreateEvent) {
             setLiveType(LiveStreamType.DIRECT_LIVE);
@@ -98,5 +102,5 @@ export default function CreateLiveStreamDialog(inProps) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: "md", title: _jsxs(Box, Object.assign({ className: classes.title, component: "span" }, { children: [canShowBackButton && (_jsx(Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.button.back", defaultMessage: "ui.createLivestreamDialog.button.back" }) }))), _jsx(Box, Object.assign({ component: "span" }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: "body", onClose: !canShowBackButton ? onClose : undefined, className: classNames(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [step === CreateLiveStreamStep.SELECT_TYPE && (_jsx(LiveStreamSelector, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === CreateLiveStreamStep.CREATE_LIVE && (_jsx(_Fragment, { children: liveType === LiveStreamType.EVENT_LIVE ? (_jsx(EventForm, { EventAddressComponentProps: { locations: [SCEventLocationType.LIVESTREAM] }, onSuccess: handleSubmit })) : (_jsx(LiveStreamForm, { onSuccess: handleSubmit })) }))] })) })));
+    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: "md", title: _jsxs(Box, Object.assign({ className: classes.title, component: "span" }, { children: [canShowBackButton && (_jsx(Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.button.back", defaultMessage: "ui.createLivestreamDialog.button.back" }) }))), _jsx(Box, Object.assign({ component: "span" }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: "body", onClose: !canShowBackButton ? onClose : undefined, className: classNames(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [step === CreateLiveStreamStep.SELECT_TYPE && (_jsx(LiveStreamSelector, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === CreateLiveStreamStep.CREATE_LIVE && (_jsx(_Fragment, { children: liveType === LiveStreamType.EVENT_LIVE ? (_jsx(EventForm, Object.assign({}, EventFormComponentProps, { EventAddressComponentProps: { locations: [SCEventLocationType.LIVESTREAM] }, onSuccess: handleSubmit }))) : (_jsx(LiveStreamForm, Object.assign({}, LiveStreamFormComponentProps, { onSuccess: handleSubmit }))) }))] })) })));
 }

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

@@ -18,7 +18,7 @@ export interface EventFormDialogProps extends BaseDialogProps {
     onClose?: () => void;
     /**
      * Props to spread to EventForm component
-     * @default undefined
+     * @default {}
      */
     EventFormComponentProps?: EventFormProps;
     /**

package/lib/esm/components/EventFormDialog/EventFormDialog.js

@@ -40,14 +40,14 @@ export default function EventFormDialog(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, open = true, onClose, EventFormComponentProps } = props, rest = __rest(props, ["className", "open", "onClose", "EventFormComponentProps"]);
+    const { className, open = true, onClose, EventFormComponentProps = {} } = props, rest = __rest(props, ["className", "open", "onClose", "EventFormComponentProps"]);
     const handleSuccess = useCallback((event) => {
         var _a;
-        (_a = EventFormComponentProps === null || EventFormComponentProps === void 0 ? void 0 : EventFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(EventFormComponentProps, event);
+        (_a = EventFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(EventFormComponentProps, event);
         onClose === null || onClose === void 0 ? void 0 : onClose();
     }, [onClose, EventFormComponentProps]);
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, title: (EventFormComponentProps === null || EventFormComponentProps === void 0 ? void 0 : EventFormComponentProps.event) ? (_jsx(FormattedMessage, { id: "ui.eventForm.title.edit", defaultMessage: "ui.eventForm.title.edit" })) : (_jsx(FormattedMessage, { id: "ui.eventForm.title", defaultMessage: "ui.eventForm.title" })), open: open, onClose: onClose, className: classNames(classes.root, className) }, rest, { children: _jsx(EventForm, Object.assign({}, (EventFormComponentProps && EventFormComponentProps), { onSuccess: handleSuccess })) })));
+    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, title: (EventFormComponentProps === null || EventFormComponentProps === void 0 ? void 0 : EventFormComponentProps.event) ? (_jsx(FormattedMessage, { id: "ui.eventForm.title.edit", defaultMessage: "ui.eventForm.title.edit" })) : (_jsx(FormattedMessage, { id: "ui.eventForm.title", defaultMessage: "ui.eventForm.title" })), open: open, onClose: onClose, className: classNames(classes.root, className) }, rest, { children: _jsx(EventForm, Object.assign({}, EventFormComponentProps, { onSuccess: handleSuccess })) })));
 }

package/lib/esm/components/GroupForm/GroupForm.js

@@ -193,10 +193,10 @@ export default function GroupForm(inProps) {
         }
         groupService
             .then((data) => {
-            onSuccess && onSuccess(data);
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
             notifyChanges(data);
-            onClose && onClose();
             setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
+            onClose === null || onClose === void 0 ? void 0 : onClose();
         })
             .catch((e) => {
             setError(Object.assign(Object.assign({}, error), formatHttpErrorCode(e)));

package/lib/esm/components/NavigationMenuIconButton/NavigationMenuDrawer.d.ts

@@ -26,7 +26,9 @@ export interface NavigationMenuDrawerProps extends DrawerProps {
      * Custom Drawer footer content
      * @default null
      */
-    drawerFooterContent?: React.ReactNode;
+    drawerFooterContent?: React.ReactNode | ((props: {
+        handleCloseMenuDrawer: (event: any, reason: 'backdropClick' | 'escapeKeyDown') => void;
+    }) => React.ReactNode);
     /**
      * Props to spread to ScrollContainer component
      * This lib use 'react-custom-scrollbars' component to perform scrollbars

package/lib/esm/components/NavigationMenuIconButton/NavigationMenuDrawer.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import React from 'react';
 import { styled } from '@mui/material/styles';
 import { Box, Divider, Drawer, Icon, IconButton, List } from '@mui/material';
 import classNames from 'classnames';
@@ -9,7 +9,6 @@ import ScrollContainer from '../../shared/ScrollContainer';
 import DefaultDrawerContent from './DefaultDrawerContent';
 import DefaultHeaderContent from './DefaultHeaderContent';
 import CreateLiveStreamButton from '../CreateLiveStreamButton';
-import { useSCUser } from '@selfcommunity/react-core';
 const PREFIX = 'SCNavigationMenuDrawer';
 const classes = {
     root: `${PREFIX}-root`,
@@ -28,14 +27,22 @@ const Root = styled(Drawer, {
     overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({}));
 export default function NavigationMenuDrawer(inProps) {
-    var _a;
     // PROPS
     const props = useThemeProps({
         props: inProps,
         name: PREFIX
     });
     const { className = null, showDrawerHeader = true, drawerHeaderContent = _jsx(DefaultHeaderContent, {}), drawerContent = _jsx(DefaultDrawerContent, {}), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = { hideTracksWhenNotNeeded: true }, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = __rest(props, ["className", "showDrawerHeader", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
-    const scUserContext = useSCUser();
-    const canCreateLiveStream = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
-    return (_jsxs(Root, Object.assign({ anchor: "left", className: classNames(classes.root, className), open: open, onClose: onClose }, rest, { children: [showDrawerHeader && (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ className: classes.drawerHeader }, { children: [drawerHeaderContent, _jsx(IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: onClose }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsx(Divider, {})] })), _jsx(ScrollContainer, Object.assign({}, ScrollContainerProps, { children: _jsx(List, Object.assign({ className: classes.drawerContent, onClick: onClose }, { children: drawerContent })) })), showDrawerFooterContent && (_jsx(_Fragment, { children: _jsx(Box, Object.assign({ className: classes.drawerFooter }, { children: drawerFooterContent ? (drawerFooterContent) : (_jsx(Box, Object.assign({ className: classes.drawerFooterLiveStream }, { children: _jsx(CreateLiveStreamButton, Object.assign({ color: "primary", className: classes.drawerFooterLiveStreamButton, fullWidth: true }, CreateLiveStreamButtonComponentProps)) }))) })) }))] })));
+    const footerContent = (() => {
+        if (typeof drawerFooterContent === 'function') {
+            return drawerFooterContent({ handleCloseMenuDrawer: onClose });
+        }
+        if (React.isValidElement(drawerFooterContent)) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            return React.cloneElement(drawerFooterContent, { handleCloseMenuDrawer: onClose });
+        }
+        return drawerFooterContent;
+    })();
+    return (_jsxs(Root, Object.assign({ anchor: "left", className: classNames(classes.root, className), open: open, onClose: onClose }, rest, { children: [showDrawerHeader && (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ className: classes.drawerHeader }, { children: [drawerHeaderContent, _jsx(IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: onClose }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsx(Divider, {})] })), _jsx(ScrollContainer, Object.assign({}, ScrollContainerProps, { children: _jsx(List, Object.assign({ className: classes.drawerContent, onClick: onClose }, { children: drawerContent })) })), showDrawerFooterContent && (_jsx(_Fragment, { children: _jsx(Box, Object.assign({ component: "div", className: classes.drawerFooter }, { children: footerContent || (_jsx(Box, Object.assign({ className: classes.drawerFooterLiveStream }, { children: _jsx(CreateLiveStreamButton, Object.assign({ color: "primary", className: classes.drawerFooterLiveStreamButton, fullWidth: true }, CreateLiveStreamButtonComponentProps)) }))) })) }))] })));
 }