@selfcommunity/react-ui 0.10.2-courses.100 → 0.10.2-courses.101

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/lib/cjs/components/BottomNavigation/BottomNavigation.js +1 -1
  2. package/lib/cjs/components/ComposerIconButton/ComposerIconButton.d.ts +9 -3
  3. package/lib/cjs/components/ComposerIconButton/ComposerIconButton.js +38 -9
  4. package/lib/cjs/components/CourseForm/CourseForm.d.ts +2 -2
  5. package/lib/cjs/components/Courses/Courses.js +2 -2
  6. package/lib/cjs/components/Courses/Skeleton.js +1 -1
  7. package/lib/cjs/components/EditCourse/MenuRow.js +4 -1
  8. package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/VideoConference.js +2 -2
  9. package/lib/cjs/components/NavigationToolbar/NavigationToolbar.js +1 -1
  10. package/lib/esm/components/BottomNavigation/BottomNavigation.js +1 -1
  11. package/lib/esm/components/ComposerIconButton/ComposerIconButton.d.ts +9 -3
  12. package/lib/esm/components/ComposerIconButton/ComposerIconButton.js +38 -9
  13. package/lib/esm/components/CourseForm/CourseForm.d.ts +2 -2
  14. package/lib/esm/components/Courses/Courses.js +2 -2
  15. package/lib/esm/components/Courses/Skeleton.js +1 -1
  16. package/lib/esm/components/EditCourse/MenuRow.js +5 -2
  17. package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/VideoConference.js +2 -2
  18. package/lib/esm/components/NavigationToolbar/NavigationToolbar.js +1 -1
  19. package/lib/umd/react-ui.js +1 -1
  20. package/package.json +8 -8
package/lib/cjs/components/BottomNavigation/BottomNavigation.js CHANGED
@@ -102,7 +102,7 @@ function BottomNavigation(inProps) {
102
102
  (!postOnlyStaffEnabled || (react_core_1.UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
103
103
  ((groupsEnabled && !eventsEnabled) || (!groupsEnabled && eventsEnabled)) &&
104
104
  !exploreStreamEnabled ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: (0, classnames_1.default)(classes.composer, classes.action), component: ComposerIconButton_1.default, disableRipple: true }, "composer")) : null,
105
- coursesEnabled && scUserContext.user ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSES_SUBSCRIBED_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.COURSES_SUBSCRIBED_ROUTE_NAME, {}), icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "courses" }) }, "courses")) : null,
105
+ coursesEnabled && scUserContext.user ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSES_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.COURSES_ROUTE_NAME, {}), icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "courses" }) }, "courses")) : null,
106
106
  groupsEnabled && scUserContext.user ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }) }, "groups")) : null,
107
107
  (!postOnlyStaffEnabled || (react_core_1.UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
108
108
  groupsEnabled &&
package/lib/cjs/components/ComposerIconButton/ComposerIconButton.d.ts CHANGED
@@ -4,6 +4,7 @@ import { ComposerProps } from '../Composer';
4
4
  import { EventFormDialogProps } from '../EventFormDialog';
5
5
  import { GroupFormProps } from '../GroupForm';
6
6
  import { CreateLiveStreamDialogProps } from '../CreateLiveStreamDialog';
7
+ import { CourseFormDialogProps } from '../CourseFormDialog';
7
8
  export interface ComposerIconButtonProps extends IconButtonProps {
8
9
  /**
9
10
  * Composer Props
@@ -20,18 +21,23 @@ export interface ComposerIconButtonProps extends IconButtonProps {
20
21
  * @default empty object
21
22
  */
22
23
  PopperProps?: PopperProps;
24
+ /**
25
+ * Props to spread to CreateCourse component
26
+ * @default empty object
27
+ */
28
+ CourseFormDialogComponentProps?: CourseFormDialogProps;
23
29
  /**
24
30
  * Props to spread to CreateGroup component
25
31
  * @default empty object
26
32
  */
27
33
  GroupFormProps?: GroupFormProps;
28
34
  /**
29
- * Props to spread to CreateGroup component
35
+ * Props to spread to CreateEvent component
30
36
  * @default empty object
31
37
  */
32
38
  EventFormDialogComponentProps?: EventFormDialogProps;
33
39
  /**
34
- * Props to spread to CreateGroup component
40
+ * Props to spread to CreateLiveStream component
35
41
  * @default empty object
36
42
  */
37
43
  CreateLiveStreamDialogComponentProps?: CreateLiveStreamDialogProps;
@@ -58,5 +64,5 @@ export interface ComposerIconButtonProps extends IconButtonProps {
58
64
 
59
65
  * @param inProps
60
66
  */
61
- declare const _default: React.ForwardRefExoticComponent<Pick<ComposerIconButtonProps, "id" | "role" | "className" | "style" | "classes" | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "component" | "name" | "onClose" | "type" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "PopperProps" | "ComposerProps" | "GroupFormProps" | "EventFormDialogComponentProps" | "CreateLiveStreamDialogComponentProps"> & React.RefAttributes<HTMLButtonElement>>;
67
+ declare const _default: React.ForwardRefExoticComponent<Pick<ComposerIconButtonProps, "id" | "role" | "className" | "style" | "classes" | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "component" | "name" | "onClose" | "type" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "PopperProps" | "ComposerProps" | "CourseFormDialogComponentProps" | "GroupFormProps" | "EventFormDialogComponentProps" | "CreateLiveStreamDialogComponentProps"> & React.RefAttributes<HTMLButtonElement>>;
62
68
  export default _default;
package/lib/cjs/components/ComposerIconButton/ComposerIconButton.js CHANGED
@@ -14,6 +14,7 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
14
14
  const GroupForm_1 = tslib_1.__importDefault(require("../GroupForm"));
15
15
  const CreateLiveStreamDialog_1 = tslib_1.__importDefault(require("../CreateLiveStreamDialog"));
16
16
  const types_1 = require("@selfcommunity/types");
17
+ const CourseFormDialog_1 = tslib_1.__importDefault(require("../CourseFormDialog"));
17
18
  const PREFIX = 'SCComposerIconButton';
18
19
  const classes = {
19
20
  root: `${PREFIX}-root`,
@@ -51,16 +52,17 @@ const MenuRoot = (0, material_1.styled)(material_1.Menu, {
51
52
  * @param inProps
52
53
  */
53
54
  exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps, ref) {
54
- var _a, _b, _c;
55
+ var _a, _b, _c, _d;
55
56
  // PROPS
56
57
  const props = (0, material_1.useThemeProps)({
57
58
  props: inProps,
58
59
  name: PREFIX
59
60
  });
60
- const { className = null, ComposerProps = {}, onClick, onClose, PopperProps = {}, GroupFormProps = {}, EventFormDialogComponentProps = {}, CreateLiveStreamDialogComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "ComposerProps", "onClick", "onClose", "PopperProps", "GroupFormProps", "EventFormDialogComponentProps", "CreateLiveStreamDialogComponentProps"]);
61
+ const { className = null, ComposerProps = {}, onClick, onClose, PopperProps = {}, CourseFormDialogComponentProps = {}, GroupFormProps = {}, EventFormDialogComponentProps = {}, CreateLiveStreamDialogComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "ComposerProps", "onClick", "onClose", "PopperProps", "CourseFormDialogComponentProps", "GroupFormProps", "EventFormDialogComponentProps", "CreateLiveStreamDialogComponentProps"]);
61
62
  // STATE
62
63
  const [openComposer, setOpenComposer] = (0, react_1.useState)(false);
63
64
  const [openPopper, setOpenPopper] = (0, react_1.useState)(false);
65
+ const [openCreateCourse, setOpenCreateCourse] = (0, react_1.useState)(false);
64
66
  const [openCreateGroup, setOpenCreateGroup] = (0, react_1.useState)(false);
65
67
  const [openCreateEvent, setOpenCreateEvent] = (0, react_1.useState)(false);
66
68
  const [openCreateLiveStream, setOpenCreateLiveStream] = (0, react_1.useState)(false);
@@ -86,9 +88,10 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
86
88
  const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
87
89
  const { preferences } = (0, react_core_1.useSCPreferences)();
88
90
  // MEMOS
89
- const canCreateGroup = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_group; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
90
- const canCreateEvent = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_event; }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.permission]);
91
- const canCreateLive = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_c = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _c === void 0 ? void 0 : _c.permission]);
91
+ const canCreateCourse = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_course; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
92
+ const canCreateGroup = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_group; }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.permission]);
93
+ const canCreateEvent = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_event; }, [(_c = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _c === void 0 ? void 0 : _c.permission]);
94
+ const canCreateLive = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_d = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _d === void 0 ? void 0 : _d.permission]);
92
95
  const isCommunityOwner = (0, react_1.useMemo)(() => { var _a; return ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) === 1; }, [scUserContext.user]);
93
96
  const isFreeTrialTier = (0, react_1.useMemo)(() => preferences &&
94
97
  react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
@@ -100,6 +103,19 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
100
103
  }, [listItem]);
101
104
  // EFFECTS
102
105
  (0, react_1.useEffect)(() => {
106
+ if (canCreateCourse) {
107
+ setListItem((prev) => [
108
+ ...prev,
109
+ {
110
+ icon: 'courses',
111
+ text: 'ui.composerIconButton.list.course',
112
+ onClick: () => {
113
+ setOpenCreateCourse(true);
114
+ setOpenPopper(false);
115
+ }
116
+ }
117
+ ]);
118
+ }
103
119
  if (canCreateGroup) {
104
120
  setListItem((prev) => [
105
121
  ...prev,
@@ -139,7 +155,7 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
139
155
  }
140
156
  ]);
141
157
  }
142
- }, [canCreateGroup, setListItem]);
158
+ }, [canCreateCourse, canCreateGroup, canCreateEvent, canCreateLiveStream, setListItem, setOpenPopper, setOpenCreateCourse, setOpenCreateGroup, setOpenCreateEvent, setOpenCreateLiveStream]);
143
159
  // HANDLERS
144
160
  const handleClick = (0, react_1.useCallback)((event) => {
145
161
  if (scUserContext.user) {
@@ -150,7 +166,7 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
150
166
  });
151
167
  }
152
168
  else {
153
- if (canCreateGroup || canCreateEvent || canCreateLiveStream) {
169
+ if (canCreateCourse || canCreateGroup || canCreateEvent || canCreateLiveStream) {
154
170
  setOpenPopper(true);
155
171
  }
156
172
  else {
@@ -162,7 +178,17 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
162
178
  scContext.settings.handleAnonymousAction();
163
179
  }
164
180
  onClick === null || onClick === void 0 ? void 0 : onClick(event);
165
- }, [onClick, scContext.settings, scUserContext.user]);
181
+ }, [
182
+ onClick,
183
+ scContext.settings,
184
+ scUserContext.user,
185
+ canCreateCourse,
186
+ canCreateGroup,
187
+ canCreateEvent,
188
+ canCreateLiveStream,
189
+ setOpenPopper,
190
+ setOpenComposer
191
+ ]);
166
192
  const handleCloseComposer = (0, react_1.useCallback)(() => {
167
193
  setOpenComposer(false);
168
194
  onClose === null || onClose === void 0 ? void 0 : onClose();
@@ -170,6 +196,9 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
170
196
  const handleCloseMenu = (0, react_1.useCallback)(() => {
171
197
  setOpenPopper(false);
172
198
  }, [setOpenPopper]);
199
+ const handleCloseCreateCourse = (0, react_1.useCallback)(() => {
200
+ setOpenCreateCourse(false);
201
+ }, [setOpenCreateCourse]);
173
202
  const handleCloseCreateGroup = (0, react_1.useCallback)(() => {
174
203
  setOpenCreateGroup(false);
175
204
  }, [setOpenCreateGroup]);
@@ -190,5 +219,5 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
190
219
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClick, ref: (innerRef) => {
191
220
  popperRef.current = innerRef;
192
221
  return ref;
193
- } }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_circle_outline" }) })), openComposer && (0, jsx_runtime_1.jsx)(Composer_1.default, Object.assign({ open: true, fullWidth: true, onClose: handleCloseComposer, onSuccess: handleSuccess }, ComposerProps)), openPopper && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: true, onClose: handleCloseMenu, onOpen: () => null, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, className: classes.menuRoot, onClose: handleCloseMenu }, PopperProps, { children: renderContent }))) })), openCreateGroup && (0, jsx_runtime_1.jsx)(GroupForm_1.default, Object.assign({ open: true, onClose: handleCloseCreateGroup }, GroupFormProps)), openCreateEvent && (0, jsx_runtime_1.jsx)(EventFormDialog_1.default, Object.assign({ open: true, onClose: handleCloseCreateEvent }, EventFormDialogComponentProps)), openCreateLiveStream && (0, jsx_runtime_1.jsx)(CreateLiveStreamDialog_1.default, Object.assign({ open: true, onClose: handleCloseCreateLiveStream }, CreateLiveStreamDialogComponentProps))] }));
222
+ } }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_circle_outline" }) })), openComposer && (0, jsx_runtime_1.jsx)(Composer_1.default, Object.assign({ open: true, fullWidth: true, onClose: handleCloseComposer, onSuccess: handleSuccess }, ComposerProps)), openPopper && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: true, onClose: handleCloseMenu, onOpen: () => null, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, className: classes.menuRoot, onClose: handleCloseMenu }, PopperProps, { children: renderContent }))) })), openCreateCourse && (0, jsx_runtime_1.jsx)(CourseFormDialog_1.default, Object.assign({ open: true, onClose: handleCloseCreateCourse }, CourseFormDialogComponentProps)), openCreateGroup && (0, jsx_runtime_1.jsx)(GroupForm_1.default, Object.assign({ open: true, onClose: handleCloseCreateGroup }, GroupFormProps)), openCreateEvent && (0, jsx_runtime_1.jsx)(EventFormDialog_1.default, Object.assign({ open: true, onClose: handleCloseCreateEvent }, EventFormDialogComponentProps)), openCreateLiveStream && (0, jsx_runtime_1.jsx)(CreateLiveStreamDialog_1.default, Object.assign({ open: true, onClose: handleCloseCreateLiveStream }, CreateLiveStreamDialogComponentProps))] }));
194
223
  });
package/lib/cjs/components/CourseForm/CourseForm.d.ts CHANGED
@@ -22,9 +22,9 @@ export interface CourseFormProps extends BoxProps {
22
22
  onSuccess?: (data: SCCourseType) => void;
23
23
  /**
24
24
  * step name
25
- * @default 'one'
25
+ * @default `SCCourseFormStepType.ONE`
26
26
  */
27
- step: SCCourseFormStepType;
27
+ step?: SCCourseFormStepType;
28
28
  /**
29
29
  * On error callback function
30
30
  * @default null
package/lib/cjs/components/Courses/Courses.js CHANGED
@@ -43,7 +43,7 @@ const Root = (0, material_1.styled)(material_1.Box, {
43
43
  exports.CoursesChipRoot = (0, material_1.styled)(material_1.Chip, {
44
44
  name: constants_1.PREFIX,
45
45
  slot: 'CoursesChipRoot',
46
- shouldForwardProp: (prop) => prop !== 'showForMe'
46
+ shouldForwardProp: (prop) => prop !== 'showForMe' && prop !== 'showMyCourses'
47
47
  })(() => ({}));
48
48
  /**
49
49
  * > API documentation for the Community-JS Courses component. Learn about the available props and the CSS API.
@@ -222,7 +222,7 @@ function Courses(inProps) {
222
222
  endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => fetchCourses(), disabled: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchCourses(), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }), disabled: loading })) })))
223
223
  } }) })), ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.CoursesChipRoot, { color: showMyCourses ? 'primary' : 'default', variant: showMyCourses ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.filterByCreatedByMe", defaultMessage: "ui.courses.filterByCreatedByMe" }), onClick: () => setShowMyCourses(!showMyCourses),
224
224
  // @ts-expect-error this is needed to use showForMe into SCCourses
225
- showForMe: showMyCourses, deleteIcon: showMyCourses ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showMyCourses ? handleDeleteClick : null, disabled: loading }) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: "auto" }, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { onChange: handleOnChangeCategory, className: classes.category, size: "small", multiple: true }) })) })), authUserId && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.CoursesChipRoot, { color: showForMe ? 'primary' : 'default', variant: showForMe ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.filterByCoursesForMe", defaultMessage: "ui.courses.filterByCoursesForMe" }), onClick: handleChipClick,
225
+ showForMe: showMyCourses, deleteIcon: showMyCourses ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showMyCourses ? () => setShowMyCourses(false) : null, disabled: loading }) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: "auto" }, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { onChange: handleOnChangeCategory, className: classes.category, size: "small", multiple: true }) })) })), authUserId && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.CoursesChipRoot, { color: showForMe ? 'primary' : 'default', variant: showForMe ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.filterByCoursesForMe", defaultMessage: "ui.courses.filterByCoursesForMe" }), onClick: handleChipClick,
226
226
  // @ts-expect-error this is needed to use showForMe into SCCourses
227
227
  showForMe: showForMe, deleteIcon: showForMe ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showForMe ? handleDeleteClick : null, disabled: loading }) })))] })) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({}, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !courses.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: !canCreateCourse && onlyStaffEnabled ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.studentEmptyView }, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.emptyBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.emptyRotatedBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.emptyIcon, color: "disabled", fontSize: "large" }, { children: "courses" })) })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.empty.title", defaultMessage: "ui.courses.empty.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.empty.info", defaultMessage: "ui.courses.empty.info" }) })), (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps, GridItemComponentProps: { md: 2 } }))] }))) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.teacherEmptyView }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ teacherView: (onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled, coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps, GridItemComponentProps: { md: 2 } })) }))) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.courses }, GridContainerComponentProps, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [courses.map((course) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.item }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Course_1.default, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && courses.length % 2 !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.itemPlaceholder }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Placeholder_1.default, { actionCreate: true }) }), 'placeholder-item'))] }) })), Boolean(next) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.button.seeMore", defaultMessage: "ui.courses.button.seeMore" }) })))] })) })) })] }));
228
228
  /**
package/lib/cjs/components/Courses/Skeleton.js CHANGED
@@ -40,6 +40,6 @@ const Root = (0, styles_1.styled)(material_1.Box, {
40
40
  */
41
41
  function CoursesSkeleton(inProps) {
42
42
  const { className, CourseSkeletonProps = {}, coursesNumber = 8, GridContainerComponentProps = {}, GridItemComponentProps = {}, teacherView = false } = inProps, rest = tslib_1.__rest(inProps, ["className", "CourseSkeletonProps", "coursesNumber", "GridContainerComponentProps", "GridItemComponentProps", "teacherView"]);
43
- return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.courses }, GridContainerComponentProps, { children: [...Array(coursesNumber)].map((course, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6 }, GridItemComponentProps, { className: classes.item }, { children: teacherView ? (0, jsx_runtime_1.jsx)(Placeholder_1.default, { itemNumber: index + 1, actionCreate: index === 3 }) : (0, jsx_runtime_1.jsx)(Course_1.CourseSkeleton, Object.assign({}, CourseSkeletonProps)) }), index))) })) })));
43
+ return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.courses }, GridContainerComponentProps, { children: [...Array(coursesNumber)].map((course, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3 }, GridItemComponentProps, { className: classes.item }, { children: teacherView ? (0, jsx_runtime_1.jsx)(Placeholder_1.default, { itemNumber: index + 1, actionCreate: index === 3 }) : (0, jsx_runtime_1.jsx)(Course_1.CourseSkeleton, Object.assign({}, CourseSkeletonProps)) }), index))) })) })));
44
44
  }
45
45
  exports.default = CoursesSkeleton;
package/lib/cjs/components/EditCourse/MenuRow.js CHANGED
@@ -10,6 +10,9 @@ function MenuRow(props) {
10
10
  const { icon = (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "more_vert" }), buttonClassName, disabled, children } = props;
11
11
  // STATES
12
12
  const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
13
+ // HOOKS
14
+ const theme = (0, material_1.useTheme)();
15
+ const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
13
16
  // HANDLERS
14
17
  const handleClick = (0, react_1.useCallback)((e) => {
15
18
  setAnchorEl(e.currentTarget);
@@ -17,6 +20,6 @@ function MenuRow(props) {
17
20
  const handleClose = (0, react_1.useCallback)(() => {
18
21
  setAnchorEl(null);
19
22
  }, [anchorEl]);
20
- return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: buttonClassName, onClick: handleClick, disabled: disabled }, { children: icon })), (0, jsx_runtime_1.jsx)(Menu_1.default, Object.assign({ anchorEl: anchorEl, open: Boolean(anchorEl), onClick: handleClose }, { children: children }))] }));
23
+ return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: buttonClassName, onClick: handleClick, disabled: disabled }, { children: icon })), isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: Boolean(anchorEl), onClick: handleClose, onClose: handleClose, onOpen: () => null, anchor: "bottom", disableSwipeToOpen: true }, { children: children }))) : ((0, jsx_runtime_1.jsx)(Menu_1.default, Object.assign({ anchorEl: anchorEl, open: Boolean(anchorEl), onClick: handleClose }, { children: children })))] }));
21
24
  }
22
25
  exports.default = (0, react_1.memo)(MenuRow);
package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/VideoConference.js CHANGED
@@ -59,7 +59,7 @@ function VideoConference(inProps) {
59
59
  { source: livekit_client_1.Track.Source.Camera, withPlaceholder: true },
60
60
  { source: livekit_client_1.Track.Source.ScreenShare, withPlaceholder: false }
61
61
  ], { updateOnlyOn: [livekit_client_1.RoomEvent.ActiveSpeakersChanged], onlySubscribed: false });
62
- const tracksNoParticipants = (0, react_1.useMemo)(() => tracks.filter((t) => t.participant.name === scUserContext.user.username || t.source === 'screen_share'), [tracks, scUserContext.user]);
62
+ const tracksNoParticipants = (0, react_1.useMemo)(() => tracks.filter((t) => t.participant.name === scUserContext.user.username || t.participant.name === speakerFocused.username || t.source === 'screen_share'), [tracks, scUserContext.user]);
63
63
  const participants = (0, components_react_1.useParticipants)();
64
64
  const layoutContext = (0, components_react_1.useCreateLayoutContext)();
65
65
  const screenShareTracks = tracks.filter(components_core_1.isTrackReference).filter((track) => track.publication.source === livekit_client_1.Track.Source.ScreenShare);
@@ -143,7 +143,7 @@ function VideoConference(inProps) {
143
143
  }
144
144
  }
145
145
  }, [tracks, participants, speakerFocused]);
146
- return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root, 'lk-video-conference') }, rest, { children: [(0, components_core_1.isWeb)() && ((0, jsx_runtime_1.jsxs)(components_react_1.LayoutContextProvider, Object.assign({ value: layoutContext, onPinChange: handleFocusStateChange, onWidgetChange: widgetUpdate }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-video-conference-inner" }, { children: [!focusTrack ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-grid-layout-wrapper" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.GridLayout, Object.assign({ tracks: hideParticipantsList ? tracksNoParticipants : tracks }, { children: (0, jsx_runtime_1.jsx)(ParticipantTile_1.ParticipantTile, {}) })) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-focus-layout-wrapper" }, { children: hideParticipantsList ? ((0, jsx_runtime_1.jsx)(FocusLayout_1.FocusLayoutContainerNoParticipants, { children: focusTrack && (0, jsx_runtime_1.jsx)(FocusLayout_1.FocusLayout, { trackRef: focusTrack, disableTileFocusToggle: Boolean(tracksNoParticipants.length <= 1) }) })) : ((0, jsx_runtime_1.jsxs)(FocusLayout_1.FocusLayoutContainer, { children: [carouselTracks.length > 1 ? ((0, jsx_runtime_1.jsx)(components_react_1.CarouselLayout, Object.assign({ tracks: carouselTracks }, { children: (0, jsx_runtime_1.jsx)(ParticipantTile_1.ParticipantTile, {}) }))) : ((0, jsx_runtime_1.jsx)(NoParticipants_1.default, {})), focusTrack && (0, jsx_runtime_1.jsx)(FocusLayout_1.FocusLayout, { trackRef: focusTrack })] })) }))), (0, jsx_runtime_1.jsx)(ControlBar_1.ControlBar, { controls: Object.assign({
146
+ return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root, 'lk-video-conference') }, rest, { children: [(0, components_core_1.isWeb)() && ((0, jsx_runtime_1.jsxs)(components_react_1.LayoutContextProvider, Object.assign({ value: layoutContext, onPinChange: handleFocusStateChange, onWidgetChange: widgetUpdate }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-video-conference-inner" }, { children: [!focusTrack ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-grid-layout-wrapper" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.GridLayout, Object.assign({ tracks: hideParticipantsList ? tracksNoParticipants : tracks }, { children: (0, jsx_runtime_1.jsx)(ParticipantTile_1.ParticipantTile, {}) })) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-focus-layout-wrapper" }, { children: hideParticipantsList ? ((0, jsx_runtime_1.jsx)(FocusLayout_1.FocusLayoutContainerNoParticipants, { children: focusTrack && (0, jsx_runtime_1.jsx)(FocusLayout_1.FocusLayout, { trackRef: focusTrack }) })) : ((0, jsx_runtime_1.jsxs)(FocusLayout_1.FocusLayoutContainer, { children: [carouselTracks.length ? ((0, jsx_runtime_1.jsx)(components_react_1.CarouselLayout, Object.assign({ tracks: carouselTracks }, { children: (0, jsx_runtime_1.jsx)(ParticipantTile_1.ParticipantTile, {}) }))) : ((0, jsx_runtime_1.jsx)(NoParticipants_1.default, {})), focusTrack && (0, jsx_runtime_1.jsx)(FocusLayout_1.FocusLayout, { trackRef: focusTrack })] })) }))), (0, jsx_runtime_1.jsx)(ControlBar_1.ControlBar, { controls: Object.assign({
147
147
  chat: !disableChat,
148
148
  microphone: !disableMicrophone,
149
149
  camera: !disableCamera,
package/lib/cjs/components/NavigationToolbar/NavigationToolbar.js CHANGED
@@ -150,7 +150,7 @@ function NavigationToolbar(inProps) {
150
150
  const _children = children || ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.home, { [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {})) }), "aria-label": "Home", to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "home" }) }))), coursesEnabled && scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.courses, {
151
151
  [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.COURSES_SUBSCRIBED_ROUTE_NAME, {})) ||
152
152
  value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.COURSES_ROUTE_NAME, {}))
153
- }), "aria-label": "Courses", to: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "courses" }) }))), groupsEnabled && scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.groups, {
153
+ }), "aria-label": "Courses", to: scRoutingContext.url(react_core_1.SCRoutes.COURSES_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "courses" }) }))), groupsEnabled && scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.groups, {
154
154
  [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {})) ||
155
155
  value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.GROUPS_ROUTE_NAME, {}))
156
156
  }), "aria-label": "Groups", to: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "groups" }) }))), eventsEnabled && (scUserContext.user || preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.events, {
package/lib/esm/components/BottomNavigation/BottomNavigation.js CHANGED
@@ -100,7 +100,7 @@ export default function BottomNavigation(inProps) {
100
100
  (!postOnlyStaffEnabled || (UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
101
101
  ((groupsEnabled && !eventsEnabled) || (!groupsEnabled && eventsEnabled)) &&
102
102
  !exploreStreamEnabled ? (_jsx(BottomNavigationAction, { className: classNames(classes.composer, classes.action), component: ComposerIconButton, disableRipple: true }, "composer")) : null,
103
- coursesEnabled && scUserContext.user ? (_jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.COURSES_SUBSCRIBED_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.COURSES_SUBSCRIBED_ROUTE_NAME, {}), icon: _jsx(Icon, { children: "courses" }) }, "courses")) : null,
103
+ coursesEnabled && scUserContext.user ? (_jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.COURSES_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.COURSES_ROUTE_NAME, {}), icon: _jsx(Icon, { children: "courses" }) }, "courses")) : null,
104
104
  groupsEnabled && scUserContext.user ? (_jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), icon: _jsx(Icon, { children: "groups" }) }, "groups")) : null,
105
105
  (!postOnlyStaffEnabled || (UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
106
106
  groupsEnabled &&
package/lib/esm/components/ComposerIconButton/ComposerIconButton.d.ts CHANGED
@@ -4,6 +4,7 @@ import { ComposerProps } from '../Composer';
4
4
  import { EventFormDialogProps } from '../EventFormDialog';
5
5
  import { GroupFormProps } from '../GroupForm';
6
6
  import { CreateLiveStreamDialogProps } from '../CreateLiveStreamDialog';
7
+ import { CourseFormDialogProps } from '../CourseFormDialog';
7
8
  export interface ComposerIconButtonProps extends IconButtonProps {
8
9
  /**
9
10
  * Composer Props
@@ -20,18 +21,23 @@ export interface ComposerIconButtonProps extends IconButtonProps {
20
21
  * @default empty object
21
22
  */
22
23
  PopperProps?: PopperProps;
24
+ /**
25
+ * Props to spread to CreateCourse component
26
+ * @default empty object
27
+ */
28
+ CourseFormDialogComponentProps?: CourseFormDialogProps;
23
29
  /**
24
30
  * Props to spread to CreateGroup component
25
31
  * @default empty object
26
32
  */
27
33
  GroupFormProps?: GroupFormProps;
28
34
  /**
29
- * Props to spread to CreateGroup component
35
+ * Props to spread to CreateEvent component
30
36
  * @default empty object
31
37
  */
32
38
  EventFormDialogComponentProps?: EventFormDialogProps;
33
39
  /**
34
- * Props to spread to CreateGroup component
40
+ * Props to spread to CreateLiveStream component
35
41
  * @default empty object
36
42
  */
37
43
  CreateLiveStreamDialogComponentProps?: CreateLiveStreamDialogProps;
@@ -58,5 +64,5 @@ export interface ComposerIconButtonProps extends IconButtonProps {
58
64
 
59
65
  * @param inProps
60
66
  */
61
- declare const _default: React.ForwardRefExoticComponent<Pick<ComposerIconButtonProps, "id" | "role" | "className" | "style" | "classes" | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "component" | "name" | "onClose" | "type" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "PopperProps" | "ComposerProps" | "GroupFormProps" | "EventFormDialogComponentProps" | "CreateLiveStreamDialogComponentProps"> & React.RefAttributes<HTMLButtonElement>>;
67
+ declare const _default: React.ForwardRefExoticComponent<Pick<ComposerIconButtonProps, "id" | "role" | "className" | "style" | "classes" | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "component" | "name" | "onClose" | "type" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "PopperProps" | "ComposerProps" | "CourseFormDialogComponentProps" | "GroupFormProps" | "EventFormDialogComponentProps" | "CreateLiveStreamDialogComponentProps"> & React.RefAttributes<HTMLButtonElement>>;
62
68
  export default _default;
package/lib/esm/components/ComposerIconButton/ComposerIconButton.js CHANGED
@@ -12,6 +12,7 @@ import classNames from 'classnames';
12
12
  import GroupForm from '../GroupForm';
13
13
  import CreateLiveStreamDialog from '../CreateLiveStreamDialog';
14
14
  import { SCCommunitySubscriptionTier } from '@selfcommunity/types';
15
+ import CourseFormDialog from '../CourseFormDialog';
15
16
  const PREFIX = 'SCComposerIconButton';
16
17
  const classes = {
17
18
  root: `${PREFIX}-root`,
@@ -49,16 +50,17 @@ const MenuRoot = styled(Menu, {
49
50
  * @param inProps
50
51
  */
51
52
  export default React.forwardRef(function ComposerIconButton(inProps, ref) {
52
- var _a, _b, _c;
53
+ var _a, _b, _c, _d;
53
54
  // PROPS
54
55
  const props = useThemeProps({
55
56
  props: inProps,
56
57
  name: PREFIX
57
58
  });
58
- const { className = null, ComposerProps = {}, onClick, onClose, PopperProps = {}, GroupFormProps = {}, EventFormDialogComponentProps = {}, CreateLiveStreamDialogComponentProps = {} } = props, rest = __rest(props, ["className", "ComposerProps", "onClick", "onClose", "PopperProps", "GroupFormProps", "EventFormDialogComponentProps", "CreateLiveStreamDialogComponentProps"]);
59
+ const { className = null, ComposerProps = {}, onClick, onClose, PopperProps = {}, CourseFormDialogComponentProps = {}, GroupFormProps = {}, EventFormDialogComponentProps = {}, CreateLiveStreamDialogComponentProps = {} } = props, rest = __rest(props, ["className", "ComposerProps", "onClick", "onClose", "PopperProps", "CourseFormDialogComponentProps", "GroupFormProps", "EventFormDialogComponentProps", "CreateLiveStreamDialogComponentProps"]);
59
60
  // STATE
60
61
  const [openComposer, setOpenComposer] = useState(false);
61
62
  const [openPopper, setOpenPopper] = useState(false);
63
+ const [openCreateCourse, setOpenCreateCourse] = useState(false);
62
64
  const [openCreateGroup, setOpenCreateGroup] = useState(false);
63
65
  const [openCreateEvent, setOpenCreateEvent] = useState(false);
64
66
  const [openCreateLiveStream, setOpenCreateLiveStream] = useState(false);
@@ -84,9 +86,10 @@ export default React.forwardRef(function ComposerIconButton(inProps, ref) {
84
86
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
85
87
  const { preferences } = useSCPreferences();
86
88
  // MEMOS
87
- const canCreateGroup = 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_group; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
88
- const canCreateEvent = 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_event; }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.permission]);
89
- const canCreateLive = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_c = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _c === void 0 ? void 0 : _c.permission]);
89
+ 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]);
90
+ const canCreateGroup = 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_group; }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.permission]);
91
+ const canCreateEvent = 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_event; }, [(_c = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _c === void 0 ? void 0 : _c.permission]);
92
+ const canCreateLive = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_d = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _d === void 0 ? void 0 : _d.permission]);
90
93
  const isCommunityOwner = useMemo(() => { var _a; return ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) === 1; }, [scUserContext.user]);
91
94
  const isFreeTrialTier = useMemo(() => preferences &&
92
95
  SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
@@ -98,6 +101,19 @@ export default React.forwardRef(function ComposerIconButton(inProps, ref) {
98
101
  }, [listItem]);
99
102
  // EFFECTS
100
103
  useEffect(() => {
104
+ if (canCreateCourse) {
105
+ setListItem((prev) => [
106
+ ...prev,
107
+ {
108
+ icon: 'courses',
109
+ text: 'ui.composerIconButton.list.course',
110
+ onClick: () => {
111
+ setOpenCreateCourse(true);
112
+ setOpenPopper(false);
113
+ }
114
+ }
115
+ ]);
116
+ }
101
117
  if (canCreateGroup) {
102
118
  setListItem((prev) => [
103
119
  ...prev,
@@ -137,7 +153,7 @@ export default React.forwardRef(function ComposerIconButton(inProps, ref) {
137
153
  }
138
154
  ]);
139
155
  }
140
- }, [canCreateGroup, setListItem]);
156
+ }, [canCreateCourse, canCreateGroup, canCreateEvent, canCreateLiveStream, setListItem, setOpenPopper, setOpenCreateCourse, setOpenCreateGroup, setOpenCreateEvent, setOpenCreateLiveStream]);
141
157
  // HANDLERS
142
158
  const handleClick = useCallback((event) => {
143
159
  if (scUserContext.user) {
@@ -148,7 +164,7 @@ export default React.forwardRef(function ComposerIconButton(inProps, ref) {
148
164
  });
149
165
  }
150
166
  else {
151
- if (canCreateGroup || canCreateEvent || canCreateLiveStream) {
167
+ if (canCreateCourse || canCreateGroup || canCreateEvent || canCreateLiveStream) {
152
168
  setOpenPopper(true);
153
169
  }
154
170
  else {
@@ -160,7 +176,17 @@ export default React.forwardRef(function ComposerIconButton(inProps, ref) {
160
176
  scContext.settings.handleAnonymousAction();
161
177
  }
162
178
  onClick === null || onClick === void 0 ? void 0 : onClick(event);
163
- }, [onClick, scContext.settings, scUserContext.user]);
179
+ }, [
180
+ onClick,
181
+ scContext.settings,
182
+ scUserContext.user,
183
+ canCreateCourse,
184
+ canCreateGroup,
185
+ canCreateEvent,
186
+ canCreateLiveStream,
187
+ setOpenPopper,
188
+ setOpenComposer
189
+ ]);
164
190
  const handleCloseComposer = useCallback(() => {
165
191
  setOpenComposer(false);
166
192
  onClose === null || onClose === void 0 ? void 0 : onClose();
@@ -168,6 +194,9 @@ export default React.forwardRef(function ComposerIconButton(inProps, ref) {
168
194
  const handleCloseMenu = useCallback(() => {
169
195
  setOpenPopper(false);
170
196
  }, [setOpenPopper]);
197
+ const handleCloseCreateCourse = useCallback(() => {
198
+ setOpenCreateCourse(false);
199
+ }, [setOpenCreateCourse]);
171
200
  const handleCloseCreateGroup = useCallback(() => {
172
201
  setOpenCreateGroup(false);
173
202
  }, [setOpenCreateGroup]);
@@ -188,5 +217,5 @@ export default React.forwardRef(function ComposerIconButton(inProps, ref) {
188
217
  return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClick, ref: (innerRef) => {
189
218
  popperRef.current = innerRef;
190
219
  return ref;
191
- } }, rest, { children: _jsx(Icon, { children: "add_circle_outline" }) })), openComposer && _jsx(Composer, Object.assign({ open: true, fullWidth: true, onClose: handleCloseComposer, onSuccess: handleSuccess }, ComposerProps)), openPopper && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: true, onClose: handleCloseMenu, onOpen: () => null, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent }))) : (_jsx(MenuRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, className: classes.menuRoot, onClose: handleCloseMenu }, PopperProps, { children: renderContent }))) })), openCreateGroup && _jsx(GroupForm, Object.assign({ open: true, onClose: handleCloseCreateGroup }, GroupFormProps)), openCreateEvent && _jsx(EventFormDialog, Object.assign({ open: true, onClose: handleCloseCreateEvent }, EventFormDialogComponentProps)), openCreateLiveStream && _jsx(CreateLiveStreamDialog, Object.assign({ open: true, onClose: handleCloseCreateLiveStream }, CreateLiveStreamDialogComponentProps))] }));
220
+ } }, rest, { children: _jsx(Icon, { children: "add_circle_outline" }) })), openComposer && _jsx(Composer, Object.assign({ open: true, fullWidth: true, onClose: handleCloseComposer, onSuccess: handleSuccess }, ComposerProps)), openPopper && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: true, onClose: handleCloseMenu, onOpen: () => null, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent }))) : (_jsx(MenuRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, className: classes.menuRoot, onClose: handleCloseMenu }, PopperProps, { children: renderContent }))) })), openCreateCourse && _jsx(CourseFormDialog, Object.assign({ open: true, onClose: handleCloseCreateCourse }, CourseFormDialogComponentProps)), openCreateGroup && _jsx(GroupForm, Object.assign({ open: true, onClose: handleCloseCreateGroup }, GroupFormProps)), openCreateEvent && _jsx(EventFormDialog, Object.assign({ open: true, onClose: handleCloseCreateEvent }, EventFormDialogComponentProps)), openCreateLiveStream && _jsx(CreateLiveStreamDialog, Object.assign({ open: true, onClose: handleCloseCreateLiveStream }, CreateLiveStreamDialogComponentProps))] }));
192
221
  });
package/lib/esm/components/CourseForm/CourseForm.d.ts CHANGED
@@ -22,9 +22,9 @@ export interface CourseFormProps extends BoxProps {
22
22
  onSuccess?: (data: SCCourseType) => void;
23
23
  /**
24
24
  * step name
25
- * @default 'one'
25
+ * @default `SCCourseFormStepType.ONE`
26
26
  */
27
- step: SCCourseFormStepType;
27
+ step?: SCCourseFormStepType;
28
28
  /**
29
29
  * On error callback function
30
30
  * @default null
package/lib/esm/components/Courses/Courses.js CHANGED
@@ -40,7 +40,7 @@ const Root = styled(Box, {
40
40
  export const CoursesChipRoot = styled(Chip, {
41
41
  name: PREFIX,
42
42
  slot: 'CoursesChipRoot',
43
- shouldForwardProp: (prop) => prop !== 'showForMe'
43
+ shouldForwardProp: (prop) => prop !== 'showForMe' && prop !== 'showMyCourses'
44
44
  })(() => ({}));
45
45
  /**
46
46
  * > API documentation for the Community-JS Courses component. Learn about the available props and the CSS API.
@@ -219,7 +219,7 @@ export default function Courses(inProps) {
219
219
  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 })) })))
220
220
  } }) })), ((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),
221
221
  // @ts-expect-error this is needed to use showForMe into SCCourses
222
- showForMe: showMyCourses, deleteIcon: showMyCourses ? _jsx(Icon, { children: "close" }) : null, onDelete: showMyCourses ? handleDeleteClick : null, disabled: loading }) }))), _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,
222
+ showForMe: showMyCourses, deleteIcon: showMyCourses ? _jsx(Icon, { children: "close" }) : null, onDelete: showMyCourses ? () => setShowMyCourses(false) : null, disabled: loading }) }))), _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,
223
223
  // @ts-expect-error this is needed to use showForMe into SCCourses
224
224
  showForMe: showForMe, deleteIcon: showForMe ? _jsx(Icon, { children: "close" }) : null, onDelete: showForMe ? handleDeleteClick : null, disabled: loading }) })))] })) }))), _jsx(_Fragment, { children: loading ? (_jsx(Skeleton, Object.assign({}, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))) : (_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(Skeleton, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps, GridItemComponentProps: { md: 2 } }))] }))) : (_jsx(Box, Object.assign({ className: classes.teacherEmptyView }, { children: _jsx(Skeleton, Object.assign({ teacherView: (onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled, coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps, GridItemComponentProps: { md: 2 } })) }))) }))) : (_jsxs(_Fragment, { 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(CoursePlaceholder, { actionCreate: true }) }), 'placeholder-item'))] }) })), Boolean(next) && (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: _jsx(FormattedMessage, { id: "ui.courses.button.seeMore", defaultMessage: "ui.courses.button.seeMore" }) })))] })) })) })] }));
225
225
  /**
package/lib/esm/components/Courses/Skeleton.js CHANGED
@@ -38,5 +38,5 @@ const Root = styled(Box, {
38
38
  */
39
39
  export default function CoursesSkeleton(inProps) {
40
40
  const { className, CourseSkeletonProps = {}, coursesNumber = 8, GridContainerComponentProps = {}, GridItemComponentProps = {}, teacherView = false } = inProps, rest = __rest(inProps, ["className", "CourseSkeletonProps", "coursesNumber", "GridContainerComponentProps", "GridItemComponentProps", "teacherView"]);
41
- return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.courses }, GridContainerComponentProps, { children: [...Array(coursesNumber)].map((course, index) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6 }, GridItemComponentProps, { className: classes.item }, { children: teacherView ? _jsx(CoursePlaceholder, { itemNumber: index + 1, actionCreate: index === 3 }) : _jsx(CourseSkeleton, Object.assign({}, CourseSkeletonProps)) }), index))) })) })));
41
+ return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.courses }, GridContainerComponentProps, { children: [...Array(coursesNumber)].map((course, index) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3 }, GridItemComponentProps, { className: classes.item }, { children: teacherView ? _jsx(CoursePlaceholder, { itemNumber: index + 1, actionCreate: index === 3 }) : _jsx(CourseSkeleton, Object.assign({}, CourseSkeletonProps)) }), index))) })) })));
42
42
  }