@selfcommunity/react-ui 0.8.0-live.80 → 0.8.0-live.85

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

@@ -1,6 +1,6 @@
-import { BaseDialogProps } from '../../shared/BaseDialog';
-import { SCCategoryType } from '@selfcommunity/types';
 import { ButtonProps } from '@mui/material/Button/Button';
+import { SCCategoryType } from '@selfcommunity/types';
+import { BaseDialogProps } from '../../shared/BaseDialog';
 export interface CategoryFollowersButtonProps extends Pick<ButtonProps, Exclude<keyof ButtonProps, 'onClick' | 'disabled'>> {
     /**
      * Category Object

package/lib/cjs/components/CategoryFollowersButton/CategoryFollowersButton.js

@@ -2,22 +2,23 @@
 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 material_1 = require("@mui/material");
-const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
-const react_intl_1 = require("react-intl");
-const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
-const User_1 = tslib_1.__importStar(require("../User"));
+const styles_1 = require("@mui/material/styles");
+const useMediaQuery_1 = tslib_1.__importDefault(require("@mui/material/useMediaQuery"));
+const system_1 = require("@mui/system");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
-const AvatarGroupSkeleton_1 = tslib_1.__importDefault(require("../Skeleton/AvatarGroupSkeleton"));
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const system_1 = require("@mui/system");
-const useMediaQuery_1 = tslib_1.__importDefault(require("@mui/material/useMediaQuery"));
 const utils_1 = require("@selfcommunity/utils");
-const Errors_1 = require("../../constants/Errors");
+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 PREFIX = 'SCCategoryFollowersButton';
 const classes = {
     root: `${PREFIX}-root`,
@@ -27,12 +28,13 @@ const classes = {
 const Root = (0, styles_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root,
+    shouldForwardProp: (prop) => prop !== 'followers'
 })(() => ({}));
 const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.dialogRoot
+    slot: 'DialogRoot',
+    overridesResolver: (_props, styles) => styles.dialogRoot
 })(() => ({}));
 /**
  *> API documentation for the Community-JS Category Followers Button component. Learn about the available props and the CSS API.
@@ -122,9 +124,12 @@ function CategoryFollowersButton(inProps) {
     const handleToggleDialogOpen = (0, react_1.useMemo)(() => () => {
         setOpen((prev) => !prev);
     }, [setOpen]);
+    const renderSurplus = (0, react_1.useCallback)(() => (0, buttonCounters_1.numberFormatter)(scCategory.followers_counter), [scCategory]);
     // RENDER
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, useMediaQuery_1.default)(theme.breakpoints.down('md'));
-    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: handleToggleDialogOpen, disabled: loading || !scCategory || scCategory.followers_counter === 0 }, rest, { children: loading || !scCategory ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, Object.assign({ total: scCategory.followers_counter }, { children: followers.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.categoryFollowersButton.dialogTitle", id: "ui.categoryFollowersButton.dialogTitle", values: { total: scCategory.followers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, 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.categoryFollowersButton.noOtherFollowers", defaultMessage: "ui.categoryFollowersButton.noOtherFollowers" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: followers.map((follower) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
+    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: handleToggleDialogOpen, disabled: loading || !scCategory || scCategory.followers_counter === 0, 
+                // @ts-expect-error this is needed to use followers into SCCategoryFollowersButton
+                followers: scCategory === null || scCategory === void 0 ? void 0 : scCategory.followers_counter }, rest, { children: loading || !scCategory ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, Object.assign({ total: scCategory.followers_counter, renderSurplus: renderSurplus }, { children: followers.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.categoryFollowersButton.dialogTitle", id: "ui.categoryFollowersButton.dialogTitle", values: { total: scCategory.followers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, 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.categoryFollowersButton.noOtherFollowers", defaultMessage: "ui.categoryFollowersButton.noOtherFollowers" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: followers.map((follower) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
 }
 exports.default = CategoryFollowersButton;

package/lib/cjs/components/CommentObject/CommentObject.js

@@ -44,7 +44,9 @@ const classes = {
     vote: `${constants_1.PREFIX}-vote`,
     voteAudience: `${constants_1.PREFIX}-vote-audience`,
     reply: `${constants_1.PREFIX}-reply`,
-    contentSubSection: `${constants_1.PREFIX}-comment-sub-section`
+    contentSubSection: `${constants_1.PREFIX}-comment-sub-section`,
+    collapsed: `${constants_1.PREFIX}-collapsed`,
+    flagChip: `${constants_1.PREFIX}-flag-chip`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
@@ -103,6 +105,7 @@ function CommentObject(inProps) {
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     // STATE
     const { obj, setObj } = (0, react_core_1.useSCFetchCommentObject)({ id: commentObjectId, commentObject, cacheStrategy });
+    const [collapsed, setCollapsed] = (0, react_1.useState)(obj === null || obj === void 0 ? void 0 : obj.collapsed);
     const [replyComment, setReplyComment] = (0, react_1.useState)(commentReply);
     const [isReplying, setIsReplying] = (0, react_1.useState)(false);
     const [isSavingComment, setIsSavingComment] = (0, react_1.useState)(false);
@@ -300,8 +303,8 @@ function CommentObject(inProps) {
         }
         const summaryHtmlTruncated = 'summary_truncated' in comment ? comment.summary_truncated : false;
         const commentHtml = 'summary_html' in comment && truncateContent && summaryHtmlTruncated ? comment.summary_html : comment.html;
-        const summaryHtml = (0, contribution_1.getContributionHtml)(commentHtml, scRoutingContext.url);
-        return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [editComment && editComment.id === comment.id ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.comment }, { children: (0, jsx_runtime_1.jsx)(CommentObjectReply_1.default, Object.assign({ text: comment.html, autoFocus: true, id: `edit-${comment.id}`, onSave: handleSave, onCancel: handleCancel, editable: !isReplying || !isSavingComment }, CommentObjectReplyProps)) }))) : ((0, jsx_runtime_1.jsx)(BaseItem_1.default, { elevation: 0, className: classes.comment, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!comment.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !obj.author.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: obj.author.username, variant: "circular", src: comment.author.avatar, className: classes.avatar }) })) })), disableTypography: true, primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: classes.content, elevation: elevation }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: (0, classnames_1.default)({ [classes.deleted]: obj && obj.deleted }) }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ className: classes.author }, (!comment.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: comment.author.username })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }), summaryHtmlTruncated && truncateContent && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COMMENT_ROUTE_NAME, (0, contribution_1.getRouteData)(comment)), className: classes.showMoreContent }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.showMore", defaultMessage: "ui.commentObject.showMore" }) })))] })), scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.commentActionsMenu }, { children: (0, jsx_runtime_1.jsx)(ContributionActionsMenu_1.default, { commentObject: comment, onRestoreContribution: handleRestore, onHideContribution: handleHide, onDeleteContribution: handleDelete, onEditContribution: handleEdit }) })))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "span", className: classes.contentSubSection }, { children: [renderTimeAgo(comment), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(VoteButton_1.default, { size: "small", className: classes.vote, contributionId: comment.id, contributionType: types_1.SCContributionType.COMMENT, contribution: comment, onVote: handleVoteSuccess }), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), renderActionReply(comment), (0, jsx_runtime_1.jsx)(VoteAudienceButton_1.default, { size: "small", className: classes.voteAudience, contributionId: comment.id, contributionType: types_1.SCContributionType.COMMENT, contribution: comment })] }))] }) })), comment.comment_count > 0 && (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.nestedComments }, { children: renderLatestComment(comment) })), scUserContext.user && replyComment && (replyComment.id === comment.id || replyComment.parent === comment.id) && !comment.parent && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.nestedComments }, { children: (0, jsx_runtime_1.jsx)(CommentObjectReply_1.default, Object.assign({ text: `@${replyComment.author.username}, `, autoFocus: true, id: `reply-${replyComment.id}`, onReply: handleReply, editable: !isReplying }, CommentObjectReplyProps), `reply-${replyComment.id}`) })))] }, comment.id));
+        const summaryHtml = (0, contribution_1.getCommentContributionHtml)(commentHtml, scRoutingContext.url);
+        return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [collapsed ? ((0, jsx_runtime_1.jsx)(BaseItem_1.default, { elevation: 0, className: classes.comment, disableTypography: true, primary: (0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: (0, classnames_1.default)(classes.content, classes.collapsed), elevation: elevation }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.CardContent, Object.assign({ className: (0, classnames_1.default)({ [classes.deleted]: obj && obj.deleted }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.collapsed", defaultMessage: "ui.commentObject.collapsed" }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.commentActionsMenu }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => setCollapsed(!collapsed) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility" }) })) }))] })) })) : editComment && editComment.id === comment.id ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.comment }, { children: (0, jsx_runtime_1.jsx)(CommentObjectReply_1.default, Object.assign({ text: comment.html, autoFocus: true, id: `edit-${comment.id}`, onSave: handleSave, onCancel: handleCancel, editable: !isReplying || !isSavingComment }, CommentObjectReplyProps)) }))) : ((0, jsx_runtime_1.jsx)(BaseItem_1.default, { elevation: 0, className: classes.comment, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!comment.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !obj.author.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: obj.author.username, variant: "circular", src: comment.author.avatar, className: classes.avatar }) })) })), disableTypography: true, primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: classes.content, elevation: elevation }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: (0, classnames_1.default)({ [classes.deleted]: obj && obj.deleted }) }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ className: classes.author }, (!comment.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: comment.author.username })) })), comment.collapsed && ((0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.flagChip, color: "error", size: "small", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.flag", defaultMessage: "ui.commentObject.flag" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }), summaryHtmlTruncated && truncateContent && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COMMENT_ROUTE_NAME, (0, contribution_1.getRouteData)(comment)), className: classes.showMoreContent }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.showMore", defaultMessage: "ui.commentObject.showMore" }) })))] })), scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.commentActionsMenu }, { children: (0, jsx_runtime_1.jsx)(ContributionActionsMenu_1.default, { commentObject: comment, onRestoreContribution: handleRestore, onHideContribution: handleHide, onDeleteContribution: handleDelete, onEditContribution: handleEdit }) })))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "span", className: classes.contentSubSection }, { children: [renderTimeAgo(comment), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(VoteButton_1.default, { size: "small", className: classes.vote, contributionId: comment.id, contributionType: types_1.SCContributionType.COMMENT, contribution: comment, onVote: handleVoteSuccess }), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), renderActionReply(comment), (0, jsx_runtime_1.jsx)(VoteAudienceButton_1.default, { size: "small", className: classes.voteAudience, contributionId: comment.id, contributionType: types_1.SCContributionType.COMMENT, contribution: comment })] }))] }) })), comment.comment_count > 0 && (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.nestedComments }, { children: renderLatestComment(comment) })), scUserContext.user && replyComment && (replyComment.id === comment.id || replyComment.parent === comment.id) && !comment.parent && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.nestedComments }, { children: (0, jsx_runtime_1.jsx)(CommentObjectReply_1.default, Object.assign({ text: `@${replyComment.author.username}, `, autoFocus: true, id: `reply-${replyComment.id}`, onReply: handleReply, editable: !isReplying }, CommentObjectReplyProps), `reply-${replyComment.id}`) })))] }, comment.id));
     }
     /**
      * Render Latest Comment

package/lib/cjs/components/CommentObjectReply/CommentObjectReply.js

@@ -69,6 +69,9 @@ function CommentObjectReply(inProps) {
     const scUserContext = (0, react_core_1.useSCUser)();
     // RETRIEVE OBJECTS
     const [html, setHtml] = (0, react_1.useState)(text);
+    // HOOKS
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     // REFS
     let editor = (0, react_1.useRef)();
     /**
@@ -82,7 +85,7 @@ function CommentObjectReply(inProps) {
      * Focus on editor
      */
     const handleEditorFocus = () => {
-        if (editor.current) {
+        if (!isMobile && editor.current) {
             editor.current.focus();
         }
     };

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

@@ -1,4 +1,4 @@
-import { ButtonProps } from '@mui/material/Button/Button';
+import { ButtonProps } from '@mui/material';
 import { EventFormDialogProps } from '../EventFormDialog';
 export interface CreateEventButtonProps extends ButtonProps {
     /**

package/lib/cjs/components/CreateEventButton/CreateEventButton.js

@@ -6,11 +6,11 @@ const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_1 = tslib_1.__importStar(require("react"));
 const react_intl_1 = require("react-intl");
 const EventFormDialog_1 = tslib_1.__importDefault(require("../EventFormDialog"));
-const types_1 = require("@selfcommunity/types");
 const PREFIX = 'SCCreateEventButton';
 const classes = {
     root: `${PREFIX}-root`

package/lib/cjs/components/EditEventButton/EditEventButton.js

@@ -15,8 +15,8 @@ const classes = {
 const Root = (0, styles_1.styled)(CreateEventButton_1.default, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 /**
  *> API documentation for the Community-JS Create Event Button component. Learn about the available props and the CSS API.
  *

package/lib/cjs/components/Editor/plugins/AutoLinkPlugin.js

@@ -4,6 +4,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const LexicalAutoLinkPlugin_1 = require("@lexical/react/LexicalAutoLinkPlugin");
 const URL_MATCHER = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 const EMAIL_MATCHER = /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
+const normalizeURL = (url) => {
+    if (!url.startsWith('http://') && !url.startsWith('https://') && !url.startsWith('mailto:')) {
+        return `https://${url}`;
+    }
+    return url;
+};
 const MATCHERS = [
     (text) => {
         const match = URL_MATCHER.exec(text);
@@ -11,7 +17,7 @@ const MATCHERS = [
             index: match.index,
             length: match[0].length,
             text: match[0],
-            url: match[0]
+            url: normalizeURL(match[0])
         });
     },
     (text) => {

package/lib/cjs/components/Event/Event.js

@@ -51,22 +51,22 @@ const classes = {
 const Root = (0, styles_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 const DetailRoot = (0, styles_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'DetailRoot',
-    overridesResolver: (props, styles) => styles.detailRoot
+    overridesResolver: (_props, styles) => styles.detailRoot
 })(() => ({}));
 const PreviewRoot = (0, styles_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'PreviewRoot',
-    overridesResolver: (props, styles) => styles.previewRoot
+    overridesResolver: (_props, styles) => styles.previewRoot
 })(() => ({}));
 const SnippetRoot = (0, styles_1.styled)(BaseItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'SnippetRoot',
-    overridesResolver: (props, styles) => styles.snippetRoot
+    overridesResolver: (_props, styles) => styles.snippetRoot
 })(() => ({}));
 /**
  * > API documentation for the Community-JS Event component. Learn about the available props and the CSS API.

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

@@ -6,7 +6,6 @@ const material_1 = require("@mui/material");
 const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
-const api_1 = require("@react-google-maps/api");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
 const axios_1 = tslib_1.__importDefault(require("axios"));
@@ -20,6 +19,7 @@ const LiveStreamFormSettings_1 = tslib_1.__importDefault(require("../LiveStreamF
 const liveStream_1 = require("../../types/liveStream");
 const constants_2 = require("../LiveStreamForm/constants");
 const utils_1 = require("./utils");
+const react_core_2 = require("@selfcommunity/react-core");
 const messages = (0, react_intl_1.defineMessages)({
     virtualPlaceholder: {
         id: 'ui.eventForm.address.online.placeholder',
@@ -69,11 +69,6 @@ function EventAddress(inProps) {
     const scContext = (0, react_core_1.useSCContext)();
     const scUserContext = (0, react_core_1.useSCUser)();
     const { preferences } = (0, react_core_1.useSCPreferences)();
-    const geocodingApiKey = (0, react_1.useMemo)(() => scContext.settings.integrations && scContext.settings.integrations.geocoding.apiKey, [scContext.settings.integrations]);
-    const { isLoaded } = (0, api_1.useLoadScript)({
-        googleMapsApiKey: scContext.settings.integrations.geocoding.apiKey,
-        libraries: ['places', 'geocoding']
-    });
     const isFreeTrialTier = (0, react_1.useMemo)(() => preferences &&
         react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
         preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
@@ -91,6 +86,8 @@ function EventAddress(inProps) {
             (!isFreeTrialTier || (isFreeTrialTier && (scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) && (scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user.id) === 1)) &&
             (((_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) || event.live_stream);
     }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.permission, event]);
+    // HOOKS
+    const { isLoaded, geocodingApiKey } = (0, react_core_2.useSCGoogleApiLoader)();
     // HANDLERS
     const handleChange = (_event, newValue) => {
         setLocation(newValue);
@@ -109,7 +106,7 @@ function EventAddress(inProps) {
                 setGeoLocation(newValue);
                 forwardGeolocationData({
                     location,
-                    geolocation: place.formatted_address,
+                    geolocation: newValue.description.split(',')[0] + '. ' + place.formatted_address,
                     lat: place.geometry.location.lat,
                     lng: place.geometry.location.lng
                 });
@@ -157,7 +154,7 @@ function EventAddress(inProps) {
     if (!isInPersonTabActive && !isOnlineTabActive && !isLiveTabActive) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [isInPersonTabActive && ((0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) })), isOnlineTabActive && ((0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "play_circle_outline" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) })), isLiveTabActive && canViewLiveTab && ((0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.LIVESTREAM, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "photo_camera" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.liveStream.label", defaultMessage: "ui.eventForm.address.liveStream.label" }) }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.tabContent }, { children: [isInPersonTabActive && location === types_1.SCEventLocationType.PERSON && ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation.description, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), isOptionEqualToValue: (option, value) => option.description === value.description, renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { label: (0, jsx_runtime_1.jsx)(react_intl_1.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: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) }) }))) })), isOnlineTabActive && location === types_1.SCEventLocationType.ONLINE && ((0, jsx_runtime_1.jsx)(UrlTextField_1.default, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [isInPersonTabActive && ((0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) })), isOnlineTabActive && ((0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "play_circle_outline" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) })), isLiveTabActive && canViewLiveTab && ((0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.LIVESTREAM, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "photo_camera" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.liveStream.label", defaultMessage: "ui.eventForm.address.liveStream.label" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.tabContent }, { children: [isInPersonTabActive && location === types_1.SCEventLocationType.PERSON && ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { disabled: !geocodingApiKey, size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation.description, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), isOptionEqualToValue: (option, value) => option.description === value.description, renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { label: (0, jsx_runtime_1.jsx)(react_intl_1.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: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) }) }))) })), isOnlineTabActive && location === types_1.SCEventLocationType.ONLINE && ((0, jsx_runtime_1.jsx)(UrlTextField_1.default, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
                             endAdornment: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "play_circle_outline" })
                         }, onChange: handleLinkChange })), isLiveTabActive && canViewLiveTab && location === types_1.SCEventLocationType.LIVESTREAM && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LiveStream_1.default, { template: liveStream_1.SCLiveStreamTemplateType.SNIPPET, liveStream: liveStream, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }), (0, jsx_runtime_1.jsx)(LiveStreamFormSettings_1.default, { settings: liveStream.settings || constants_2.LIVESTREAM_DEFAULT_SETTINGS, onChange: handleLiveStreamSettingsChange })] }))] }))] })));
 }

package/lib/cjs/components/EventForm/EventForm.js

@@ -116,7 +116,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  * @param inProps
  */
 function EventForm(inProps) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     //PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -153,7 +153,7 @@ function EventForm(inProps) {
         link: (event === null || event === void 0 ? void 0 : event.link) || '',
         liveStreamSettings: (event === null || event === void 0 ? void 0 : event.live_stream) ? event === null || event === void 0 ? void 0 : event.live_stream.settings : null,
         recurring: (event === null || event === void 0 ? void 0 : event.recurring) || types_1.SCEventRecurrenceType.NEVER,
-        isPublic: (_b = (event === null || event === void 0 ? void 0 : event.privacy) === types_1.SCEventPrivacyType.PUBLIC) !== null && _b !== void 0 ? _b : true,
+        isPublic: (event === null || event === void 0 ? void 0 : event.privacy) === types_1.SCEventPrivacyType.PUBLIC || true,
         isSubmitting: false
     };
     // STATE
@@ -250,9 +250,7 @@ function EventForm(inProps) {
         })
             .catch((e) => {
             const _error = (0, api_services_1.formatHttpErrorCode)(e);
-            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            if (Object.values(_error)[0].error === 'unique') {
+            if (Object.values(_error)[0]['error'] === 'unique') {
                 setError(Object.assign(Object.assign({}, error), { ['nameError']: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.name.error.unique", defaultMessage: "ui.eventForm.name.error.unique" }) }));
             }
             else {
@@ -271,7 +269,7 @@ function EventForm(inProps) {
             utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
             onError === null || onError === void 0 ? void 0 : onError(e);
         });
-    }, [field, privateEnabled, visibilityEnabled, onSuccess, onError]);
+    }, [field, privateEnabled, visibilityEnabled, onSuccess, onError, notifyChanges]);
     const handleChange = (0, react_1.useCallback)((event) => {
         const { name, value } = event.target;
         setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
@@ -280,7 +278,7 @@ function EventForm(inProps) {
             setError(error);
         }
         setGenericError(null);
-    }, [error, setGenericError]);
+    }, [error, setField, setGenericError]);
     const handleChangeDateTime = (0, react_1.useCallback)((value, name) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
         if (error[`${name}Error`]) {
@@ -292,29 +290,26 @@ function EventForm(inProps) {
             setError(error);
         }
         setGenericError(null);
-    }, [error, setGenericError]);
-    const shouldDisabledDate = (0, react_1.useCallback)((date) => {
+    }, [error, setField, setGenericError]);
+    const shouldDisableDate = (0, react_1.useCallback)((date) => {
         let disabled = false;
         switch (field.recurring) {
             case types_1.SCEventRecurrenceType.DAILY:
-                disabled = date.getTime() > (0, utils_2.getLaterDaysDate)(constants_1.DAILY_LATER_DAYS).getTime();
+                disabled = date.getTime() > (0, utils_2.getLaterDaysDate)(constants_1.DAILY_LATER_DAYS, field.startDate).getTime();
                 break;
             case types_1.SCEventRecurrenceType.WEEKLY:
-                disabled = date.getTime() > (0, utils_2.getLaterDaysDate)(constants_1.WEEKLY_LATER_DAYS).getTime();
+                disabled = date.getTime() > (0, utils_2.getLaterDaysDate)(constants_1.WEEKLY_LATER_DAYS, field.startDate).getTime();
                 break;
             case types_1.SCEventRecurrenceType.MONTHLY:
-                disabled = date.getTime() > (0, utils_2.getLaterDaysDate)(constants_1.MONTHLY_LATER_DAYS).getTime();
+                disabled = date.getTime() > (0, utils_2.getLaterDaysDate)(constants_1.MONTHLY_LATER_DAYS, field.startDate).getTime();
                 break;
             case types_1.SCEventRecurrenceType.NEVER:
             default:
-                disabled = date.getTime() > (0, utils_2.getLaterDaysDate)(constants_1.NEVER_LATER_DAYS).getTime();
-        }
-        if (field.startDate.getDate() > date.getDate()) {
-            disabled = true;
+                disabled = date.getTime() > (0, utils_2.getLaterDaysDate)(constants_1.NEVER_LATER_DAYS, field.startDate).getTime();
         }
         return disabled;
     }, [field]);
-    const shouldDisabledTime = (0, react_1.useCallback)((date, _view) => field.startTime.getTime() > date.getTime(), [field]);
+    const shouldDisableTime = (0, react_1.useCallback)((date) => field.startTime.getTime() > date.getTime(), [field]);
     /**
      * Renders root object
      */
@@ -341,14 +336,26 @@ function EventForm(inProps) {
                                         return (0, jsx_runtime_1.jsx)("em", { children: `${intl.formatMessage(messages.frequencyPlaceholder)}` });
                                     }
                                     return ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.frequency.${selected}.placeholder`, defaultMessage: `ui.eventForm.frequency.${selected}.placeholder` }));
-                                }, startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "frequency" }) }) })) }, { children: Object.values(types_1.SCEventRecurrenceType).map((f) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: f }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` }) }), f))) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.dateTime }, { children: (0, jsx_runtime_1.jsxs)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default }, { children: [(0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, disablePast: true, minDate: field.startDate, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.date.end.placeholder", defaultMessage: "ui.eventForm.date.end.placeholder" }), value: field.endDate, slots: {
+                                }, startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "frequency" }) }) })) }, { children: Object.values(types_1.SCEventRecurrenceType).map((f) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: f }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` }) }), f))) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.dateTime }, { children: (0, jsx_runtime_1.jsxs)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default }, { children: [(0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, minDate: field.startDate, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.date.end.placeholder", defaultMessage: "ui.eventForm.date.end.placeholder" }), value: field.endDate, slots: {
                                         textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endDate)}`, startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "calendar_off" }) }) }))) }) })))
-                                    }, onChange: (value) => handleChangeDateTime(value, 'endDate'), shouldDisableDate: shouldDisabledDate }), (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileTimePicker, { className: classes.picker, disablePast: disablePastEndTime, label: field.endTime && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.end.placeholder", defaultMessage: "ui.eventForm.time.end.placeholder" }), value: field.endTime, slots: {
+                                    }, slotProps: {
+                                        toolbar: {
+                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
+                                            // @ts-ignore
+                                            toolbarTitle: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.date.title", defaultMessage: "ui.eventForm.date.title" })
+                                        }
+                                    }, onChange: (value) => handleChangeDateTime(value, 'endDate'), shouldDisableDate: shouldDisableDate }), (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileTimePicker, { className: classes.picker, disablePast: disablePastEndTime, label: field.endTime && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.end.placeholder", defaultMessage: "ui.eventForm.time.end.placeholder" }), value: field.endTime, slots: {
                                         textField: (params) => {
                                             var _a;
                                             return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endTime)}`, startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "access_time" }) }) }))) }), error: Boolean(error['endDateError']), helperText: ((_a = error['endDateError']) === null || _a === void 0 ? void 0 : _a.error) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.end.error.invalid", defaultMessage: "ui.eventForm.time.end.error.invalid" })) : null })));
                                         }
-                                    }, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisabledTime })] })) })), (0, jsx_runtime_1.jsx)(EventAddress_1.default, Object.assign({ forwardGeolocationData: handleGeoData, forwardLivestreamSettingsData: handleLiveStreamSettingsData, event: Object.assign(Object.assign({}, event), {
+                                    }, slotProps: {
+                                        toolbar: {
+                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
+                                            // @ts-ignore
+                                            toolbarTitle: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.title", defaultMessage: "ui.eventForm.time.title" })
+                                        }
+                                    }, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisableTime })] })) })), (0, jsx_runtime_1.jsx)(EventAddress_1.default, Object.assign({ forwardGeolocationData: handleGeoData, forwardLivestreamSettingsData: handleLiveStreamSettingsData, event: Object.assign(Object.assign({}, event), {
                             name: field.name,
                             start_date: field.startDate,
                             location: field.location,
@@ -359,16 +366,16 @@ function EventForm(inProps) {
                                 settings: field.liveStreamSettings
                             }
                         }) }, EventAddressComponentProps)), privateEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.privacySection }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), (0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: event && !field.isPublic }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
+                                        // @ts-ignores
                                         b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
                                     } })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.private.info", defaultMessage: "ui.eventForm.private.public.info", values: {
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
                                         // @ts-ignore
                                         b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
                                     } })) }))] }))), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? Event_1.EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : Event_1.EVENT_DESCRIPTION_MAX_LENGTH })))
-                        }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), genericError && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.genericError }, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
+                            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) ? Event_1.EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : Event_1.EVENT_DESCRIPTION_MAX_LENGTH })))
+                        }, error: Boolean(((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), genericError && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.genericError }, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
                                 !field.startDate ||
                                 !field.startTime ||
                                 !field.endDate ||

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

@@ -1,5 +1,5 @@
 export declare const PREFIX = "SCEventForm";
-export declare const NEVER_LATER_DAYS = 14;
-export declare const DAILY_LATER_DAYS = 60;
-export declare const WEEKLY_LATER_DAYS = 360;
-export declare const MONTHLY_LATER_DAYS = 730;
+export declare const NEVER_LATER_DAYS = 13;
+export declare const DAILY_LATER_DAYS = 59;
+export declare const WEEKLY_LATER_DAYS = 359;
+export declare const MONTHLY_LATER_DAYS = 729;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MONTHLY_LATER_DAYS = exports.WEEKLY_LATER_DAYS = exports.DAILY_LATER_DAYS = exports.NEVER_LATER_DAYS = exports.PREFIX = void 0;
 exports.PREFIX = 'SCEventForm';
-exports.NEVER_LATER_DAYS = 14;
-exports.DAILY_LATER_DAYS = 60;
-exports.WEEKLY_LATER_DAYS = 360;
-exports.MONTHLY_LATER_DAYS = 730;
+exports.NEVER_LATER_DAYS = 13; // 2 weeks less 1 day
+exports.DAILY_LATER_DAYS = 59; // 60 days less 1 day
+exports.WEEKLY_LATER_DAYS = 359; // 360 days less 1 day
+exports.MONTHLY_LATER_DAYS = 729; // 2 years less 1 day

package/lib/cjs/components/EventForm/utils.d.ts

@@ -1,4 +1,4 @@
-export declare function getNewDate(date?: string): Date;
-export declare function getLaterHoursDate(h: number): Date;
-export declare function getLaterDaysDate(d: number): Date;
+export declare function getNewDate(date?: string | Date): Date;
+export declare function getLaterHoursDate(hours: number, date?: Date): Date;
+export declare function getLaterDaysDate(days: number, date?: Date): Date;
 export declare const combineDateAndTime: (date: Date, time: Date) => string;

package/lib/cjs/components/EventForm/utils.js

@@ -4,17 +4,20 @@ exports.combineDateAndTime = exports.getLaterDaysDate = exports.getLaterHoursDat
 const date_fns_1 = require("date-fns");
 function getNewDate(date) {
     if (date) {
-        return new Date(date);
+        if (typeof date === 'string') {
+            return new Date(date);
+        }
+        return date;
     }
     return new Date();
 }
 exports.getNewDate = getNewDate;
-function getLaterHoursDate(h) {
-    return (0, date_fns_1.addHours)(getNewDate(), h);
+function getLaterHoursDate(hours, date) {
+    return (0, date_fns_1.addHours)(getNewDate(date), hours);
 }
 exports.getLaterHoursDate = getLaterHoursDate;
-function getLaterDaysDate(d) {
-    return (0, date_fns_1.addDays)(getNewDate(), d);
+function getLaterDaysDate(days, date) {
+    return (0, date_fns_1.addDays)(getNewDate(date), days);
 }
 exports.getLaterDaysDate = getLaterDaysDate;
 const combineDateAndTime = (date, time) => {

package/lib/cjs/components/EventHeader/EventHeader.js

@@ -8,10 +8,8 @@ const system_1 = require("@mui/system");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
 const react_1 = require("react");
 const react_intl_1 = require("react-intl");
-const PubSub_1 = require("../../constants/PubSub");
 const Bullet_1 = tslib_1.__importDefault(require("../../shared/Bullet"));
 const Calendar_1 = tslib_1.__importDefault(require("../../shared/Calendar"));
 const EventActionsMenu_1 = tslib_1.__importDefault(require("../../shared/EventActionsMenu"));
@@ -92,44 +90,15 @@ function EventHeader(inProps) {
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     // INTL
     const intl = (0, react_intl_1.useIntl)();
-    // REFS
-    const updatesSubscription = (0, react_1.useRef)(null);
     // CONST
-    const isEventAdmin = (0, react_1.useMemo)(() => scUserContext.user && (scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id) === scUserContext.user.id, [scUserContext.user, scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id]);
+    const isEventAdmin = (0, react_1.useMemo)(() => scUserContext.user && scEvent && (scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id) === scUserContext.user.id, [scUserContext.user, scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by]);
     const isEventFinished = (0, react_1.useMemo)(() => (0, events_1.checkEventFinished)(scEvent), [scEvent]);
-    /**
-     * Subscriber for pubsub callback
-     */
-    const onChangeEventMembersHandler = (0, react_1.useCallback)((msg, data) => {
-        var _a;
-        if (data && ((_a = data === null || data === void 0 ? void 0 : data.event) === null || _a === void 0 ? void 0 : _a.id) === (scEvent === null || scEvent === void 0 ? void 0 : scEvent.id)) {
-            let _event = Object.assign({}, scEvent);
-            if (msg === `${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCGroupEventType.ADD_MEMBER}`) {
-                _event.subscribers_counter = _event.subscribers_counter + 1;
-            }
-            else if (msg === `${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCGroupEventType.REMOVE_MEMBER}`) {
-                _event.subscribers_counter = Math.max(_event.subscribers_counter - 1, 0);
-            }
-            setSCEvent(_event);
-        }
-    }, [scEvent, setSCEvent]);
     /**
      * Handles callback subscribe/unsubscribe event
      */
-    const handleSubscribe = (_event, status) => {
-        setSCEvent(Object.assign({}, scEvent, { subscription_status: status }));
+    const handleSubscribe = (event) => {
+        setSCEvent(event);
     };
-    /**
-     * On mount, subscribe to receive events updates (only edit)
-     */
-    (0, react_1.useEffect)(() => {
-        if (scEvent) {
-            updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.MEMBERS}`, onChangeEventMembersHandler);
-        }
-        return () => {
-            updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
-        };
-    }, [scEvent]);
     // RENDER
     if (!scEvent) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
@@ -172,6 +141,6 @@ function EventHeader(inProps) {
                                     month: 'long'
                                 }),
                                 hour: intl.formatDate(scEvent.start_date, { hour: 'numeric', minute: 'numeric' })
-                            } })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.visibility }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), (0, jsx_runtime_1.jsx)(User_1.default, { className: classes.planner, userId: scEvent.managed_by.id, secondary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isEventAdmin ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.multiActions }, { children: [(0, jsx_runtime_1.jsx)(EventInviteButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, disabled: isEventFinished }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(EditEventButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, onEditSuccess: (data) => setSCEvent(data), disabled: isEventFinished })), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EventSubscribeButton_1.default, Object.assign({ eventId: scEvent.id, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished })), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ eventId: scEvent.id, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })) }) })] }))] })));
+                            } })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.visibility }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), (0, jsx_runtime_1.jsx)(User_1.default, { className: classes.planner, userId: scEvent.managed_by.id, secondary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isEventAdmin ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.multiActions }, { children: [(0, jsx_runtime_1.jsx)(EventInviteButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, disabled: isEventFinished }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(EditEventButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, onEditSuccess: setSCEvent, disabled: isEventFinished })), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EventSubscribeButton_1.default, Object.assign({ event: scEvent, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished })), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ event: scEvent, onEditSuccess: setSCEvent }, EventActionsProps))] })) }) })] }))] })));
 }
 exports.default = EventHeader;