@selfcommunity/react-ui 0.7.0-alpha.33 → 0.7.0-alpha.331

package/lib/esm/shared/ContributionActionsMenu/index.js

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React, { useContext, useMemo, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -16,19 +6,17 @@ import Popper from '@mui/material/Popper';
 import Icon from '@mui/material/Icon';
 import CentralProgress from '../CentralProgress';
 import { SCOPE_SC_UI } from '../../constants/Errors';
-import { copyTextToClipboard } from '@selfcommunity/utils';
+import { copyTextToClipboard, Logger } from '@selfcommunity/utils';
 import { useSnackbar } from 'notistack';
-import { getRouteData, getContributionRouteName } from '../../utils/contribution';
+import { getContributionRouteName, getRouteData } from '../../utils/contribution';
 import classNames from 'classnames';
 import ConfirmDialog from '../ConfirmDialog/ConfirmDialog';
-import { Badge, Box, CircularProgress, ClickAwayListener, Collapse, Divider, Grow, IconButton, ListItemIcon, ListItemText, MenuItem, MenuList, Paper, Typography, useMediaQuery, useTheme } from '@mui/material';
-import { REPORT_AGGRESSIVE, REPORT_OFFTOPIC, REPORT_POORCONTENT, REPORT_SPAM, REPORT_VULGAR, REPORTS, MODERATION_TYPE_ACTION_HIDE, MODERATION_TYPE_ACTION_DELETE, MODERATION_CONTRIBUTION_STATE_HIDDEN, MODERATION_CONTRIBUTION_STATE_DELETED } from '../../constants/Flagging';
-import { http, Endpoints } from '@selfcommunity/api-services';
-import { Logger } from '@selfcommunity/utils';
+import { Badge, Box, CircularProgress, ClickAwayListener, Collapse, Divider, Grow, IconButton, ListItemIcon, ListItemText, MenuItem, MenuList, Paper, SwipeableDrawer, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { MODERATION_CONTRIBUTION_STATE_DELETED, MODERATION_CONTRIBUTION_STATE_HIDDEN, MODERATION_TYPE_ACTION_DELETE, MODERATION_TYPE_ACTION_HIDE, REPORT_AGGRESSIVE, REPORT_OFFTOPIC, REPORT_POORCONTENT, REPORT_SPAM, REPORT_VULGAR, REPORTS } from '../../constants/Flagging';
+import { Endpoints, http } from '@selfcommunity/api-services';
 import { SCContext, SCUserContext, UserUtils, useSCFetchCommentObject, useSCFetchFeedObject, useSCRouting } from '@selfcommunity/react-core';
-import { SCCommentTypologyType, SCFeedObjectTypologyType } from '@selfcommunity/types';
-import { GENERAL_SECTION, DELETE_CONTRIBUTION, DELETE_CONTRIBUTION_SECTION, EDIT_CONTRIBUTION, FLAG_CONTRIBUTION_SECTION, GET_CONTRIBUTION_PERMALINK, HIDE_CONTRIBUTION_SECTION, RESTORE_CONTRIBUTION, SUSPEND_NOTIFICATION_CONTRIBUTION, MODERATE_CONTRIBUTION_HIDDEN, MODERATE_CONTRIBUTION_DELETED } from '../../constants/ContributionsActionsMenu';
-import BaseDrawer from '../BaseDrawer';
+import { SCContributionType } from '@selfcommunity/types';
+import { DELETE_CONTRIBUTION, DELETE_CONTRIBUTION_SECTION, EDIT_CONTRIBUTION, FLAG_CONTRIBUTION_SECTION, GENERAL_SECTION, GET_CONTRIBUTION_PERMALINK, HIDE_CONTRIBUTION_SECTION, MODERATE_CONTRIBUTION_DELETED, MODERATE_CONTRIBUTION_HIDDEN, RESTORE_CONTRIBUTION, SUSPEND_NOTIFICATION_CONTRIBUTION } from '../../constants/ContributionsActionsMenu';
 const PREFIX = 'SCContributionActionsMenu';
 const classes = {
     root: `${PREFIX}-root`,
@@ -43,7 +31,7 @@ const classes = {
     selectedIcon: `${PREFIX}-selected-icon`,
     sectionBadge: `${PREFIX}-section-badge`,
     sectionWithSelectionIcon: `${PREFIX}-section-with-selection-icon`,
-    visibilityBadge: `${PREFIX}-visibility-badge`
+    visibilityIcons: `${PREFIX}-visibility-icons`
 };
 const PopperRoot = styled(Popper, {
     name: PREFIX,
@@ -90,15 +78,7 @@ const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
-})(() => ({
-    [`& .${classes.visibilityBadge}`]: {
-        color: 'red',
-        '& > span': {
-            padding: 12,
-            fontSize: 15
-        }
-    }
-}));
+})(() => ({}));
 const messages = defineMessages({
     title: {
         id: 'ui.contributionActionMenu.title',
@@ -131,7 +111,7 @@ const messages = defineMessages({
 });
 export default function ContributionActionsMenu(props) {
     // PROPS
-    const { className, feedObjectId, feedObject, feedObjectType = SCFeedObjectTypologyType.POST, commentObjectId, commentObject, onEditContribution, onHideContribution, onDeleteContribution, onRestoreContribution, onSuspendNotificationContribution, PopperProps = {} } = props, rest = __rest(props, ["className", "feedObjectId", "feedObject", "feedObjectType", "commentObjectId", "commentObject", "onEditContribution", "onHideContribution", "onDeleteContribution", "onRestoreContribution", "onSuspendNotificationContribution", "PopperProps"]);
+    const { className, feedObjectId, feedObject, feedObjectType = SCContributionType.POST, commentObjectId, commentObject, onFlagContribution, onEditContribution, onHideContribution, onDeleteContribution, onRestoreContribution, onSuspendNotificationContribution, PopperProps = {} } = props, rest = __rest(props, ["className", "feedObjectId", "feedObject", "feedObjectType", "commentObjectId", "commentObject", "onFlagContribution", "onEditContribution", "onHideContribution", "onDeleteContribution", "onRestoreContribution", "onSuspendNotificationContribution", "PopperProps"]);
     // INTL
     const intl = useIntl();
     // CONTEXT
@@ -171,7 +151,11 @@ export default function ContributionActionsMenu(props) {
      */
     const getExtraSections = useMemo(() => () => {
         let _extra = [];
-        if (scUserContext.user && Boolean(contributionObj) && scUserId !== contributionObj.author.id) {
+        if (scUserContext.user &&
+            Boolean(contributionObj) &&
+            scUserId !== contributionObj.author.id &&
+            !contributionObj.deleted &&
+            !contributionObj.collapsed) {
             _extra.push(FLAG_CONTRIBUTION_SECTION);
         }
         // Enable when backend is ready
@@ -245,7 +229,7 @@ export default function ContributionActionsMenu(props) {
         setCurrentActionLoading(SUSPEND_NOTIFICATION_CONTRIBUTION);
         performSuspendNotification()
             .then((data) => {
-            const _feedObj = Object.assign(feedObj, { suspended: !feedObj.suspended });
+            const _feedObj = Object.assign({}, feedObj, { suspended: !feedObj.suspended });
             setFeedObj(_feedObj);
             onSuspendNotificationContribution && onSuspendNotificationContribution(_feedObj);
             setCurrentActionLoading(null);
@@ -316,10 +300,10 @@ export default function ContributionActionsMenu(props) {
         const contributionType = contributionObj.type;
         return http
             .request({
-            url: contributionType === SCCommentTypologyType
+            url: contributionType === SCContributionType.COMMENT
                 ? Endpoints.DeleteComment.url({ id: contributionObj.id })
                 : Endpoints.DeleteFeedObject.url({ type: contributionType, id: contributionObj.id }),
-            method: contributionType === SCCommentTypologyType ? Endpoints.DeleteComment.method : Endpoints.DeleteFeedObject.method
+            method: contributionType === SCContributionType.COMMENT ? Endpoints.DeleteComment.method : Endpoints.DeleteFeedObject.method
         })
             .then((res) => {
             if (res.status >= 300) {
@@ -335,10 +319,10 @@ export default function ContributionActionsMenu(props) {
         const contributionType = contributionObj.type;
         return http
             .request({
-            url: contributionType === SCCommentTypologyType
+            url: contributionType === SCContributionType.COMMENT
                 ? Endpoints.RestoreComment.url({ id: contributionObj.id })
                 : Endpoints.RestoreFeedObject.url({ type: contributionType, id: contributionObj.id }),
-            method: contributionType === SCCommentTypologyType ? Endpoints.RestoreComment.method : Endpoints.RestoreFeedObject.method
+            method: contributionType === SCContributionType.COMMENT ? Endpoints.RestoreComment.method : Endpoints.RestoreFeedObject.method
         })
             .then((res) => {
             if (res.status >= 300) {
@@ -407,9 +391,14 @@ export default function ContributionActionsMenu(props) {
                 .then((data) => {
                 setFlagType(flagType === type ? null : type);
                 setIsFlagging(false);
+                onFlagContribution && onFlagContribution(contributionObj, type, flagType !== type);
             })
                 .catch((error) => {
                 Logger.error(SCOPE_SC_UI, error);
+                enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.contributionActionMenu.actionError", defaultMessage: "ui.contributionActionMenu.actionError" }), {
+                    variant: 'error',
+                    autoHideDuration: 3000
+                });
             });
         }
     }
@@ -541,7 +530,7 @@ export default function ContributionActionsMenu(props) {
                 setCurrentActionLoading(RESTORE_CONTRIBUTION);
                 performDeleteContribution()
                     .then((data) => {
-                    setFeedObj(Object.assign(feedObj, { deleted: true }));
+                    setFeedObj(Object.assign({}, feedObj, { deleted: true }));
                     onDeleteContribution && onDeleteContribution(contributionObj);
                     performPostConfirmAction(true);
                 })
@@ -554,7 +543,7 @@ export default function ContributionActionsMenu(props) {
                 setCurrentActionLoading(RESTORE_CONTRIBUTION);
                 performRestoreContribution()
                     .then((data) => {
-                    setFeedObj(Object.assign(feedObj, { deleted: false }));
+                    setFeedObj(Object.assign({}, feedObj, { deleted: false }));
                     onRestoreContribution && onRestoreContribution(contributionObj);
                     performPostConfirmAction(true);
                 })
@@ -569,7 +558,7 @@ export default function ContributionActionsMenu(props) {
                     .then((data) => {
                     setHideType(hideType === hideFlagType ? null : hideFlagType);
                     setHideFlagType(null);
-                    setFeedObj(Object.assign(feedObj, { collapsed: !feedObj.collapsed }));
+                    setFeedObj(Object.assign({}, feedObj, { collapsed: !feedObj.collapsed }));
                     onHideContribution && onHideContribution(contributionObj);
                     performPostConfirmAction(true);
                 })
@@ -584,7 +573,7 @@ export default function ContributionActionsMenu(props) {
                     .then((data) => {
                     setDeleteType(deleteType === deleteFlagType ? null : deleteFlagType);
                     setDeleteFlagType(null);
-                    setFeedObj(Object.assign(feedObj, { deleted: !feedObj.deleted }));
+                    setFeedObj(Object.assign({}, feedObj, { deleted: !feedObj.deleted }));
                     onDeleteContribution && onDeleteContribution(contributionObj);
                     performPostConfirmAction(true);
                 })
@@ -732,7 +721,10 @@ export default function ContributionActionsMenu(props) {
      * Can authenticated user suspend notification for the contribution
      */
     function canSuspendNotificationContribution() {
-        return (scUserContext.user && scUserContext.user.id !== contributionObj.author.id && contributionObj && contributionObj.type !== SCCommentTypologyType);
+        return (scUserContext.user &&
+            scUserContext.user.id !== contributionObj.author.id &&
+            contributionObj &&
+            contributionObj.type !== SCContributionType.COMMENT);
     }
     /**
      * Renders section general
@@ -751,7 +743,7 @@ export default function ContributionActionsMenu(props) {
                 React.createElement(ListItemIcon, null, currentActionLoading === DELETE_CONTRIBUTION || currentActionLoading === RESTORE_CONTRIBUTION ? (React.createElement(CircularProgress, { size: 20 })) : (React.createElement(Icon, null, "delete"))),
                 contributionObj.deleted ? (React.createElement(ListItemText, { primary: React.createElement(FormattedMessage, { id: "ui.contributionActionMenu.restoreContribution", defaultMessage: "ui.contributionActionMenu.restoreContribution" }), onClick: () => handleAction(RESTORE_CONTRIBUTION), classes: { root: classes.itemText } })) : (React.createElement(ListItemText, { primary: React.createElement(FormattedMessage, { id: "ui.contributionActionMenu.deleteContribution", defaultMessage: "ui.contributionActionMenu.deleteContribution" }), onClick: () => handleAction(DELETE_CONTRIBUTION), classes: { root: classes.itemText } })))),
             canSuspendNotificationContribution() && (React.createElement(MenuItem, { className: classes.subItem, disabled: isFlagging },
-                React.createElement(ListItemIcon, null, currentActionLoading === SUSPEND_NOTIFICATION_CONTRIBUTION ? (React.createElement(CircularProgress, { size: 20 })) : contributionObj['suspended'] ? (React.createElement(Icon, null, "notifications")) : (React.createElement(Icon, null, "notifications_off"))),
+                React.createElement(ListItemIcon, null, currentActionLoading === SUSPEND_NOTIFICATION_CONTRIBUTION ? (React.createElement(CircularProgress, { size: 20 })) : contributionObj['suspended'] ? (React.createElement(Icon, null, "notifications_active")) : (React.createElement(Icon, null, "notifications_off"))),
                 React.createElement(ListItemText, { primary: contributionObj['suspended'] ? (React.createElement(FormattedMessage, { id: "ui.contributionActionMenu.enableNotificationContribution", defaultMessage: "ui.contributionActionMenu.enableNotificationContribution" })) : (React.createElement(FormattedMessage, { id: "ui.contributionActionMenu.suspendNotificationContribution", defaultMessage: "ui.contributionActionMenu.suspendNotificationContribution" })), onClick: () => handleAction(SUSPEND_NOTIFICATION_CONTRIBUTION), classes: { root: classes.itemText } })))));
     }
     /**
@@ -769,11 +761,15 @@ export default function ContributionActionsMenu(props) {
     return (React.createElement(Root, { className: classNames(classes.root, className) },
         React.createElement(IconButton, { ref: (ref) => {
                 popperRef.current = ref;
-            }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "medium" }, contributionObj && (contributionObj.collapsed || contributionObj.deleted) ? (React.createElement(Badge, { badgeContent: contributionObj.collapsed ? React.createElement(Icon, null, "visibility_off") : React.createElement(Icon, null, "delete"), classes: { badge: classes.visibilityBadge } },
-            React.createElement(Icon, null, "more_vert"))) : (React.createElement(Icon, null, "more_vert"))),
-        isMobile ? (React.createElement(BaseDrawer, { open: open, onClose: handleClose, width: '100%' }, renderContent())) : (React.createElement(PopperRoot, Object.assign({ open: open, anchorEl: popperRef.current, role: undefined, transition: true, className: classes.popper }, PopperProps, { placement: "bottom-end" }), ({ TransitionProps, placement }) => (React.createElement(Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }),
+            }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "small" }, contributionObj && (contributionObj.collapsed || contributionObj.deleted) ? (React.createElement("span", { className: classes.visibilityIcons },
+            contributionObj.collapsed ? React.createElement(Icon, null, "visibility_off") : React.createElement(Icon, null, "delete"),
+            React.createElement(Icon, null, "expand_more"))) : (React.createElement(Icon, null, "more_vert"))),
+        isMobile ? (React.createElement(SwipeableDrawer, { open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, renderContent())) : (React.createElement(PopperRoot, Object.assign({ open: open, anchorEl: popperRef.current, role: undefined, transition: true, className: classes.popper }, PopperProps, { placement: "bottom-end" }), ({ TransitionProps, placement }) => (React.createElement(Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }),
             React.createElement(Paper, { variant: 'outlined', className: classes.paper },
                 React.createElement(ClickAwayListener, { onClickAway: handleClose }, renderContent())))))),
-        openConfirmDialog && (React.createElement(ConfirmDialog, { open: openConfirmDialog, onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) }))));
+        openConfirmDialog && (React.createElement(ConfirmDialog, Object.assign({ open: openConfirmDialog }, (currentAction === DELETE_CONTRIBUTION
+            ? {
+                content: (React.createElement(FormattedMessage, { id: "ui.contributionActionMenu.deleteContributionInfo", defaultMessage: "ui.contributionActionMenu.deleteContributionInfo" }))
+            }
+            : {}), { onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) })))));
 }
-//# sourceMappingURL=index.js.map

package/lib/esm/shared/CustomSnackMessage/index.d.ts

@@ -12,4 +12,3 @@ declare const CustomSnackMessage: React.ForwardRefExoticComponent<{
     message: string | React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
 export default CustomSnackMessage;
-//# sourceMappingURL=index.d.ts.map

package/lib/esm/shared/CustomSnackMessage/index.js

@@ -8,39 +8,14 @@ const PREFIX = 'SCCustomSnackMessage';
 const classes = {
     root: `${PREFIX}-root`,
     card: `${PREFIX}-card`,
-    cardContent: `${PREFIX}-card-content`,
-    closeAction: `${PREFIX}-close-action`
+    content: `${PREFIX}-content`,
+    close: `${PREFIX}-close`
 };
 const Root = styled(SnackbarContent, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    width: 370,
-    [theme.breakpoints.up('sm')]: {
-        minWidth: '345px !important'
-    },
-    [`& .${classes.card}`]: {
-        backgroundColor: '#fff',
-        width: '100%',
-        padding: theme.spacing(),
-        borderRadius: 10
-    },
-    [`& .${classes.cardContent}`]: {
-        padding: `5px 5px`,
-        paddingBottom: `5px !important`
-    },
-    [`& .${classes.closeAction}`]: {
-        position: 'absolute',
-        right: 0,
-        top: 0,
-        zIndex: 1
-    },
-    '& a': {
-        textDecoration: 'none',
-        color: theme.palette.text.primary
-    }
-}));
+})(({ theme }) => ({}));
 /**
  * Custom Snackbar for notistack messages
  * Use this component:
@@ -56,10 +31,9 @@ const CustomSnackMessage = forwardRef((props, ref) => {
     }, [props.id, closeSnackbar]);
     return (React.createElement(Root, { ref: ref, className: classes.root, key: props.id },
         React.createElement(Widget, { className: classes.card },
-            React.createElement(CardContent, { className: classes.cardContent },
-                React.createElement(IconButton, { className: classes.closeAction, onClick: handleDismiss },
+            React.createElement(CardContent, { className: classes.content },
+                React.createElement(IconButton, { className: classes.close, onClick: handleDismiss },
                     React.createElement(Icon, null, "close")),
                 props.message))));
 });
 export default CustomSnackMessage;
-//# sourceMappingURL=index.js.map

package/lib/esm/shared/DateTimeAgo/index.d.ts

@@ -4,11 +4,6 @@ export interface DateTimeAgoProps {
      * @default null
      */
     className?: string;
-    /**
-     * Handles live option
-     * @default true
-     */
-    live?: boolean;
     /**
      * Date obj
      * @default null
@@ -25,4 +20,3 @@ export interface DateTimeAgoProps {
     [p: string]: any;
 }
 export default function DateTimeAgo(props: DateTimeAgoProps): JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/lib/esm/shared/DateTimeAgo/index.js

@@ -1,22 +1,11 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { useEffect } from 'react';
-import { useSCContext } from '@selfcommunity/react-core';
+import { __rest } from "tslib";
+import React from 'react';
 import { styled } from '@mui/material/styles';
 import { Box, Tooltip, Typography } from '@mui/material';
 import Icon from '@mui/material/Icon';
-import { useIntl } from 'react-intl';
+import { FormattedRelativeTime, useIntl } from 'react-intl';
 import classNames from 'classnames';
-import moment from 'moment';
+import { getRelativeTime } from '../../utils/formatRelativeTime';
 const PREFIX = 'SCDateTimeAgo';
 const classes = {
     root: `${PREFIX}-root`
@@ -41,24 +30,18 @@ const Root = styled(Box, {
 export default function DateTimeAgo(props) {
     // PROPS
     const { className, date = null, showStartIcon = true } = props, rest = __rest(props, ["className", "date", "showStartIcon"]);
-    // CONTEXT
-    const scContext = useSCContext();
-    useEffect(() => {
-        if (moment.locale() !== scContext.settings.locale.default) {
-            moment.locale(scContext.settings.locale.default);
-        }
-    }, [scContext.settings.locale.default]);
     // INTL
     const intl = useIntl();
     /**
      * Renders root object (if date obj)
      */
     if (date) {
+        const formattedDate = getRelativeTime(date);
         return (React.createElement(Root, Object.assign({ component: "span", className: classNames(classes.root, className) }, rest),
             showStartIcon && React.createElement(Icon, null, "access_time"),
             React.createElement(Tooltip, { title: `${intl.formatDate(date, { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' })}`, enterTouchDelay: 0 },
-                React.createElement(Typography, { variant: 'body2', component: 'span' }, moment(date).fromNow()))));
+                React.createElement(Typography, { variant: 'body2', component: 'span' },
+                    React.createElement(FormattedRelativeTime, { value: -formattedDate.value, unit: formattedDate.unit, numeric: "auto" })))));
     }
     return null;
 }
-//# sourceMappingURL=index.js.map

package/lib/esm/shared/EmailTextField/index.d.ts

@@ -1,3 +1,2 @@
 import { TextFieldProps } from '@mui/material';
 export default function PasswordTextField(props: TextFieldProps): JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/lib/esm/shared/EmailTextField/index.js

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React, { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { TextField } from '@mui/material';
@@ -46,4 +36,3 @@ export default function PasswordTextField(props) {
     // RENDER
     return React.createElement(Root, Object.assign({}, rest, { onChange: handleChange, error: Boolean(errorMsg) || error, helperText: errorMsg || helperText }));
 }
-//# sourceMappingURL=index.js.map

package/lib/esm/shared/EmojiPicker/EmojiPicker.d.ts

@@ -0,0 +1,6 @@
+import { Props } from 'emoji-picker-react';
+interface EmojiPickerProps extends Props {
+    className?: string;
+}
+export default function EmojiPicker(inProps: EmojiPickerProps): JSX.Element;
+export {};

package/lib/esm/shared/EmojiPicker/EmojiPicker.js

@@ -0,0 +1,29 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import { Box } from '@mui/material';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+let Picker;
+typeof window !== 'undefined' &&
+    import('emoji-picker-react').then((_module) => {
+        Picker = _module.default;
+    });
+const PREFIX = 'SCEmojiPicker';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(() => ({}));
+export default function EmojiPicker(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className = '', emojiStyle = 'native' } = props, rest = __rest(props, ["className", "emojiStyle"]);
+    return React.createElement(Root, { className: classNames(classes.root, className) }, Picker && React.createElement(Picker, Object.assign({ emojiStyle: emojiStyle }, rest)));
+}

package/lib/esm/shared/EmojiPicker/index.d.ts

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

package/lib/esm/shared/EmojiPicker/index.js

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

package/lib/esm/shared/HiddenPlaceholder/index.d.ts

@@ -1,2 +1 @@
 export default function HiddenPlaceholder(props: any): JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/lib/esm/shared/HiddenPlaceholder/index.js

@@ -13,4 +13,3 @@ const Root = styled('div', {
 export default function HiddenPlaceholder(props) {
     return React.createElement(Root, Object.assign({}, props));
 }
-//# sourceMappingURL=index.js.map

package/lib/esm/shared/InfiniteScroll/index.d.ts

@@ -1,6 +1,6 @@
 import { Component, ReactNode, CSSProperties } from 'react';
 declare type Fn = () => any;
-export interface Props {
+export interface InfiniteScrollProps {
     next?: Fn;
     hasMoreNext?: boolean;
     previous?: Fn;
@@ -8,6 +8,7 @@ export interface Props {
     children: ReactNode;
     loaderNext?: ReactNode;
     loaderPrevious?: ReactNode;
+    inverse?: boolean;
     scrollThreshold?: number | string;
     endMessage?: ReactNode;
     header?: ReactNode;
@@ -32,8 +33,8 @@ interface State {
     pullToRefreshThresholdBreached: boolean;
     prevDataLength: number | undefined;
 }
-export default class InfiniteScroll extends Component<Props, State> {
-    constructor(props: Props);
+declare class InfiniteScroll extends Component<InfiniteScrollProps, State> {
+    constructor(props: InfiniteScrollProps);
     private throttledOnScrollListener;
     private _scrollableNode;
     private el;
@@ -47,8 +48,8 @@ export default class InfiniteScroll extends Component<Props, State> {
     private maxPullDownDistance;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    componentDidUpdate(prevProps: Props): void;
-    static getDerivedStateFromProps(nextProps: Props, prevState: State): {
+    componentDidUpdate(prevProps: InfiniteScrollProps): void;
+    static getDerivedStateFromProps(nextProps: InfiniteScrollProps, prevState: State): {
         prevDataLength: number;
         showLoaderNext: boolean;
         showLoaderPrevious: boolean;
@@ -63,5 +64,4 @@ export default class InfiniteScroll extends Component<Props, State> {
     onScrollListener: (event: MouseEvent) => void;
     render(): JSX.Element;
 }
-export {};
-//# sourceMappingURL=index.d.ts.map
+export default InfiniteScroll;

package/lib/esm/shared/InfiniteScroll/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { throttle } from 'throttle-debounce';
 import { ThresholdUnits, parseThreshold } from '../../utils/threshold';
-export default class InfiniteScroll extends Component {
+class InfiniteScroll extends Component {
     constructor(props) {
         super(props);
         this.lastScrollTop = 0;
@@ -203,6 +203,9 @@ export default class InfiniteScroll extends Component {
                 Math.abs(this.lastScrollTop - target.scrollTop) >= threshold.value / 3 &&
                 target.scrollTop < this.lastScrollTop);
         }
+        else if (this.props.inverse) {
+            return target.scrollTop <= threshold.value / 100 + clientHeight - target.scrollHeight + 1;
+        }
         return target.scrollTop <= threshold.value / 100 + clientHeight && target.scrollTop < this.lastScrollTop;
     }
     isElementAtBottom(target, scrollThreshold = 0.8) {
@@ -229,12 +232,13 @@ export default class InfiniteScroll extends Component {
                             right: 0,
                             top: -1 * this.maxPullDownDistance
                         } }, this.state.pullToRefreshThresholdBreached ? this.props.releaseToRefreshContent : this.props.pullDownToRefreshContent))),
-                this.state.showLoaderPrevious && this.props.hasMorePrevious && this.props.loaderPrevious,
+                !this.props.inverse && this.state.showLoaderPrevious && this.props.hasMorePrevious && this.props.loaderPrevious,
                 this.props.children,
+                this.props.inverse && this.state.showLoaderPrevious && this.props.hasMorePrevious && this.props.loaderPrevious,
                 !this.state.showLoaderNext && !hasChildren && this.props.hasMoreNext && this.props.loaderNext,
                 this.state.showLoaderNext && this.props.hasMoreNext && this.props.loaderNext,
                 !this.props.hasMoreNext && this.props.endMessage,
                 this.props.footer)));
     }
 }
-//# sourceMappingURL=index.js.map
+export default InfiniteScroll;

package/lib/esm/shared/InfiniteScroll/stories/InfiniteScrollWithHeight.d.ts

@@ -1,10 +1 @@
-import React from 'react';
-export default class App extends React.Component {
-    state: {
-        items: unknown[];
-        hasMore: boolean;
-    };
-    fetchMoreData: () => void;
-    render(): JSX.Element;
-}
-//# sourceMappingURL=InfiniteScrollWithHeight.d.ts.map
+export default function InfiniteScrollWithHeight(): JSX.Element;

package/lib/esm/shared/InfiniteScroll/stories/InfiniteScrollWithHeight.js

@@ -1,5 +1,4 @@
-import React from 'react';
-import { render } from 'react-dom';
+import React, { useState } from 'react';
 import InfiniteScroll from '../index';
 const style = {
     height: 30,
@@ -7,36 +6,25 @@ const style = {
     margin: 6,
     padding: 8
 };
-export default class App extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            items: Array.from({ length: 20 }),
-            hasMore: true
-        };
-        this.fetchMoreData = () => {
-            if (this.state.items.length >= 500) {
-                this.setState({ hasMore: false });
-                return;
-            }
-            // a fake async api call like which sends
-            // 20 more records in .5 secs
-            setTimeout(() => {
-                this.setState({
-                    items: this.state.items.concat(Array.from({ length: 20 }))
-                });
-            }, 500);
-        };
-    }
-    render() {
-        return (React.createElement("div", null,
-            React.createElement("h1", null, "demo: Infinite Scroll with fixed height"),
-            React.createElement("hr", null),
-            React.createElement(InfiniteScroll, { dataLength: this.state.items.length, next: this.fetchMoreData, hasMoreNext: this.state.hasMore, loaderNext: React.createElement("h4", null, "Loading..."), height: 400, endMessage: React.createElement("p", { style: { textAlign: 'center' } },
-                    React.createElement("b", null, "Yay! You have seen it all")) }, this.state.items.map((_, index) => (React.createElement("div", { style: style, key: index },
-                "div - #",
-                index))))));
-    }
+export default function InfiniteScrollWithHeight() {
+    const [hasMore, setHasMore] = useState(true);
+    const [items, setItems] = useState(Array.from({ length: 20 }));
+    const fetchMoreData = () => {
+        if (items.length >= 500) {
+            setHasMore(false);
+            return;
+        }
+        // a fake async api call like which sends
+        // 20 more records in .5 secs
+        setTimeout(() => {
+            setItems(items.concat(Array.from({ length: 20 })));
+        }, 500);
+    };
+    return (React.createElement("div", null,
+        React.createElement("h1", null, "demo: Infinite Scroll with fixed height"),
+        React.createElement("hr", null),
+        React.createElement(InfiniteScroll, { dataLength: items.length, next: fetchMoreData, hasMoreNext: hasMore, loaderNext: React.createElement("h4", null, "Loading..."), height: 400, endMessage: React.createElement("p", { style: { textAlign: 'center' } },
+                React.createElement("b", null, "Yay! You have seen it all")) }, items.map((_, index) => (React.createElement("div", { style: style, key: index },
+            "div - #",
+            index))))));
 }
-render(React.createElement(App, null), document.getElementById('root'));
-//# sourceMappingURL=InfiniteScrollWithHeight.js.map

package/lib/esm/shared/InfiniteScroll/stories/PullDownToRefreshInfScroll.d.ts

@@ -1,9 +1 @@
-import React from 'react';
-export default class App extends React.Component {
-    state: {
-        items: unknown[];
-    };
-    fetchMoreData: () => void;
-    render(): JSX.Element;
-}
-//# sourceMappingURL=PullDownToRefreshInfScroll.d.ts.map
+export default function PullDownToRefreshInfScroll(): JSX.Element;