@selfcommunity/react-ui 0.10.4-alpha.2 → 0.10.4-alpha.3

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

@@ -31,6 +31,7 @@ const constants_1 = require("./constants");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const CloseLayer_1 = tslib_1.__importDefault(require("./Layer/CloseLayer"));
 const BackdropScrollDisabled_1 = tslib_1.__importDefault(require("../../shared/BackdropScrollDisabled"));
+const body_scroll_lock_1 = require("body-scroll-lock");
 const DialogTransition = (0, react_1.forwardRef)(function Transition(props, ref) {
     return (0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ ref: ref }, props));
 });
@@ -271,10 +272,21 @@ function Composer(inProps) {
          */
         dialogRef.current.addEventListener('touchstart', handleTouchStart);
         dialogRef.current.addEventListener('touchmove', handleTouchmove);
+        (0, body_scroll_lock_1.disableBodyScroll)(dialogRef.current, {
+            allowTouchMove: (el) => {
+                return (el &&
+                    typeof el === 'object' &&
+                    el.className &&
+                    typeof el.className === 'string' &&
+                    el.className.include &&
+                    el.className.include('SCComposer-content'));
+            }
+        });
         return () => {
             var _a, _b;
             (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchstart', handleTouchStart);
             (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchmove', handleTouchmove);
+            (0, body_scroll_lock_1.enableBodyScroll)(dialogRef.current);
         };
     }, [dialogRef.current, isIOS]);
     /* Handlers */
@@ -503,6 +515,7 @@ function Composer(inProps) {
             });
         }
         else {
+            (0, body_scroll_lock_1.clearAllBodyScrollLocks)();
             onClose && onClose(e);
             setLayer(null);
             dispatch({ type: 'reset' });

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

@@ -85,5 +85,5 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
             autoHideDuration: 7000
         });
     }, []);
-    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))] }));
+    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" }) })), open && (0, jsx_runtime_1.jsx)(Composer_1.default, Object.assign({ open: open, fullWidth: true, onClose: handleClose, onSuccess: handleSuccess }, ComposerProps))] }));
 });

package/lib/cjs/components/InlineComposerWidget/InlineComposerWidget.js

@@ -103,6 +103,6 @@ function InlineComposerWidget(inProps) {
     if (!react_core_1.UserUtils.isStaff(scUserContext.user) && onlyStaffEnabled) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.input }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", disableFocusRipple: true, disableRipple: true, disableElevation: true, onClick: handleOpen, fullWidth: true, color: "inherit" }, { children: label !== null && label !== void 0 ? label : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.inlineComposerWidget.label", defaultMessage: "ui.inlineComposerWidget.label" }) })) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.avatar }, { children: !scUserContext.user ? ((0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "circular" })) : ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar }) }))) }))] })) })), (0, jsx_runtime_1.jsx)(Composer_1.default, { open: open, mediaObjectTypes: mediaObjectTypes, defaultValue: defaultValue, fullWidth: true, onClose: handleClose, onSuccess: handleSuccess, feedType: feedType })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.input }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", disableFocusRipple: true, disableRipple: true, disableElevation: true, onClick: handleOpen, fullWidth: true, color: "inherit" }, { children: label !== null && label !== void 0 ? label : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.inlineComposerWidget.label", defaultMessage: "ui.inlineComposerWidget.label" }) })) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.avatar }, { children: !scUserContext.user ? ((0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "circular" })) : ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar }) }))) }))] })) })), open && ((0, jsx_runtime_1.jsx)(Composer_1.default, { open: open, mediaObjectTypes: mediaObjectTypes, defaultValue: defaultValue, fullWidth: true, onClose: handleClose, onSuccess: handleSuccess, feedType: feedType }))] }));
 }
 exports.default = InlineComposerWidget;

package/lib/esm/components/Composer/Composer.js

@@ -29,6 +29,7 @@ import { PREFIX } from './constants';
 import ComposerSkeleton from './Skeleton';
 import CloseLayer from './Layer/CloseLayer';
 import BackdropScrollDisabled from '../../shared/BackdropScrollDisabled';
+import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
 const DialogTransition = forwardRef(function Transition(props, ref) {
     return _jsx(Fade, Object.assign({ ref: ref }, props));
 });
@@ -269,10 +270,21 @@ export default function Composer(inProps) {
          */
         dialogRef.current.addEventListener('touchstart', handleTouchStart);
         dialogRef.current.addEventListener('touchmove', handleTouchmove);
+        disableBodyScroll(dialogRef.current, {
+            allowTouchMove: (el) => {
+                return (el &&
+                    typeof el === 'object' &&
+                    el.className &&
+                    typeof el.className === 'string' &&
+                    el.className.include &&
+                    el.className.include('SCComposer-content'));
+            }
+        });
         return () => {
             var _a, _b;
             (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchstart', handleTouchStart);
             (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchmove', handleTouchmove);
+            enableBodyScroll(dialogRef.current);
         };
     }, [dialogRef.current, isIOS]);
     /* Handlers */
@@ -501,6 +513,7 @@ export default function Composer(inProps) {
             });
         }
         else {
+            clearAllBodyScrollLocks();
             onClose && onClose(e);
             setLayer(null);
             dispatch({ type: 'reset' });

package/lib/esm/components/ComposerIconButton/ComposerIconButton.js

@@ -83,5 +83,5 @@ export default React.forwardRef(function ComposerIconButton(inProps, ref) {
             autoHideDuration: 7000
         });
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleClick, ref: ref }, { children: _jsx(Icon, { children: "add_circle_outline" }) })), _jsx(Composer, Object.assign({ open: open, fullWidth: true, onClose: handleClose, onSuccess: handleSuccess }, ComposerProps))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleClick, ref: ref }, { children: _jsx(Icon, { children: "add_circle_outline" }) })), open && _jsx(Composer, Object.assign({ open: open, fullWidth: true, onClose: handleClose, onSuccess: handleSuccess }, ComposerProps))] }));
 });

package/lib/esm/components/InlineComposerWidget/InlineComposerWidget.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useMemo, useState } from 'react';
-import { SCFeedTypologyType, } from '@selfcommunity/types';
+import { SCFeedTypologyType } from '@selfcommunity/types';
 import { Link, SCPreferences, SCRoutes, UserUtils, useSCContext, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import { Avatar, Box, Button, CardContent } from '@mui/material';
 import { styled } from '@mui/material/styles';
@@ -101,5 +101,5 @@ export default function InlineComposerWidget(inProps) {
     if (!UserUtils.isStaff(scUserContext.user) && onlyStaffEnabled) {
         return _jsx(HiddenPlaceholder, {});
     }
-    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classes.root }, rest, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Box, Object.assign({ className: classes.input }, { children: _jsx(Button, Object.assign({ variant: "text", disableFocusRipple: true, disableRipple: true, disableElevation: true, onClick: handleOpen, fullWidth: true, color: "inherit" }, { children: label !== null && label !== void 0 ? label : _jsx(FormattedMessage, { id: "ui.inlineComposerWidget.label", defaultMessage: "ui.inlineComposerWidget.label" }) })) })), _jsx(Box, Object.assign({ className: classes.avatar }, { children: !scUserContext.user ? (_jsx(Avatar, { variant: "circular" })) : (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user) }, { children: _jsx(Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar }) }))) }))] })) })), _jsx(Composer, { open: open, mediaObjectTypes: mediaObjectTypes, defaultValue: defaultValue, fullWidth: true, onClose: handleClose, onSuccess: handleSuccess, feedType: feedType })] }));
+    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classes.root }, rest, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Box, Object.assign({ className: classes.input }, { children: _jsx(Button, Object.assign({ variant: "text", disableFocusRipple: true, disableRipple: true, disableElevation: true, onClick: handleOpen, fullWidth: true, color: "inherit" }, { children: label !== null && label !== void 0 ? label : _jsx(FormattedMessage, { id: "ui.inlineComposerWidget.label", defaultMessage: "ui.inlineComposerWidget.label" }) })) })), _jsx(Box, Object.assign({ className: classes.avatar }, { children: !scUserContext.user ? (_jsx(Avatar, { variant: "circular" })) : (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user) }, { children: _jsx(Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar }) }))) }))] })) })), open && (_jsx(Composer, { open: open, mediaObjectTypes: mediaObjectTypes, defaultValue: defaultValue, fullWidth: true, onClose: handleClose, onSuccess: handleSuccess, feedType: feedType }))] }));
 }