@selfcommunity/react-ui 0.11.0-alpha.6 → 0.11.0-alpha.61

package/lib/cjs/components/CourseForm/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = void 0;
+const tslib_1 = require("tslib");
+const CourseForm_1 = tslib_1.__importDefault(require("./CourseForm"));
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+exports.Skeleton = Skeleton_1.default;
+exports.default = CourseForm_1.default;

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

@@ -0,0 +1,48 @@
+import { BaseDialogProps } from '../../shared/BaseDialog';
+import { CourseFormProps } from '../CourseForm';
+export interface CourseFormDialogProps extends BaseDialogProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Open dialog
+     * @default true
+     */
+    open?: boolean;
+    /**
+     * On dialog close callback function
+     * @default null
+     */
+    onClose?: () => void;
+    /**
+     * Props to spread to CourseForm component
+     * @default {}
+     */
+    CourseFormComponentProps?: CourseFormProps;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS CourseFormDialog component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CourseFormDialog} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCourseFormDialog` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourseFormDialog-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function CourseFormDialog(inProps: CourseFormDialogProps): JSX.Element;

package/lib/cjs/components/CourseFormDialog/CourseFormDialog.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_intl_1 = require("react-intl");
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const constants_1 = require("./constants");
+const CourseForm_1 = tslib_1.__importDefault(require("../CourseForm"));
+const react_1 = require("react");
+const Course_1 = require("../../constants/Course");
+const classes = {
+    root: `${constants_1.PREFIX}-root`
+};
+const Root = (0, styles_1.styled)(BaseDialog_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
+/**
+ *> API documentation for the Community-JS CourseFormDialog component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CourseFormDialog} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCourseFormDialog` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourseFormDialog-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+function CourseFormDialog(inProps) {
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, open = true, onClose, CourseFormComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "CourseFormComponentProps"]);
+    // STATE
+    const [step, setStep] = (0, react_1.useState)(Course_1.SCCourseFormStepType.GENERAL);
+    const [type, setType] = (0, react_1.useState)('');
+    //HANDLERS
+    const handleStepTypeChange = (step, type) => {
+        setStep(step);
+        setType(type);
+    };
+    const handleSuccess = (0, react_1.useCallback)((course) => {
+        var _a;
+        (_a = CourseFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(CourseFormComponentProps, course);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [onClose, CourseFormComponentProps]);
+    /**
+     * Renders root object
+     */
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, title: (CourseFormComponentProps === null || CourseFormComponentProps === void 0 ? void 0 : CourseFormComponentProps.course) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.title.edit", defaultMessage: "ui.courseForm.title.edit" })) : step === Course_1.SCCourseFormStepType.GENERAL ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.title.general", defaultMessage: "ui.courseForm.title.general" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.title.customization", defaultMessage: "ui.courseForm.title.customization", values: {
+                courseType: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${type}.title`, defaultMessage: `ui.courseForm.${type}.title` })
+            } })), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(CourseForm_1.default, Object.assign({}, CourseFormComponentProps, { onStepChange: handleStepTypeChange, onSuccess: handleSuccess })) })));
+}
+exports.default = CourseFormDialog;

package/lib/cjs/components/CourseFormDialog/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCCourseFormDialog";

package/lib/cjs/components/CourseFormDialog/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCCourseFormDialog';

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

@@ -0,0 +1,3 @@
+import CourseFormDialog, { CourseFormDialogProps } from './CourseFormDialog';
+export default CourseFormDialog;
+export { CourseFormDialogProps };

package/lib/cjs/components/CourseFormDialog/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const CourseFormDialog_1 = tslib_1.__importDefault(require("./CourseFormDialog"));
+exports.default = CourseFormDialog_1.default;

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

@@ -0,0 +1,56 @@
+import { SCCourseType, SCUserType } from '@selfcommunity/types';
+export interface CourseJoinButtonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Course Object
+     * @default null
+     */
+    course?: SCCourseType;
+    /**
+     * Id of the course
+     * @default null
+     */
+    courseId?: number;
+    /**
+     * The user to be accepted into the course
+     * @default null
+     */
+    user?: SCUserType;
+    /**
+     * onJoin callback
+     * @param user
+     * @param joined
+     */
+    onJoin?: (course: SCCourseType, status: string | null) => any;
+    /**
+     * Others properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Course Subscribe Button component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CourseJoinButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCourseJoinButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourseJoinButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function CourseJoinButton(inProps: CourseJoinButtonProps): JSX.Element;

package/lib/cjs/components/CourseJoinButton/CourseJoinButton.js

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_1 = require("@mui/material/styles");
+const utils_1 = require("@selfcommunity/utils");
+const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
+const lab_1 = require("@mui/lab");
+const react_intl_1 = require("react-intl");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const system_1 = require("@mui/system");
+const Errors_1 = require("../../constants/Errors");
+const PubSub_1 = require("../../constants/PubSub");
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PREFIX = 'SCCourseJoinButton';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = (0, styles_1.styled)(lab_1.LoadingButton, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
+/**
+ * > API documentation for the Community-JS Course Subscribe Button component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CourseJoinButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCourseJoinButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourseJoinButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+function CourseJoinButton(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, courseId, course, user, onJoin } = props, rest = tslib_1.__rest(props, ["className", "courseId", "course", "user", "onJoin"]);
+    // STATE
+    const [status, setStatus] = (0, react_1.useState)(null);
+    // CONTEXT
+    const scContext = (0, react_core_1.useSCContext)();
+    const scUserContext = (0, react_core_1.useSCUser)();
+    const scCoursesManager = scUserContext.managers.courses;
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    const { scCourse } = (0, react_core_1.useSCFetchCourse)({
+        id: courseId,
+        course,
+        cacheStrategy: authUserId ? utils_1.CacheStrategies.CACHE_FIRST : utils_1.CacheStrategies.STALE_WHILE_REVALIDATE
+    });
+    const isCourseAdmin = (0, react_1.useMemo)(() => scCourse && scCourse.join_status === types_1.SCCourseJoinStatusType.CREATOR, [scCourse]);
+    (0, react_1.useEffect)(() => {
+        /**
+         * Call scCoursesManager.joinStatus inside an effect
+         * to avoid warning rendering child during update parent state
+         */
+        if (authUserId) {
+            setStatus(scCoursesManager.joinStatus(scCourse));
+        }
+    }, [authUserId, scCoursesManager.joinStatus, scCourse]);
+    /**
+     * Notify UI when a member is added to a course
+     * @param course
+     * @param user
+     */
+    function notifyChanges(course, user) {
+        if (course && user) {
+            pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCCourseEventType.ADD_MEMBER}`, { course, user });
+        }
+    }
+    const join = (user) => {
+        scCoursesManager
+            .join(scCourse, user === null || user === void 0 ? void 0 : user.id)
+            .then(() => {
+            const _status = scCourse.privacy === types_1.SCCoursePrivacyType.PRIVATE && scCourse.join_status !== types_1.SCCourseJoinStatusType.INVITED
+                ? types_1.SCCourseJoinStatusType.REQUESTED
+                : types_1.SCCourseJoinStatusType.JOINED;
+            notifyChanges(scCourse, user);
+            onJoin && onJoin(scCourse, _status);
+        })
+            .catch((e) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
+        });
+    };
+    const leave = () => {
+        scCoursesManager
+            .leave(scCourse)
+            .then(() => {
+            onJoin && onJoin(scCourse, null);
+        })
+            .catch((e) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
+        });
+    };
+    const handleClick = () => {
+        if (!scUserContext.user) {
+            scContext.settings.handleAnonymousAction();
+        }
+        else {
+            status === types_1.SCCourseJoinStatusType.JOINED && !(user === null || user === void 0 ? void 0 : user.id) ? leave() : (user === null || user === void 0 ? void 0 : user.id) ? join(user) : join();
+        }
+    };
+    /**
+     * Get current translated status
+     */
+    const getStatus = (0, react_1.useMemo)(() => {
+        let _status;
+        switch (status) {
+            case types_1.SCCourseJoinStatusType.REQUESTED:
+                _status = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseJoinButton.waitingApproval", id: "ui.courseJoinButton.waitingApproval" });
+                break;
+            case types_1.SCCourseJoinStatusType.JOINED:
+                _status = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseJoinButton.leave", id: "ui.courseJoinButton.leave" });
+                break;
+            case types_1.SCCourseJoinStatusType.INVITED:
+                _status = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseJoinButton.accept", id: "ui.courseJoinButton.accept" });
+                break;
+            default:
+                scCourse.privacy === types_1.SCCoursePrivacyType.OPEN
+                    ? (_status = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseJoinButton.join", id: "ui.courseJoinButton.join" }))
+                    : (_status = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseJoinButton.requestAccess", id: "ui.courseJoinButton.requestAccess" }));
+                break;
+        }
+        return _status;
+    }, [status, scCourse]);
+    if (!scCourse || (isCourseAdmin && (user === null || user === void 0 ? void 0 : user.id) === scUserContext.user.id) || (isCourseAdmin && !(user === null || user === void 0 ? void 0 : user.id))) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ size: "small", variant: "outlined", onClick: handleClick, loading: scUserContext.user ? scCoursesManager.isLoading(scCourse) : null, disabled: status === types_1.SCCourseJoinStatusType.REQUESTED, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: isCourseAdmin ? (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseJoinButton.accept", id: "ui.courseJoinButton.accept" }) : getStatus })));
+}
+exports.default = CourseJoinButton;

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

@@ -0,0 +1,3 @@
+import CourseJoinButton, { CourseJoinButtonProps } from './CourseJoinButton';
+export default CourseJoinButton;
+export { CourseJoinButtonProps };

package/lib/cjs/components/CourseJoinButton/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const CourseJoinButton_1 = tslib_1.__importDefault(require("./CourseJoinButton"));
+exports.default = CourseJoinButton_1.default;

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

@@ -0,0 +1,53 @@
+import { ButtonProps } from '@mui/material/Button/Button';
+import { SCCourseType } from '@selfcommunity/types';
+import { BaseDialogProps } from '../../shared/BaseDialog';
+export interface CourseParticipantsButtonProps extends Pick<ButtonProps, Exclude<keyof ButtonProps, 'onClick' | 'disabled'>> {
+    /**
+     * Course Object
+     * @default null
+     */
+    course?: SCCourseType;
+    /**
+     * CourseId of course object
+     * @default null
+     */
+    courseId?: number;
+    /**
+     * Hide button label
+     * @default false
+     */
+    hideCaption?: boolean;
+    /**
+     * Props to spread to followedBy dialog
+     * @default {}
+     */
+    DialogProps?: BaseDialogProps;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS Course Participants Button component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CourseParticipantsButton} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+
+ The name `SCCourseParticipantsButton` can be used when providing style overrides in the theme.
+
+ * #### CSS
+ *
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourseParticipantsButton-root|Styles applied to the root element.|
+ |dialogRoot|.SCCourseParticipantsButton-dialog-root|Styles applied to the dialog root element.|
+ |endMessage|.SCCourseParticipantsButton-end-message|Styles applied to the end message element.|
+ |infiniteScroll|.SCCourseParticipantsButton-infinite-scroll|Styles applied to the infinite scroll element.|
+ |participants|.SCCourseParticipantsButton-participants|Styles applied to the participants section.|
+ 
+ * @param inProps
+ */
+export default function CourseParticipantsButton(inProps: CourseParticipantsButtonProps): JSX.Element;

package/lib/cjs/components/CourseParticipantsButton/CourseParticipantsButton.js

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
+const api_services_1 = require("@selfcommunity/api-services");
+const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
+const utils_1 = require("@selfcommunity/utils");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_1 = require("react");
+const react_intl_1 = require("react-intl");
+const use_deep_compare_effect_1 = require("use-deep-compare-effect");
+const Errors_1 = require("../../constants/Errors");
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
+const buttonCounters_1 = require("../../utils/buttonCounters");
+const AvatarGroupSkeleton_1 = tslib_1.__importDefault(require("../Skeleton/AvatarGroupSkeleton"));
+const User_1 = tslib_1.__importStar(require("../User"));
+const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
+const PREFIX = 'SCCourseParticipantsButton';
+const classes = {
+    root: `${PREFIX}-root`,
+    dialogRoot: `${PREFIX}-dialog-root`,
+    endMessage: `${PREFIX}-end-message`,
+    infiniteScroll: `${PREFIX}-infinite-scroll`,
+    participants: `${PREFIX}-participants`
+};
+const Root = (0, styles_1.styled)(material_1.Button, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root,
+    shouldForwardProp: (prop) => prop !== 'enrolled'
+})(() => ({}));
+const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+    name: PREFIX,
+    slot: 'DialogRoot',
+    overridesResolver: (_props, styles) => styles.dialogRoot
+})(() => ({}));
+/**
+ *> API documentation for the Community-JS Course Participants Button component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CourseParticipantsButton} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+
+ The name `SCCourseParticipantsButton` can be used when providing style overrides in the theme.
+
+ * #### CSS
+ *
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourseParticipantsButton-root|Styles applied to the root element.|
+ |dialogRoot|.SCCourseParticipantsButton-dialog-root|Styles applied to the dialog root element.|
+ |endMessage|.SCCourseParticipantsButton-end-message|Styles applied to the end message element.|
+ |infiniteScroll|.SCCourseParticipantsButton-infinite-scroll|Styles applied to the infinite scroll element.|
+ |participants|.SCCourseParticipantsButton-participants|Styles applied to the participants section.|
+ 
+ * @param inProps
+ */
+function CourseParticipantsButton(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, courseId, course, hideCaption = false, DialogProps = {} } = props, rest = tslib_1.__rest(props, ["className", "courseId", "course", "hideCaption", "DialogProps"]);
+    // STATE
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [count, setCount] = (0, react_1.useState)(0);
+    const [next, setNext] = (0, react_1.useState)(null);
+    const [offset, setOffset] = (0, react_1.useState)(null);
+    const [enrolled, setEnrolled] = (0, react_1.useState)([]);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    // HOOKS
+    const { scCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course });
+    const participantsAvailable = (0, react_1.useMemo)(() => (scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === types_1.SCCourseJoinStatusType.CREATOR || (scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === types_1.SCCourseJoinStatusType.MANAGER, [scCourse]);
+    (0, use_deep_compare_effect_1.useDeepCompareEffectNoCheck)(() => {
+        setEnrolled([]);
+        setLoading(true);
+    }, [scCourse]);
+    // FETCH FIRST ENROLLED
+    (0, use_deep_compare_effect_1.useDeepCompareEffectNoCheck)(() => {
+        if (!scCourse) {
+            return;
+        }
+        if (!count && participantsAvailable) {
+            api_services_1.CourseService.getCourseJoinedUsers(scCourse.id, { limit: 3 }).then((res) => {
+                setEnrolled([...res.results]);
+                setOffset(4);
+                setCount(res.count);
+                setLoading(false);
+            });
+        }
+        else {
+            setOffset(0);
+        }
+    }, [scCourse, participantsAvailable, count, setEnrolled, setOffset, setLoading]);
+    (0, react_1.useEffect)(() => {
+        if (open && offset !== null) {
+            setLoading(true);
+            api_services_1.CourseService.getCourseJoinedUsers(scCourse.id, { offset, limit: 20 }).then((res) => {
+                setEnrolled([...(offset === 0 ? [] : enrolled), ...res.results]);
+                setNext(res.next);
+                setLoading(false);
+                setOffset(null);
+            });
+        }
+    }, [open, enrolled, offset, setLoading, setNext]);
+    /**
+     * Memoized fetchEnrolledUsers
+     */
+    const fetchEnrolledUsers = (0, react_1.useCallback)(() => {
+        if (!next) {
+            return;
+        }
+        api_services_1.http
+            .request({
+            url: next,
+            method: api_services_1.Endpoints.GetUsersGoingToCourse.method
+        })
+            .then((res) => {
+            setEnrolled([...enrolled, ...res.data.results]);
+            setNext(res.data.next);
+        })
+            .catch((error) => utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error))
+            .then(() => setLoading(false));
+    }, [enrolled, next, setLoading]);
+    const renderSurplus = (0, react_1.useCallback)(() => (0, buttonCounters_1.numberFormatter)(count), [count]);
+    /**
+     * Opens participants dialog
+     */
+    const handleToggleDialogOpen = (0, react_1.useCallback)(() => {
+        setOpen((prev) => !prev);
+    }, [setOpen]);
+    /**
+     * Rendering
+     */
+    if (!participantsAvailable) {
+        return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCourse || count === 0, 
+                // @ts-expect-error this is needed to use enrolled into SCCourseParticipantsButton
+                enrolled: enrolled }, rest, { children: [!hideCaption && ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.participants }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "people_alt" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseParticipantsButton.participants", id: "ui.courseParticipantsButton.participants", values: { total: count } })] }))), !count && (loading || !scCourse) ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest, (!participantsAvailable && { skeletonsAnimation: false }), { count: 4 }))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, Object.assign({ total: count, renderSurplus: renderSurplus }, { children: enrolled.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: c.username, src: c.avatar }, c.id))) })))] })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseParticipantsButton.dialogTitle", id: "ui.courseParticipantsButton.dialogTitle", values: { total: count } }), onClose: handleToggleDialogOpen, open: true }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: count, next: fetchEnrolledUsers, hasMoreNext: next !== null || loading, loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { elevation: 0 }), 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.courseParticipantsButton.noOtherParticipants", defaultMessage: "ui.courseParticipantsButton.noOtherParticipants" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: enrolled.map((e) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: e }) }, e.id))) }) })) })))] }));
+}
+exports.default = CourseParticipantsButton;

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

@@ -0,0 +1,3 @@
+import CourseParticipantsButton, { CourseParticipantsButtonProps } from './CourseParticipantsButton';
+export default CourseParticipantsButton;
+export { CourseParticipantsButtonProps };

package/lib/cjs/components/CourseParticipantsButton/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const CourseParticipantsButton_1 = tslib_1.__importDefault(require("./CourseParticipantsButton"));
+exports.default = CourseParticipantsButton_1.default;