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

package/lib/cjs/components/Composer/Layer/LocationLayer/LocationLayer.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_intl_1 = require("react-intl");
 const material_1 = require("@mui/material");
@@ -27,15 +28,6 @@ const LocationLayer = react_1.default.forwardRef((props, ref) => {
     // HANDLERS
     const handleSave = (0, react_1.useCallback)(() => onSave(value), [value, onSave]);
     const handleChange = (0, react_1.useCallback)((location) => setValue(location), []);
-    return react_1.default.createElement(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest),
-        react_1.default.createElement(material_1.DialogTitle, { className: classes.title },
-            react_1.default.createElement(material_1.IconButton, { onClick: onClose },
-                react_1.default.createElement(Icon_1.default, null, "arrow_back")),
-            react_1.default.createElement(material_1.Typography, null,
-                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.layer.location.title", defaultMessage: "ui.composer.layer.location.title" })),
-            react_1.default.createElement(material_1.Button, { size: "small", color: "secondary", variant: "contained", onClick: handleSave },
-                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }))),
-        react_1.default.createElement(DialogContent_1.default, { className: classes.content },
-            react_1.default.createElement(LocationAutocomplete_1.default, { onChange: handleChange, defaultValue: value ? value : '' })));
+    return (0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.location.title", defaultMessage: "ui.composer.layer.location.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), (0, jsx_runtime_1.jsx)(DialogContent_1.default, Object.assign({ className: classes.content }, { children: (0, jsx_runtime_1.jsx)(LocationAutocomplete_1.default, { onChange: handleChange, defaultValue: value ? value : '' }) }))] }));
 });
 exports.default = LocationLayer;

package/lib/cjs/components/Composer/Skeleton.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const material_1 = require("@mui/material");
@@ -38,7 +38,6 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  *
  */
 function ComposerSkeleton() {
-    return (react_1.default.createElement(Root, { className: classes.root },
-        react_1.default.createElement(Skeleton_1.default, { sx: { height: 190 }, animation: "wave", variant: "rectangular" })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { sx: { height: 190 }, animation: "wave", variant: "rectangular" }) })));
 }
 exports.default = ComposerSkeleton;

package/lib/cjs/components/Composer/TypeSwitchButtonGroup/TypeSwitchButtonGroup.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const react_1 = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_intl_1 = require("react-intl");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -36,12 +37,6 @@ function ComposerTypeButtonGroup(props) {
     const handleChange = (0, react_1.useCallback)((event, value) => {
         onChange && onChange(value);
     }, [onChange]);
-    return react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onChange: handleChange, exclusive: true, value: value }, rest),
-        hasPostType && react_1.default.createElement(material_1.ToggleButton, { value: Composer_1.COMPOSER_TYPE_POST },
-            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.typeSwitch.post", defaultMessage: "ui.composer.typeSwitch.post" })),
-        hasDiscussionType && react_1.default.createElement(material_1.ToggleButton, { value: Composer_1.COMPOSER_TYPE_DISCUSSION },
-            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.typeSwitch.discussion", defaultMessage: "ui.composer.typeSwitch.discussion" })),
-        hasPollType && react_1.default.createElement(material_1.ToggleButton, { value: Composer_1.COMPOSER_TYPE_POLL },
-            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.typeSwitch.poll", defaultMessage: "ui.composer.typeSwitch.poll" })));
+    return (0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onChange: handleChange, exclusive: true, value: value }, rest, { children: [hasPostType && (0, jsx_runtime_1.jsx)(material_1.ToggleButton, Object.assign({ value: Composer_1.COMPOSER_TYPE_POST }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.typeSwitch.post", defaultMessage: "ui.composer.typeSwitch.post" }) })), hasDiscussionType && (0, jsx_runtime_1.jsx)(material_1.ToggleButton, Object.assign({ value: Composer_1.COMPOSER_TYPE_DISCUSSION }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.typeSwitch.discussion", defaultMessage: "ui.composer.typeSwitch.discussion" }) })), hasPollType && (0, jsx_runtime_1.jsx)(material_1.ToggleButton, Object.assign({ value: Composer_1.COMPOSER_TYPE_POLL }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.typeSwitch.poll", defaultMessage: "ui.composer.typeSwitch.poll" }) }))] }));
 }
 exports.default = ComposerTypeButtonGroup;

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

@@ -30,5 +30,5 @@ export interface ComposerIconButtonProps extends IconButtonProps {
 
  * @param inProps
  */
-declare const _default: React.ForwardRefExoticComponent<Pick<ComposerIconButtonProps, "form" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "sx" | "name" | "classes" | "value" | "type" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "ComposerProps"> & React.RefAttributes<HTMLButtonElement>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<ComposerIconButtonProps, "id" | "role" | "className" | "style" | "classes" | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "component" | "name" | "type" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "ComposerProps"> & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/lib/cjs/components/ComposerIconButton/ComposerIconButton.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
@@ -59,7 +60,7 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
     const handleClick = (0, react_1.useCallback)((event) => {
         if (scUserContext.user) {
             if (react_core_1.UserUtils.isBlocked(scUserContext.user)) {
-                enqueueSnackbar(react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
+                enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
                     variant: 'warning',
                     autoHideDuration: 3000
                 });
@@ -78,15 +79,11 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
     }, []);
     const handleSuccess = (0, react_1.useMemo)(() => (feedObject) => {
         setOpen(false);
-        enqueueSnackbar(react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.success", defaultMessage: "ui.composerIconButton.composer.success" }), {
-            action: (snackbarId) => (react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(feedObject)) },
-                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }))),
+        enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.success", defaultMessage: "ui.composerIconButton.composer.success" }), {
+            action: (snackbarId) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(feedObject)) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }) }))),
             variant: 'success',
             autoHideDuration: 7000
         });
     }, []);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleClick, ref: ref }),
-            react_1.default.createElement(material_1.Icon, null, "add_circle_outline")),
-        react_1.default.createElement(Composer_1.default, Object.assign({ open: open, fullWidth: true, onClose: handleClose, onSuccess: handleSuccess }, ComposerProps))));
+    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) }, rest, { onClick: handleClick, ref: ref }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_circle_outline" }) })), (0, jsx_runtime_1.jsx)(Composer_1.default, Object.assign({ open: open, fullWidth: true, onClose: handleClose, onSuccess: handleSuccess }, ComposerProps))] }));
 });

package/lib/cjs/components/ConnectionUserButton/ConnectionUserButton.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const styles_1 = require("@mui/material/styles");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -48,6 +49,6 @@ function ConnectionUserButton(inProps) {
     const scPreferencesContext = (0, react_1.useContext)(react_core_1.SCPreferencesContext);
     const followEnabled = react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED in scPreferencesContext.preferences &&
         scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED].value;
-    return (react_1.default.createElement(react_1.default.Fragment, null, followEnabled ? (react_1.default.createElement(FollowUserButton_1.default, Object.assign({ user: user }, followConnectUserButtonProps, rest))) : (react_1.default.createElement(FriendshipUserButton_1.default, Object.assign({ user: user }, followConnectUserButtonProps, rest)))));
+    return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: followEnabled ? ((0, jsx_runtime_1.jsx)(FollowUserButton_1.default, Object.assign({ user: user }, followConnectUserButtonProps, rest))) : ((0, jsx_runtime_1.jsx)(FriendshipUserButton_1.default, Object.assign({ user: user }, followConnectUserButtonProps, rest))) }));
 }
 exports.default = ConnectionUserButton;

package/lib/cjs/components/ConsentSolution/ConsentSolution.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CONFIRM_DELETE_ACCOUNT = exports.REJECTION_VIEW = exports.ACCEPT_VIEW = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const system_1 = require("@mui/system");
 const styles_1 = require("@mui/material/styles");
@@ -65,7 +66,7 @@ const messages = (0, react_intl_1.defineMessages)({
  * Dialog default transition
  */
 const DialogTransition = (0, react_1.forwardRef)(function Transition(props, ref) {
-    return react_1.default.createElement(Slide_1.default, Object.assign({ direction: "up", ref: ref }, props));
+    return (0, jsx_runtime_1.jsx)(Slide_1.default, Object.assign({ direction: "up", ref: ref }, props));
 });
 /**
  * Dialog views
@@ -252,29 +253,9 @@ function ConsentSolution(inProps) {
             return null;
         }
         const isAccept = Boolean(doc.ack && doc.ack.accepted_at);
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(DialogTitle_1.default, { className: classes.title },
-                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.consentSolution.acceptDocumentTitle", defaultMessage: "ui.consentSolution.acceptDocumentTitle", values: { label: doc.title } })),
-            react_1.default.createElement(DialogContent_1.default, { className: classes.content, dividers: true, ref: contentDialog },
-                react_1.default.createElement(material_1.Typography, { component: "div", gutterBottom: true, dangerouslySetInnerHTML: {
-                        __html: (0, legalPages_1.getDocumentBody)(doc)
-                    } })),
-            react_1.default.createElement(DialogContent_1.default, { className: classes.consent, dividers: true },
-                react_1.default.createElement(material_1.FormControlLabel, { className: classes.consentSwitch, control: react_1.default.createElement(ConsentSolutionSwitch_1.default, { loading: loadingAck, disabled: loadingAck, checked: isAccept, onChange: () => handleChangeConsent(!isAccept), name: "consent" }), label: react_1.default.createElement("b", null,
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.consentSolution.consentSwitchLabel", defaultMessage: "ui.consentSolution.consentSwitchLabel" })) }),
-                rejected ? (react_1.default.createElement(material_1.Alert, { severity: "error", className: classes.alertAcceptDocument },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountAlert", defaultMessage: "ui.consentSolution.deleteAccountAlert" }),
-                    react_1.default.createElement("a", { onClick: () => setView(exports.REJECTION_VIEW), className: classes.deleteAccountButton },
-                        react_1.default.createElement("b", null,
-                            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccount", defaultMessage: "ui.consentSolution.deleteAccount" }))))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(material_1.Typography, { variant: "body2", className: classes.acceptConditions },
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.consentSolution.consentSwitchDetail", defaultMessage: "ui.consentSolution.consentSwitchDetail" }))))),
-            react_1.default.createElement(DialogActions_1.default, { className: classes.actions },
-                currentDocument > 0 && (react_1.default.createElement(material_1.Button, { size: "small", onClick: () => setCurrentDocument((prev) => prev - 1), className: classes.backButton },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }))),
-                currentDocument < documents.length - 1 ? (react_1.default.createElement(material_1.Button, { size: "small", variant: 'outlined', disabled: !isAccept, onClick: handleNext, className: classes.nextButton },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.consentSolution.nextButton", defaultMessage: "ui.consentSolution.nextButton" }))) : (react_1.default.createElement(material_1.Button, { size: "small", variant: 'outlined', disabled: !isAccept, onClick: (e) => handleClose(e, null), className: classes.closeButton },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.consentSolution.closeButton", defaultMessage: "ui.consentSolution.closeButton" }))))));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.acceptDocumentTitle", defaultMessage: "ui.consentSolution.acceptDocumentTitle", values: { label: doc.title } }) })), (0, jsx_runtime_1.jsx)(DialogContent_1.default, Object.assign({ className: classes.content, dividers: true, ref: contentDialog }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", gutterBottom: true, dangerouslySetInnerHTML: {
+                            __html: (0, legalPages_1.getDocumentBody)(doc)
+                        } }) })), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, Object.assign({ className: classes.consent, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { className: classes.consentSwitch, control: (0, jsx_runtime_1.jsx)(ConsentSolutionSwitch_1.default, { loading: loadingAck, disabled: loadingAck, checked: isAccept, onChange: () => handleChangeConsent(!isAccept), name: "consent" }), label: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.consentSwitchLabel", defaultMessage: "ui.consentSolution.consentSwitchLabel" }) }) }), rejected ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "error", className: classes.alertAcceptDocument }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountAlert", defaultMessage: "ui.consentSolution.deleteAccountAlert" }), (0, jsx_runtime_1.jsx)("a", Object.assign({ onClick: () => setView(exports.REJECTION_VIEW), className: classes.deleteAccountButton }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccount", defaultMessage: "ui.consentSolution.deleteAccount" }) }) }))] }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.acceptConditions }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.consentSwitchDetail", defaultMessage: "ui.consentSolution.consentSwitchDetail" }) })) }))] })), (0, jsx_runtime_1.jsxs)(DialogActions_1.default, Object.assign({ className: classes.actions }, { children: [currentDocument > 0 && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", onClick: () => setCurrentDocument((prev) => prev - 1), className: classes.backButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) }))), currentDocument < documents.length - 1 ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', disabled: !isAccept, onClick: handleNext, className: classes.nextButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.nextButton", defaultMessage: "ui.consentSolution.nextButton" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', disabled: !isAccept, onClick: (e) => handleClose(e, null), className: classes.closeButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.closeButton", defaultMessage: "ui.consentSolution.closeButton" }) })))] }))] }));
     };
     /**
      * Render document detail view
@@ -284,43 +265,13 @@ function ConsentSolution(inProps) {
         if (!doc) {
             return null;
         }
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(DialogTitle_1.default, { className: (0, classnames_1.default)(classes.title, classes.titleBack) },
-                react_1.default.createElement(material_1.Button, { size: "small", variant: 'outlined', onClick: () => setView(exports.ACCEPT_VIEW), className: classes.backButton, startIcon: react_1.default.createElement(Icon_1.default, null, "arrow_back") },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }))),
-            react_1.default.createElement(DialogContent_1.default, { className: classes.content, dividers: true },
-                react_1.default.createElement(AccountDataPortability_1.default, { className: classes.dataPortability }),
-                react_1.default.createElement(material_1.Typography, { variant: "h6" },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionTitle", defaultMessage: "ui.consentSolution.deleteAccountDpSectionTitle", values: { username: (0, utils_1.capitalize)(scUserContext.user.username) } })),
-                react_1.default.createElement("ul", null, intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => react_1.default.createElement("li", null, chunks) })),
-                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { className: classes.dataPortabilityCheck, checked: dataPortabilityChecked, onChange: () => setDataPortabilityChecked((p) => !p) }), label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel", defaultMessage: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel" }) }),
-                react_1.default.createElement("br", null),
-                react_1.default.createElement(material_1.Button, { size: "small", startIcon: react_1.default.createElement(Icon_1.default, null, "delete_outlined"), disabled: !dataPortabilityChecked, variant: 'contained', className: classes.confirmDeleteAccountButton, onClick: () => setView(exports.CONFIRM_DELETE_ACCOUNT) },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.consentSolution.confirmDeleteAccountButton", defaultMessage: "ui.consentSolution.confirmDeleteAccountButton" })),
-                react_1.default.createElement(material_1.Button, { size: "small", variant: 'outlined', className: classes.logoutAccountButton, startIcon: react_1.default.createElement(Icon_1.default, null, "upload"), onClick: handleLogout },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.consentSolution.logoutImmediatelyButton", defaultMessage: "ui.consentSolution.logoutImmediatelyButton" })))));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, Object.assign({ className: (0, classnames_1.default)(classes.title, classes.titleBack) }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', onClick: () => setView(exports.ACCEPT_VIEW), className: classes.backButton, startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) })) })), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, Object.assign({ className: classes.content, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(AccountDataPortability_1.default, { className: classes.dataPortability }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionTitle", defaultMessage: "ui.consentSolution.deleteAccountDpSectionTitle", values: { username: (0, utils_1.capitalize)(scUserContext.user.username) } }) })), (0, jsx_runtime_1.jsx)("ul", { children: intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }) }) }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { className: classes.dataPortabilityCheck, checked: dataPortabilityChecked, onChange: () => setDataPortabilityChecked((p) => !p) }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel", defaultMessage: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel" }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete_outlined" }), disabled: !dataPortabilityChecked, variant: 'contained', className: classes.confirmDeleteAccountButton, onClick: () => setView(exports.CONFIRM_DELETE_ACCOUNT) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.confirmDeleteAccountButton", defaultMessage: "ui.consentSolution.confirmDeleteAccountButton" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', className: classes.logoutAccountButton, startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "upload" }), onClick: handleLogout }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.logoutImmediatelyButton", defaultMessage: "ui.consentSolution.logoutImmediatelyButton" }) }))] }))] }));
     };
     /**
      * Render delete account view
      */
     const renderDeleteAccountView = () => {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(DialogTitle_1.default, { className: (0, classnames_1.default)(classes.title, classes.titleBack) },
-                react_1.default.createElement(material_1.Button, { size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(exports.REJECTION_VIEW), className: classes.backButton, startIcon: react_1.default.createElement(Icon_1.default, null, "arrow_back") },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }))),
-            react_1.default.createElement(DialogContent_1.default, { className: classes.content, dividers: true },
-                react_1.default.createElement(material_1.Typography, { variant: "body2" },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountTitle", defaultMessage: "ui.consentSolution.removeAccountTitle" })),
-                react_1.default.createElement("ul", null, intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => react_1.default.createElement("li", null, chunks) })),
-                react_1.default.createElement("br", null),
-                react_1.default.createElement(material_1.Typography, { variant: "body2" },
-                    react_1.default.createElement("b", null,
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountConfirm", defaultMessage: "ui.consentSolution.removeAccountConfirm" })))),
-            react_1.default.createElement(DialogActions_1.default, { className: classes.actions },
-                react_1.default.createElement(material_1.Button, { size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(exports.REJECTION_VIEW) },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountCancelButton", defaultMessage: "ui.consentSolution.removeAccountCancelButton" })),
-                react_1.default.createElement(material_1.Button, { size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: handleConfirmDeleteAccount },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountConfirmButton", defaultMessage: "ui.consentSolution.removeAccountConfirmButton" })))));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, Object.assign({ className: (0, classnames_1.default)(classes.title, classes.titleBack) }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(exports.REJECTION_VIEW), className: classes.backButton, startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) })) })), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, Object.assign({ className: classes.content, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountTitle", defaultMessage: "ui.consentSolution.removeAccountTitle" }) })), (0, jsx_runtime_1.jsx)("ul", { children: intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }) }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountConfirm", defaultMessage: "ui.consentSolution.removeAccountConfirm" }) }) }))] })), (0, jsx_runtime_1.jsxs)(DialogActions_1.default, Object.assign({ className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(exports.REJECTION_VIEW) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountCancelButton", defaultMessage: "ui.consentSolution.removeAccountCancelButton" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: handleConfirmDeleteAccount }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountConfirmButton", defaultMessage: "ui.consentSolution.removeAccountConfirmButton" }) }))] }))] }));
     };
     /**
      * If there's no authUserId, component is hidden.
@@ -349,11 +300,11 @@ function ConsentSolution(inProps) {
         }
     }
     else {
-        content = () => react_1.default.createElement(Skeleton_1.default, null);
+        content = () => (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(react_1.default.Fragment, null, open && (react_1.default.createElement(Root, Object.assign({ "aria-describedby": "consent--solution-dialog", className: (0, classnames_1.default)(classes.root, className), TransitionComponent: DialogTransition, maxWidth: 'md', fullWidth: true, open: ready, disableEscapeKeyDown: true, onClose: handleClose, scroll: 'paper' }, rest), content()))));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: open && ((0, jsx_runtime_1.jsx)(Root, Object.assign({ "aria-describedby": "consent--solution-dialog", className: (0, classnames_1.default)(classes.root, className), TransitionComponent: DialogTransition, maxWidth: 'md', fullWidth: true, open: ready, disableEscapeKeyDown: true, onClose: handleClose, scroll: 'paper' }, rest, { children: content() }))) }));
 }
 exports.default = ConsentSolution;

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const material_1 = require("@mui/material");
@@ -45,20 +45,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  *
  */
 function ConsentSolutionSkeleton() {
-    const ContentSection = () => (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 20, width: "100%" }),
-        react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 20, width: "80%" }),
-        react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 20, width: "60%" }),
-        react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 20, width: "30%" }),
-        react_1.default.createElement("br", null)));
-    return (react_1.default.createElement(Root, { className: classes.root },
-        react_1.default.createElement(material_1.DialogTitle, { className: classes.title },
-            react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 25, width: "70%" })),
-        react_1.default.createElement(material_1.DialogContent, { className: classes.content, dividers: true }, [...Array(2)].map((_, i) => (react_1.default.createElement(ContentSection, { key: i })))),
-        react_1.default.createElement(material_1.DialogContent, { className: classes.consent, dividers: true },
-            react_1.default.createElement(Skeleton_1.default, { height: 64, className: classes.consentSwitch }),
-            react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 20, width: "50%", variant: 'text', className: classes.consentSwitchLabel })),
-        react_1.default.createElement(material_1.DialogActions, { className: classes.actions },
-            react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 40, width: "20%" }))));
+    const ContentSection = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "100%" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "80%" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "60%" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "30%" }), (0, jsx_runtime_1.jsx)("br", {})] }));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 25, width: "70%" }) })), (0, jsx_runtime_1.jsx)(material_1.DialogContent, Object.assign({ className: classes.content, dividers: true }, { children: [...Array(2)].map((_, i) => ((0, jsx_runtime_1.jsx)(ContentSection, {}, i))) })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, Object.assign({ className: classes.consent, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { height: 64, className: classes.consentSwitch }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "50%", variant: 'text', className: classes.consentSwitchLabel })] })), (0, jsx_runtime_1.jsx)(material_1.DialogActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 40, width: "20%" }) }))] })));
 }
 exports.default = ConsentSolutionSkeleton;

package/lib/cjs/components/ConsentSolutionButton/ConsentSolutionButton.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const system_1 = require("@mui/system");
 const styles_1 = require("@mui/material/styles");
@@ -65,9 +66,6 @@ function ConsentSolutionButton(inProps) {
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Button, Object.assign({ onClick: handleClick, size: "small", variant: "outlined" }, rest),
-            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.consentSolutionButton.viewStateButton", defaultMessage: "ui.consentSolutionButton.viewStateButton" })),
-        open && react_1.default.createElement(ConsentSolution_1.default, Object.assign({}, ConsentSolutionProps, { open: true, onClose: handleClick }))));
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleClick, size: "small", variant: "outlined" }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolutionButton.viewStateButton", defaultMessage: "ui.consentSolutionButton.viewStateButton" }) })), open && (0, jsx_runtime_1.jsx)(ConsentSolution_1.default, Object.assign({}, ConsentSolutionProps, { open: true, onClose: handleClick }))] }));
 }
 exports.default = ConsentSolutionButton;

package/lib/cjs/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/cjs/components/CreateEventButton/CreateEventButton.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
+const react_core_1 = require("@selfcommunity/react-core");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_1 = tslib_1.__importStar(require("react"));
+const react_intl_1 = require("react-intl");
+const EventForm_1 = tslib_1.__importDefault(require("../EventForm"));
+const types_1 = require("@selfcommunity/types");
+const PREFIX = 'SCCreateEventButton';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = (0, styles_1.styled)(material_1.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
+ */
+function CreateEventButton(inProps) {
+    var _a;
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, EventFormProps = {}, children } = props, rest = tslib_1.__rest(props, ["className", "EventFormProps", "children"]);
+    // CONTEXT
+    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
+    // STATE
+    const [open, setOpen] = react_1.default.useState(false);
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    const { preferences, features } = (0, react_core_1.useSCPreferences)();
+    const eventsEnabled = (0, react_1.useMemo)(() => features && features.includes(types_1.SCFeatureName.EVENT) && features.includes(types_1.SCFeatureName.TAGGING), [features]);
+    const onlyStaffEnabled = (0, react_1.useMemo)(() => preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ONLY_STAFF_ENABLED].value, [preferences]);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore
+    const canCreateEvent = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_event; }, [(_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 ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClick, variant: "contained", color: "secondary", startIcon: !EventFormProps.event && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "add" })) }, rest, { children: children !== null && children !== void 0 ? children : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createEventButton", defaultMessage: "ui.createEventButton" }) })), open && (0, jsx_runtime_1.jsx)(EventForm_1.default, Object.assign({}, EventFormProps, { open: true, onClose: handleClick }))] }));
+}
+exports.default = CreateEventButton;

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

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

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

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

package/lib/cjs/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/cjs/components/CreateEventWidget/CreateEventWidget.js

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

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

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

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
+const styles_1 = require("@mui/material/styles");
+const Widget_1 = tslib_1.__importDefault(require("../Widget"));
+const constants_1 = require("./constants");
+const classes = {
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    calendar: `${constants_1.PREFIX}-calendar`,
+    content: `${constants_1.PREFIX}-content`,
+    title: `${constants_1.PREFIX}-title`,
+    spacing: `${constants_1.PREFIX}-spacing`,
+    actions: `${constants_1.PREFIX}-actions`
+};
+const Root = (0, styles_1.styled)(Widget_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+function CreateEventWidgetSkeleton() {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", animation: "wave", width: "100%", height: "110px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.calendar, variant: "rounded", animation: "wave", width: "50px", height: "50px" })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.title, animation: "wave", width: "26%", height: "30px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.spacing, animation: "wave", width: "100%", height: "20px" }), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.spacing })] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "rounded", width: "138px", height: "36px" }) }))] })));
+}
+exports.default = CreateEventWidgetSkeleton;

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

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