@selfcommunity/react-ui 0.11.0-react-17.0.1.3 → 1.0.0-alpha.1

package/lib/esm/components/CourseJoinButton/CourseJoinButton.js

@@ -1,11 +1,10 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { styled } from '@mui/material';
+import { Button, styled } from '@mui/material';
 import { CacheStrategies, Logger } from '@selfcommunity/utils';
 import { useSCContext, useSCFetchCourse, useSCUser } from '@selfcommunity/react-core';
 import { SCCoursePrivacyType, SCCourseJoinStatusType } from '@selfcommunity/types';
-import { LoadingButton } from '@mui/lab';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
@@ -16,11 +15,11 @@ const PREFIX = 'SCCourseJoinButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = styled(LoadingButton, {
+const Root = styled(Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Course Subscribe Button component. Learn about the available props and the CSS API.
 

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

@@ -1,11 +1,7 @@
 import { GridProps } from '@mui/material';
-import React from 'react';
 import { CourseProps, CourseSkeletonProps } from '../Course';
 import { CoursesSkeletonProps } from '../Courses/Skeleton';
 import { CreateCourseButtonProps } from '../CreateCourseButton';
-export declare const CoursesChipRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: React.Ref<HTMLDivElement>;
-}, "avatar" | "className" | "style" | "classes" | "label" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "size" | "icon" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export interface CoursesProps {
     /**
      * Overrides or extends the styles applied to the component.

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

@@ -39,7 +39,7 @@ const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root'
 })(() => ({}));
-export const CoursesChipRoot = styled(Chip, {
+const CoursesChipRoot = styled(Chip, {
     name: PREFIX,
     slot: 'CoursesChipRoot',
     shouldForwardProp: (prop) => prop !== 'showMine' && prop !== 'showManagedCourses'
@@ -204,22 +204,22 @@ export default function Courses(inProps) {
     /**
      * Renders courses list
      */
-    const c = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, md: 3 }, { children: _jsx(TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: _jsx(FormattedMessage, { id: "ui.courses.filterByName", defaultMessage: "ui.courses.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
+    const c = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, width: "100%", className: classes.filters, gap: 2 }, { children: filters ? (filters) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ size: { xs: 12, md: 3 } }, { children: _jsx(TextField, { className: classes.search, size: "small", fullWidth: true, value: query, label: _jsx(FormattedMessage, { id: "ui.courses.filterByName", defaultMessage: "ui.courses.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
                                     e.preventDefault();
                                     if (e.key === 'Enter') {
                                         fetchCourses();
                                     }
-                                }, InputProps: {
-                                    endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: isMobile ? (_jsx(IconButton, Object.assign({ onClick: () => fetchCourses(), disabled: loading }, { children: _jsx(Icon, { children: "search" }) }))) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchCourses(), endIcon: _jsx(Icon, { children: "search" }), disabled: loading })) })))
-                                } }) })), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(CoursesChipRoot, { color: showManagedCourses ? 'primary' : 'default', variant: showManagedCourses ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.courses.filterByManagedByMe", defaultMessage: "ui.courses.filterByManagedByMe" }), onClick: () => setShowManagedCourses(!showManagedCourses), 
+                                }, slotProps: {
+                                    input: {
+                                        endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: isMobile ? (_jsx(IconButton, Object.assign({ onClick: () => fetchCourses(), disabled: loading }, { children: _jsx(Icon, { children: "search" }) }))) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchCourses(), endIcon: _jsx(Icon, { children: "search" }), disabled: loading })) })))
+                                    }
+                                } }) })), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && (_jsx(Grid, Object.assign({ size: "grow" }, { children: _jsx(CoursesChipRoot, { color: showManagedCourses ? 'primary' : 'default', variant: showManagedCourses ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.courses.filterByManagedByMe", defaultMessage: "ui.courses.filterByManagedByMe" }), onClick: () => setShowManagedCourses(!showManagedCourses), 
                                 // @ts-expect-error this is needed to use showMine into SCCourses
-                                showManagedCourses: showManagedCourses, deleteIcon: showManagedCourses ? _jsx(Icon, { children: "close" }) : null, onDelete: showManagedCourses ? () => setShowManagedCourses(false) : null, disabled: loading || showMine }) }))), _jsx(Grid, Object.assign({ item: true, xs: 12, md: "auto" }, { children: _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(CategoryAutocomplete, { onChange: handleOnChangeCategory, className: classes.category, size: "small", multiple: true }) })) })), authUserId && (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(CoursesChipRoot, { color: showMine ? 'primary' : 'default', variant: showMine ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.courses.filterByMine", defaultMessage: "ui.courses.filterByMine" }), onClick: handleChipClick, 
+                                showManagedCourses: showManagedCourses, deleteIcon: showManagedCourses ? _jsx(Icon, { children: "close" }) : null, onDelete: showManagedCourses ? () => setShowManagedCourses(false) : null, disabled: loading || showMine }) }))), _jsx(Grid, Object.assign({ size: { 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, { children: _jsx(CoursesChipRoot, { color: showMine ? 'primary' : 'default', variant: showMine ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.courses.filterByMine", defaultMessage: "ui.courses.filterByMine" }), onClick: handleChipClick, 
                                 // @ts-expect-error this is needed to use showMine into SCCourses
-                                showMine: showMine, deleteIcon: showMine ? _jsx(Icon, { children: "close" }) : null, onDelete: showMine ? handleDeleteClick : null, disabled: loading || showManagedCourses }) })))] })) }))), _jsx(_Fragment, { children: !courses.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: !canCreateCourse && onlyStaffEnabled ? (_jsxs(Stack, Object.assign({ className: classes.studentEmptyView }, { children: [_jsx(Stack, Object.assign({ className: classes.emptyBox }, { children: _jsx(Stack, Object.assign({ className: classes.emptyRotatedBox }, { children: _jsx(Icon, Object.assign({ className: classes.emptyIcon, color: "disabled", fontSize: "large" }, { children: "courses" })) })) })), _jsx(Typography, Object.assign({ variant: "h5", textAlign: "center" }, { children: _jsx(FormattedMessage, { id: "ui.courses.empty.title", defaultMessage: "ui.courses.empty.title" }) })), _jsx(Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: _jsx(FormattedMessage, { id: "ui.courses.empty.info", defaultMessage: "ui.courses.empty.info" }) }))] }))) : (_jsx(Box, Object.assign({ className: classes.teacherEmptyView }, { children: _jsx(Skeleton, Object.assign({ teacherView: (onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled, coursesNumber: 1 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps })) }))) }))) : (_jsx(InfiniteScroll, Object.assign({ dataLength: courses.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? (_jsx(CourseSkeleton, { template: SCCourseTemplateType.PREVIEW })) : (_jsx(Skeleton, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))), endMessage: _jsx(Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.courses.endMessage", defaultMessage: "ui.courses.endMessage", values: {
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
+                                showMine: showMine, deleteIcon: showMine ? _jsx(Icon, { children: "close" }) : null, onDelete: showMine ? handleDeleteClick : null, disabled: loading || showManagedCourses }) }))] })) }))), _jsx(_Fragment, { children: !courses.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: !canCreateCourse && onlyStaffEnabled ? (_jsxs(Stack, Object.assign({ className: classes.studentEmptyView }, { children: [_jsx(Stack, Object.assign({ className: classes.emptyBox }, { children: _jsx(Stack, Object.assign({ className: classes.emptyRotatedBox }, { children: _jsx(Icon, Object.assign({ className: classes.emptyIcon, color: "disabled", fontSize: "large" }, { children: "courses" })) })) })), _jsx(Typography, Object.assign({ variant: "h5", textAlign: "center" }, { children: _jsx(FormattedMessage, { id: "ui.courses.empty.title", defaultMessage: "ui.courses.empty.title" }) })), _jsx(Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: _jsx(FormattedMessage, { id: "ui.courses.empty.info", defaultMessage: "ui.courses.empty.info" }) }))] }))) : (_jsx(Box, Object.assign({ className: classes.teacherEmptyView }, { children: _jsx(Skeleton, Object.assign({ teacherView: (onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled, coursesNumber: 1 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps })) }))) }))) : (_jsx(InfiniteScroll, Object.assign({ dataLength: courses.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? (_jsx(CourseSkeleton, { template: SCCourseTemplateType.PREVIEW })) : (_jsx(Skeleton, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))), endMessage: _jsx(Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.courses.endMessage", defaultMessage: "ui.courses.endMessage", values: {
                                 button: (chunk) => (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
-                            } }) })) }, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.courses }, GridContainerComponentProps, { children: _jsxs(_Fragment, { children: [courses.map((course) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.item }, GridItemComponentProps, { children: _jsx(Course, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && courses.length % 2 !== 0 && (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.itemPlaceholder }, GridItemComponentProps, { children: _jsx(CourseCreatePlaceholder, { CreateCourseButtonComponentProps: CreateCourseButtonComponentProps }) }), "placeholder-item"))] }) })) }))) })] }));
+                            } }) })) }, { children: _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.courses }, GridContainerComponentProps, { children: _jsxs(_Fragment, { children: [courses.map((course) => (_jsx(Grid, Object.assign({ size: { xs: 12, md: 6, lg: 3 }, className: classes.item }, GridItemComponentProps, { children: _jsx(Course, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && courses.length % 2 !== 0 && (_jsx(Grid, Object.assign({ size: { xs: 12, md: 6, lg: 3 }, className: classes.itemPlaceholder }, GridItemComponentProps, { children: _jsx(CourseCreatePlaceholder, { CreateCourseButtonComponentProps: CreateCourseButtonComponentProps }) }), "placeholder-item"))] }) })) }))) })] }));
     /**
      * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
      */

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

@@ -37,5 +37,5 @@ const Root = styled(Box, {
  */
 export default function CoursesSkeleton(inProps) {
     const { className, CourseSkeletonProps = {}, coursesNumber = 8, GridContainerComponentProps = {}, GridItemComponentProps = {}, teacherView = false } = inProps, rest = __rest(inProps, ["className", "CourseSkeletonProps", "coursesNumber", "GridContainerComponentProps", "GridItemComponentProps", "teacherView"]);
-    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(CourseCreatePlaceholder, {}) : _jsx(CourseSkeleton, Object.assign({}, CourseSkeletonProps)) }), index))) })) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.courses }, GridContainerComponentProps, { children: [...Array(coursesNumber)].map((_course, index) => (_jsx(Grid, Object.assign({ size: { xs: 12, md: 6, lg: 3 } }, GridItemComponentProps, { className: classes.item }, { children: teacherView ? _jsx(CourseCreatePlaceholder, {}) : _jsx(CourseSkeleton, Object.assign({}, CourseSkeletonProps)) }), index))) })) })));
 }

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

@@ -100,5 +100,11 @@ export default function CreateLiveStreamDialog(inProps) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: "md", title: _jsxs(Box, Object.assign({ className: classes.title, component: "span" }, { children: [canShowBackButton && (_jsx(Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.button.back", defaultMessage: "ui.createLivestreamDialog.button.back" }) }))), _jsx(Box, Object.assign({ component: "span" }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: "body", onClose: !canShowBackButton ? onClose : undefined, className: classNames(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [step === CreateLiveStreamStep.SELECT_TYPE && (_jsx(LiveStreamSelector, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === CreateLiveStreamStep.CREATE_LIVE && (_jsx(_Fragment, { children: liveType === LiveStreamType.EVENT_LIVE ? (_jsx(EventForm, Object.assign({}, EventFormComponentProps, { EventAddressComponentProps: { locations: [SCEventLocationType.LIVESTREAM] }, onSuccess: handleSubmit }))) : (_jsx(LiveStreamForm, Object.assign({}, LiveStreamFormComponentProps, { onSuccess: handleSubmit }))) }))] })) })));
+    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: "md", title: _jsxs(Box, Object.assign({ className: classes.title, component: "span" }, { children: [canShowBackButton && (_jsx(Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.button.back", defaultMessage: "ui.createLivestreamDialog.button.back" }) }))), _jsx(Box, Object.assign({ component: "span" }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: "body", onClose: !canShowBackButton ? onClose : undefined, className: classNames(classes.root, className), slots: {
+            transition: Transition
+        }, slotProps: {
+            paper: {
+                elevation: 0
+            }
+        } }, rest, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [step === CreateLiveStreamStep.SELECT_TYPE && (_jsx(LiveStreamSelector, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === CreateLiveStreamStep.CREATE_LIVE && (_jsx(_Fragment, { children: liveType === LiveStreamType.EVENT_LIVE ? (_jsx(EventForm, Object.assign({}, EventFormComponentProps, { EventAddressComponentProps: { locations: [SCEventLocationType.LIVESTREAM] }, onSuccess: handleSubmit }))) : (_jsx(LiveStreamForm, Object.assign({}, LiveStreamFormComponentProps, { onSuccess: handleSubmit }))) }))] })) })));
 }

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

@@ -10,7 +10,7 @@ import EventImage from '../../../assets/liveStream/event';
 import LiveImage from '../../../assets/liveStream/live';
 import { LiveStreamApiClient } from '@selfcommunity/api-services';
 import { WARNING_THRESHOLD_EXPIRING_SOON } from '../../LiveStreamRoom/constants';
-import { Link, SCPreferences, useSCContext, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
+import { Link, SCPreferences, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import { SCCommunityEnvironment, SCCommunitySubscriptionTier } from '@selfcommunity/types';
 import { HUB_PROD, HUB_STAGE } from '../../PlatformWidget/constants';
 export const PREFIX = 'SCLiveStreamSelector';
@@ -23,13 +23,13 @@ const classes = {
 const Root = styled(Container, {
     name: PREFIX,
     slot: 'Root'
-})(({ theme }) => ({}));
+})(() => ({}));
 // Styled components
 const OptionCard = styled(Paper, {
     name: PREFIX,
     slot: 'optionCardRoot',
     shouldForwardProp: (prop) => prop !== 'selected'
-})(({ theme, selected }) => ({
+})(() => ({
     '& h6': {
         fontWeight: 'bold',
         textTransform: 'uppercase'
@@ -38,7 +38,7 @@ const OptionCard = styled(Paper, {
 const FeatureItem = styled(Box, {
     name: PREFIX,
     slot: 'featureItemRoot'
-})(({ theme }) => ({}));
+})(() => ({}));
 /**
  *> API documentation for the Community-JS LiveStreamSelector component. Learn about the available props and the CSS API.
  *
@@ -66,7 +66,6 @@ export default function LiveStreamSelector(inProps) {
     });
     const { className, liveSelected, onLiveSelected, onNext } = props;
     // CONTEXT
-    const scContext = useSCContext();
     const scUserContext = useSCUser();
     const { enqueueSnackbar } = useSnackbar();
     // STATE
@@ -162,9 +161,7 @@ export default function LiveStreamSelector(inProps) {
         let _message;
         if (isFreeTrialTier && isCommunityOwner && !isEnterpriseTier) {
             _message = (_jsx(FormattedMessage, { id: "ui.liveStreamForm.selector.warningSubscriptionRequired", defaultMessage: "ui.liveStreamForm.selector.warningSubscriptionRequired", values: {
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                    // @ts-ignore
-                    link: (...chunks) => (_jsx(Link, Object.assign({ target: "_blank", to: `${isStage ? HUB_STAGE : HUB_PROD}dashboard/community/${communityStackId}/subscription` }, { children: chunks })))
+                    link: (chunks) => (_jsx(Link, Object.assign({ target: "_blank", to: `${isStage ? HUB_STAGE : HUB_PROD}dashboard/community/${communityStackId}/subscription` }, { children: chunks }), "ui.liveStreamForm.selector.warningSubscriptionRequired.link"))
                 } }));
         }
         else if (timeRemaining !== null && timeRemaining <= WARNING_THRESHOLD_EXPIRING_SOON) {
@@ -186,6 +183,6 @@ export default function LiveStreamSelector(inProps) {
                             e.preventDefault();
                         }
                     } }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: option.title })), _jsx(Radio, { checked: selectedOption === option.type })] }), _jsx("img", { src: option.image, alt: "option-image" }), _jsx(Box, Object.assign({ component: "ul" }, { children: option.features.map((feature, featureIndex) => {
-                                return (_jsx(FeatureItem, Object.assign({ component: "li" }, { children: _jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary", sx: { flex: 1 } }, { children: feature })) }), featureIndex));
+                                return (_jsx(FeatureItem, Object.assign({ as: "li" }, { children: _jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary", sx: { flex: 1 } }, { children: feature })) }), featureIndex));
                             }) }))] }), index))) })), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ disabled: !selectedOption || !timeRemaining || isFreeTrialTier, variant: "contained", onClick: handleNext, color: "secondary" }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.selector.next", defaultMessage: "ui.liveStreamForm.selector.next" }) })) }))] })));
 }

package/lib/esm/components/CreatePaymentProductForm/CreatePaymentProductForm.js

@@ -7,7 +7,6 @@ import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
 import { useSCPaymentsEnabled } from '@selfcommunity/react-core';
 import { PREFIX } from './constants';
-import { LoadingButton } from '@mui/lab';
 import { PaymentApiClient } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
 import { SCOPE_SC_UI } from '../../constants/Errors';
@@ -134,8 +133,10 @@ export default function CreatePaymentProductForm(inProps) {
         return null;
     }
     console.log(fieldsError);
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, Object.assign({ mb: 1 }, { children: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.title", defaultMessage: "ui.createPaymentProductForm.title" }) })), _jsx(TextField, Object.assign({ size: "small", id: "name", label: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.name", defaultMessage: "ui.createPaymentProductForm.name" }), variant: "outlined", fullWidth: true, value: name, error: Boolean(fieldsError && fieldsError.name) }, (Boolean(fieldsError && fieldsError.name) && { helperText: fieldsError.name }), { onChange: (e) => handleChange('name', e) })), _jsx(TextField, Object.assign({ size: "small", id: "description", label: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.description", defaultMessage: "ui.createPaymentProductForm.description" }), variant: "outlined", fullWidth: true, value: description, onChange: (e) => handleChange('description', e), multiline: true, maxRows: 2, error: Boolean(fieldsError && fieldsError.description) }, (Boolean(fieldsError && fieldsError.description) && { helperText: fieldsError.description }))), _jsx(TextField, { label: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.price", defaultMessage: "ui.createPaymentProductForm.price" }), variant: "outlined", value: unitAmount, onChange: (e) => handleChange('unitAmount', e), name: "unitAmount", id: "unitAmount", helperText: fieldsError && fieldsError.unitAmount ? (_jsx(_Fragment, { children: fieldsError.unitAmount })) : (_jsx(_Fragment, { children: intl.formatMessage({ id: 'ui.createPaymentProductForm.minPrice', defaultMessage: 'ui.createPaymentProductForm.minPrice' }, { min: DEFAULT_MIN_PRICE }) })), InputProps: {
-                    startAdornment: _jsx(InputAdornment, Object.assign({ position: "start" }, { children: "\u20AC" })),
-                    inputComponent: NumericFormatCustom
-                }, fullWidth: true, error: Boolean(fieldsError && fieldsError.unitAmount) }), error && (_jsx(Typography, Object.assign({ component: "div", className: classes.error, variant: "body2" }, { children: error }))), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "flex-end", alignItems: "flex-end", spacing: 1 }, { children: [onCancel && (_jsx(Button, Object.assign({ variant: "text", size: "small", color: "inherit", onClick: onCancel }, { children: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.btn.cancel", defaultMessage: "ui.createPaymentProductForm.btn.cancel" }) }))), _jsx(LoadingButton, Object.assign({ loading: loading, variant: "contained", size: "small", color: "error", onClick: handleCreateProduct }, { children: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.btn.create", defaultMessage: "ui.createPaymentProductForm.btn.create" }) }))] }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, Object.assign({ mb: 1 }, { children: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.title", defaultMessage: "ui.createPaymentProductForm.title" }) })), _jsx(TextField, Object.assign({ size: "small", id: "name", label: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.name", defaultMessage: "ui.createPaymentProductForm.name" }), variant: "outlined", fullWidth: true, value: name, error: Boolean(fieldsError && fieldsError.name) }, (Boolean(fieldsError && fieldsError.name) && { helperText: fieldsError.name }), { onChange: (e) => handleChange('name', e) })), _jsx(TextField, Object.assign({ size: "small", id: "description", label: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.description", defaultMessage: "ui.createPaymentProductForm.description" }), variant: "outlined", fullWidth: true, value: description, onChange: (e) => handleChange('description', e), multiline: true, maxRows: 2, error: Boolean(fieldsError && fieldsError.description) }, (Boolean(fieldsError && fieldsError.description) && { helperText: fieldsError.description }))), _jsx(TextField, { label: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.price", defaultMessage: "ui.createPaymentProductForm.price" }), variant: "outlined", value: unitAmount, onChange: (e) => handleChange('unitAmount', e), name: "unitAmount", id: "unitAmount", helperText: fieldsError && fieldsError.unitAmount ? (_jsx(_Fragment, { children: fieldsError.unitAmount })) : (_jsx(_Fragment, { children: intl.formatMessage({ id: 'ui.createPaymentProductForm.minPrice', defaultMessage: 'ui.createPaymentProductForm.minPrice' }, { min: DEFAULT_MIN_PRICE }) })), slotProps: {
+                    input: {
+                        startAdornment: _jsx(InputAdornment, Object.assign({ position: "start" }, { children: "\u20AC" })),
+                        inputComponent: NumericFormatCustom
+                    }
+                }, fullWidth: true, error: Boolean(fieldsError && fieldsError.unitAmount) }), error && (_jsx(Typography, Object.assign({ component: "div", className: classes.error, variant: "body2" }, { children: error }))), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "flex-end", alignItems: "flex-end", spacing: 1 }, { children: [onCancel && (_jsx(Button, Object.assign({ variant: "text", size: "small", color: "inherit", onClick: onCancel }, { children: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.btn.cancel", defaultMessage: "ui.createPaymentProductForm.btn.cancel" }) }))), _jsx(Button, Object.assign({ loading: loading, variant: "contained", size: "small", color: "error", onClick: handleCreateProduct }, { children: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.btn.create", defaultMessage: "ui.createPaymentProductForm.btn.create" }) }))] }))] })));
 }

package/lib/esm/components/CustomAdv/Skeleton.js

@@ -8,7 +8,7 @@ const classes = {
 const Root = styled(GenericSkeleton, {
     name: PREFIX,
     slot: 'SkeletonRoot'
-})(({ theme }) => ({}));
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Custom Adv Skeleton component. Learn about the available props and the CSS API.
 

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

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Icon, MenuItem, Select, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Box, Button, Icon, MenuItem, Select, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { Fragment, memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { PREFIX } from '../constants';
 import MenuRow from '../MenuRow';
 import { Logger } from '@selfcommunity/utils';
 import { SCOPE_SC_UI } from '../../../constants/Errors';
-import { LoadingButton } from '@mui/lab';
 import { useSnackbar } from 'notistack';
 import { SCCourseLessonStatusType } from '@selfcommunity/types';
 import { CourseService } from '@selfcommunity/api-services';
@@ -74,12 +73,12 @@ function ChangeLessonStatus(props) {
             handleAction(newValue);
         }
     }, [handleAction, value]);
-    return (_jsx(Fragment, { children: isMobile ? (_jsx(MenuRow, Object.assign({ buttonClassName: hasPublished ? classes.changeLessonStatusPublishedWrapper : undefined, icon: icon }, { children: OPTIONS.map((option, i) => (_jsx(MenuItem, { children: _jsx(LoadingButton, Object.assign({ size: "small", color: "inherit", onClick: handleClick, loading: loading, disabled: loading, "data-value": option.value, sx: {
+    return (_jsx(Fragment, { children: isMobile ? (_jsx(MenuRow, Object.assign({ buttonClassName: hasPublished ? classes.changeLessonStatusPublishedWrapper : undefined, icon: icon }, { children: OPTIONS.map((option, i) => (_jsx(MenuItem, { children: _jsx(Button, Object.assign({ size: "small", color: "inherit", onClick: handleClick, loading: loading, disabled: loading, "data-value": option.value, sx: {
                         padding: 0,
                         ':hover': {
                             backgroundColor: 'unset'
                         }
-                    } }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: option.id, defaultMessage: option.id }) })) })) }, i))) }))) : (_jsx(Select, Object.assign({ className: hasPublished ? classes.changeLessonStatusPublishedWrapper : undefined, size: "small", value: value, onChange: handleChange, disabled: disabled }, { children: OPTIONS.map((option, i) => (_jsx(MenuItem, Object.assign({ value: option.value }, { children: _jsx(LoadingButton, Object.assign({ size: "small", color: "inherit", loading: loading, disabled: loading, sx: {
+                    } }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: option.id, defaultMessage: option.id }) })) })) }, i))) }))) : (_jsx(Select, Object.assign({ className: hasPublished ? classes.changeLessonStatusPublishedWrapper : undefined, size: "small", value: value, onChange: handleChange, disabled: disabled }, { children: OPTIONS.map((option, i) => (_jsx(MenuItem, Object.assign({ value: option.value }, { children: _jsx(Button, Object.assign({ size: "small", color: "inherit", loading: loading, disabled: loading, sx: {
                         padding: 0,
                         ':hover': {
                             backgroundColor: 'unset'

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

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LoadingButton } from '@mui/lab';
-import { debounce, Icon, IconButton, Stack, TextField, Typography } from '@mui/material';
+import { Button, debounce, Icon, IconButton, Stack, TextField, Typography } from '@mui/material';
 import { Fragment, memo, useCallback, useState } from 'react';
 import { PREFIX } from '../constants';
 import { Logger } from '@selfcommunity/utils';
@@ -75,6 +74,6 @@ function FieldName(props) {
             handleDisableEditMode();
         }
     }, [row, isNewRow, handleManageRow, setName, handleDisableEditMode]);
-    return (_jsx(Fragment, { children: isNewRow || editMode ? (_jsxs(Stack, Object.assign({ className: classes.editModeWrapper }, { children: [_jsx(TextField, { type: "text", variant: "outlined", size: "small", focused: true, autoFocus: true, defaultValue: row.name, onChange: handleChange }), _jsx(LoadingButton, Object.assign({ size: "small", color: "primary", variant: "outlined", onClick: handleSubmit, loading: loading, disabled: loading, className: classes.editModeSaveButton }, { children: _jsx(Icon, { children: "check" }) })), _jsx(IconButton, Object.assign({ color: "default", size: "small", onClick: handleClose, className: classes.editModeCloseButton }, { children: _jsx(Icon, { children: "close" }) }))] }))) : (_jsx(Typography, Object.assign({ variant: "body1" }, { children: row.name }))) }));
+    return (_jsx(Fragment, { children: isNewRow || editMode ? (_jsxs(Stack, Object.assign({ className: classes.editModeWrapper }, { children: [_jsx(TextField, { type: "text", variant: "outlined", size: "small", focused: true, autoFocus: true, defaultValue: row.name, onChange: handleChange }), _jsx(Button, Object.assign({ size: "small", color: "primary", variant: "outlined", onClick: handleSubmit, loading: loading, disabled: loading, className: classes.editModeSaveButton }, { children: _jsx(Icon, { children: "check" }) })), _jsx(IconButton, Object.assign({ color: "default", size: "small", onClick: handleClose, className: classes.editModeCloseButton }, { children: _jsx(Icon, { children: "close" }) }))] }))) : (_jsx(Typography, Object.assign({ variant: "body1" }, { children: row.name }))) }));
 }
 export default memo(FieldName);

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Stack, Typography } from '@mui/material';
+import { Box, Button, Stack, Typography } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { PREFIX } from './constants';
 import { memo, useCallback, useState } from 'react';
@@ -8,7 +8,6 @@ import { SCOPE_SC_UI } from '../../constants/Errors';
 import { useSnackbar } from 'notistack';
 import SwitchForm from './Options/SwitchForm';
 import useDeepCompareEffect from 'use-deep-compare-effect';
-import { LoadingButton } from '@mui/lab';
 import { CourseService } from '@selfcommunity/api-services';
 const classes = {
     optionsContainer: `${PREFIX}-options-container`,
@@ -88,6 +87,6 @@ function Options(props) {
             });
         });
     }, [course, tempOptions, setCanSave, setLoading]);
-    return (_jsxs(Box, Object.assign({ className: classes.optionsContainer }, { children: [_jsx(Stack, Object.assign({ className: classes.optionsWrapper }, { children: Object.entries(OPTIONS).map(([key, value], i) => (_jsx(SwitchForm, { name: key, title: value.title, description: value.description, checked: course[key], handleChangeOptions: handleChange }, i))) })), _jsx(Stack, Object.assign({ className: classes.optionsButtonWrapper }, { children: _jsx(LoadingButton, Object.assign({ size: "small", variant: "contained", disabled: !canSave, onClick: handleSubmit, loading: loading }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.options.button.save", defaultMessage: "ui.editCourse.tab.options.button.save" }) })) })) }))] })));
+    return (_jsxs(Box, Object.assign({ className: classes.optionsContainer }, { children: [_jsx(Stack, Object.assign({ className: classes.optionsWrapper }, { children: Object.entries(OPTIONS).map(([key, value], i) => (_jsx(SwitchForm, { name: key, title: value.title, description: value.description, checked: course[key], handleChangeOptions: handleChange }, i))) })), _jsx(Stack, Object.assign({ className: classes.optionsButtonWrapper }, { children: _jsx(Button, Object.assign({ size: "small", variant: "contained", disabled: !canSave, onClick: handleSubmit, loading: loading }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.options.button.save", defaultMessage: "ui.editCourse.tab.options.button.save" }) })) })) }))] })));
 }
 export default memo(Options);

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

@@ -24,6 +24,6 @@ export default function Status(props) {
                         id: `ui.course.privacy.${course.privacy === SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`,
                         defaultMessage: `ui.course.privacy.${course.privacy === SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`
                     }),
-                    b: (chunks) => (_jsx(Typography, Object.assign({ component: "b", fontWeight: "bold" }, { children: chunks })))
+                    b: (chunks) => (_jsx(Typography, Object.assign({ component: "b", fontWeight: "bold" }, { children: chunks }), "ui.editCourse.tab.lessons.status.b"))
                 }) })) })), className: classNames(classes.status, classes.contrastColor) }));
 }

package/lib/esm/components/Editor/Editor.js

@@ -34,7 +34,7 @@ const Root = styled(Box, {
     overridesResolver: (props, styles) => {
         return [styles.root, props.className.includes(classes.toolbar) && styles.toolbar];
     }
-})(({ theme }) => ({}));
+})(() => ({}));
 const editorTheme = {
     heading: {
         h1: `${PREFIX}-h1`,
@@ -104,7 +104,7 @@ const Editor = (inProps, ref) => {
         name: PREFIX
     });
     const { id = 'editor', className = null, defaultValue = '', toolbar = false, uploadImage = false, uploadFile = false, editable = true, onChange = null, onMediaChange = null, onFocus = null, onBlur = null, action = null, ToolBarProps = {}, MediaPluginProps = {}, placeholder = _jsx(FormattedMessage, { id: "ui.editor.placeholder", defaultMessage: "ui.editor.placeholder" }), isLessonCommentEditor = false } = props;
-    const apiRef = useRef();
+    const apiRef = useRef(null);
     // STATE
     const [focused, setFocused] = useState(false);
     // HANDLERS
@@ -114,7 +114,7 @@ const Editor = (inProps, ref) => {
     const handleMediaChange = (media) => {
         onMediaChange && onMediaChange(media);
     };
-    const handleError = (error, editor) => {
+    const handleError = (error) => {
         console.log(error);
     };
     const handleFocus = () => {

package/lib/esm/components/Editor/plugins/EmojiPlugin.js

@@ -14,14 +14,16 @@ function Emoji({ editor, className = '', isLessonCommentEditor = false }) {
     const handleOpen = (event) => {
         setEmojiAnchorEl(event.currentTarget);
     };
-    const handleEmojiClick = (emojiData, event) => {
+    const handleEmojiClick = (emojiData) => {
         editor.focus();
         editor.dispatchCommand(CONTROLLED_TEXT_INSERTION_COMMAND, emojiData.emoji);
     };
     if (isMobile) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: className, onClick: handleOpen }, { children: _jsx(Icon, { children: "sentiment_satisfied_alt" }) })), _jsx(Popover, Object.assign({ open: Boolean(emojiAnchorEl), anchorEl: emojiAnchorEl, onClose: () => setEmojiAnchorEl(null), TransitionComponent: Fade, anchorOrigin: isLessonCommentEditor ? { vertical: 'bottom', horizontal: 'left' } : { vertical: 'top', horizontal: 'right' }, transformOrigin: isLessonCommentEditor ? { vertical: 'top', horizontal: 'right' } : { vertical: 'bottom', horizontal: 'left' }, sx: (theme) => {
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: className, onClick: handleOpen }, { children: _jsx(Icon, { children: "sentiment_satisfied_alt" }) })), _jsx(Popover, Object.assign({ open: Boolean(emojiAnchorEl), anchorEl: emojiAnchorEl, onClose: () => setEmojiAnchorEl(null), slots: {
+                    transition: Fade
+                }, anchorOrigin: isLessonCommentEditor ? { vertical: 'bottom', horizontal: 'left' } : { vertical: 'top', horizontal: 'right' }, transformOrigin: isLessonCommentEditor ? { vertical: 'top', horizontal: 'right' } : { vertical: 'bottom', horizontal: 'left' }, sx: (theme) => {
                     return { zIndex: theme.zIndex.tooltip };
                 } }, { children: _jsx(EmojiPicker, { onEmojiClick: handleEmojiClick }) }))] }));
 }

package/lib/esm/components/Editor/plugins/FloatingLinkPlugin.js

@@ -93,10 +93,12 @@ function FloatingLinkPlugin({ editor, isLink, setIsLink }) {
     }
     return (_jsx(Root, Object.assign({ className: classes.root, open: Boolean(anchorEl), anchorEl: anchorEl, placement: "right" }, { children: _jsx(Paper, { children: _jsx(TextField, { size: "small", value: linkUrl, variant: "outlined", onChange: (event) => {
                     setLinkUrl(event.target.value);
-                }, InputProps: {
-                    endAdornment: (_jsxs(InputAdornment, Object.assign({ position: "end" }, { children: [_jsx(IconButton, Object.assign({ size: "small", tabIndex: 0, onClick: () => {
-                                    setIsLink(false);
-                                } }, { children: _jsx(Icon, { children: "close" }) })), _jsx(IconButton, Object.assign({ size: "small", tabIndex: 1, onClick: handleLinkSubmission }, { children: _jsx(Icon, { children: "check" }) }))] })))
+                }, slotProps: {
+                    input: {
+                        endAdornment: (_jsxs(InputAdornment, Object.assign({ position: "end" }, { children: [_jsx(IconButton, Object.assign({ size: "small", tabIndex: 0, onClick: () => {
+                                        setIsLink(false);
+                                    } }, { children: _jsx(Icon, { children: "close" }) })), _jsx(IconButton, Object.assign({ size: "small", tabIndex: 1, onClick: handleLinkSubmission }, { children: _jsx(Icon, { children: "check" }) }))] })))
+                    }
                 } }) }) })));
 }
 function useFloatingLinkEditorToolbar(editor) {

package/lib/esm/components/Event/Skeleton.js

@@ -19,7 +19,6 @@ const classes = {
     skeletonDetailFirstDivider: `${PREFIX}-skeleton-detail-first-divider`,
     skeletonDetailSecondDivider: `${PREFIX}-skeleton-detail-second-divider`,
     skeletonPreviewContent: `${PREFIX}-skeleton-preview-content`,
-    skeletonPreviewName: `${PREFIX}-skeleton-preview-name`,
     skeletonPreviewActions: `${PREFIX}-skeleton-preview-actions`,
     skeletonSnippetImage: `${PREFIX}-skeleton-snippet-image`,
     skeletonSnippetAction: `${PREFIX}-skeleton-snippet-action`
@@ -78,7 +77,7 @@ export default function EventSkeleton(inProps) {
         contentObj = (_jsxs(SkeletonDetailRoot, Object.assign({ className: classes.skeletonDetailRoot }, { children: [_jsxs(Box, Object.assign({ position: "relative" }, { children: [_jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "170px" }), _jsx(Skeleton, { className: classes.skeletonDetailCalendar, variant: "rounded", animation: skeletonsAnimation, width: "60px", height: "60px" })] })), _jsxs(CardContent, Object.assign({ className: classes.skeletonDetailContent }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "36%", height: "40px" }), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "35%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "14px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "27%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", gap: "8px", className: classes.skeletonDetailUser }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "36px", height: "36px" }), _jsxs(Stack, Object.assign({ gap: "1px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "75px", height: "15px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "86px", height: "16px" })] }))] })), _jsx(Divider, { className: classes.skeletonDetailFirstDivider }), _jsxs(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center", height: "28px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "68px", height: "20px" }), _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" })] })] })), _jsx(Divider, { className: classes.skeletonDetailSecondDivider })] })), _jsx(CardActions, Object.assign({ className: classes.skeletonDetailActions }, { children: actions !== undefined ? actions : _jsx(Skeleton, { variant: "rounded", width: 100, height: 30 }) }))] })));
     }
     else if (template === SCEventTemplateType.PREVIEW) {
-        contentObj = (_jsxs(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [_jsx(Box, Object.assign({ position: "relative" }, { children: _jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "80px" }) })), _jsxs(CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [_jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), _jsx(Skeleton, { animation: skeletonsAnimation, width: "67%", height: "25px", className: classes.skeletonPreviewName }), _jsx(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "2px" }, { children: _jsx(Skeleton, { animation: skeletonsAnimation, width: "27%", height: "18px" }) })), _jsx(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center" }, { children: _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` })] }) }))] })), _jsx(CardActions, Object.assign({ className: classes.skeletonPreviewActions }, { children: actions !== undefined ? actions : _jsx(Skeleton, { variant: "rounded", width: 100, height: 30 }) }))] })));
+        contentObj = (_jsxs(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [_jsx(Box, Object.assign({ position: "relative" }, { children: _jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "80px" }) })), _jsxs(CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [_jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "80%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "column", marginY: "5px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "67%", height: "25px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "27%", height: "16px" })] })), _jsx(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center" }, { children: _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` })] }) }))] })), _jsx(CardActions, Object.assign({ className: classes.skeletonPreviewActions }, { children: actions !== undefined ? actions : _jsx(Skeleton, { variant: "rounded", width: 100, height: 30 }) }))] })));
     }
     else {
         contentObj = (_jsx(SkeletonSnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.skeletonSnippetRoot, image: _jsxs(Box, Object.assign({ className: classes.skeletonSnippetImage }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", width: 100, height: 60 }), " ", _jsx(Icon, Object.assign({ fontSize: "large" }, { children: "CalendarIcon" }))] })), primary: _jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "40%", style: { marginBottom: 12 } }), secondary: _jsxs(_Fragment, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "60%", style: { marginBottom: 10, marginRight: 5 } }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "35%" })] }), actions: _jsx(_Fragment, { children: actions !== undefined ? (actions) : (_jsx(Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: _jsx(Skeleton, { animation: skeletonsAnimation, height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } }) }))) }) }));

package/lib/esm/components/EventAutocomplete/EventAutocomplete.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import parse from 'autosuggest-highlight/parse';
@@ -14,7 +14,7 @@ const classes = {
 const Root = styled(Autocomplete, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 /**
  * > API documentation for the Community-JS Event Autocomplete component. Learn about the available props and the CSS API.
@@ -70,7 +70,7 @@ const EventAutocomplete = (inProps) => {
     const handleClose = () => {
         setOpen(false);
     };
-    const handleChange = (e, value) => {
+    const handleChange = (_e, value) => {
         setValue(value);
     };
     // Render
@@ -81,11 +81,14 @@ const EventAutocomplete = (inProps) => {
         //   ));
         // }}
         renderOption: (props, option, { inputValue }) => {
+            const { key } = props, rest = __rest(props, ["key"]);
             const matches = match(option.name, inputValue);
             const parts = parse(option.name, matches);
-            return (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { alt: option.name, src: option.image_small, sx: { marginRight: 1 } }), _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx(Typography, Object.assign({ sx: { fontWeight: part.highlight ? 700 : 400, marginRight: 0.2 } }, { children: part.text }), index))) })] })));
+            return (_jsxs(Box, Object.assign({ component: "li" }, rest, { children: [_jsx(Avatar, { alt: option.name, src: option.image_small, sx: { marginRight: 1 } }), _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx(Typography, Object.assign({ sx: { fontWeight: part.highlight ? 700 : 400, marginRight: 0.2 } }, { children: part.text }), index))) })] }), key));
         }, renderInput: (params) => {
-            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'events', endAdornment: (_jsxs(React.Fragment, { children: [isLoading ? _jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) })));
+            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", slotProps: {
+                    input: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'events', endAdornment: (_jsxs(_Fragment, { children: [isLoading && _jsx(CircularProgress, { color: "inherit", size: 20 }), params.InputProps.endAdornment] })) })
+                } })));
         } }, rest)));
 };
 export default EventAutocomplete;

package/lib/esm/components/EventForm/EventAddress.js

@@ -84,7 +84,7 @@ export default function EventAddress(inProps) {
             (event.live_stream && event.live_stream.created_at);
     }, [liveStreamEnabled, (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission, event]);
     // HOOKS
-    const { isLoaded, geocodingApiKey } = useSCGoogleApiLoader();
+    const { isLoaded, geocodingApiKey, placesLibrary } = useSCGoogleApiLoader();
     // HANDLERS
     const handleChange = (_event, newValue) => {
         setLocation(newValue);
@@ -132,9 +132,9 @@ export default function EventAddress(inProps) {
         }
         if (inputValue.length >= 3) {
             const newTimeoutId = setTimeout(() => {
-                const autocompleteService = new window.google.maps.places.AutocompleteService();
+                const autocompleteService = new placesLibrary.AutocompleteService(); // TODO - deprecated, to fix when possibile
                 autocompleteService.getPlacePredictions({ input: inputValue }, (predictions, status) => {
-                    if (status === window.google.maps.places.PlacesServiceStatus.OK && predictions) {
+                    if (status === placesLibrary.PlacesServiceStatus.OK && predictions) {
                         setSuggestions(predictions.map((prediction) => ({
                             description: prediction.description,
                             id: prediction.place_id
@@ -151,7 +151,11 @@ export default function EventAddress(inProps) {
     if (!isInPersonTabActive && !isOnlineTabActive && !isLiveTabActive) {
         return null;
     }
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsxs(Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [isInPersonTabActive && (_jsx(Tab, { value: SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "add_location_alt" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) })), isOnlineTabActive && (_jsx(Tab, { value: SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "play_circle_outline" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) })), isLiveTabActive && (_jsx(Tab, { value: SCEventLocationType.LIVESTREAM, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "photo_camera" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.liveStream.label", defaultMessage: "ui.eventForm.address.liveStream.label" }) }))] })), _jsxs(Box, Object.assign({ className: classes.tabContent }, { children: [isInPersonTabActive && location === SCEventLocationType.PERSON && (_jsx(Autocomplete, { disabled: !geocodingApiKey, size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation.description, noOptionsText: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), isOptionEqualToValue: (option, value) => option.description === value.description, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.placeholder", defaultMessage: "ui.eventForm.address.live.placeholder" }), variant: "outlined", fullWidth: true, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (_jsxs(_Fragment, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) }) }))) })), isOnlineTabActive && location === SCEventLocationType.ONLINE && (_jsx(UrlTextField, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
-                            endAdornment: _jsx(Icon, { children: "play_circle_outline" })
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsxs(Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [isInPersonTabActive && (_jsx(Tab, { value: SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "add_location_alt" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) })), isOnlineTabActive && (_jsx(Tab, { value: SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "play_circle_outline" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) })), isLiveTabActive && (_jsx(Tab, { value: SCEventLocationType.LIVESTREAM, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "photo_camera" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.liveStream.label", defaultMessage: "ui.eventForm.address.liveStream.label" }) }))] })), _jsxs(Box, Object.assign({ className: classes.tabContent }, { children: [isInPersonTabActive && location === SCEventLocationType.PERSON && (_jsx(Autocomplete, { disabled: !geocodingApiKey, size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation.description, noOptionsText: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), isOptionEqualToValue: (option, value) => option.description === value.description, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.placeholder", defaultMessage: "ui.eventForm.address.live.placeholder" }), variant: "outlined", fullWidth: true, slotProps: {
+                                input: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (_jsxs(_Fragment, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) })
+                            } }))) })), isOnlineTabActive && location === SCEventLocationType.ONLINE && (_jsx(UrlTextField, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), slotProps: {
+                            input: {
+                                endAdornment: _jsx(Icon, { children: "play_circle_outline" })
+                            }
                         }, value: event ? event.link : '', onChange: handleLinkChange })), isLiveTabActive && location === SCEventLocationType.LIVESTREAM && (_jsxs(_Fragment, { children: [_jsx(LiveStream, { template: SCLiveStreamTemplateType.SNIPPET, liveStream: liveStream, actions: _jsx(_Fragment, {}) }), _jsx(LiveStreamFormSettings, { settings: liveStream.settings || LIVESTREAM_DEFAULT_SETTINGS, onChange: handleLiveStreamSettingsChange })] }))] }))] })));
 }