@selfcommunity/react-ui 0.10.2-courses.125 → 0.10.2-courses.127

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

@@ -14,6 +14,6 @@ const classes = {
 function InfoCourseDashboard(props) {
     // PROPS
     const { title, course, position } = props;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.info }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: title, defaultMessage: title }) })), position === types_1.InfoPositionEnum.FIRST && (0, jsx_runtime_1.jsx)(CourseParticipantsButton_1.default, { course: course }), position === types_1.InfoPositionEnum.SECOND && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "h5" }, { children: [course.avg_completion_rate, "%"] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.info }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: title, defaultMessage: title }) })), position === types_1.InfoPositionType.FIRST && (0, jsx_runtime_1.jsx)(CourseParticipantsButton_1.default, { course: course }), position === types_1.InfoPositionType.SECOND && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "h5" }, { children: [course.avg_completion_rate, "%"] }))] })));
 }
 exports.default = (0, react_1.memo)(InfoCourseDashboard);

package/lib/cjs/components/CourseDashboard/Teacher.js

@@ -26,11 +26,11 @@ const classes = {
 const TAB_DATA = [
     {
         label: 'ui.course.dashboard.teacher.tab.students',
-        value: types_1.TabContentEnum.STUDENTS
+        value: types_1.TabContentType.STUDENTS
     },
     {
         label: 'ui.course.dashboard.teacher.tab.comments',
-        value: types_1.TabContentEnum.COMMENTS
+        value: types_1.TabContentType.COMMENTS
     }
 ];
 const Root = (0, material_1.styled)(material_1.Box, {
@@ -46,7 +46,7 @@ function Teacher(inProps) {
     });
     const { courseId, course, className } = props, rest = tslib_1.__rest(props, ["courseId", "course", "className"]);
     // STATES
-    const [tabValue, setTabValue] = (0, react_1.useState)(types_1.TabContentEnum.STUDENTS);
+    const [tabValue, setTabValue] = (0, react_1.useState)(types_1.TabContentType.STUDENTS);
     // HOOKS
     const { scCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course, params: { view: api_services_1.CourseInfoViewType.DASHBOARD } });
     // HANDLERS
@@ -56,6 +56,6 @@ function Teacher(inProps) {
     if (!scCourse) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { course: scCourse, hasAction: true }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.infoWrapper }, { children: [(0, jsx_runtime_1.jsx)(Info_1.default, { title: "ui.course.dashboard.teacher.info.students", course: scCourse, position: types_1.InfoPositionEnum.FIRST }), (0, jsx_runtime_1.jsx)(Info_1.default, { title: "ui.course.dashboard.teacher.info.completion", course: scCourse, position: types_1.InfoPositionEnum.SECOND })] })), (0, jsx_runtime_1.jsxs)(lab_1.TabContext, Object.assign({ value: tabValue }, { children: [(0, jsx_runtime_1.jsx)(lab_1.TabList, Object.assign({ className: classes.tabList, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "standard", centered: true }, { children: TAB_DATA.map((data, i) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: data.label, defaultMessage: data.label }) })), value: data.value, className: classes.tab }, i))) })), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ className: classes.tabPanel, value: types_1.TabContentEnum.STUDENTS }, { children: (0, jsx_runtime_1.jsx)(Students_1.default, { course: scCourse }) })), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ className: classes.tabPanel, value: types_1.TabContentEnum.COMMENTS }, { children: (0, jsx_runtime_1.jsx)(Comments_1.default, { course: scCourse }) }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { course: scCourse, hasAction: true }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.infoWrapper }, { children: [(0, jsx_runtime_1.jsx)(Info_1.default, { title: "ui.course.dashboard.teacher.info.students", course: scCourse, position: types_1.InfoPositionType.FIRST }), (0, jsx_runtime_1.jsx)(Info_1.default, { title: "ui.course.dashboard.teacher.info.completion", course: scCourse, position: types_1.InfoPositionType.SECOND })] })), (0, jsx_runtime_1.jsxs)(lab_1.TabContext, Object.assign({ value: tabValue }, { children: [(0, jsx_runtime_1.jsx)(lab_1.TabList, Object.assign({ className: classes.tabList, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "standard", centered: true }, { children: TAB_DATA.map((data, i) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: data.label, defaultMessage: data.label }) })), value: data.value, className: classes.tab }, i))) })), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ className: classes.tabPanel, value: types_1.TabContentType.STUDENTS }, { children: (0, jsx_runtime_1.jsx)(Students_1.default, { course: scCourse }) })), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ className: classes.tabPanel, value: types_1.TabContentType.COMMENTS }, { children: (0, jsx_runtime_1.jsx)(Comments_1.default, { course: scCourse }) }))] }))] })));
 }
 exports.default = (0, react_1.memo)(Teacher);

package/lib/cjs/components/CourseDashboard/types.d.ts

@@ -1,10 +1,8 @@
-export declare type TabContentType = '1' | '2';
-export declare enum TabContentEnum {
-    STUDENTS = "1",
-    COMMENTS = "2"
+export declare enum TabContentType {
+    STUDENTS = "students",
+    COMMENTS = "comments"
 }
-export declare type InfoPositionType = 'first' | 'second';
-export declare enum InfoPositionEnum {
+export declare enum InfoPositionType {
     FIRST = "first",
     SECOND = "second"
 }

package/lib/cjs/components/CourseDashboard/types.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InfoPositionEnum = exports.TabContentEnum = void 0;
-var TabContentEnum;
-(function (TabContentEnum) {
-    TabContentEnum["STUDENTS"] = "1";
-    TabContentEnum["COMMENTS"] = "2";
-})(TabContentEnum = exports.TabContentEnum || (exports.TabContentEnum = {}));
-var InfoPositionEnum;
-(function (InfoPositionEnum) {
-    InfoPositionEnum["FIRST"] = "first";
-    InfoPositionEnum["SECOND"] = "second";
-})(InfoPositionEnum = exports.InfoPositionEnum || (exports.InfoPositionEnum = {}));
+exports.InfoPositionType = exports.TabContentType = void 0;
+var TabContentType;
+(function (TabContentType) {
+    TabContentType["STUDENTS"] = "students";
+    TabContentType["COMMENTS"] = "comments";
+})(TabContentType = exports.TabContentType || (exports.TabContentType = {}));
+var InfoPositionType;
+(function (InfoPositionType) {
+    InfoPositionType["FIRST"] = "first";
+    InfoPositionType["SECOND"] = "second";
+})(InfoPositionType = exports.InfoPositionType || (exports.InfoPositionType = {}));

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

@@ -4,8 +4,9 @@ import { SCCourseEditTabType } from '../../types/course';
 export interface EditCourseProps {
     courseId?: number;
     course?: SCCourseType;
-    tab: SCCourseEditTabType;
-    onTabChange: (page: SCCourseEditTabType) => void;
+    tab?: SCCourseEditTabType;
+    onTabChange?: (tab: SCCourseEditTabType) => void;
+    onTabSelect?: (tab: SCCourseEditTabType) => void;
     className?: HTMLAttributes<HTMLDivElement>['className'];
     [p: string]: any;
 }

package/lib/cjs/components/EditCourse/EditCourse.js

@@ -8,7 +8,6 @@ const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const lab_1 = require("@mui/lab");
 const react_intl_1 = require("react-intl");
-const types_1 = require("./types");
 const Lessons_1 = tslib_1.__importDefault(require("./Lessons"));
 const Customize_1 = tslib_1.__importDefault(require("./Customize"));
 const Users_1 = tslib_1.__importDefault(require("./Users"));
@@ -16,6 +15,7 @@ const Options_1 = tslib_1.__importDefault(require("./Options"));
 const react_core_1 = require("@selfcommunity/react-core");
 const api_services_1 = require("@selfcommunity/api-services");
 const Requests_1 = tslib_1.__importDefault(require("./Requests"));
+const course_1 = require("../../types/course");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
@@ -27,45 +27,45 @@ const classes = {
 const TAB_DATA = [
     {
         label: 'ui.editCourse.tab.lessons',
-        value: types_1.TabContentEnum.LESSONS
+        value: course_1.SCCourseEditTabType.LESSONS
     },
     {
         label: 'ui.editCourse.tab.customize',
-        value: types_1.TabContentEnum.CUSTOMIZE
+        value: course_1.SCCourseEditTabType.CUSTOMIZE
     },
     {
         label: 'ui.editCourse.tab.users',
-        value: types_1.TabContentEnum.USERS
+        value: course_1.SCCourseEditTabType.USERS
     },
     {
         label: 'ui.editCourse.tab.requests',
-        value: types_1.TabContentEnum.REQUESTS
+        value: course_1.SCCourseEditTabType.REQUESTS
     },
     {
         label: 'ui.editCourse.tab.options',
-        value: types_1.TabContentEnum.OPTIONS
+        value: course_1.SCCourseEditTabType.OPTIONS
     }
 ];
 function getPanelData(course, setSCCourse) {
     return [
         {
-            value: types_1.TabContentEnum.LESSONS,
+            value: course_1.SCCourseEditTabType.LESSONS,
             children: (0, jsx_runtime_1.jsx)(Lessons_1.default, { course: course, setSCCourse: setSCCourse })
         },
         {
-            value: types_1.TabContentEnum.CUSTOMIZE,
+            value: course_1.SCCourseEditTabType.CUSTOMIZE,
             children: (0, jsx_runtime_1.jsx)(Customize_1.default, { course: course, setSCCourse: setSCCourse })
         },
         {
-            value: types_1.TabContentEnum.USERS,
+            value: course_1.SCCourseEditTabType.USERS,
             children: (0, jsx_runtime_1.jsx)(Users_1.default, { course: course })
         },
         {
-            value: types_1.TabContentEnum.REQUESTS,
+            value: course_1.SCCourseEditTabType.REQUESTS,
             children: (0, jsx_runtime_1.jsx)(Requests_1.default, { course: course })
         },
         {
-            value: types_1.TabContentEnum.OPTIONS,
+            value: course_1.SCCourseEditTabType.OPTIONS,
             children: (0, jsx_runtime_1.jsx)(Options_1.default, { course: course, setSCCourse: setSCCourse })
         }
     ];
@@ -81,9 +81,9 @@ function EditCourse(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { courseId, course, tab, onTabChange, className } = props, rest = tslib_1.__rest(props, ["courseId", "course", "tab", "onTabChange", "className"]);
+    const { courseId, course, tab = course_1.SCCourseEditTabType.LESSONS, onTabChange, onTabSelect, className } = props, rest = tslib_1.__rest(props, ["courseId", "course", "tab", "onTabChange", "onTabSelect", "className"]);
     // STATES
-    const [tabValue, setTabValue] = (0, react_1.useState)(types_1.TabContentEnum[`${tab.toUpperCase()}`]);
+    const [tabValue, setTabValue] = (0, react_1.useState)(tab);
     // CONTEXTS
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     // HOOKS
@@ -92,9 +92,14 @@ function EditCourse(inProps) {
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     // HANDLERS
     const handleTabChange = (0, react_1.useCallback)((_evt, newTabValue) => {
-        setTabValue(newTabValue);
-        onTabChange(types_1.TabContentEnum[newTabValue]);
-    }, [setTabValue]);
+        if (onTabSelect) {
+            onTabSelect(newTabValue);
+        }
+        else {
+            setTabValue(newTabValue);
+            onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(newTabValue);
+        }
+    }, [setTabValue, onTabChange, onTabSelect]);
     if (!scCourse) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, { tab: tab });
     }

package/lib/cjs/components/EditCourse/Lessons/FieldName.js

@@ -48,7 +48,7 @@ function FieldName(props) {
             }
         })
             .then((response) => {
-            handleManageRow(response.data, isNewRow ? types_2.ActionLessonEnum.ADD : types_2.ActionLessonEnum.RENAME);
+            handleManageRow(response.data, isNewRow ? types_2.ActionLessonType.ADD : types_2.ActionLessonType.RENAME);
             setName(null);
             setLoading(false);
             handleDisableEditMode();
@@ -70,7 +70,7 @@ function FieldName(props) {
     }, [isNewRow, name, endpoint, setLoading, handleDisableEditMode, handleManageRow]);
     const handleClose = (0, react_1.useCallback)(() => {
         if (isNewRow) {
-            handleManageRow(row, types_2.ActionLessonEnum.DELETE);
+            handleManageRow(row, types_2.ActionLessonType.DELETE);
             pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCGroupEventType.UPDATE}`, false);
         }
         else {

package/lib/cjs/components/EditCourse/Lessons/LessonRow.js

@@ -48,7 +48,7 @@ function LessonRow(props) {
     const handleDeleteLesson = (0, react_1.useCallback)(() => {
         api_services_1.CourseService.deleteCourseLesson(course.id, section.id, lesson.id)
             .then(() => {
-            handleManageLesson(lesson, types_1.ActionLessonEnum.DELETE);
+            handleManageLesson(lesson, types_1.ActionLessonType.DELETE);
             enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.snackbar.delete", defaultMessage: "ui.editCourse.tab.lessons.table.snackbar.delete" }), {
                 variant: 'success',
                 autoHideDuration: 3000

package/lib/cjs/components/EditCourse/Lessons/SectionRow.js

@@ -71,7 +71,7 @@ function SectionRow(props) {
             lessons_order: tempLessons.map((tempLesson) => tempLesson.id)
         };
         api_services_1.CourseService.patchCourseSection(course.id, section.id, data)
-            .then(() => handleManageSection(tempSection, types_2.ActionLessonEnum.UPDATE))
+            .then(() => handleManageSection(tempSection, types_2.ActionLessonType.UPDATE))
             .catch((error) => {
             utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
             enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
@@ -89,7 +89,7 @@ function SectionRow(props) {
         api_services_1.CourseService.deleteCourseSection(course.id, section.id)
             .then(() => {
             const tempSection = Object.assign(Object.assign({}, section), { num_lessons: section.lessons.length });
-            handleManageSection(tempSection, types_2.ActionLessonEnum.DELETE);
+            handleManageSection(tempSection, types_2.ActionLessonType.DELETE);
             enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.snackbar.delete", defaultMessage: "ui.editCourse.tab.lessons.table.snackbar.delete" }), {
                 variant: 'success',
                 autoHideDuration: 3000
@@ -105,24 +105,24 @@ function SectionRow(props) {
     }, [course, section, handleManageSection]);
     const handleManageLesson = (0, react_1.useCallback)((lesson, type) => {
         switch (type) {
-            case types_2.ActionLessonEnum.ADD: {
+            case types_2.ActionLessonType.ADD: {
                 const tempSection = Object.assign(Object.assign({}, section), { lessons: section.lessons ? [...section.lessons, lesson] : [lesson] });
-                handleManageSection(tempSection, types_2.ActionLessonEnum.ADD_UPDATE);
+                handleManageSection(tempSection, types_2.ActionLessonType.ADD_UPDATE);
                 break;
             }
-            case types_2.ActionLessonEnum.RENAME: {
+            case types_2.ActionLessonType.RENAME: {
                 const tempSection = Object.assign(Object.assign({}, section), { lessons: section.lessons.map((prevLesson) => {
                         if (prevLesson.id === lesson.id) {
                             return Object.assign(Object.assign({}, prevLesson), { name: lesson.name });
                         }
                         return prevLesson;
                     }) });
-                handleManageSection(tempSection, types_2.ActionLessonEnum.RENAME_UPDATE);
+                handleManageSection(tempSection, types_2.ActionLessonType.RENAME_UPDATE);
                 break;
             }
-            case types_2.ActionLessonEnum.DELETE: {
+            case types_2.ActionLessonType.DELETE: {
                 const tempSection = Object.assign(Object.assign({}, section), { lessons: section.lessons.filter((prevLesson) => prevLesson.id !== lesson.id) });
-                handleManageSection(tempSection, types_2.ActionLessonEnum.DELETE_UPDATE);
+                handleManageSection(tempSection, types_2.ActionLessonType.DELETE_UPDATE);
             }
         }
     }, [section, handleManageSection]);

package/lib/cjs/components/EditCourse/Lessons.js

@@ -99,10 +99,10 @@ function Lessons(props) {
     }, [setSections]);
     const handleManageSection = (0, react_1.useCallback)((section, type) => {
         switch (type) {
-            case types_1.ActionLessonEnum.ADD:
+            case types_1.ActionLessonType.ADD:
                 setSCCourse(Object.assign(Object.assign({}, course), { num_sections: course.num_sections + 1, sections: [...course.sections, section] }));
                 break;
-            case types_1.ActionLessonEnum.RENAME:
+            case types_1.ActionLessonType.RENAME:
                 setSCCourse(Object.assign(Object.assign({}, course), { sections: course.sections.map((prevSection) => {
                         if (prevSection.id === section.id) {
                             return Object.assign(Object.assign({}, prevSection), { name: section.name });
@@ -110,10 +110,10 @@ function Lessons(props) {
                         return prevSection;
                     }) }));
                 break;
-            case types_1.ActionLessonEnum.DELETE:
+            case types_1.ActionLessonType.DELETE:
                 setSCCourse(Object.assign(Object.assign({}, course), { num_sections: course.num_sections - 1, num_lessons: course.num_lessons - section.num_lessons, sections: course.sections.filter((prevSection) => prevSection.id !== section.id) }));
                 break;
-            case types_1.ActionLessonEnum.UPDATE:
+            case types_1.ActionLessonType.UPDATE:
                 setSCCourse(Object.assign(Object.assign({}, course), { sections: course.sections.map((prevSection) => {
                         if (prevSection.id === section.id) {
                             return Object.assign(Object.assign({}, prevSection), { lessons: section.lessons });
@@ -121,12 +121,12 @@ function Lessons(props) {
                         return prevSection;
                     }) }));
                 break;
-            case type.endsWith(types_1.ActionLessonEnum.UPDATE) && type: {
+            case type.endsWith(types_1.ActionLessonType.UPDATE) && type: {
                 let numLessons = course.num_lessons;
-                if (type === types_1.ActionLessonEnum.ADD_UPDATE) {
+                if (type === types_1.ActionLessonType.ADD_UPDATE) {
                     numLessons = course.num_lessons + 1;
                 }
-                else if (type === types_1.ActionLessonEnum.DELETE_UPDATE) {
+                else if (type === types_1.ActionLessonType.DELETE_UPDATE) {
                     numLessons = course.num_lessons - 1;
                 }
                 setSCCourse(Object.assign(Object.assign({}, course), { num_lessons: numLessons, sections: course.sections.map((prevSection) => {

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

@@ -23,6 +23,6 @@ const Root = (0, material_1.styled)(material_1.Box, {
 function EditCourseSkeleton(props) {
     // PROPS
     const { tab } = props;
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: "14px", height: "14px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "125px", height: "21px" })] })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.tabList }, { children: Array.from(new Array(5)).map((_, i) => ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "80px", height: "21px" }, i))) })), tab === types_1.SCCourseEditTabEnum.LESSONS && (0, jsx_runtime_1.jsx)(Skeleton_1.default, {}), tab === types_1.SCCourseEditTabEnum.CUSTOMIZE && (0, jsx_runtime_1.jsx)(Skeleton_3.default, {}), tab === types_1.SCCourseEditTabEnum.USERS && (0, jsx_runtime_1.jsx)(Skeleton_2.default, {}), tab === types_1.SCCourseEditTabEnum.REQUESTS && (0, jsx_runtime_1.jsx)(Skeleton_2.default, {}), tab === types_1.SCCourseEditTabEnum.OPTIONS && (0, jsx_runtime_1.jsx)(Skeleton_4.default, {})] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: "14px", height: "14px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "125px", height: "21px" })] })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.tabList }, { children: Array.from(new Array(5)).map((_, i) => ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "80px", height: "21px" }, i))) })), tab === types_1.SCCourseEditTabType.LESSONS && (0, jsx_runtime_1.jsx)(Skeleton_1.default, {}), tab === types_1.SCCourseEditTabType.CUSTOMIZE && (0, jsx_runtime_1.jsx)(Skeleton_3.default, {}), tab === types_1.SCCourseEditTabType.USERS && (0, jsx_runtime_1.jsx)(Skeleton_2.default, {}), tab === types_1.SCCourseEditTabType.REQUESTS && (0, jsx_runtime_1.jsx)(Skeleton_2.default, {}), tab === types_1.SCCourseEditTabType.OPTIONS && (0, jsx_runtime_1.jsx)(Skeleton_4.default, {})] })));
 }
 exports.default = (0, react_1.memo)(EditCourseSkeleton);

package/lib/cjs/components/EditCourse/types.d.ts

@@ -1,13 +1,4 @@
-export declare type TabContentType = '1' | '2' | '3' | '4' | '5';
-export declare enum TabContentEnum {
-    LESSONS = "1",
-    CUSTOMIZE = "2",
-    USERS = "3",
-    REQUESTS = "4",
-    OPTIONS = "5"
-}
-export declare type ActionLessonType = 'add' | 'rename' | 'delete' | 'update' | 'add_update' | 'rename_update' | 'delete_update';
-export declare enum ActionLessonEnum {
+export declare enum ActionLessonType {
     ADD = "add",
     RENAME = "rename",
     DELETE = "delete",

package/lib/cjs/components/EditCourse/types.js

@@ -1,21 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionLessonEnum = exports.TabContentEnum = void 0;
-var TabContentEnum;
-(function (TabContentEnum) {
-    TabContentEnum["LESSONS"] = "1";
-    TabContentEnum["CUSTOMIZE"] = "2";
-    TabContentEnum["USERS"] = "3";
-    TabContentEnum["REQUESTS"] = "4";
-    TabContentEnum["OPTIONS"] = "5";
-})(TabContentEnum = exports.TabContentEnum || (exports.TabContentEnum = {}));
-var ActionLessonEnum;
-(function (ActionLessonEnum) {
-    ActionLessonEnum["ADD"] = "add";
-    ActionLessonEnum["RENAME"] = "rename";
-    ActionLessonEnum["DELETE"] = "delete";
-    ActionLessonEnum["UPDATE"] = "update";
-    ActionLessonEnum["ADD_UPDATE"] = "add_update";
-    ActionLessonEnum["RENAME_UPDATE"] = "rename_update";
-    ActionLessonEnum["DELETE_UPDATE"] = "delete_update";
-})(ActionLessonEnum = exports.ActionLessonEnum || (exports.ActionLessonEnum = {}));
+exports.ActionLessonType = void 0;
+var ActionLessonType;
+(function (ActionLessonType) {
+    ActionLessonType["ADD"] = "add";
+    ActionLessonType["RENAME"] = "rename";
+    ActionLessonType["DELETE"] = "delete";
+    ActionLessonType["UPDATE"] = "update";
+    ActionLessonType["ADD_UPDATE"] = "add_update";
+    ActionLessonType["RENAME_UPDATE"] = "rename_update";
+    ActionLessonType["DELETE_UPDATE"] = "delete_update";
+})(ActionLessonType = exports.ActionLessonType || (exports.ActionLessonType = {}));

package/lib/cjs/components/EventMembersWidget/EventMembersWidget.js

@@ -66,7 +66,7 @@ function EventMembersWidget(inProps) {
     const [invitedCount, setInvitedCount] = (0, react_1.useState)(invited.count);
     const [requestsCount, setRequestsCount] = (0, react_1.useState)(requests.count);
     const [requestsUsers, setRequestsUsers] = (0, react_1.useState)(requests.results);
-    const [tabValue, setTabValue] = (0, react_1.useState)(types_1.TabContentEnum.PARTICIPANTS);
+    const [tabValue, setTabValue] = (0, react_1.useState)(types_1.TabContentType.PARTICIPANTS);
     const [refresh, setRefresh] = (0, react_1.useState)(null);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
@@ -76,11 +76,11 @@ function EventMembersWidget(inProps) {
     const hasAllow = (0, react_1.useMemo)(() => { var _a; return ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) === (scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id); }, [scUserContext, scEvent]);
     const title = (0, react_1.useMemo)(() => {
         switch (tabValue) {
-            case types_1.TabContentEnum.REQUESTS:
+            case types_1.TabContentType.REQUESTS:
                 return 'ui.eventMembersWidget.requests';
-            case types_1.TabContentEnum.INVITED:
+            case types_1.TabContentType.INVITED:
                 return 'ui.eventMembersWidget.invited';
-            case types_1.TabContentEnum.PARTICIPANTS:
+            case types_1.TabContentType.PARTICIPANTS:
             default:
                 return 'ui.eventMembersWidget.participants';
         }
@@ -134,11 +134,11 @@ function EventMembersWidget(inProps) {
         let _t;
         if (scUserContext.user && scEvent) {
             _t = setTimeout(() => {
-                if (refresh === types_1.TabContentEnum.PARTICIPANTS) {
+                if (refresh === types_1.TabContentType.PARTICIPANTS) {
                     _initParticipants();
                     setRefresh(null);
                 }
-                else if (refresh === types_1.TabContentEnum.INVITED) {
+                else if (refresh === types_1.TabContentType.INVITED) {
                     _initInvited();
                     setRefresh(null);
                 }
@@ -165,10 +165,10 @@ function EventMembersWidget(inProps) {
         setTabValue(newTabValue);
     }, [setTabValue]);
     const handleRefresh = (0, react_1.useCallback)((_tabValue) => {
-        if (_tabValue === types_1.TabContentEnum.PARTICIPANTS) {
+        if (_tabValue === types_1.TabContentType.PARTICIPANTS) {
             dispatchParticipants({ type: widget_1.actionWidgetTypes.RESET });
         }
-        else if (_tabValue === types_1.TabContentEnum.INVITED) {
+        else if (_tabValue === types_1.TabContentType.INVITED) {
             dispatchInvited({ type: widget_1.actionWidgetTypes.RESET });
         }
         setRefresh(_tabValue);
@@ -179,13 +179,13 @@ function EventMembersWidget(inProps) {
     if (!scEvent ||
         !participants.initialized ||
         (scEvent && ((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) ||
-        (tabValue === types_1.TabContentEnum.PARTICIPANTS && participants.isLoadingNext && !participants.initialized)) {
+        (tabValue === types_1.TabContentType.PARTICIPANTS && participants.isLoadingNext && !participants.initialized)) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: title, defaultMessage: title }) })), (0, jsx_runtime_1.jsxs)(lab_1.TabContext, Object.assign({ value: tabValue }, { children: [(0, jsx_runtime_1.jsxs)(lab_1.TabList, Object.assign({ className: classes.tabsWrapper, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "fullWidth" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3" }, { children: participantsCount })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.participants", defaultMessage: "ui.eventMembersWidget.participants" }) }))] })), value: types_1.TabContentEnum.PARTICIPANTS }), hasAllow && ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3" }, { children: invitedCount })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) }))] })), value: types_1.TabContentEnum.INVITED })), hasAllow && ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3" }, { children: requestsCount })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.requests", defaultMessage: "ui.eventMembersWidget.requests" }) }))] })), value: types_1.TabContentEnum.REQUESTS }))] })), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: types_1.TabContentEnum.PARTICIPANTS, className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsx)(TabContentComponent_1.default, { tabValue: types_1.TabContentEnum.PARTICIPANTS, state: participants, dispatch: dispatchParticipants, userProps: userProps, dialogProps: dialogProps, handleRefresh: handleRefresh }) })), hasAllow && ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: types_1.TabContentEnum.INVITED, className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsx)(TabContentComponent_1.default, { tabValue: types_1.TabContentEnum.INVITED, state: invited, dispatch: dispatchInvited, userProps: userProps, dialogProps: dialogProps, actionProps: {
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: title, defaultMessage: title }) })), (0, jsx_runtime_1.jsxs)(lab_1.TabContext, Object.assign({ value: tabValue }, { children: [(0, jsx_runtime_1.jsxs)(lab_1.TabList, Object.assign({ className: classes.tabsWrapper, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "fullWidth" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3" }, { children: participantsCount })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.participants", defaultMessage: "ui.eventMembersWidget.participants" }) }))] })), value: types_1.TabContentType.PARTICIPANTS }), hasAllow && ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3" }, { children: invitedCount })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) }))] })), value: types_1.TabContentType.INVITED })), hasAllow && ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3" }, { children: requestsCount })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.requests", defaultMessage: "ui.eventMembersWidget.requests" }) }))] })), value: types_1.TabContentType.REQUESTS }))] })), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: types_1.TabContentType.PARTICIPANTS, className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsx)(TabContentComponent_1.default, { tabValue: types_1.TabContentType.PARTICIPANTS, state: participants, dispatch: dispatchParticipants, userProps: userProps, dialogProps: dialogProps, handleRefresh: handleRefresh }) })), hasAllow && ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: types_1.TabContentType.INVITED, className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsx)(TabContentComponent_1.default, { tabValue: types_1.TabContentType.INVITED, state: invited, dispatch: dispatchInvited, userProps: userProps, dialogProps: dialogProps, actionProps: {
                                     scEvent,
                                     setCount: setInvitedCount
-                                }, handleRefresh: handleRefresh }) }))), hasAllow && ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: types_1.TabContentEnum.REQUESTS, className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsx)(TabContentComponent_1.default, { tabValue: types_1.TabContentEnum.REQUESTS, state: requests, dispatch: dispatchRequests, userProps: userProps, dialogProps: dialogProps, actionProps: {
+                                }, handleRefresh: handleRefresh }) }))), hasAllow && ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: types_1.TabContentType.REQUESTS, className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsx)(TabContentComponent_1.default, { tabValue: types_1.TabContentType.REQUESTS, state: requests, dispatch: dispatchRequests, userProps: userProps, dialogProps: dialogProps, actionProps: {
                                     scEvent,
                                     count: requestsCount,
                                     setCount: setRequestsCount,

package/lib/cjs/components/EventMembersWidget/TabContentComponent.js

@@ -43,7 +43,7 @@ function TabContentComponent(props) {
     // HOOKS
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     // CONSTS
-    const users = (0, react_1.useMemo)(() => (tabValue === types_1.TabContentEnum.REQUESTS ? actionProps === null || actionProps === void 0 ? void 0 : actionProps.users : state.results), [tabValue, actionProps === null || actionProps === void 0 ? void 0 : actionProps.users, state.results]);
+    const users = (0, react_1.useMemo)(() => (tabValue === types_1.TabContentType.REQUESTS ? actionProps === null || actionProps === void 0 ? void 0 : actionProps.users : state.results), [tabValue, actionProps === null || actionProps === void 0 ? void 0 : actionProps.users, state.results]);
     // EFFECTS
     (0, react_1.useEffect)(() => {
         updatesInvited.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.INVITE_MEMBER}`, handleInviteMember);
@@ -80,13 +80,13 @@ function TabContentComponent(props) {
         setOpenDialog((prev) => !prev);
     }, [setOpenDialog]);
     const handleToggleMember = (0, react_1.useCallback)(() => {
-        handleRefresh === null || handleRefresh === void 0 ? void 0 : handleRefresh(types_1.TabContentEnum.PARTICIPANTS);
+        handleRefresh === null || handleRefresh === void 0 ? void 0 : handleRefresh(types_1.TabContentType.PARTICIPANTS);
     }, [handleRefresh]);
     const handleInviteMember = (0, react_1.useCallback)(() => {
-        handleRefresh === null || handleRefresh === void 0 ? void 0 : handleRefresh(types_1.TabContentEnum.INVITED);
+        handleRefresh === null || handleRefresh === void 0 ? void 0 : handleRefresh(types_1.TabContentType.INVITED);
     }, [handleRefresh]);
     const getActionsComponent = (0, react_1.useCallback)((userId) => {
-        if (tabValue === types_1.TabContentEnum.INVITED && actionProps) {
+        if (tabValue === types_1.TabContentType.INVITED && actionProps) {
             const _handleInvitations = (invited) => {
                 var _a, _b;
                 if (invited) {
@@ -98,7 +98,7 @@ function TabContentComponent(props) {
             };
             return (0, jsx_runtime_1.jsx)(InviteUserEventButton_1.default, { event: actionProps.scEvent, userId: userId, handleInvitations: _handleInvitations });
         }
-        else if (tabValue === types_1.TabContentEnum.REQUESTS && actionProps) {
+        else if (tabValue === types_1.TabContentType.REQUESTS && actionProps) {
             const handleConfirm = (id) => {
                 if (id) {
                     actionProps.setCount((prev) => prev - 1);
@@ -119,10 +119,10 @@ function TabContentComponent(props) {
         }
         return undefined;
     }, [tabValue, actionProps]);
-    if (tabValue === types_1.TabContentEnum.PARTICIPANTS && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.count) === 0) {
+    if (tabValue === types_1.TabContentType.PARTICIPANTS && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.count) === 0) {
         return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.noParticipants", defaultMessage: "ui.eventMembersWidget.noParticipants" }) })));
     }
-    else if (tabValue === types_1.TabContentEnum.INVITED && state.count === 0 && actionProps) {
+    else if (tabValue === types_1.TabContentType.INVITED && state.count === 0 && actionProps) {
         const date = actionProps.scEvent.end_date || actionProps.scEvent.start_date;
         const disabled = new Date(date).getTime() < new Date().getTime();
         const handleInvitations = (invited) => {
@@ -132,7 +132,7 @@ function TabContentComponent(props) {
         };
         return ((0, jsx_runtime_1.jsx)(EventInviteButton_1.default, { event: actionProps.scEvent, className: classes.eventButton, handleInvitations: handleInvitations, disabled: disabled }));
     }
-    else if (tabValue === types_1.TabContentEnum.REQUESTS && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.count) === 0) {
+    else if (tabValue === types_1.TabContentType.REQUESTS && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.count) === 0) {
         return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.noOtherRequests", defaultMessage: "ui.eventMembersWidget.noOtherRequests" }) })));
     }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: users === null || users === void 0 ? void 0 : users.slice(0, state.visibleItems).map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, userProps, { actions: getActionsComponent(user.id) })) }, user.id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.showAll", defaultMessage: "ui.eventMembersWidget.showAll" }) })) }))), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventMembersWidget.title", id: "ui.eventMembersWidget.title" }), onClose: handleToggleDialogOpen, open: true }, dialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, Object.assign({ elevation: 0 }, userProps)), className: classes.infiniteScroll, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })) })))] }));

package/lib/cjs/components/EventMembersWidget/types.d.ts

@@ -1,6 +1,5 @@
-export declare type TabContentType = '1' | '2' | '3';
-export declare enum TabContentEnum {
-    PARTICIPANTS = "1",
-    INVITED = "2",
-    REQUESTS = "3"
+export declare enum TabContentType {
+    PARTICIPANTS = "participants",
+    INVITED = "invited",
+    REQUESTS = "requests"
 }

package/lib/cjs/components/EventMembersWidget/types.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabContentEnum = void 0;
-var TabContentEnum;
-(function (TabContentEnum) {
-    TabContentEnum["PARTICIPANTS"] = "1";
-    TabContentEnum["INVITED"] = "2";
-    TabContentEnum["REQUESTS"] = "3";
-})(TabContentEnum = exports.TabContentEnum || (exports.TabContentEnum = {}));
+exports.TabContentType = void 0;
+var TabContentType;
+(function (TabContentType) {
+    TabContentType["PARTICIPANTS"] = "participants";
+    TabContentType["INVITED"] = "invited";
+    TabContentType["REQUESTS"] = "requests";
+})(TabContentType = exports.TabContentType || (exports.TabContentType = {}));

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

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