@selfcommunity/react-ui 0.7.50-events.91 → 0.7.50-events.93

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

@@ -30,5 +30,5 @@ export interface ComposerIconButtonProps extends IconButtonProps {
 
  * @param inProps
  */
-declare const _default: React.ForwardRefExoticComponent<Pick<ComposerIconButtonProps, "id" | "role" | "form" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "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" | "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/esm/components/Event/Skeleton.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { AvatarGroup, Box, Button, CardContent, Divider, Icon, Stack } from '@mui/material';
+import { AvatarGroup, Box, Button, CardActions, CardContent, Divider, Icon, Stack, useTheme } from '@mui/material';
 import Skeleton from '@mui/material/Skeleton';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
@@ -16,10 +16,13 @@ const classes = {
     skeletonSnippetRoot: `${PREFIX}-skeleton-snippet-root`,
     skeletonDetailCalendar: `${PREFIX}-skeleton-detail-calendar`,
     skeletonDetailContent: `${PREFIX}-skeleton-detail-content`,
+    skeletonDetailActions: `${PREFIX}-skeleton-detail-actions`,
     skeletonDetailUser: `${PREFIX}-skeleton-detail-user`,
     skeletonDetailFirstDivider: `${PREFIX}-skeleton-detail-first-divider`,
     skeletonDetailSecondDivider: `${PREFIX}-skeleton-detail-second-divider`,
     skeletonPreviewContent: `${PREFIX}-skeleton-preview-content`,
+    skeletonPreviewName: `${PREFIX}-skeleton-preview-name`,
+    skeletonPreviewActions: `${PREFIX}-skeleton-preview-actions`,
     skeletonSnippetImage: `${PREFIX}-skeleton-snippet-image`,
     skeletonSnippetAction: `${PREFIX}-skeleton-snippet-action`
 };
@@ -68,18 +71,20 @@ export default function EventSkeleton(inProps) {
         name: PREFIX
     });
     const { className, template = SCEventTemplateType.SNIPPET, skeletonsAnimation = 'wave', actions } = props, rest = __rest(props, ["className", "template", "skeletonsAnimation", "actions"]);
+    const theme = useTheme();
     /**
      * Renders event object
      */
     let contentObj;
     if (template === SCEventTemplateType.DETAIL) {
-        contentObj = (_jsxs(SkeletonDetailRoot, Object.assign({ className: classes.skeletonDetailRoot }, { children: [_jsxs(Box, Object.assign({ position: "relative" }, { children: [_jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "170px" }), _jsx(Skeleton, { className: classes.skeletonDetailCalendar, variant: "rounded", animation: skeletonsAnimation, width: "60px", height: "60px" })] })), _jsxs(CardContent, Object.assign({ className: classes.skeletonDetailContent }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "36%", height: "40px" }), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "35%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "14px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "27%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", gap: "8px", className: classes.skeletonDetailUser }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "36px", height: "36px" }), _jsxs(Stack, Object.assign({ gap: "1px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "75px", height: "15px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "86px", height: "16px" })] }))] })), _jsx(Divider, { className: classes.skeletonDetailFirstDivider }), _jsxs(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center", height: "28px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "68px", height: "20px" }), _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" })] })] })), _jsx(Divider, { className: classes.skeletonDetailSecondDivider })] }))] })));
+        console.log(actions);
+        contentObj = (_jsxs(SkeletonDetailRoot, Object.assign({ className: classes.skeletonDetailRoot }, { children: [_jsxs(Box, Object.assign({ position: "relative" }, { children: [_jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "170px" }), _jsx(Skeleton, { className: classes.skeletonDetailCalendar, variant: "rounded", animation: skeletonsAnimation, width: "60px", height: "60px" })] })), _jsxs(CardContent, Object.assign({ className: classes.skeletonDetailContent }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "36%", height: "40px" }), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "35%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "14px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "27%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", gap: "8px", className: classes.skeletonDetailUser }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "36px", height: "36px" }), _jsxs(Stack, Object.assign({ gap: "1px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "75px", height: "15px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "86px", height: "16px" })] }))] })), _jsx(Divider, { className: classes.skeletonDetailFirstDivider }), _jsxs(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center", height: "28px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "68px", height: "20px" }), _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" })] })] })), _jsx(Divider, { className: classes.skeletonDetailSecondDivider })] })), _jsx(CardActions, Object.assign({ className: classes.skeletonDetailActions }, { children: actions !== undefined ? actions : _jsx(Skeleton, { variant: "rounded", width: 100, height: 30 }) }))] })));
     }
     else if (template === SCEventTemplateType.PREVIEW) {
-        contentObj = (_jsxs(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [_jsx(Box, Object.assign({ position: "relative" }, { children: _jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "80px" }) })), _jsxs(CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [_jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "30%", height: "16px" })] })), _jsx(Skeleton, { animation: skeletonsAnimation, width: "46%", height: "20px" }), _jsx(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "2px" }, { children: _jsx(Skeleton, { animation: skeletonsAnimation, width: "27%", height: "16px" }) })), _jsx(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center", height: "28px" }, { children: _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "28px", height: "28px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "28px", height: "28px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "28px", height: "28px" })] }) }))] }))] })));
+        contentObj = (_jsxs(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [_jsx(Box, Object.assign({ position: "relative" }, { children: _jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "80px" }) })), _jsxs(CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [_jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), _jsx(Skeleton, { animation: skeletonsAnimation, width: "67%", height: "25px", className: classes.skeletonPreviewName }), _jsx(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "2px" }, { children: _jsx(Skeleton, { animation: skeletonsAnimation, width: "27%", height: "18px" }) })), _jsx(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center" }, { children: _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` })] }) }))] })), _jsx(CardActions, Object.assign({ className: classes.skeletonPreviewActions }, { children: actions !== undefined ? actions : _jsx(Skeleton, { variant: "rounded", width: 100, height: 30 }) }))] })));
     }
     else {
-        contentObj = (_jsx(SkeletonSnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.skeletonSnippetRoot, image: _jsxs(Box, Object.assign({ className: classes.skeletonSnippetImage }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", width: 100, height: 60 }), " ", _jsx(Icon, Object.assign({ fontSize: "large" }, { children: "CalendarIcon" }))] })), primary: _jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "40%", style: { marginBottom: 12 } }), secondary: _jsxs(_Fragment, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "60%", style: { marginBottom: 10, marginRight: 5 } }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "35%" })] }), actions: _jsx(_Fragment, { children: actions !== null && actions !== void 0 ? actions : (_jsx(Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: _jsx(Skeleton, { animation: skeletonsAnimation, height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } }) }))) }) }));
+        contentObj = (_jsx(SkeletonSnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.skeletonSnippetRoot, image: _jsxs(Box, Object.assign({ className: classes.skeletonSnippetImage }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", width: 100, height: 60 }), " ", _jsx(Icon, Object.assign({ fontSize: "large" }, { children: "CalendarIcon" }))] })), primary: _jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "40%", style: { marginBottom: 12 } }), secondary: _jsxs(_Fragment, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "60%", style: { marginBottom: 10, marginRight: 5 } }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "35%" })] }), actions: _jsx(_Fragment, { children: actions !== undefined ? (actions) : (_jsx(Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: _jsx(Skeleton, { animation: skeletonsAnimation, height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } }) }))) }) }));
     }
     return (_jsx(Root, Object.assign({ className: classNames(classes.root, className, `${PREFIX}-skeleton-${template}`) }, rest, { children: contentObj })));
 }

package/lib/esm/components/EventMembersWidget/EventMembersWidget.js

@@ -52,7 +52,16 @@ export default function EventMembersWidget(inProps) {
         cacheStrategy,
         visibleItems: limit
     }, stateWidgetInitializer);
-    const [invitedNumber, setInvitedNumber] = useState(0);
+    const [requests, dispatchRequests] = useReducer(dataWidgetReducer, {
+        isLoadingNext: false,
+        next: null,
+        cacheKey: SCCache.getWidgetStateCacheKey(SCCache.USER_REQUESTS_EVENTS_STATE_CACHE_PREFIX_KEY, eventId || event.id),
+        cacheStrategy,
+        visibleItems: limit
+    }, stateWidgetInitializer);
+    const [invitedCount, setInvitedCount] = useState(0);
+    const [requestsCount, setRequestsCount] = useState(0);
+    const [requestsUsers, setRequestsUsers] = useState([]);
     const [tabValue, setTabValue] = useState('1');
     const [refresh, setRefresh] = useState(false);
     // CONTEXT
@@ -82,7 +91,7 @@ export default function EventMembersWidget(inProps) {
             EventService.getEventInvitedUsers(scEvent.id, Object.assign({}, endpointQueryParams))
                 .then((payload) => {
                 dispatchInvited({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
-                setInvitedNumber(payload.count);
+                setInvitedCount(payload.count);
             })
                 .catch((error) => {
                 dispatchInvited({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
@@ -90,6 +99,21 @@ export default function EventMembersWidget(inProps) {
             });
         }
     }, [invited.isLoadingNext, invited.initialized, dispatchInvited, scUserContext.user, scEvent]);
+    const _initRequests = useCallback(() => {
+        if (!requests.initialized && !requests.isLoadingNext && hasAllow) {
+            dispatchRequests({ type: actionWidgetTypes.LOADING_NEXT });
+            EventService.getEventWaitingApprovalSubscribers(scEvent.id, Object.assign({}, endpointQueryParams))
+                .then((payload) => {
+                dispatchRequests({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
+                setRequestsCount(payload.count);
+                setRequestsUsers(payload.results);
+            })
+                .catch((error) => {
+                dispatchRequests({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
+                Logger.error(SCOPE_SC_UI, error);
+            });
+        }
+    }, [requests.isLoadingNext, requests.initialized, dispatchRequests, scUserContext.user, scEvent]);
     // EFFECTS
     useEffect(() => {
         let _t;
@@ -102,6 +126,7 @@ export default function EventMembersWidget(inProps) {
                 else {
                     _initParticipants();
                     _initInvited();
+                    _initRequests();
                 }
             });
             return () => {
@@ -120,8 +145,14 @@ export default function EventMembersWidget(inProps) {
     if (!scEvent) {
         return _jsx(HiddenPlaceholder, {});
     }
-    return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.title }, { children: _jsx(FormattedMessage, { id: title, defaultMessage: title }) })), _jsxs(TabContext, Object.assign({ value: tabValue }, { children: [_jsxs(TabList, Object.assign({ className: classes.tabsWrapper, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "fullWidth" }, { children: [_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: participants.count })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.participants", defaultMessage: "ui.eventMembersWidget.participants" }) }))] })), value: "1" }), hasAllow && (_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: invitedNumber })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) }))] })), value: "2" }))] })), _jsx(TabPanel, Object.assign({ value: "1", className: classes.tabPanel }, { children: _jsx(TabContentComponent, { state: participants, dispatch: dispatchParticipants, userProps: userProps, dialogProps: dialogProps }) })), hasAllow && (_jsx(TabPanel, Object.assign({ value: "2", className: classes.tabPanel }, { children: _jsx(TabContentComponent, { state: invited, dispatch: dispatchInvited, userProps: userProps, dialogProps: dialogProps, actionProps: {
+    return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.title }, { children: _jsx(FormattedMessage, { id: title, defaultMessage: title }) })), _jsxs(TabContext, Object.assign({ value: tabValue }, { children: [_jsxs(TabList, Object.assign({ className: classes.tabsWrapper, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "fullWidth" }, { children: [_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: participants.count })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.participants", defaultMessage: "ui.eventMembersWidget.participants" }) }))] })), value: "1" }), hasAllow && (_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: invitedCount })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) }))] })), value: "2" })), hasAllow && (_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: requestsCount })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.requests", defaultMessage: "ui.eventMembersWidget.requests" }) }))] })), value: "3" }))] })), _jsx(TabPanel, Object.assign({ value: "1", className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: "1", state: participants, dispatch: dispatchParticipants, userProps: userProps, dialogProps: dialogProps }) })), hasAllow && (_jsx(TabPanel, Object.assign({ value: "2", className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: "2", state: invited, dispatch: dispatchInvited, userProps: userProps, dialogProps: dialogProps, actionProps: {
+                                    scEvent,
+                                    setCount: setInvitedCount
+                                }, setRefresh: setRefresh }) }))), hasAllow && (_jsx(TabPanel, Object.assign({ value: "3", className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: "3", state: requests, dispatch: dispatchRequests, userProps: userProps, dialogProps: dialogProps, actionProps: {
                                     scEvent,
-                                    setInvitedNumber
-                                }, setRefresh: setRefresh }) })))] }))] })) })));
+                                    count: requestsCount,
+                                    setCount: setRequestsCount,
+                                    users: requestsUsers,
+                                    setUsers: setRequestsUsers
+                                } }) })))] }))] })) })));
 }

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

@@ -21,5 +21,5 @@ const Root = styled(Widget, {
     overridesResolver: (_props, styles) => styles.skeletonRoot
 })(() => ({}));
 export default function EventMembersWidgetSkeleton() {
-    return (_jsx(Root, Object.assign({ className: classes.root }, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { animation: "wave", width: "53px", height: "25px", className: classes.title }), _jsxs(TabContext, Object.assign({ value: "1" }, { children: [_jsx(Box, Object.assign({ className: classes.tabsWrapper }, { children: _jsxs(TabList, Object.assign({ variant: "fullWidth" }, { children: [_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Skeleton, { animation: "wave", width: "26px", height: "24px" }), _jsx(Skeleton, { animation: "wave", width: "106px", height: "19px" })] })), value: "1" }), _jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Skeleton, { animation: "wave", width: "26px", height: "24px" }), _jsx(Skeleton, { animation: "wave", width: "106px", height: "19px" })] })), value: "2" })] })) })), _jsx(TabPanel, Object.assign({ value: "1", className: classes.tabPanel }, { children: _jsxs(List, { children: [[1, 2, 3, 4].map((_element, i) => (_jsx(ListItem, { children: _jsx(UserSkeleton, {}) }, i))), _jsx(Skeleton, { className: classes.actionButton, animation: "wave", width: "52px", height: "20px" })] }) })), _jsx(TabPanel, Object.assign({ value: "2", className: classes.tabPanel }, { children: _jsx(List, { children: [1, 2, 3, 4].map((_element, i) => (_jsx(ListItem, { children: _jsx(UserSkeleton, {}) }, i))) }) }))] }))] })) })));
+    return (_jsx(Root, Object.assign({ className: classes.root }, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { animation: "wave", width: "53px", height: "25px", className: classes.title }), _jsxs(TabContext, Object.assign({ value: "1" }, { children: [_jsx(Box, Object.assign({ className: classes.tabsWrapper }, { children: _jsx(TabList, Object.assign({ variant: "fullWidth" }, { children: [1, 2, 3].map((_element, i) => (_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Skeleton, { animation: "wave", width: "26px", height: "24px" }), _jsx(Skeleton, { animation: "wave", width: "106px", height: "19px" })] })), value: `${i + 1}` }, i))) })) })), _jsx(TabPanel, Object.assign({ value: "1", className: classes.tabPanel }, { children: _jsxs(List, { children: [[1, 2, 3, 4].map((_element, i) => (_jsx(ListItem, { children: _jsx(UserSkeleton, {}) }, i))), _jsx(Skeleton, { className: classes.actionButton, animation: "wave", width: "52px", height: "20px" })] }) })), _jsx(TabPanel, { value: "2", className: classes.tabPanel }), _jsx(TabPanel, { value: "3", className: classes.tabPanel })] }))] })) })));
 }

package/lib/esm/components/EventMembersWidget/TabContentComponent.d.ts

@@ -1,8 +1,9 @@
-import { SCEventType } from '@selfcommunity/types';
+import { SCEventType, SCUserType } from '@selfcommunity/types';
 import { Dispatch, SetStateAction } from 'react';
 import { BaseDialogProps } from '../../shared/BaseDialog';
 import { UserProps } from '../User';
 interface TabComponentProps {
+    tabValue: '1' | '2' | '3';
     state: any;
     dispatch: Dispatch<any>;
     /**
@@ -17,7 +18,10 @@ interface TabComponentProps {
     dialogProps?: BaseDialogProps;
     actionProps?: {
         scEvent?: SCEventType;
-        setInvitedNumber: Dispatch<SetStateAction<number>>;
+        count?: number;
+        setCount?: Dispatch<SetStateAction<number>>;
+        users?: SCUserType[];
+        setUsers?: Dispatch<SetStateAction<SCUserType[]>>;
     };
     setRefresh?: Dispatch<SetStateAction<boolean>>;
 }

package/lib/esm/components/EventMembersWidget/TabContentComponent.js

@@ -2,12 +2,14 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Button, List, ListItem, styled, Typography } from '@mui/material';
 import { Endpoints, http } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
-import { useCallback, useState } from 'react';
+import { useSnackbar } from 'notistack';
+import { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import BaseDialog from '../../shared/BaseDialog';
 import InfiniteScroll from '../../shared/InfiniteScroll';
 import { actionWidgetTypes } from '../../utils/widget';
+import AcceptRequestUserEventButton from '../AcceptRequestUserEventButton';
 import EventInviteButton from '../EventInviteButton';
 import InviteUserEventButton from '../InviteUserEventButton';
 import User, { UserSkeleton } from '../User';
@@ -26,9 +28,13 @@ const DialogRoot = styled(BaseDialog, {
 })(() => ({}));
 export default function TabContentComponent(props) {
     // PROPS
-    const { state, dispatch, userProps, dialogProps, actionProps, setRefresh } = props;
+    const { state, dispatch, userProps, dialogProps, actionProps, setRefresh, tabValue } = props;
     // STATE
     const [openDialog, setOpenDialog] = useState(false);
+    // HOOKS
+    const { enqueueSnackbar } = useSnackbar();
+    // CONSTS
+    const users = useMemo(() => (tabValue === '3' ? actionProps === null || actionProps === void 0 ? void 0 : actionProps.users : state.results), [tabValue, actionProps, state]);
     // HANDLERS
     /**
      * Handles pagination
@@ -50,12 +56,51 @@ export default function TabContentComponent(props) {
     const handleToggleDialogOpen = useCallback(() => {
         setOpenDialog((prev) => !prev);
     }, []);
-    const getActionsComponent = useCallback((userId) => actionProps ? _jsx(InviteUserEventButton, { event: actionProps.scEvent, userId: userId, setInvitedNumber: actionProps.setInvitedNumber }) : undefined, [actionProps]);
-    const handleInvitations = useCallback((invited) => {
-        if (invited) {
-            dispatch({ type: actionWidgetTypes.RESET });
-            setRefresh(true);
+    const getActionsComponent = useCallback((userId) => {
+        if (tabValue === '2' && actionProps) {
+            const handleInvitations = (invited) => {
+                var _a, _b;
+                if (invited) {
+                    (_a = actionProps.setCount) === null || _a === void 0 ? void 0 : _a.call(actionProps, (prev) => prev - 1);
+                }
+                else {
+                    (_b = actionProps.setCount) === null || _b === void 0 ? void 0 : _b.call(actionProps, (prev) => prev + 1);
+                }
+            };
+            return _jsx(InviteUserEventButton, { event: actionProps.scEvent, userId: userId, handleInvitations: handleInvitations });
         }
-    }, [dispatch, setRefresh]);
-    return (_jsxs(_Fragment, { children: [_jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps, { actions: getActionsComponent(user.id) })) }, user.id))) }), state.count === 0 && actionProps && (_jsx(EventInviteButton, { event: actionProps.scEvent, className: classes.eventButton, handleInvitations: handleInvitations })), state.count > state.visibleItems && (_jsx(Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.showAll", defaultMessage: "ui.eventMembersWidget.showAll" }) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.eventMembersWidget.title", id: "ui.eventMembersWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, userProps)), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })) })))] }));
+        else if (tabValue === '3' && actionProps) {
+            const handleConfirm = (id) => {
+                if (id) {
+                    actionProps.setCount((prev) => prev - 1);
+                    actionProps.setUsers((prev) => prev.filter((user) => user.id !== id));
+                    enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.acceptRequestUserEventButton.snackbar.success", defaultMessage: "ui.acceptRequestUserEventButton.snackbar.success" }), {
+                        variant: 'success',
+                        autoHideDuration: 3000
+                    });
+                }
+                else {
+                    enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                        variant: 'error',
+                        autoHideDuration: 3000
+                    });
+                }
+            };
+            return _jsx(AcceptRequestUserEventButton, { event: actionProps.scEvent, userId: userId, handleConfirm: handleConfirm });
+        }
+        return undefined;
+    }, [tabValue, actionProps, dispatch, setRefresh]);
+    if (tabValue === '2' && state.count === 0 && actionProps) {
+        const handleInvitations = (invited) => {
+            if (invited) {
+                dispatch({ type: actionWidgetTypes.RESET });
+                setRefresh(true);
+            }
+        };
+        return _jsx(EventInviteButton, { event: actionProps.scEvent, className: classes.eventButton, handleInvitations: handleInvitations });
+    }
+    if (tabValue === '3' && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.count) === 0) {
+        return (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noOtherRequests", defaultMessage: "ui.eventMembersWidget.noOtherRequests" }) })));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(List, { children: users === null || users === void 0 ? void 0 : users.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps, { actions: getActionsComponent(user.id) })) }, user.id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.showAll", defaultMessage: "ui.eventMembersWidget.showAll" }) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.eventMembersWidget.title", id: "ui.eventMembersWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, userProps)), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })) })))] }));
 }

package/lib/esm/components/EventParticipantsButton/EventParticipantsButton.js

@@ -125,5 +125,5 @@ export default function EventParticipantsButton(inProps) {
     const handleToggleDialogOpen = useCallback(() => {
         setOpen((prev) => !prev);
     }, [setOpen]);
-    return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scEvent || scEvent.goings_counter === 0 }, rest, { children: [!hideCaption && (_jsx(Typography, Object.assign({ className: classes.participants, variant: "caption" }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.participants", id: "ui.eventParticipantsButton.participants" }) }))), !followers.length && (loading || !scEvent) ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest, (!participantsAvailable && { skeletonsAnimation: false })))) : (_jsx(AvatarGroup, Object.assign({ total: scEvent.goings_counter }, { children: followers.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar, className: classes.avatar }, c.id))) })))] })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.dialogTitle", id: "ui.eventParticipantsButton.dialogTitle", values: { total: scEvent.goings_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventParticipantsButton.noOtherParticipants", defaultMessage: "ui.eventParticipantsButton.noOtherParticipants" }) })) }, { children: _jsx(List, { children: followers.map((follower) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scEvent || scEvent.goings_counter === 0 }, rest, { children: [!hideCaption && (_jsx(Typography, Object.assign({ className: classes.participants, variant: "caption" }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.participants", id: "ui.eventParticipantsButton.participants" }) }))), !followers.length && (loading || !scEvent) ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest, (!participantsAvailable && { skeletonsAnimation: false })))) : (_jsx(AvatarGroup, Object.assign({ total: followers.length }, { children: followers.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar, className: classes.avatar }, c.id))) })))] })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.dialogTitle", id: "ui.eventParticipantsButton.dialogTitle", values: { total: scEvent.goings_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventParticipantsButton.noOtherParticipants", defaultMessage: "ui.eventParticipantsButton.noOtherParticipants" }) })) }, { children: _jsx(List, { children: followers.map((follower) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
 }

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

@@ -1,9 +1,11 @@
+import { GridProps } from '@mui/material';
 import { EndpointType } from '@selfcommunity/api-services';
 import React from 'react';
 import { EventProps, EventSkeletonProps } from '../Event';
+import { EventsSkeletonProps } from '../Events/Skeleton';
 export declare const EventsChipRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
-}, "avatar" | "label" | "style" | "className" | "tabIndex" | "color" | "children" | "sx" | "classes" | "variant" | "disabled" | "size" | "icon" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "avatar" | "className" | "style" | "classes" | "label" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "size" | "icon" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export interface EventsProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -25,11 +27,26 @@ export interface EventsProps {
      * @default {}
      */
     EventComponentProps?: EventProps;
+    /**
+     * Props to spread to events skeleton object
+     * @default {}
+     */
+    EventsSkeletonComponentProps?: EventsSkeletonProps;
     /**
      * Props to spread to single event skeleton object
      * @default {}
      */
     EventSkeletonComponentProps?: EventSkeletonProps;
+    /**
+     * Props spread to grid container
+     * @default {}
+     */
+    GridContainerComponentProps?: Exclude<keyof GridProps, 'container' | 'component' | 'children' | 'item' | 'classes'>;
+    /**
+     * Props spread to single grid item
+     * @default {}
+     */
+    GridItemComponentProps?: Exclude<keyof GridProps, 'container' | 'component' | 'children' | 'item' | 'classes'>;
     /**
      * Show/Hide filters
      * @default true

package/lib/esm/components/Events/Events.js

@@ -76,7 +76,7 @@ export default function Events(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { endpoint = Endpoints.SearchEvents, endpointQueryParams = { limit: 8, offset: DEFAULT_PAGINATION_OFFSET }, className, EventComponentProps = { elevation: 0, square: true }, EventSkeletonComponentProps = { elevation: 0, square: true }, showFilters = false, filters, general = true } = props, rest = __rest(props, ["endpoint", "endpointQueryParams", "className", "EventComponentProps", "EventSkeletonComponentProps", "showFilters", "filters", "general"]);
+    const { endpoint = Endpoints.SearchEvents, endpointQueryParams = { limit: 8, offset: DEFAULT_PAGINATION_OFFSET }, className, EventComponentProps = { elevation: 0, square: true }, EventsSkeletonComponentProps = {}, EventSkeletonComponentProps = { elevation: 0, square: true }, GridContainerComponentProps = {}, GridItemComponentProps = {}, showFilters = false, filters, general = true } = props, rest = __rest(props, ["endpoint", "endpointQueryParams", "className", "EventComponentProps", "EventsSkeletonComponentProps", "EventSkeletonComponentProps", "GridContainerComponentProps", "GridItemComponentProps", "showFilters", "filters", "general"]);
     // STATE
     const [events, setEvents] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -194,7 +194,7 @@ export default function Events(inProps) {
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                 // @ts-ignore
                                 showFollowed: showFollowed, deleteIcon: showFollowed ? _jsx(Icon, { children: "close" }) : null, onDelete: showFollowed ? handleDeleteClick : null }) })), _jsx(Grid, Object.assign({ item: true }, { children: _jsx(PastEventsFilter, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, disabled: dateSearch !== SCEventDateFilterType.ANY }) }))] })) }))), _jsx(_Fragment, { children: !events.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: (onlyStaffEnabled && !UserUtils.isStaff(scUserContext.user)) ||
-                        (onlyStaffEnabled && UserUtils.isStaff(scUserContext.user) && general) ? (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps)), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title", defaultMessage: "ui.events.noEvents.title" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: _jsx(CreateEventButton, {}) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title.onlyStaff", defaultMessage: "ui.events.noEvents.title.onlyStaff" }) }))] })) }))) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.events }, { children: _jsxs(_Fragment, { children: [filteredEvents.map((event) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.item }, { children: _jsx(Event, Object.assign({ event: event, eventId: event.id }, EventComponentProps)) }), event.id))), filteredEvents.length % 2 !== 0 && (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.itemSkeleton }, { children: _jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: _jsx(CreateEventButton, Object.assign({ variant: "outlined", color: "primary", size: "small" }, { children: _jsx(FormattedMessage, { id: "ui.events.skeleton.action.add", defaultMessage: "ui.events.skeleton.action.add" }) })) })) }), 'skeleton-item'))] }) })), Boolean(next) && (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: _jsx(FormattedMessage, { id: "ui.events.button.seeMore", defaultMessage: "ui.events.button.seeMore" }) })))] })) })] }));
+                        (onlyStaffEnabled && UserUtils.isStaff(scUserContext.user) && general) ? (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps)), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title", defaultMessage: "ui.events.noEvents.title" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: _jsx(CreateEventButton, {}) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title.onlyStaff", defaultMessage: "ui.events.noEvents.title.onlyStaff" }) }))] })) }))) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.events }, GridContainerComponentProps, { children: _jsxs(_Fragment, { children: [filteredEvents.map((event) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.item }, GridItemComponentProps, { children: _jsx(Event, Object.assign({ event: event, eventId: event.id }, EventComponentProps)) }), event.id))), filteredEvents.length % 2 !== 0 && (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.itemSkeleton }, GridItemComponentProps, { children: _jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: _jsx(CreateEventButton, Object.assign({ variant: "outlined", color: "primary", size: "small" }, { children: _jsx(FormattedMessage, { id: "ui.events.skeleton.action.add", defaultMessage: "ui.events.skeleton.action.add" }) })) })) }), 'skeleton-item'))] }) })), Boolean(next) && (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: _jsx(FormattedMessage, { id: "ui.events.button.seeMore", defaultMessage: "ui.events.button.seeMore" }) })))] })) })] }));
     /**
      * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
      */
@@ -202,7 +202,7 @@ export default function Events(inProps) {
         return null;
     }
     if (loading) {
-        return _jsx(Skeleton, { EventSkeletonProps: EventSkeletonComponentProps });
+        return _jsx(Skeleton, Object.assign({}, EventsSkeletonComponentProps, { EventSkeletonProps: EventSkeletonComponentProps }));
     }
     return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: c })));
 }

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

@@ -1,3 +1,4 @@
+import { GridProps } from '@mui/material';
 export interface EventsSkeletonProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -9,6 +10,16 @@ export interface EventsSkeletonProps {
      * @default null
      */
     EventSkeletonProps?: any;
+    /**
+     * Props spread to grid container
+     * @default {}
+     */
+    GridContainerComponentProps?: Exclude<keyof GridProps, 'container' | 'component' | 'children' | 'item' | 'classes'>;
+    /**
+     * Props spread to single grid item
+     * @default {}
+     */
+    GridItemComponentProps?: Exclude<keyof GridProps, 'container' | 'component' | 'children' | 'item' | 'classes'>;
     /**
      * @default 20
      */

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

@@ -35,6 +35,6 @@ const Root = styled(Box, {
  *
  */
 export default function EventsSkeleton(inProps) {
-    const { className, EventSkeletonProps = {}, eventsNumber = 8 } = inProps, rest = __rest(inProps, ["className", "EventSkeletonProps", "eventsNumber"]);
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.events }, { children: [...Array(eventsNumber)].map((event, index) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6 }, { children: _jsx(EventSkeleton, Object.assign({}, EventSkeletonProps)) }), index))) })) })));
+    const { className, EventSkeletonProps = {}, eventsNumber = 8, GridContainerComponentProps = {}, GridItemComponentProps = {} } = inProps, rest = __rest(inProps, ["className", "EventSkeletonProps", "eventsNumber", "GridContainerComponentProps", "GridItemComponentProps"]);
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.events }, GridContainerComponentProps, { children: [...Array(eventsNumber)].map((event, index) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6 }, GridItemComponentProps, { children: _jsx(EventSkeleton, Object.assign({}, EventSkeletonProps)) }), index))) })) })));
 }

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

@@ -1,5 +1,5 @@
 import { SCEventType, SCUserType } from '@selfcommunity/types';
-import { Dispatch, HTMLAttributes, SetStateAction } from 'react';
+import { HTMLAttributes } from 'react';
 export interface InviteUserEventButtonProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -26,10 +26,7 @@ export interface InviteUserEventButtonProps {
      * @default null
      */
     user?: SCUserType;
-    /**
-     * setInvitedNumber set state action
-     */
-    setInvitedNumber?: Dispatch<SetStateAction<number>>;
+    handleInvitations?: ((invited: boolean) => void) | null;
     /**
      * Others properties
      */

package/lib/esm/components/InviteUserEventButton/InviteUserEventButton.js

@@ -47,18 +47,19 @@ export default function InviteUserEventButton(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, eventId, event, userId, user, setInvitedNumber } = props, rest = __rest(props, ["className", "eventId", "event", "userId", "user", "setInvitedNumber"]);
+    const { className, eventId, event, userId, user, handleInvitations } = props, rest = __rest(props, ["className", "eventId", "event", "userId", "user", "handleInvitations"]);
     // STATE
+    const [invited, setInvited] = useState(true);
+    //HOOKS
     const { scEvent } = useSCFetchEvent({ id: eventId, event });
     const { scUser } = useSCFetchUser({ id: userId, user });
-    const [invited, setInvited] = useState(true);
     const handleInviteAction = useCallback(() => {
         setInvited(null);
         if (invited) {
             EventService.removeInviteEvent(scEvent.id, { users: [scUser.id] })
                 .then(() => {
                 setInvited(false);
-                setInvitedNumber((prev) => prev - 1);
+                handleInvitations === null || handleInvitations === void 0 ? void 0 : handleInvitations(true);
             })
                 .catch((_error) => {
                 Logger.error(SCOPE_SC_UI, _error);
@@ -68,7 +69,7 @@ export default function InviteUserEventButton(inProps) {
             EventService.inviteOrAcceptEventRequest(scEvent.id, { users: [scUser.id] })
                 .then(() => {
                 setInvited(true);
-                setInvitedNumber((prev) => prev + 1);
+                handleInvitations === null || handleInvitations === void 0 ? void 0 : handleInvitations(false);
             })
                 .catch((_error) => {
                 Logger.error(SCOPE_SC_UI, _error);

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, CardActions } from '@mui/material';
 import Skeleton from '@mui/material/Skeleton';
 import { styled } from '@mui/material/styles';
@@ -20,5 +20,5 @@ const Root = styled(Widget, {
     overridesResolver: (_props, styles) => styles.skeletonRoot
 })(() => ({}));
 export default function MyEventsWidgetSkeleton() {
-    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(Box, Object.assign({ padding: "12px 16px" }, { children: _jsx(Skeleton, { animation: "wave", width: "141px", height: "33px" }) })), _jsx(EventSkeleton, { template: SCEventTemplateType.DETAIL, elevation: 0, square: true }), _jsxs(CardActions, Object.assign({ className: classes.actions }, { children: [_jsx(Skeleton, { animation: "wave", variant: "rounded", width: "14px", height: "14px" }), _jsx(Skeleton, { animation: "wave", width: "52px", height: "20px" }), _jsx(Skeleton, { animation: "wave", variant: "rounded", width: "14px", height: "14px" })] }))] })));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(Box, Object.assign({ padding: "12px 16px" }, { children: _jsx(Skeleton, { animation: "wave", width: "141px", height: "33px" }) })), _jsx(EventSkeleton, { template: SCEventTemplateType.DETAIL, elevation: 0, square: true, actions: _jsx(_Fragment, {}) }), _jsxs(CardActions, Object.assign({ className: classes.actions }, { children: [_jsx(Skeleton, { animation: "wave", variant: "rounded", width: "14px", height: "14px" }), _jsx(Skeleton, { animation: "wave", width: "52px", height: "20px" }), _jsx(Skeleton, { animation: "wave", variant: "rounded", width: "14px", height: "14px" })] }))] })));
 }