@selfcommunity/react-ui 0.7.56-alpha.0 → 0.8.0-alpha.0

package/lib/esm/components/ConsentSolution/ConsentSolution.js

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useThemeProps } from '@mui/system';
 import { styled } from '@mui/material/styles';
@@ -62,7 +63,7 @@ const messages = defineMessages({
  * Dialog default transition
  */
 const DialogTransition = forwardRef(function Transition(props, ref) {
-    return React.createElement(Slide, Object.assign({ direction: "up", ref: ref }, props));
+    return _jsx(Slide, Object.assign({ direction: "up", ref: ref }, props));
 });
 /**
  * Dialog views
@@ -249,29 +250,9 @@ export default function ConsentSolution(inProps) {
             return null;
         }
         const isAccept = Boolean(doc.ack && doc.ack.accepted_at);
-        return (React.createElement(React.Fragment, null,
-            React.createElement(DialogTitle, { className: classes.title },
-                React.createElement(FormattedMessage, { id: "ui.consentSolution.acceptDocumentTitle", defaultMessage: "ui.consentSolution.acceptDocumentTitle", values: { label: doc.title } })),
-            React.createElement(DialogContent, { className: classes.content, dividers: true, ref: contentDialog },
-                React.createElement(Typography, { component: "div", gutterBottom: true, dangerouslySetInnerHTML: {
-                        __html: getDocumentBody(doc)
-                    } })),
-            React.createElement(DialogContent, { className: classes.consent, dividers: true },
-                React.createElement(FormControlLabel, { className: classes.consentSwitch, control: React.createElement(ConsentSolutionSwitch, { loading: loadingAck, disabled: loadingAck, checked: isAccept, onChange: () => handleChangeConsent(!isAccept), name: "consent" }), label: React.createElement("b", null,
-                        React.createElement(FormattedMessage, { id: "ui.consentSolution.consentSwitchLabel", defaultMessage: "ui.consentSolution.consentSwitchLabel" })) }),
-                rejected ? (React.createElement(Alert, { severity: "error", className: classes.alertAcceptDocument },
-                    React.createElement(FormattedMessage, { id: "ui.consentSolution.deleteAccountAlert", defaultMessage: "ui.consentSolution.deleteAccountAlert" }),
-                    React.createElement("a", { onClick: () => setView(REJECTION_VIEW), className: classes.deleteAccountButton },
-                        React.createElement("b", null,
-                            React.createElement(FormattedMessage, { id: "ui.consentSolution.deleteAccount", defaultMessage: "ui.consentSolution.deleteAccount" }))))) : (React.createElement(React.Fragment, null,
-                    React.createElement(Typography, { variant: "body2", className: classes.acceptConditions },
-                        React.createElement(FormattedMessage, { id: "ui.consentSolution.consentSwitchDetail", defaultMessage: "ui.consentSolution.consentSwitchDetail" }))))),
-            React.createElement(DialogActions, { className: classes.actions },
-                currentDocument > 0 && (React.createElement(Button, { size: "small", onClick: () => setCurrentDocument((prev) => prev - 1), className: classes.backButton },
-                    React.createElement(FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }))),
-                currentDocument < documents.length - 1 ? (React.createElement(Button, { size: "small", variant: 'outlined', disabled: !isAccept, onClick: handleNext, className: classes.nextButton },
-                    React.createElement(FormattedMessage, { id: "ui.consentSolution.nextButton", defaultMessage: "ui.consentSolution.nextButton" }))) : (React.createElement(Button, { size: "small", variant: 'outlined', disabled: !isAccept, onClick: (e) => handleClose(e, null), className: classes.closeButton },
-                    React.createElement(FormattedMessage, { id: "ui.consentSolution.closeButton", defaultMessage: "ui.consentSolution.closeButton" }))))));
+        return (_jsxs(_Fragment, { children: [_jsx(DialogTitle, Object.assign({ className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.acceptDocumentTitle", defaultMessage: "ui.consentSolution.acceptDocumentTitle", values: { label: doc.title } }) })), _jsx(DialogContent, Object.assign({ className: classes.content, dividers: true, ref: contentDialog }, { children: _jsx(Typography, { component: "div", gutterBottom: true, dangerouslySetInnerHTML: {
+                            __html: getDocumentBody(doc)
+                        } }) })), _jsxs(DialogContent, Object.assign({ className: classes.consent, dividers: true }, { children: [_jsx(FormControlLabel, { className: classes.consentSwitch, control: _jsx(ConsentSolutionSwitch, { loading: loadingAck, disabled: loadingAck, checked: isAccept, onChange: () => handleChangeConsent(!isAccept), name: "consent" }), label: _jsx("b", { children: _jsx(FormattedMessage, { id: "ui.consentSolution.consentSwitchLabel", defaultMessage: "ui.consentSolution.consentSwitchLabel" }) }) }), rejected ? (_jsxs(Alert, Object.assign({ severity: "error", className: classes.alertAcceptDocument }, { children: [_jsx(FormattedMessage, { id: "ui.consentSolution.deleteAccountAlert", defaultMessage: "ui.consentSolution.deleteAccountAlert" }), _jsx("a", Object.assign({ onClick: () => setView(REJECTION_VIEW), className: classes.deleteAccountButton }, { children: _jsx("b", { children: _jsx(FormattedMessage, { id: "ui.consentSolution.deleteAccount", defaultMessage: "ui.consentSolution.deleteAccount" }) }) }))] }))) : (_jsx(_Fragment, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.acceptConditions }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.consentSwitchDetail", defaultMessage: "ui.consentSolution.consentSwitchDetail" }) })) }))] })), _jsxs(DialogActions, Object.assign({ className: classes.actions }, { children: [currentDocument > 0 && (_jsx(Button, Object.assign({ size: "small", onClick: () => setCurrentDocument((prev) => prev - 1), className: classes.backButton }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) }))), currentDocument < documents.length - 1 ? (_jsx(Button, Object.assign({ size: "small", variant: 'outlined', disabled: !isAccept, onClick: handleNext, className: classes.nextButton }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.nextButton", defaultMessage: "ui.consentSolution.nextButton" }) }))) : (_jsx(Button, Object.assign({ size: "small", variant: 'outlined', disabled: !isAccept, onClick: (e) => handleClose(e, null), className: classes.closeButton }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.closeButton", defaultMessage: "ui.consentSolution.closeButton" }) })))] }))] }));
     };
     /**
      * Render document detail view
@@ -281,43 +262,13 @@ export default function ConsentSolution(inProps) {
         if (!doc) {
             return null;
         }
-        return (React.createElement(React.Fragment, null,
-            React.createElement(DialogTitle, { className: classNames(classes.title, classes.titleBack) },
-                React.createElement(Button, { size: "small", variant: 'outlined', onClick: () => setView(ACCEPT_VIEW), className: classes.backButton, startIcon: React.createElement(Icon, null, "arrow_back") },
-                    React.createElement(FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }))),
-            React.createElement(DialogContent, { className: classes.content, dividers: true },
-                React.createElement(AccountDataPortability, { className: classes.dataPortability }),
-                React.createElement(Typography, { variant: "h6" },
-                    React.createElement(FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionTitle", defaultMessage: "ui.consentSolution.deleteAccountDpSectionTitle", values: { username: capitalize(scUserContext.user.username) } })),
-                React.createElement("ul", null, intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => React.createElement("li", null, chunks) })),
-                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { className: classes.dataPortabilityCheck, checked: dataPortabilityChecked, onChange: () => setDataPortabilityChecked((p) => !p) }), label: React.createElement(FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel", defaultMessage: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel" }) }),
-                React.createElement("br", null),
-                React.createElement(Button, { size: "small", startIcon: React.createElement(Icon, null, "delete_outlined"), disabled: !dataPortabilityChecked, variant: 'contained', className: classes.confirmDeleteAccountButton, onClick: () => setView(CONFIRM_DELETE_ACCOUNT) },
-                    React.createElement(FormattedMessage, { id: "ui.consentSolution.confirmDeleteAccountButton", defaultMessage: "ui.consentSolution.confirmDeleteAccountButton" })),
-                React.createElement(Button, { size: "small", variant: 'outlined', className: classes.logoutAccountButton, startIcon: React.createElement(Icon, null, "upload"), onClick: handleLogout },
-                    React.createElement(FormattedMessage, { id: "ui.consentSolution.logoutImmediatelyButton", defaultMessage: "ui.consentSolution.logoutImmediatelyButton" })))));
+        return (_jsxs(_Fragment, { children: [_jsx(DialogTitle, Object.assign({ className: classNames(classes.title, classes.titleBack) }, { children: _jsx(Button, Object.assign({ size: "small", variant: 'outlined', onClick: () => setView(ACCEPT_VIEW), className: classes.backButton, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) })) })), _jsxs(DialogContent, Object.assign({ className: classes.content, dividers: true }, { children: [_jsx(AccountDataPortability, { className: classes.dataPortability }), _jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionTitle", defaultMessage: "ui.consentSolution.deleteAccountDpSectionTitle", values: { username: capitalize(scUserContext.user.username) } }) })), _jsx("ul", { children: intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => _jsx("li", { children: chunks }) }) }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { className: classes.dataPortabilityCheck, checked: dataPortabilityChecked, onChange: () => setDataPortabilityChecked((p) => !p) }), label: _jsx(FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel", defaultMessage: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel" }) }), _jsx("br", {}), _jsx(Button, Object.assign({ size: "small", startIcon: _jsx(Icon, { children: "delete_outlined" }), disabled: !dataPortabilityChecked, variant: 'contained', className: classes.confirmDeleteAccountButton, onClick: () => setView(CONFIRM_DELETE_ACCOUNT) }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.confirmDeleteAccountButton", defaultMessage: "ui.consentSolution.confirmDeleteAccountButton" }) })), _jsx(Button, Object.assign({ size: "small", variant: 'outlined', className: classes.logoutAccountButton, startIcon: _jsx(Icon, { children: "upload" }), onClick: handleLogout }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.logoutImmediatelyButton", defaultMessage: "ui.consentSolution.logoutImmediatelyButton" }) }))] }))] }));
     };
     /**
      * Render delete account view
      */
     const renderDeleteAccountView = () => {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(DialogTitle, { className: classNames(classes.title, classes.titleBack) },
-                React.createElement(Button, { size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(REJECTION_VIEW), className: classes.backButton, startIcon: React.createElement(Icon, null, "arrow_back") },
-                    React.createElement(FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }))),
-            React.createElement(DialogContent, { className: classes.content, dividers: true },
-                React.createElement(Typography, { variant: "body2" },
-                    React.createElement(FormattedMessage, { id: "ui.consentSolution.removeAccountTitle", defaultMessage: "ui.consentSolution.removeAccountTitle" })),
-                React.createElement("ul", null, intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => React.createElement("li", null, chunks) })),
-                React.createElement("br", null),
-                React.createElement(Typography, { variant: "body2" },
-                    React.createElement("b", null,
-                        React.createElement(FormattedMessage, { id: "ui.consentSolution.removeAccountConfirm", defaultMessage: "ui.consentSolution.removeAccountConfirm" })))),
-            React.createElement(DialogActions, { className: classes.actions },
-                React.createElement(Button, { size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(REJECTION_VIEW) },
-                    React.createElement(FormattedMessage, { id: "ui.consentSolution.removeAccountCancelButton", defaultMessage: "ui.consentSolution.removeAccountCancelButton" })),
-                React.createElement(Button, { size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: handleConfirmDeleteAccount },
-                    React.createElement(FormattedMessage, { id: "ui.consentSolution.removeAccountConfirmButton", defaultMessage: "ui.consentSolution.removeAccountConfirmButton" })))));
+        return (_jsxs(_Fragment, { children: [_jsx(DialogTitle, Object.assign({ className: classNames(classes.title, classes.titleBack) }, { children: _jsx(Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(REJECTION_VIEW), className: classes.backButton, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) })) })), _jsxs(DialogContent, Object.assign({ className: classes.content, dividers: true }, { children: [_jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.removeAccountTitle", defaultMessage: "ui.consentSolution.removeAccountTitle" }) })), _jsx("ul", { children: intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => _jsx("li", { children: chunks }) }) }), _jsx("br", {}), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx("b", { children: _jsx(FormattedMessage, { id: "ui.consentSolution.removeAccountConfirm", defaultMessage: "ui.consentSolution.removeAccountConfirm" }) }) }))] })), _jsxs(DialogActions, Object.assign({ className: classes.actions }, { children: [_jsx(Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(REJECTION_VIEW) }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.removeAccountCancelButton", defaultMessage: "ui.consentSolution.removeAccountCancelButton" }) })), _jsx(Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: handleConfirmDeleteAccount }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.removeAccountConfirmButton", defaultMessage: "ui.consentSolution.removeAccountConfirmButton" }) }))] }))] }));
     };
     /**
      * If there's no authUserId, component is hidden.
@@ -346,10 +297,10 @@ export default function ConsentSolution(inProps) {
         }
     }
     else {
-        content = () => React.createElement(ConsentSolutionSkeleton, null);
+        content = () => _jsx(ConsentSolutionSkeleton, {});
     }
     /**
      * Renders root object
      */
-    return (React.createElement(React.Fragment, null, open && (React.createElement(Root, Object.assign({ "aria-describedby": "consent--solution-dialog", className: classNames(classes.root, className), TransitionComponent: DialogTransition, maxWidth: 'md', fullWidth: true, open: ready, disableEscapeKeyDown: true, onClose: handleClose, scroll: 'paper' }, rest), content()))));
+    return (_jsx(_Fragment, { children: open && (_jsx(Root, Object.assign({ "aria-describedby": "consent--solution-dialog", className: classNames(classes.root, className), TransitionComponent: DialogTransition, maxWidth: 'md', fullWidth: true, open: ready, disableEscapeKeyDown: true, onClose: handleClose, scroll: 'paper' }, rest, { children: content() }))) }));
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
 import { Box, DialogActions, DialogContent, DialogTitle } from '@mui/material';
@@ -42,19 +42,6 @@ const Root = styled(Box, {
  *
  */
 export default function ConsentSolutionSkeleton() {
-    const ContentSection = () => (React.createElement(React.Fragment, null,
-        React.createElement(Skeleton, { animation: "wave", height: 20, width: "100%" }),
-        React.createElement(Skeleton, { animation: "wave", height: 20, width: "80%" }),
-        React.createElement(Skeleton, { animation: "wave", height: 20, width: "60%" }),
-        React.createElement(Skeleton, { animation: "wave", height: 20, width: "30%" }),
-        React.createElement("br", null)));
-    return (React.createElement(Root, { className: classes.root },
-        React.createElement(DialogTitle, { className: classes.title },
-            React.createElement(Skeleton, { animation: "wave", height: 25, width: "70%" })),
-        React.createElement(DialogContent, { className: classes.content, dividers: true }, [...Array(2)].map((_, i) => (React.createElement(ContentSection, { key: i })))),
-        React.createElement(DialogContent, { className: classes.consent, dividers: true },
-            React.createElement(Skeleton, { height: 64, className: classes.consentSwitch }),
-            React.createElement(Skeleton, { animation: "wave", height: 20, width: "50%", variant: 'text', className: classes.consentSwitchLabel })),
-        React.createElement(DialogActions, { className: classes.actions },
-            React.createElement(Skeleton, { animation: "wave", height: 40, width: "20%" }))));
+    const ContentSection = () => (_jsxs(_Fragment, { children: [_jsx(Skeleton, { animation: "wave", height: 20, width: "100%" }), _jsx(Skeleton, { animation: "wave", height: 20, width: "80%" }), _jsx(Skeleton, { animation: "wave", height: 20, width: "60%" }), _jsx(Skeleton, { animation: "wave", height: 20, width: "30%" }), _jsx("br", {})] }));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(DialogTitle, Object.assign({ className: classes.title }, { children: _jsx(Skeleton, { animation: "wave", height: 25, width: "70%" }) })), _jsx(DialogContent, Object.assign({ className: classes.content, dividers: true }, { children: [...Array(2)].map((_, i) => (_jsx(ContentSection, {}, i))) })), _jsxs(DialogContent, Object.assign({ className: classes.consent, dividers: true }, { children: [_jsx(Skeleton, { height: 64, className: classes.consentSwitch }), _jsx(Skeleton, { animation: "wave", height: 20, width: "50%", variant: 'text', className: classes.consentSwitchLabel })] })), _jsx(DialogActions, Object.assign({ className: classes.actions }, { children: _jsx(Skeleton, { animation: "wave", height: 40, width: "20%" }) }))] })));
 }

package/lib/esm/components/ConsentSolutionButton/ConsentSolutionButton.js

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useContext } from 'react';
 import { useThemeProps } from '@mui/system';
 import { styled } from '@mui/material/styles';
@@ -63,8 +64,5 @@ export default function ConsentSolutionButton(inProps) {
     /**
      * Renders root object
      */
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, Object.assign({ onClick: handleClick, size: "small", variant: "outlined" }, rest),
-            React.createElement(FormattedMessage, { id: "ui.consentSolutionButton.viewStateButton", defaultMessage: "ui.consentSolutionButton.viewStateButton" })),
-        open && React.createElement(ConsentSolution, Object.assign({}, ConsentSolutionProps, { open: true, onClose: handleClick }))));
+    return (_jsxs(React.Fragment, { children: [_jsx(Button, Object.assign({ onClick: handleClick, size: "small", variant: "outlined" }, rest, { children: _jsx(FormattedMessage, { id: "ui.consentSolutionButton.viewStateButton", defaultMessage: "ui.consentSolutionButton.viewStateButton" }) })), open && _jsx(ConsentSolution, Object.assign({}, ConsentSolutionProps, { open: true, onClose: handleClick }))] }));
 }

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

@@ -0,0 +1,38 @@
+import { ButtonProps } from '@mui/material/Button/Button';
+import { EventFormProps } from '../EventForm';
+export interface CreateEventButtonProps extends ButtonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Props to spread to CreateGroup component
+     * @default empty object
+     */
+    EventFormProps?: EventFormProps;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS Create Group Button component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CreateEventButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCreateEventButton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateEventButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function CreateEventButton(inProps: CreateEventButtonProps): JSX.Element;

package/lib/esm/components/CreateEventButton/CreateEventButton.js

@@ -0,0 +1,76 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Icon } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import { SCPreferences, SCUserContext, useSCPreferences } from '@selfcommunity/react-core';
+import classNames from 'classnames';
+import React, { useContext, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import EventForm from '../EventForm';
+import { SCFeatureName } from '@selfcommunity/types';
+const PREFIX = 'SCCreateEventButton';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(Button, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(() => ({}));
+/**
+ *> API documentation for the Community-JS Create Group Button component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CreateEventButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCreateEventButton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateEventButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function CreateEventButton(inProps) {
+    var _a;
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, EventFormProps = {}, children } = props, rest = __rest(props, ["className", "EventFormProps", "children"]);
+    // CONTEXT
+    const scUserContext = useContext(SCUserContext);
+    // STATE
+    const [open, setOpen] = React.useState(false);
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    const { preferences, features } = useSCPreferences();
+    const eventsEnabled = useMemo(() => features && features.includes(SCFeatureName.EVENT) && features.includes(SCFeatureName.TAGGING), [features]);
+    const onlyStaffEnabled = useMemo(() => preferences[SCPreferences.CONFIGURATIONS_EVENTS_ONLY_STAFF_ENABLED].value, [preferences]);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore
+    const canCreateEvent = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_event; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
+    /**
+     * Handle click on button
+     */
+    const handleClick = () => {
+        setOpen((o) => !o);
+    };
+    /**
+     * If there's no authUserId, component is hidden.
+     */
+    if (!eventsEnabled || (!canCreateEvent && onlyStaffEnabled) || !authUserId) {
+        return null;
+    }
+    /**
+     * Renders root object
+     */
+    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClick, variant: "contained", color: "secondary", startIcon: !EventFormProps.event && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "add" })) }, rest, { children: children !== null && children !== void 0 ? children : _jsx(FormattedMessage, { id: "ui.createEventButton", defaultMessage: "ui.createEventButton" }) })), open && _jsx(EventForm, Object.assign({}, EventFormProps, { open: true, onClose: handleClick }))] }));
+}

package/lib/esm/components/CreateEventButton/index.d.ts

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

package/lib/esm/components/CreateEventButton/index.js

@@ -0,0 +1,2 @@
+import CreateEventButton from './CreateEventButton';
+export default CreateEventButton;

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

@@ -0,0 +1,14 @@
+import { CreateEventButtonProps } from '../CreateEventButton';
+import { WidgetProps } from '../Widget';
+export interface CreateEventWidgetProps extends WidgetProps {
+    /**
+     * Props to spread to CreateEventButton component
+     * @default {}
+     */
+    CreateEventButtonComponentProps?: CreateEventButtonProps;
+    /**
+     * Other props
+     */
+    [p: string]: any;
+}
+export default function CreateEventWidget(inProps: CreateEventWidgetProps): JSX.Element;

package/lib/esm/components/CreateEventWidget/CreateEventWidget.js

@@ -0,0 +1,60 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, CardActions, CardContent, CardMedia, Divider, Icon, styled, Typography, useThemeProps } from '@mui/material';
+import { SCPreferences, SCUserContext, useSCPreferences } from '@selfcommunity/react-core';
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
+import CreateEventButton from '../CreateEventButton';
+import Widget from '../Widget';
+import { PREFIX } from './constants';
+import Skeleton from './Skeleton';
+import { SCFeatureName } from '@selfcommunity/types';
+const classes = {
+    root: `${PREFIX}-root`,
+    image: `${PREFIX}-image`,
+    calendar: `${PREFIX}-calendar`,
+    content: `${PREFIX}-content`,
+    title: `${PREFIX}-title`,
+    spaging: `${PREFIX}-spacing`,
+    actions: `${PREFIX}-actions`
+};
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+export default function CreateEventWidget(inProps) {
+    var _a;
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { CreateEventButtonComponentProps = {} } = props, rest = __rest(props, ["CreateEventButtonComponentProps"]);
+    // STATE
+    const [loading, setLoading] = useState(true);
+    // CONTEXT
+    const scUserContext = useContext(SCUserContext);
+    // HOOK
+    const { preferences, features } = useSCPreferences();
+    const eventsEnabled = useMemo(() => features && features.includes(SCFeatureName.EVENT) && features.includes(SCFeatureName.TAGGING), [features]);
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    const onlyStaffEnabled = useMemo(() => preferences[SCPreferences.CONFIGURATIONS_GROUPS_ONLY_STAFF_ENABLED].value, [preferences]);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore
+    const canCreateEvent = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_group; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
+    useEffect(() => {
+        setLoading(false);
+    }, []);
+    if (loading) {
+        return _jsx(Skeleton, {});
+    }
+    /**
+     * If there's no authUserId, component is hidden.
+     */
+    if (!eventsEnabled || (!canCreateEvent && onlyStaffEnabled) || !authUserId) {
+        return _jsx(HiddenPlaceholder, {});
+    }
+    return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { children: [_jsxs(Box, Object.assign({ position: "relative" }, { children: [_jsx(CardMedia, { component: "img", image: `${preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}`, alt: "placeholder image", className: classes.image }), _jsx(Icon, Object.assign({ className: classes.calendar, fontSize: "large" }, { children: "CalendarIcon" }))] })), _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.createEvent.title", defaultMessage: "ui.createEvent.title" }) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.spaging }, { children: _jsx(FormattedMessage, { id: "ui.createEvent.description", defaultMessage: "ui.createEvent.description" }) })), _jsx(Divider, { className: classes.spaging })] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(CreateEventButton, Object.assign({}, CreateEventButtonComponentProps)) }))] })));
+}

package/lib/esm/components/CreateEventWidget/Skeleton.d.ts

@@ -0,0 +1 @@
+export default function CreateEventWidgetSkeleton(): JSX.Element;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, CardActions, CardContent, Divider } from '@mui/material';
+import Skeleton from '@mui/material/Skeleton';
+import { styled } from '@mui/material/styles';
+import Widget from '../Widget';
+import { PREFIX } from './constants';
+const classes = {
+    root: `${PREFIX}-skeleton-root`,
+    calendar: `${PREFIX}-calendar`,
+    content: `${PREFIX}-content`,
+    title: `${PREFIX}-title`,
+    spacing: `${PREFIX}-spacing`,
+    actions: `${PREFIX}-actions`
+};
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+export default function CreateEventWidgetSkeleton() {
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsxs(Box, Object.assign({ position: "relative" }, { children: [_jsx(Skeleton, { variant: "rectangular", animation: "wave", width: "100%", height: "110px" }), _jsx(Skeleton, { className: classes.calendar, variant: "rounded", animation: "wave", width: "50px", height: "50px" })] })), _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { className: classes.title, animation: "wave", width: "26%", height: "30px" }), _jsx(Skeleton, { className: classes.spacing, animation: "wave", width: "100%", height: "20px" }), _jsx(Divider, { className: classes.spacing })] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Skeleton, { animation: "wave", variant: "rounded", width: "138px", height: "36px" }) }))] })));
+}

package/lib/esm/components/CreateEventWidget/constants.d.ts

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

package/lib/esm/components/CreateEventWidget/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCCreateEventWidget';

package/lib/esm/components/CreateEventWidget/index.d.ts

@@ -0,0 +1,4 @@
+import CreateEventWidget, { CreateEventWidgetProps } from './CreateEventWidget';
+import CreateEventWidgetSkeleton from './Skeleton';
+export default CreateEventWidget;
+export { CreateEventWidgetSkeleton, CreateEventWidgetProps, type CreateEventWidget };

package/lib/esm/components/CreateEventWidget/index.js

@@ -0,0 +1,4 @@
+import CreateEventWidget from './CreateEventWidget';
+import CreateEventWidgetSkeleton from './Skeleton';
+export default CreateEventWidget;
+export { CreateEventWidgetSkeleton };

package/lib/esm/components/CreateGroupButton/CreateGroupButton.js

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useContext, useMemo } from 'react';
 import { useThemeProps } from '@mui/system';
 import { styled } from '@mui/material/styles';
@@ -65,12 +66,10 @@ export default function CreateGroupButton(inProps) {
      * If there's no authUserId, component is hidden.
      */
     if ((!canCreateGroup && onlyStaffEnabled) || !authUserId) {
-        return React.createElement(HiddenPlaceholder, null);
+        return _jsx(HiddenPlaceholder, {});
     }
     /**
      * Renders root object
      */
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClick, variant: "contained", startIcon: React.createElement(Icon, null, "add") }, rest), children !== null && children !== void 0 ? children : React.createElement(FormattedMessage, { id: "ui.createGroupButton", defaultMessage: "ui.createGroupButton" })),
-        open && React.createElement(GroupForm, Object.assign({}, GroupFormProps, { open: true, onClose: handleClick }))));
+    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClick, variant: "contained", startIcon: _jsx(Icon, { children: "add" }) }, rest, { children: children !== null && children !== void 0 ? children : _jsx(FormattedMessage, { id: "ui.createGroupButton", defaultMessage: "ui.createGroupButton" }) })), open && _jsx(GroupForm, Object.assign({}, GroupFormProps, { open: true, onClose: handleClick }))] }));
 }

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

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box } from '@mui/material';
 import { useIsComponentMountedRef, useSCFetchCustomAdv } from '@selfcommunity/react-core';
@@ -127,10 +128,8 @@ export default function CustomAdv(inProps) {
         }
     }, [scCustomAdv]);
     if (!scCustomAdv) {
-        return React.createElement(HiddenPlaceholder, null);
+        return _jsx(HiddenPlaceholder, {});
     }
-    const adv = (React.createElement(Box, { className: classes.wrap },
-        scCustomAdv.image && (React.createElement("img", { src: scCustomAdv.image, alt: scCustomAdv.title, className: classNames(classes.image, { [classes.prefixedHeight]: Boolean(prefixedHeight) }) })),
-        scCustomAdv.embed_code && (React.createElement(Box, { ref: embedRef, className: classNames(classes.embedCode, { [classes.prefixedHeight]: Boolean(prefixedHeight) }), dangerouslySetInnerHTML: { __html: scCustomAdv.embed_code } }))));
-    return (React.createElement(Root, { id: id, className: classNames(classes.root, className), ref: ref, style: Object.assign({}, (prefixedHeight ? { paddingBottom: prefixedHeight } : { width: '100%' })) }, scCustomAdv.link ? (React.createElement("a", { href: scCustomAdv.link, title: scCustomAdv.title }, adv)) : (adv)));
+    const adv = (_jsxs(Box, Object.assign({ className: classes.wrap }, { children: [scCustomAdv.image && (_jsx("img", { src: scCustomAdv.image, alt: scCustomAdv.title, className: classNames(classes.image, { [classes.prefixedHeight]: Boolean(prefixedHeight) }) })), scCustomAdv.embed_code && (_jsx(Box, { ref: embedRef, className: classNames(classes.embedCode, { [classes.prefixedHeight]: Boolean(prefixedHeight) }), dangerouslySetInnerHTML: { __html: scCustomAdv.embed_code } }))] })));
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className), ref: ref, style: Object.assign({}, (prefixedHeight ? { paddingBottom: prefixedHeight } : { width: '100%' })) }, { children: scCustomAdv.link ? (_jsx("a", Object.assign({ href: scCustomAdv.link, title: scCustomAdv.title }, { children: adv }))) : (adv) })));
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { GenericSkeleton } from '../Skeleton';
 import { styled } from '@mui/material/styles';
 import { PREFIX } from './constants';
@@ -30,5 +30,5 @@ const Root = styled(GenericSkeleton, {
  *
  */
 export default function CustomAdvSkeleton() {
-    return React.createElement(Root, { className: classes.root });
+    return _jsx(Root, { className: classes.root });
 }

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

@@ -0,0 +1,43 @@
+import { CreateEventButtonProps } from '../CreateEventButton';
+import { SCEventType } from '@selfcommunity/types';
+export interface EditEventButtonProps extends CreateEventButtonProps {
+    /**
+     * Event Object
+     * @default null
+     */
+    event?: SCEventType;
+    /**
+     * Id of the event
+     * @default null
+     */
+    eventId?: number | string;
+    /**
+     * On edit success callback function
+     * @default null
+     */
+    onEditSuccess?: (data: SCEventType) => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS Create Event Button component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CreateEventButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCEditEventButton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEditEventButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function EditEventButton(inProps: EditEventButtonProps): JSX.Element;

package/lib/esm/components/EditEventButton/EditEventButton.js

@@ -0,0 +1,57 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useThemeProps } from '@mui/system';
+import { styled } from '@mui/material/styles';
+import { FormattedMessage } from 'react-intl';
+import { useSCFetchEvent, useSCUser } from '@selfcommunity/react-core';
+import classNames from 'classnames';
+import CreateEventButton from '../CreateEventButton';
+const PREFIX = 'SCEditEventButton';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(CreateEventButton, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
+/**
+ *> API documentation for the Community-JS Create Event Button component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CreateEventButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCEditEventButton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEditEventButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function EditEventButton(inProps) {
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, eventId, event, onEditSuccess } = props, rest = __rest(props, ["className", "eventId", "event", "onEditSuccess"]);
+    const { scEvent, setSCEvent } = useSCFetchEvent({ id: eventId, event });
+    const scUserContext = useSCUser();
+    const handleSuccess = (data) => {
+        setSCEvent(data);
+        onEditSuccess && onEditSuccess(data);
+    };
+    if (!scUserContext.user) {
+        return null;
+    }
+    /**
+     * Renders root object
+     */
+    return (_jsx(Root, Object.assign({ variant: "outlined", className: classNames(classes.root, className), EventFormProps: { event: scEvent, onSuccess: handleSuccess } }, rest, { children: _jsx(FormattedMessage, { id: "ui.editEventButton", defaultMessage: "ui.editEventButton" }) })));
+}

package/lib/esm/components/EditEventButton/index.d.ts

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

package/lib/esm/components/EditEventButton/index.js

@@ -0,0 +1,2 @@
+import EditEventButton from './EditEventButton';
+export default EditEventButton;

package/lib/esm/components/EditGroupButton/EditGroupButton.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useThemeProps } from '@mui/system';
 import { styled } from '@mui/material/styles';
 import { FormattedMessage } from 'react-intl';
@@ -53,6 +53,5 @@ export default function EditGroupButton(inProps) {
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ variant: "outlined", className: classNames(classes.root, className), GroupFormProps: { group: scGroup, onSuccess: handleSuccess } }, rest),
-        React.createElement(FormattedMessage, { id: "ui.editGroupButton", defaultMessage: "ui.editGroupButton" })));
+    return (_jsx(Root, Object.assign({ variant: "outlined", className: classNames(classes.root, className), GroupFormProps: { group: scGroup, onSuccess: handleSuccess } }, rest, { children: _jsx(FormattedMessage, { id: "ui.editGroupButton", defaultMessage: "ui.editGroupButton" }) })));
 }