@selfcommunity/react-ui 0.10.2-courses.186 → 0.10.2-courses.188

package/lib/cjs/utils/course.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDripDelayAndUnit = exports.isCourseCompleted = exports.isCourseNew = void 0;
+const types_1 = require("@selfcommunity/types");
 function isCourseNew(course) {
-    if (course && course.user_completion_rate !== 100) {
+    if (course && course.join_status === types_1.SCCourseJoinStatusType.JOINED) {
         const createdAtDate = new Date(course.created_at);
         const twoWeeksAgo = new Date();
         twoWeeksAgo.setDate(twoWeeksAgo.getDate() - 14);

package/lib/cjs/utils/events.d.ts

@@ -1,2 +1,3 @@
 import { SCEventType } from '@selfcommunity/types';
 export declare function checkEventFinished(event: SCEventType | null): boolean;
+export declare function formatDateForGC(eventDate: string): string;

package/lib/cjs/utils/events.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkEventFinished = void 0;
+exports.formatDateForGC = exports.checkEventFinished = void 0;
 function checkEventFinished(event) {
     if (event && !event.running) {
         return new Date().getTime() > new Date(event.end_date || event.start_date).getTime();
@@ -8,3 +8,8 @@ function checkEventFinished(event) {
     return false;
 }
 exports.checkEventFinished = checkEventFinished;
+function formatDateForGC(eventDate) {
+    const date = new Date(eventDate);
+    return date.toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z';
+}
+exports.formatDateForGC = formatDateForGC;

package/lib/esm/components/Course/Course.js

@@ -135,6 +135,9 @@ export default function Course(inProps) {
         else if (isCourseCompleted(scCourse)) {
             return _jsx(FormattedMessage, { defaultMessage: "ui.course.status.completed", id: "ui.course.status.completed" });
         }
+        else if (scCourse.join_status === SCCourseJoinStatusType.JOINED) {
+            return _jsx(FormattedMessage, { defaultMessage: "ui.course.status.joined", id: "ui.course.status.joined" });
+        }
         else if (isCourseNew(scCourse)) {
             return _jsx(FormattedMessage, { defaultMessage: "ui.course.status.new", id: "ui.course.status.new" });
         }
@@ -145,22 +148,27 @@ export default function Course(inProps) {
      */
     let contentObj;
     if (template === SCCourseTemplateType.PREVIEW) {
-        contentObj = (_jsxs(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [_jsxs(Box, Object.assign({ className: classes.previewImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scCourse.image_medium, alt: scCourse.name, className: classes.previewImage }), (isCourseAdmin || isCourseCompleted(scCourse) || isCourseNew(scCourse)) && (_jsx(Chip, { size: "small", component: "div", color: isCourseCompleted(scCourse) || (isCourseAdmin && scCourse.privacy)
+        contentObj = (_jsxs(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [_jsxs(Box, Object.assign({ className: classes.previewImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scCourse.image_medium, alt: scCourse.name, className: classes.previewImage }), (isCourseAdmin || isCourseCompleted(scCourse) || isCourseNew(scCourse) || scCourse.join_status === SCCourseJoinStatusType.JOINED) && (_jsx(Chip, { size: "small", component: "div", color: isCourseCompleted(scCourse) || (isCourseAdmin && scCourse.privacy)
                                 ? 'primary'
                                 : isCourseAdmin && !scCourse.privacy
                                     ? 'default'
-                                    : 'secondary', label: chipLabel, className: classes.chip })), _jsx(Link, Object.assign({}, (!((_a = scCourse.created_by) === null || _a === void 0 ? void 0 : _a.deleted) && {
+                                    : scCourse.join_status === SCCourseJoinStatusType.JOINED
+                                        ? 'warning'
+                                        : 'secondary', label: chipLabel, className: classes.chip })), _jsx(Link, Object.assign({}, (!((_a = scCourse.created_by) === null || _a === void 0 ? void 0 : _a.deleted) && {
                             to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
                         }), { children: _jsx(UserAvatar, Object.assign({ hide: !((_b = scCourse.created_by) === null || _b === void 0 ? void 0 : _b.community_badge), smaller: true }, { children: _jsx(Avatar, { alt: scCourse.name, src: (_c = scCourse.created_by) === null || _c === void 0 ? void 0 : _c.avatar, className: classes.previewAvatar }) })) }))] })), _jsxs(CardContent, Object.assign({ className: classes.previewContent }, { children: [_jsx(Link, Object.assign({ className: classes.previewCreator }, (!((_d = scCourse.created_by) === null || _d === void 0 ? void 0 : _d.deleted) && {
                             to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
                         }), { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: (_e = scCourse.created_by) === null || _e === void 0 ? void 0 : _e.username })) })), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse), className: classes.previewNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h6", className: classes.previewName }, { children: scCourse.name })) })), _jsxs(Typography, Object.assign({ className: classes.previewInfo }, { children: [_jsx(FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }), "-", _jsx(FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` })] })), _jsx(Box, Object.assign({ className: classes.previewCategory }, { children: scCourse.categories.map((category) => (_jsx(Chip, { size: "small", label: category.name }, category.id))) })), _jsx(Box, Object.assign({ className: classes.previewProgress }, { children: renderProgress() }))] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.previewActions }, { children: _jsx(Button, Object.assign({ variant: "outlined", size: "small", component: Link, to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.course.see", id: "ui.course.see" }) })) })))] })));
     }
     else {
-        contentObj = (_jsx(SnippetRoot, { ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse) }, elevation: 0, className: classes.snippetRoot, image: _jsxs(Box, Object.assign({ className: classes.snippetImage }, { children: [_jsx(Avatar, { variant: "square", alt: scCourse.name, src: scCourse.image_medium, className: userProfileSnippet ? classes.snippetAvatarUserProfile : classes.snippetAvatar }), !userProfileSnippet && (isCourseAdmin || isCourseCompleted(scCourse) || isCourseNew(scCourse)) && (_jsx(Chip, { size: "small", component: "div", color: isCourseCompleted(scCourse) || (isCourseAdmin && scCourse.privacy)
+        contentObj = (_jsx(SnippetRoot, { ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse) }, elevation: 0, className: classes.snippetRoot, image: _jsxs(Box, Object.assign({ className: classes.snippetImage }, { children: [_jsx(Avatar, { variant: "square", alt: scCourse.name, src: scCourse.image_medium, className: userProfileSnippet ? classes.snippetAvatarUserProfile : classes.snippetAvatar }), !userProfileSnippet &&
+                        (isCourseAdmin || isCourseCompleted(scCourse) || isCourseNew(scCourse) || scCourse.join_status === SCCourseJoinStatusType.JOINED) && (_jsx(Chip, { size: "small", component: "div", color: isCourseCompleted(scCourse) || (isCourseAdmin && scCourse.privacy)
                             ? 'primary'
                             : isCourseAdmin && !scCourse.privacy
                                 ? 'default'
-                                : 'secondary', label: chipLabel, className: classes.chip }))] })), primary: _jsxs(_Fragment, { children: [!userProfileSnippet && (_jsx(Link, Object.assign({}, (!((_f = scCourse.created_by) === null || _f === void 0 ? void 0 : _f.deleted) && {
+                                : scCourse.join_status === SCCourseJoinStatusType.JOINED
+                                    ? 'warning'
+                                    : 'secondary', label: chipLabel, className: classes.chip }))] })), primary: _jsxs(_Fragment, { children: [!userProfileSnippet && (_jsx(Link, Object.assign({}, (!((_f = scCourse.created_by) === null || _f === void 0 ? void 0 : _f.deleted) && {
                         to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
                     }), { children: _jsx(Typography, Object.assign({ component: "span" }, { children: (_g = scCourse.created_by) === null || _g === void 0 ? void 0 : _g.username })) }))), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: scCourse.name })) }))] }), secondary: _jsx(_Fragment, { children: userProfileSnippet ? (_jsx(_Fragment, { children: !scCourse.hide_member_count && (_jsx(FormattedMessage, { id: "ui.course.userProfileSnippet.students", defaultMessage: "ui.course.userProfileSnippet.students", values: { students: scCourse.member_count } })) })) : (_jsxs(_Fragment, { children: [_jsx(FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }), "-", _jsx(FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` })] })) }), actions: actions !== null && actions !== void 0 ? actions : (_jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.course.see", id: "ui.course.see" }) }))) }));
     }

package/lib/esm/components/CourseDashboard/Header.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Button, Icon, Popover, Stack, Typography } from '@mui/material';
+import { Box, Button, Icon, Stack, Typography } from '@mui/material';
 import { SCCoursePrivacyType } from '@selfcommunity/types';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { PREFIX } from './constants';
-import { memo, useCallback, useState } from 'react';
+import { memo } from 'react';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { SCCourseEditTabType } from '../../types';
 import classNames from 'classnames';
+import CourseTypePopover from '../../shared/CourseTypePopover';
 const classes = {
     header: `${PREFIX}-header`,
     img: `${PREFIX}-header-img`,
@@ -26,36 +27,15 @@ function getUrlEditDashboard(course) {
 function HeaderCourseDashboard(props) {
     // PROPS
     const { course, hasAction = false } = props;
-    // STATES
-    const [anchorEl, setAnchorEl] = useState(null);
-    const open = Boolean(anchorEl);
     // CONTEXTS
     const scRoutingContext = useSCRouting();
     // INTL
     const intl = useIntl();
-    // HANDLERS
-    const handleOpenPopover = useCallback((e) => {
-        setAnchorEl(e.currentTarget);
-    }, [setAnchorEl]);
-    const handlePopoverClose = useCallback(() => {
-        setAnchorEl(null);
-    }, [setAnchorEl]);
     return (_jsxs(Box, Object.assign({ className: classes.header }, { children: [_jsx("img", { src: course.image_bigger, alt: course.image_bigger, className: classes.img }), _jsx(Typography, Object.assign({ variant: "h3", className: classes.contrastColor }, { children: course.name })), _jsxs(Stack, Object.assign({ className: classes.outerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.innerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classNames(classes.iconWrapper, classes.contrastColor) }, { children: [_jsx(Icon, Object.assign({ fontSize: "small" }, { children: "public" })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.label", defaultMessage: "ui.course.label", values: {
                                                 privacy: intl.formatMessage({
                                                     id: `ui.course.privacy.${course.privacy === SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`,
                                                     defaultMessage: `ui.course.privacy.${course.privacy === SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`
                                                 })
-                                            } }) }))] })), _jsxs(Stack, Object.assign({ className: classNames(classes.iconWrapper, classes.contrastColor) }, { children: [_jsx(Icon, Object.assign({ fontSize: "small" }, { children: "courses" })), _jsx(Button, Object.assign({ variant: "text", color: "inherit", size: "small", className: classes.buttonPopover, onClick: handleOpenPopover }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.type", defaultMessage: "ui.course.type", values: {
-                                                    typeOfCourse: intl.formatMessage({
-                                                        id: `ui.course.type.${course.type}`,
-                                                        defaultMessage: `ui.course.type.${course.type}`
-                                                    })
-                                                } }) })) })), open && (_jsx(Popover, Object.assign({ open: true, anchorEl: anchorEl, anchorOrigin: {
-                                            vertical: 'bottom',
-                                            horizontal: 'left'
-                                        }, transformOrigin: {
-                                            vertical: 'top',
-                                            horizontal: 'left'
-                                        }, onClose: handlePopoverClose }, { children: _jsx(Box, Object.assign({ sx: { padding: '10px' } }, { children: _jsx(Typography, Object.assign({ component: "span", variant: "body2", sx: { whiteSpace: 'pre-line' } }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.${course.type}.info`, defaultMessage: `ui.courseForm.${course.type}.info` }) })) })) })))] }))] })), hasAction && (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_EDIT_ROUTE_NAME, getUrlEditDashboard(course)), size: "small", color: "primary", variant: "contained" }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
+                                            } }) }))] })), _jsx(CourseTypePopover, { course: course })] })), hasAction && (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_EDIT_ROUTE_NAME, getUrlEditDashboard(course)), size: "small", color: "primary", variant: "contained" }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
 }
 export default memo(HeaderCourseDashboard);

package/lib/esm/components/CourseDashboard/Student.js

@@ -47,8 +47,7 @@ const classes = {
     box: `${PREFIX}-box`,
     percentageWrapper: `${PREFIX}-percentage-wrapper`,
     completedWrapper: `${PREFIX}-completed-wrapper`,
-    contrastColor: `${PREFIX}-contrast-color`,
-    contrastBgColor: `${PREFIX}-contrast-bg-color`
+    contrastColor: `${PREFIX}-contrast-color`
 };
 function getUrlNextLesson(course) {
     var _a;
@@ -178,7 +177,7 @@ function Student(inProps) {
     if (!scCourse) {
         return _jsx(StudentSkeleton, {});
     }
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, classes.studentContainer, className) }, rest, { children: [_jsx(HeaderCourseDashboard, { course: scCourse }), _jsx(Divider, {}), _jsxs(Stack, Object.assign({ className: classNames(classes.userWrapper, classes.contrastBgColor) }, { children: [_jsxs(Stack, Object.assign({ className: classes.user }, { children: [_jsx(Link, Object.assign({}, (!scCourse.created_by.deleted && {
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, classes.studentContainer, className) }, rest, { children: [_jsx(HeaderCourseDashboard, { course: scCourse }), _jsx(Divider, {}), _jsxs(Stack, Object.assign({ className: classes.userWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.user }, { children: [_jsx(Link, Object.assign({}, (!scCourse.created_by.deleted && {
                                 to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
                             }), { children: _jsx(UserAvatar, Object.assign({ hide: !scCourse.created_by.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, src: scCourse.created_by.avatar, alt: scCourse.created_by.username }) })) })), _jsxs(Box, { children: [_jsx(Link, Object.assign({}, (!scCourse.created_by.deleted && {
                                         to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
@@ -188,9 +187,9 @@ function Student(inProps) {
                     scCourse.join_status === SCCourseJoinStatusType.JOINED)) ||
                 scCourse.privacy === SCCoursePrivacyType.OPEN ||
                 scCourse.privacy === SCCoursePrivacyType.DRAFT) &&
-                scCourse.description && (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classNames(classes.margin, classes.contrastColor) }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.description", defaultMessage: "ui.course.dashboard.student.description" }) })), _jsx(Stack, Object.assign({ className: classNames(classes.box, classes.contrastBgColor) }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.description }, { children: scCourse.description })) }))] })), (((scCourse.privacy === SCCoursePrivacyType.PRIVATE || scCourse.privacy === SCCoursePrivacyType.SECRET) &&
+                scCourse.description && (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classNames(classes.margin, classes.contrastColor) }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.description", defaultMessage: "ui.course.dashboard.student.description" }) })), _jsx(Stack, Object.assign({ className: classes.box }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.description }, { children: scCourse.description })) }))] })), (((scCourse.privacy === SCCoursePrivacyType.PRIVATE || scCourse.privacy === SCCoursePrivacyType.SECRET) &&
                 (scCourse.join_status === SCCourseJoinStatusType.MANAGER || scCourse.join_status === SCCourseJoinStatusType.JOINED)) ||
-                (scCourse.privacy === SCCoursePrivacyType.OPEN && scCourse.join_status !== SCCourseJoinStatusType.CREATOR)) && (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classNames(classes.margin, classes.contrastColor) }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.progress", defaultMessage: "ui.course.dashboard.student.description" }) })), _jsxs(Stack, Object.assign({ className: classNames(classes.box, classes.contrastBgColor) }, { children: [_jsxs(Stack, Object.assign({ className: classes.percentageWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.progress.described", defaultMessage: "ui.course.dashboard.student.progress.described", values: { progress: scCourse.num_lessons_completed, end: scCourse.num_lessons } }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.progress.percentage", defaultMessage: "ui.course.dashboard.student.progress.percentage", values: { percentage: scCourse.user_completion_rate } }) }))] })), _jsx(LinearProgress, { className: classes.progress, variant: "determinate", value: scCourse === null || scCourse === void 0 ? void 0 : scCourse.user_completion_rate })] })), scCourse.user_completion_rate === 100 && (_jsxs(Stack, Object.assign({ className: classNames(classes.completedWrapper, classes.margin) }, { children: [_jsx(Typography, Object.assign({ variant: "h3", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.completed", defaultMessage: "ui.course.dashboard.student.completed" }) })), _jsx("img", { src: CLAPPING, alt: intl.formatMessage({ id: 'ui.course.dashboard.student.completed', defaultMessage: 'ui.course.dashboard.student.completed' }), width: 32, height: 32 })] }))), _jsx(Typography, Object.assign({ variant: "h6", className: classNames(classes.margin, classes.contrastColor) }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.contents", defaultMessage: "ui.course.dashboard.student.contents" }) })), _jsxs(Stack, Object.assign({ className: classNames(classes.lessonsSections, classes.contrastBgColor) }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.course.table.sections.title", defaultMessage: "ui.course.table.sections.title", values: {
+                (scCourse.privacy === SCCoursePrivacyType.OPEN && scCourse.join_status !== SCCourseJoinStatusType.CREATOR)) && (_jsxs(Fragment, { children: [scCourse.join_status !== null && (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classNames(classes.margin, classes.contrastColor) }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.progress", defaultMessage: "ui.course.dashboard.student.progress" }) })), _jsxs(Stack, Object.assign({ className: classes.box }, { children: [_jsxs(Stack, Object.assign({ className: classes.percentageWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.progress.described", defaultMessage: "ui.course.dashboard.student.progress.described", values: { progress: scCourse.num_lessons_completed, end: scCourse.num_lessons } }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.progress.percentage", defaultMessage: "ui.course.dashboard.student.progress.percentage", values: { percentage: scCourse.user_completion_rate } }) }))] })), _jsx(LinearProgress, { className: classes.progress, variant: "determinate", value: scCourse.user_completion_rate })] }))] })), scCourse.user_completion_rate === 100 && (_jsxs(Stack, Object.assign({ className: classNames(classes.completedWrapper, classes.margin) }, { children: [_jsx(Typography, Object.assign({ variant: "h3", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.completed", defaultMessage: "ui.course.dashboard.student.completed" }) })), _jsx("img", { src: CLAPPING, alt: intl.formatMessage({ id: 'ui.course.dashboard.student.completed', defaultMessage: 'ui.course.dashboard.student.completed' }), width: 32, height: 32 })] }))), _jsx(Typography, Object.assign({ variant: "h6", className: classNames(classes.margin, classes.contrastColor) }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.contents", defaultMessage: "ui.course.dashboard.student.contents" }) })), _jsxs(Stack, Object.assign({ className: classes.lessonsSections }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.course.table.sections.title", defaultMessage: "ui.course.table.sections.title", values: {
                                         sectionsNumber: scCourse.num_sections
                                     } }) })), _jsx(Box, { className: classes.circle }), _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
                                         lessonsNumber: scCourse.num_lessons

package/lib/esm/components/CourseDashboard/Teacher/Comments.js

@@ -10,7 +10,6 @@ import { DEFAULT_PAGINATION_OFFSET } from '../../../constants/Pagination';
 import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../../utils/widget';
 import { Link, SCCache, SCRoutes, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import { CourseService, Endpoints, http } from '@selfcommunity/api-services';
-import classNames from 'classnames';
 const classes = {
     container: `${PREFIX}-comments-container`,
     outerWrapper: `${PREFIX}-outer-wrapper`,
@@ -20,8 +19,7 @@ const classes = {
     userInfo: `${PREFIX}-user-info`,
     circle: `${PREFIX}-circle`,
     button: `${PREFIX}-button`,
-    contrastColor: `${PREFIX}-contrast-color`,
-    contrastBgColor: `${PREFIX}-contrast-bg-color`
+    contrastColor: `${PREFIX}-contrast-color`
 };
 function CommentSkeleton({ id }) {
     return (_jsxs(Box, Object.assign({ className: classes.outerWrapper }, { children: [_jsx(Skeleton, { animation: "wave", variant: "text", width: "90px", height: "21px" }), _jsx(Divider, {}), _jsxs(Stack, Object.assign({ className: classes.innerWrapper }, { children: [Array.from(new Array(id)).map((_, i) => (_jsxs(Stack, Object.assign({ className: classes.userWrapper }, { children: [_jsx(Skeleton, { animation: "wave", variant: "circular", className: classes.avatar }), _jsxs(Box, { children: [_jsxs(Stack, Object.assign({ className: classes.userInfo }, { children: [_jsx(Skeleton, { animation: "wave", variant: "text", width: "90px", height: "21px" }), _jsx(Box, { className: classes.circle }), _jsx(Skeleton, { animation: "wave", variant: "text", width: "90px", height: "21px" })] })), _jsx(Skeleton, { animation: "wave", variant: "text", width: "180px", height: "21px" })] })] }), i))), _jsx(Skeleton, { animation: "wave", variant: "rounded", width: "112px", height: "36px", className: classes.button })] }))] })));
@@ -40,7 +38,7 @@ function Comments(props) {
         cacheStrategy: CacheStrategies.CACHE_FIRST,
         visibleItems: endpointQueryParams.limit
     }, stateWidgetInitializer);
-    const [isLoadingComments, setIsLoadingComments] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
     // CONTEXTS
     const scUserContext = useSCUser();
     const scRoutingContext = useSCRouting();
@@ -70,7 +68,7 @@ function Comments(props) {
     }, [scUserContext.user, _init]);
     // HANDLERS
     const handleNext = useCallback(() => {
-        setIsLoadingComments(true);
+        setIsLoading(true);
         dispatch({ type: actionWidgetTypes.LOADING_NEXT });
         http
             .request({
@@ -79,12 +77,12 @@ function Comments(props) {
         })
             .then((res) => {
             dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });
-            setIsLoadingComments(false);
+            setIsLoading(false);
         })
             .catch((error) => {
             Logger.error(SCOPE_SC_UI, error);
         });
-    }, [state.next, dispatch, setIsLoadingComments]);
+    }, [state.next, dispatch, setIsLoading]);
     // MEMOS
     const renderComments = useMemo(() => {
         const map = new Map();
@@ -97,11 +95,11 @@ function Comments(props) {
                 map.set(name, [...map.get(name), comment]);
             }
         });
-        return Array.from(map.entries()).map(([name, comments]) => (_jsxs(Box, Object.assign({ className: classNames(classes.outerWrapper, classes.contrastBgColor) }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: name })), _jsx(Divider, {}), _jsxs(Stack, Object.assign({ className: classes.innerWrapper }, { children: [comments.map((comment) => (_jsxs(Stack, Object.assign({ className: classes.userWrapper }, { children: [_jsx(Avatar, { src: comment.created_by.avatar, alt: comment.created_by.username, className: classes.avatar }), _jsxs(Box, { children: [_jsxs(Stack, Object.assign({ className: classes.userInfo }, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: comment.created_by.username })), _jsx(Box, { className: classes.circle }), _jsx(Typography, Object.assign({ variant: "body2" }, { children: new Date(comment.created_at).toLocaleDateString() }))] })), _jsx(Typography, { variant: "body1", component: "div", dangerouslySetInnerHTML: { __html: comment.html } })] })] }), comment.id))), _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, course), size: "small", variant: "outlined", color: "inherit", className: classes.button }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label" }) })) }))] }))] }), name)));
+        return Array.from(map.entries()).map(([name, comments]) => (_jsxs(Box, Object.assign({ className: classes.outerWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: name })), _jsx(Divider, {}), _jsxs(Stack, Object.assign({ className: classes.innerWrapper }, { children: [comments.map((comment) => (_jsxs(Stack, Object.assign({ className: classes.userWrapper }, { children: [_jsx(Avatar, { src: comment.created_by.avatar, alt: comment.created_by.username, className: classes.avatar }), _jsxs(Box, { children: [_jsxs(Stack, Object.assign({ className: classes.userInfo }, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: comment.created_by.username })), _jsx(Box, { className: classes.circle }), _jsx(Typography, Object.assign({ variant: "body2" }, { children: new Date(comment.created_at).toLocaleDateString() }))] })), _jsx(Typography, { variant: "body1", component: "div", dangerouslySetInnerHTML: { __html: comment.html } })] })] }), comment.id))), _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, course), size: "small", variant: "outlined", color: "inherit", className: classes.button }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label" }) })) }))] }))] }), name)));
     }, [state.results]);
     if (!state.initialized) {
         return _jsx(CommentsSkeleton, {});
     }
-    return (_jsx(Box, Object.assign({ className: classes.container }, { children: state.count > 0 ? (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.number", defaultMessage: "ui.course.dashboard.teacher.tab.comments.number", values: { commentsNumber: state.count } }) })), renderComments, isLoadingComments && _jsx(CommentSkeleton, { id: 1 }), _jsx(LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: isLoadingComments, disabled: !state.next, onClick: handleNext, className: classes.contrastBgColor }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.btn.label" }) })) }))] })) : (_jsx(Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.empty", defaultMessage: "ui.course.dashboard.teacher.tab.comments.empty" }) }))) })));
+    return (_jsx(Box, Object.assign({ className: classes.container }, { children: state.count > 0 ? (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.number", defaultMessage: "ui.course.dashboard.teacher.tab.comments.number", values: { commentsNumber: state.count } }) })), renderComments, isLoading && _jsx(CommentSkeleton, { id: 1 }), _jsx(LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: isLoading, disabled: !state.next, onClick: handleNext }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.btn.label" }) })) }))] })) : (_jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.empty", defaultMessage: "ui.course.dashboard.teacher.tab.comments.empty" }) }))) })));
 }
 export default memo(Comments);

package/lib/esm/components/CourseDashboard/Teacher/Info.js

@@ -5,14 +5,12 @@ import { PREFIX } from '../constants';
 import CourseParticipantsButton from '../../CourseParticipantsButton';
 import { memo } from 'react';
 import { InfoPositionType } from '../types';
-import classNames from 'classnames';
 const classes = {
-    info: `${PREFIX}-info`,
-    contrastBgColor: `${PREFIX}-contrast-bg-color`
+    info: `${PREFIX}-info`
 };
 function InfoCourseDashboard(props) {
     // PROPS
     const { title, course, position } = props;
-    return (_jsxs(Stack, Object.assign({ className: classNames(classes.info, classes.contrastBgColor) }, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: title, defaultMessage: title }) })), position === InfoPositionType.FIRST && _jsx(CourseParticipantsButton, { course: course }), position === InfoPositionType.SECOND && _jsxs(Typography, Object.assign({ variant: "h5" }, { children: [course.avg_completion_rate, "%"] }))] })));
+    return (_jsxs(Stack, Object.assign({ className: classes.info }, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: title, defaultMessage: title }) })), position === InfoPositionType.FIRST && _jsx(CourseParticipantsButton, { course: course }), position === InfoPositionType.SECOND && _jsxs(Typography, Object.assign({ variant: "h5" }, { children: [course.avg_completion_rate, "%"] }))] })));
 }
 export default memo(InfoCourseDashboard);

package/lib/esm/components/CourseDashboard/Teacher/Students.js

@@ -7,6 +7,7 @@ import { CourseService } from '@selfcommunity/api-services';
 import { SCCache, useSCUser } from '@selfcommunity/react-core';
 import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../../utils/widget';
 import { DEFAULT_PAGINATION_OFFSET } from '../../../constants/Pagination';
+import { SCCourseUsersTableModeType } from '../../../types/course';
 const headerCells = [
     {
         id: 'ui.course.dashboard.teacher.tab.students.table.header.name'
@@ -59,6 +60,6 @@ function Students(props) {
             };
         }
     }, [scUserContext.user, _init]);
-    return (_jsx(CourseUsersTable, { course: course, state: state, dispatch: dispatch, headerCells: headerCells, mode: "dashboard", emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" }));
+    return (_jsx(CourseUsersTable, { course: course, state: state, dispatch: dispatch, headerCells: headerCells, mode: SCCourseUsersTableModeType.DASHBOARD, emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" }));
 }
 export default memo(Students);

package/lib/esm/components/CourseForm/CourseForm.js

@@ -55,8 +55,7 @@ const classes = {
     stepOne: `${PREFIX}-step-one`,
     stepTwo: `${PREFIX}-step-two`,
     title: `${PREFIX}-title`,
-    contrastColor: `${PREFIX}-contrast-color`,
-    contrastBgColor: `${PREFIX}-contrast-bg-color`
+    contrastColor: `${PREFIX}-contrast-color`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -248,11 +247,11 @@ export default function CourseForm(inProps) {
     /**
      * Renders root object
      */
-    return (_jsxs(Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(Box, Object.assign({ className: _step === SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === SCCourseFormStepType.GENERAL && (_jsx(_Fragment, { children: Object.values(SCCourseTypologyType).map((option, index) => (_jsx(Card, Object.assign({ className: classNames(classes.card, { [classes.selected]: option === field.type }) }, { children: _jsx(CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }) })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === SCCourseFormStepType.CUSTOMIZATION && (_jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [course && (_jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), _jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadCourseCover, { isUploading: field.isSubmitting, onChange: handleChangeCover }) })), _jsx(TextField, { required: true, className: classNames(classes.name, classes.contrastBgColor), placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
-                                        endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: COURSE_TITLE_MAX_LENGTH - field.name.length }))
-                                    }, error: Boolean(field.name.length > COURSE_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > COURSE_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.courseForm.name.error.maxLength", defaultMessage: "ui.courseForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), _jsx(TextField, { multiline: true, className: classNames(classes.description, classes.contrastBgColor), placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                                        endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : COURSE_DESCRIPTION_MAX_LENGTH })))
-                                    }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > COURSE_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" })) : null }), _jsx(CategoryAutocomplete, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory, className: classes.contrastBgColor }), course && (_jsx(CourseEdit, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))), className: classes.contrastBgColor }))] }))), _jsx(Box, Object.assign({ className: classNames(classes.actions, classes.contrastBgColor) }, { children: _jsx(LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === SCCourseFormStepType.GENERAL
+    return (_jsxs(Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(Box, Object.assign({ className: _step === SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === SCCourseFormStepType.GENERAL && (_jsx(_Fragment, { children: Object.values(SCCourseTypologyType).map((option, index) => (_jsx(Card, Object.assign({ className: classNames(classes.card, { [classes.selected]: option === field.type }) }, { children: _jsx(CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }) })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === SCCourseFormStepType.CUSTOMIZATION && (_jsxs(Fragment, { children: [course && (_jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadCourseCover, { isUploading: field.isSubmitting, onChange: handleChangeCover }) })), _jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
+                                                endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: COURSE_TITLE_MAX_LENGTH - field.name.length }))
+                                            }, error: Boolean(field.name.length > COURSE_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > COURSE_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.courseForm.name.error.maxLength", defaultMessage: "ui.courseForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
+                                                endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : COURSE_DESCRIPTION_MAX_LENGTH })))
+                                            }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > COURSE_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" })) : null }), _jsx(CategoryAutocomplete, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && _jsx(CourseEdit, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) })] }))] })), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === SCCourseFormStepType.GENERAL
                                     ? !field.type || Object.keys(error).length !== 0
                                     : _step === SCCourseFormStepType.CUSTOMIZATION &&
                                         (!field.name ||

package/lib/esm/components/CourseForm/Edit.js

@@ -25,6 +25,7 @@ const Root = styled(Box, {
     slot: 'Root'
 })(() => ({}));
 export default function CourseEdit(inProps) {
+    var _a;
     //PROPS
     const props = useThemeProps({
         props: inProps,
@@ -34,7 +35,7 @@ export default function CourseEdit(inProps) {
     // STATE
     const [privacy, setPrivacy] = useState(course.privacy);
     const notPublishable = course.num_lessons === 0 ||
-        !course.sections.some((section) => section.lessons.some((lesson) => lesson.status === SCCourseLessonStatusType.PUBLISHED));
+        !((_a = course.sections) === null || _a === void 0 ? void 0 : _a.some((section) => section.lessons.some((lesson) => lesson.status === SCCourseLessonStatusType.PUBLISHED)));
     //HANDLERS
     const handleChange = (event) => {
         setPrivacy(event.target.value);

package/lib/esm/components/Courses/Courses.js

@@ -42,7 +42,7 @@ const Root = styled(Box, {
 export const CoursesChipRoot = styled(Chip, {
     name: PREFIX,
     slot: 'CoursesChipRoot',
-    shouldForwardProp: (prop) => prop !== 'showForMe' && prop !== 'showMyCourses'
+    shouldForwardProp: (prop) => prop !== 'showMine' && prop !== 'showManagedCourses'
 })(() => ({}));
 /**
  * > API documentation for the Community-JS Courses component. Learn about the available props and the CSS API.
@@ -93,8 +93,8 @@ export default function Courses(inProps) {
     const [next, setNext] = useState(null);
     const [query, setQuery] = useState('');
     const [_categories, setCategories] = useState([]);
-    const [showForMe, setShowForMe] = useState(false);
-    const [showMyCourses, setShowMyCourses] = useState(false);
+    const [showMine, setShowMine] = useState(false);
+    const [showManagedCourses, setShowManagedCourses] = useState(false);
     // CONTEXT
     const scUserContext = useContext(SCUserContext);
     const { preferences } = useSCPreferences();
@@ -103,14 +103,11 @@ export default function Courses(inProps) {
     const onlyStaffEnabled = useMemo(() => { var _a; return (_a = preferences[SCPreferences.CONFIGURATIONS_COURSES_ONLY_STAFF_ENABLED]) === null || _a === void 0 ? void 0 : _a.value; }, [preferences]);
     const canCreateCourse = 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_course; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
     const endpoint = useMemo(() => {
-        if (showMyCourses) {
+        if (showManagedCourses) {
             return Endpoints.GetJoinedCourses;
         }
-        else if (showForMe) {
-            return Endpoints.CourseSuggestion;
-        }
         return Endpoints.SearchCourses;
-    }, [showMyCourses, showForMe]);
+    }, [showManagedCourses]);
     // CONST
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
     const theme = useTheme();
@@ -119,10 +116,10 @@ export default function Courses(inProps) {
     const updatesSubscription = useRef(null);
     // HANDLERS
     const handleChipClick = () => {
-        setShowForMe(!showForMe);
+        setShowMine(!showMine);
     };
     const handleDeleteClick = () => {
-        setShowForMe(false);
+        setShowMine(false);
     };
     /**
      * Fetches courses list
@@ -132,7 +129,7 @@ export default function Courses(inProps) {
             .request({
             url: endpoint.url({}),
             method: endpoint.method,
-            params: Object.assign(Object.assign(Object.assign(Object.assign({}, endpointQueryParams), (_categories.length && { categories: JSON.stringify(_categories) })), (query && { search: query })), (showMyCourses && { statuses: JSON.stringify(['creator']) }))
+            params: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, endpointQueryParams), (_categories.length && { categories: JSON.stringify(_categories) })), (query && { search: query })), (showManagedCourses && { statuses: JSON.stringify(['creator', 'manager']) })), (showMine && { statuses: JSON.stringify(['joined', 'manager']) }))
         })
             .then((res) => {
             setCourses(res.data.results);
@@ -153,7 +150,7 @@ export default function Courses(inProps) {
         else {
             fetchCourses();
         }
-    }, [contentAvailability, authUserId, showForMe, showMyCourses, _categories]);
+    }, [contentAvailability, authUserId, showMine, showManagedCourses, _categories]);
     /**
      * Subscriber for pubsub callback
      */
@@ -183,7 +180,7 @@ export default function Courses(inProps) {
         return http
             .request({
             url: next,
-            method: showMyCourses ? Endpoints.GetJoinedCourses.method : showForMe ? Endpoints.CourseSuggestion : Endpoints.SearchCourses.method
+            method: showManagedCourses ? Endpoints.GetJoinedCourses.method : Endpoints.SearchCourses.method
         })
             .then((res) => {
             setCourses([...courses, ...res.data.results]);
@@ -220,15 +217,15 @@ export default function Courses(inProps) {
                                     }
                                 }, InputProps: {
                                     endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: isMobile ? (_jsx(IconButton, Object.assign({ onClick: () => fetchCourses(), disabled: loading }, { children: _jsx(Icon, { children: "search" }) }))) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchCourses(), endIcon: _jsx(Icon, { children: "search" }), disabled: loading })) })))
-                                } }) })), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(CoursesChipRoot, { color: showMyCourses ? 'primary' : 'default', variant: showMyCourses ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.courses.filterByCreatedByMe", defaultMessage: "ui.courses.filterByCreatedByMe" }), onClick: () => setShowMyCourses(!showMyCourses), 
-                                // @ts-expect-error this is needed to use showForMe into SCCourses
-                                showForMe: showMyCourses, deleteIcon: showMyCourses ? _jsx(Icon, { children: "close" }) : null, onDelete: showMyCourses ? () => setShowMyCourses(false) : null, disabled: loading || showForMe }) }))), _jsx(Grid, Object.assign({ item: true, xs: 12, md: "auto" }, { children: _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(CategoryAutocomplete, { onChange: handleOnChangeCategory, className: classes.category, size: "small", multiple: true }) })) })), authUserId && (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(CoursesChipRoot, { color: showForMe ? 'primary' : 'default', variant: showForMe ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.courses.filterByCoursesForMe", defaultMessage: "ui.courses.filterByCoursesForMe" }), onClick: handleChipClick, 
-                                // @ts-expect-error this is needed to use showForMe into SCCourses
-                                showForMe: showForMe, deleteIcon: showForMe ? _jsx(Icon, { children: "close" }) : null, onDelete: showForMe ? handleDeleteClick : null, disabled: loading || showMyCourses }) })))] })) }))), _jsx(_Fragment, { children: !courses.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: !canCreateCourse && onlyStaffEnabled ? (_jsxs(Stack, Object.assign({ className: classes.studentEmptyView }, { children: [_jsx(Stack, Object.assign({ className: classes.emptyBox }, { children: _jsx(Stack, Object.assign({ className: classes.emptyRotatedBox }, { children: _jsx(Icon, Object.assign({ className: classes.emptyIcon, color: "disabled", fontSize: "large" }, { children: "courses" })) })) })), _jsx(Typography, Object.assign({ variant: "h5", textAlign: "center" }, { children: _jsx(FormattedMessage, { id: "ui.courses.empty.title", defaultMessage: "ui.courses.empty.title" }) })), _jsx(Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: _jsx(FormattedMessage, { id: "ui.courses.empty.info", defaultMessage: "ui.courses.empty.info" }) })), !isMobile && _jsx(Skeleton, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))] }))) : (_jsx(Box, Object.assign({ className: classes.teacherEmptyView }, { children: _jsx(Skeleton, Object.assign({ teacherView: (onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled, coursesNumber: 1 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps })) }))) }))) : (_jsx(InfiniteScroll, Object.assign({ dataLength: courses.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? (_jsx(CourseSkeleton, { template: SCCourseTemplateType.PREVIEW })) : (_jsx(Skeleton, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))), endMessage: _jsx(Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.courses.endMessage", defaultMessage: "ui.courses.endMessage", values: {
+                                } }) })), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(CoursesChipRoot, { color: showManagedCourses ? 'primary' : 'default', variant: showManagedCourses ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.courses.filterByManagedByMe", defaultMessage: "ui.courses.filterByManagedByMe" }), onClick: () => setShowManagedCourses(!showManagedCourses), 
+                                // @ts-expect-error this is needed to use showMine into SCCourses
+                                showManagedCourses: showManagedCourses, deleteIcon: showManagedCourses ? _jsx(Icon, { children: "close" }) : null, onDelete: showManagedCourses ? () => setShowManagedCourses(false) : null, disabled: loading || showMine }) }))), _jsx(Grid, Object.assign({ item: true, xs: 12, md: "auto" }, { children: _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(CategoryAutocomplete, { onChange: handleOnChangeCategory, className: classes.category, size: "small", multiple: true }) })) })), authUserId && (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(CoursesChipRoot, { color: showMine ? 'primary' : 'default', variant: showMine ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.courses.filterByMine", defaultMessage: "ui.courses.filterByMine" }), onClick: handleChipClick, 
+                                // @ts-expect-error this is needed to use showMine into SCCourses
+                                showMine: showMine, deleteIcon: showMine ? _jsx(Icon, { children: "close" }) : null, onDelete: showMine ? handleDeleteClick : null, disabled: loading || showManagedCourses }) })))] })) }))), _jsx(_Fragment, { children: !courses.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: !canCreateCourse && onlyStaffEnabled ? (_jsxs(Stack, Object.assign({ className: classes.studentEmptyView }, { children: [_jsx(Stack, Object.assign({ className: classes.emptyBox }, { children: _jsx(Stack, Object.assign({ className: classes.emptyRotatedBox }, { children: _jsx(Icon, Object.assign({ className: classes.emptyIcon, color: "disabled", fontSize: "large" }, { children: "courses" })) })) })), _jsx(Typography, Object.assign({ variant: "h5", textAlign: "center" }, { children: _jsx(FormattedMessage, { id: "ui.courses.empty.title", defaultMessage: "ui.courses.empty.title" }) })), _jsx(Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: _jsx(FormattedMessage, { id: "ui.courses.empty.info", defaultMessage: "ui.courses.empty.info" }) }))] }))) : (_jsx(Box, Object.assign({ className: classes.teacherEmptyView }, { children: _jsx(Skeleton, Object.assign({ teacherView: (onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled, coursesNumber: 1 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps })) }))) }))) : (_jsx(InfiniteScroll, Object.assign({ dataLength: courses.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? (_jsx(CourseSkeleton, { template: SCCourseTemplateType.PREVIEW })) : (_jsx(Skeleton, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))), endMessage: _jsx(Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.courses.endMessage", defaultMessage: "ui.courses.endMessage", values: {
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                 // @ts-ignore
                                 button: (chunk) => (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
-                            } }) })) }, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.courses }, GridContainerComponentProps, { children: _jsxs(_Fragment, { children: [courses.map((course) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.item }, GridItemComponentProps, { children: _jsx(Course, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && courses.length % 2 !== 0 && (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.itemPlaceholder }, GridItemComponentProps, { children: _jsx(CourseCreatePlaceholder, { CreateCourseButtonComponentProps: CreateCourseButtonComponentProps }) }), "placeholder-item"))] }) })) }))) })] }));
+                            } }) })) }, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.courses }, GridContainerComponentProps, { children: _jsxs(_Fragment, { children: [courses.map((course) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.item }, GridItemComponentProps, { children: _jsx(Course, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && courses.length % 2 !== 0 && (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.itemPlaceholder }, GridItemComponentProps, { children: _jsx(CourseCreatePlaceholder, { CreateCourseButtonComponentProps: CreateCourseButtonComponentProps }) }), "placeholder-item"))] }) })) }))) })] }));
     /**
      * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
      */

package/lib/esm/components/EditCourse/EditCourse.js

@@ -2,7 +2,7 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Icon, IconButton, Stack, styled, Tab, Typography, useMediaQuery, useTheme, useThemeProps } from '@mui/material';
 import { PREFIX } from './constants';
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import classNames from 'classnames';
 import { TabContext, TabList, TabPanel } from '@mui/lab';
 import { FormattedMessage } from 'react-intl';
@@ -45,30 +45,6 @@ const TAB_DATA = [
         value: SCCourseEditTabType.OPTIONS
     }
 ];
-function getPanelData(course, setCourse) {
-    return [
-        {
-            value: SCCourseEditTabType.LESSONS,
-            children: _jsx(Lessons, { course: course, setCourse: setCourse })
-        },
-        {
-            value: SCCourseEditTabType.CUSTOMIZE,
-            children: _jsx(Customize, { course: course, setCourse: setCourse })
-        },
-        {
-            value: SCCourseEditTabType.USERS,
-            children: _jsx(Users, { course: course })
-        },
-        {
-            value: SCCourseEditTabType.REQUESTS,
-            children: _jsx(Requests, { course: course })
-        },
-        {
-            value: SCCourseEditTabType.OPTIONS,
-            children: _jsx(Options, { course: course, setCourse: setCourse })
-        }
-    ];
-}
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root',
@@ -90,7 +66,7 @@ export default function EditCourse(inProps) {
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     // HANDLERS
-    const handleTabChange = useCallback((_evt, newTabValue) => {
+    const handleTabChange = useCallback((_e, newTabValue) => {
         if (onTabSelect) {
             onTabSelect(newTabValue);
         }
@@ -99,8 +75,33 @@ export default function EditCourse(inProps) {
             onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(newTabValue);
         }
     }, [setTabValue, onTabChange, onTabSelect]);
+    // MEMOS
+    const panelData = useMemo(() => {
+        return [
+            {
+                value: SCCourseEditTabType.LESSONS,
+                children: _jsx(Lessons, { course: scCourse, setCourse: setSCCourse, handleTabChange: handleTabChange })
+            },
+            {
+                value: SCCourseEditTabType.CUSTOMIZE,
+                children: _jsx(Customize, { course: scCourse, setCourse: setSCCourse })
+            },
+            {
+                value: SCCourseEditTabType.USERS,
+                children: _jsx(Users, { course: scCourse, handleTabChange: handleTabChange })
+            },
+            {
+                value: SCCourseEditTabType.REQUESTS,
+                children: _jsx(Requests, { course: scCourse, handleTabChange: handleTabChange })
+            },
+            {
+                value: SCCourseEditTabType.OPTIONS,
+                children: _jsx(Options, { course: scCourse, setCourse: setSCCourse })
+            }
+        ];
+    }, [scCourse, handleTabChange]);
     if (!scCourse) {
         return _jsx(EditCourseSkeleton, { tab: tab });
     }
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(Stack, Object.assign({ className: classes.header }, { children: [_jsx(IconButton, Object.assign({ href: scRoutingContext.url(SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse), size: "small" }, { children: _jsx(Icon, Object.assign({ className: classes.contrastColor }, { children: "arrow_back" })) })), _jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: scCourse.name }))] })), _jsxs(TabContext, Object.assign({ value: tabValue }, { children: [_jsx(TabList, Object.assign({ className: classes.tabList, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: isMobile ? 'scrollable' : 'standard', scrollButtons: isMobile, centered: !isMobile }, { children: TAB_DATA.map((data, i) => (_jsx(Tab, { label: _jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: data.label, defaultMessage: data.label }) })), value: data.value, className: classNames(classes.tab, classes.contrastColor) }, i))) })), getPanelData(scCourse, setSCCourse).map((data, i) => (_jsx(TabPanel, Object.assign({ className: classes.tabPanel, value: data.value }, { children: data.children }), i)))] }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(Stack, Object.assign({ className: classes.header }, { children: [_jsx(IconButton, Object.assign({ href: scRoutingContext.url(SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse), size: "small" }, { children: _jsx(Icon, Object.assign({ className: classes.contrastColor }, { children: "arrow_back" })) })), _jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: scCourse.name }))] })), _jsxs(TabContext, Object.assign({ value: tabValue }, { children: [_jsx(TabList, Object.assign({ className: classes.tabList, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: isMobile ? 'scrollable' : 'standard', scrollButtons: isMobile, centered: !isMobile }, { children: TAB_DATA.map((data, i) => (_jsx(Tab, { label: _jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: data.label, defaultMessage: data.label }) })), value: data.value, className: classNames(classes.tab, classes.contrastColor) }, i))) })), panelData.map((data, i) => (_jsx(TabPanel, Object.assign({ className: classes.tabPanel, value: data.value }, { children: data.children }), i)))] }))] })));
 }

package/lib/esm/components/EditCourse/Lessons/Skeleton.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Stack, Skeleton, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from '@mui/material';
+import { Stack, Skeleton, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Box } from '@mui/material';
 import { PREFIX } from '../constants';
-import { Fragment } from 'react';
 const classes = {
     lessonTitle: `${PREFIX}-lesson-title`,
     lessonInfoWrapper: `${PREFIX}-lesson-info-wrapper`,
@@ -14,5 +13,5 @@ const classes = {
     actionsWrapper: `${PREFIX}-actions-wrapper`
 };
 export default function LessonsSkeleton() {
-    return (_jsxs(Fragment, { children: [_jsx(Skeleton, { animation: "wave", variant: "text", width: "150px", height: "21px", className: classes.lessonTitle }), _jsxs(Stack, Object.assign({ className: classes.lessonInfoWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.lessonInfo }, { children: [_jsx(Skeleton, { animation: "wave", variant: "rectangular", width: "14px", height: "14px" }), _jsx(Skeleton, { animation: "wave", variant: "text", width: "150px", height: "21px" })] })), _jsx(Skeleton, { animation: "wave", variant: "rectangular", width: "105px", height: "32px" })] })), _jsxs(Stack, Object.assign({ className: classes.lessonsSectionsWrapper }, { children: [_jsx(Skeleton, { animation: "wave", width: "159px", height: "21px" }), _jsx(Skeleton, { animation: "wave", width: "100px", height: "32px" })] })), _jsx(TableContainer, Object.assign({ className: classes.tableContainer }, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, {}), _jsx(TableCell, { children: _jsx(Skeleton, { animation: "wave", variant: "text", width: "102px", height: "32px" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { animation: "wave", variant: "text", width: "87px", height: "32px", className: classes.margin }) }), _jsx(TableCell, { children: _jsx(Skeleton, { animation: "wave", variant: "text", width: "48px", height: "32px", className: classes.marginLeft }) })] }) }), _jsx(TableBody, { children: _jsxs(TableRow, { children: [_jsx(TableCell, {}), _jsx(TableCell, { children: _jsx(Skeleton, { animation: "wave", variant: "text", width: "102px", height: "21px" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { animation: "wave", variant: "rectangular", width: "250px", height: "54px", className: classes.margin }) }), _jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.actionsWrapper }, { children: [_jsx(Skeleton, { animation: "wave", variant: "rounded", width: "105px", height: "37px" }), _jsx(Skeleton, { animation: "wave", variant: "circular", width: "36px", height: "36px" })] })) })] }) })] }) }))] }));
+    return (_jsxs(Box, { children: [_jsx(Skeleton, { animation: "wave", variant: "text", width: "150px", height: "21px", className: classes.lessonTitle }), _jsxs(Stack, Object.assign({ className: classes.lessonInfoWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.lessonInfo }, { children: [_jsx(Skeleton, { animation: "wave", variant: "rectangular", width: "14px", height: "14px" }), _jsx(Skeleton, { animation: "wave", variant: "text", width: "150px", height: "21px" })] })), _jsx(Skeleton, { animation: "wave", variant: "rectangular", width: "105px", height: "32px" })] })), _jsxs(Stack, Object.assign({ className: classes.lessonsSectionsWrapper }, { children: [_jsx(Skeleton, { animation: "wave", width: "159px", height: "21px" }), _jsx(Skeleton, { animation: "wave", width: "100px", height: "32px" })] })), _jsx(TableContainer, Object.assign({ className: classes.tableContainer }, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, {}), _jsx(TableCell, { children: _jsx(Skeleton, { animation: "wave", variant: "text", width: "102px", height: "32px" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { animation: "wave", variant: "text", width: "87px", height: "32px", className: classes.margin }) }), _jsx(TableCell, { children: _jsx(Skeleton, { animation: "wave", variant: "text", width: "48px", height: "32px", className: classes.marginLeft }) })] }) }), _jsx(TableBody, { children: _jsxs(TableRow, { children: [_jsx(TableCell, {}), _jsx(TableCell, { children: _jsx(Skeleton, { animation: "wave", variant: "text", width: "102px", height: "21px" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { animation: "wave", variant: "rectangular", width: "250px", height: "54px", className: classes.margin }) }), _jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.actionsWrapper }, { children: [_jsx(Skeleton, { animation: "wave", variant: "rounded", width: "105px", height: "37px" }), _jsx(Skeleton, { animation: "wave", variant: "circular", width: "36px", height: "36px" })] })) })] }) })] }) }))] }));
 }

package/lib/esm/components/EditCourse/Lessons.d.ts

@@ -1,8 +1,10 @@
-/// <reference types="react" />
+import { SyntheticEvent } from 'react';
 import { SCCourseType } from '@selfcommunity/types';
+import { SCCourseEditTabType } from '../../types';
 interface LessonsProps {
     course: SCCourseType;
     setCourse: (course: SCCourseType) => void;
+    handleTabChange: (_e: SyntheticEvent, newTabValue: SCCourseEditTabType) => void;
 }
 declare function Lessons(props: LessonsProps): JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Lessons>;