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

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

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

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

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

package/lib/esm/components/AccountChangeMailValidation/AccountChangeMailValidation.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { useSCUser } from '@selfcommunity/react-core';
 import { Alert, Box, CircularProgress } from '@mui/material';
@@ -82,11 +83,5 @@ export default function AccountChangeMailValidation(inProps) {
         return null;
     }
     // RENDER
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), succeed ? (React.createElement(Alert, { severity: "success", className: classes.success },
-        typeof succeed === 'string' ? (succeed) : (React.createElement(FormattedMessage, { id: "ui.accountChangeMailValidation.success", defaultMessage: "ui.accountChangeMailValidation.success" })),
-        successAction)) : error ? (React.createElement(Alert, { severity: "error", className: classes.error },
-        React.createElement(FormattedMessage, { id: "ui.accountChangeMailValidation.error", defaultMessage: "ui.accountChangeMailValidation.error" }),
-        errorAction)) : (React.createElement(React.Fragment, null,
-        React.createElement(CircularProgress, null),
-        React.createElement(FormattedMessage, { id: "ui.accountChangeMailValidation.verifying", defaultMessage: "ui.accountChangeMailValidation.verifying" })))));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: succeed ? (_jsxs(Alert, Object.assign({ severity: "success", className: classes.success }, { children: [typeof succeed === 'string' ? (succeed) : (_jsx(FormattedMessage, { id: "ui.accountChangeMailValidation.success", defaultMessage: "ui.accountChangeMailValidation.success" })), successAction] }))) : error ? (_jsxs(Alert, Object.assign({ severity: "error", className: classes.error }, { children: [_jsx(FormattedMessage, { id: "ui.accountChangeMailValidation.error", defaultMessage: "ui.accountChangeMailValidation.error" }), errorAction] }))) : (_jsxs(_Fragment, { children: [_jsx(CircularProgress, {}), _jsx(FormattedMessage, { id: "ui.accountChangeMailValidation.verifying", defaultMessage: "ui.accountChangeMailValidation.verifying" })] })) })));
 }

package/lib/esm/components/AccountDataPortability/AccountDataPortability.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useContext, useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useState } from 'react';
 import { useThemeProps } from '@mui/system';
 import { styled } from '@mui/material/styles';
 import { Box, Typography } from '@mui/material';
@@ -150,28 +151,18 @@ export default function AccountDataPortability(inProps) {
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest),
-        React.createElement(Typography, { variant: "h6" },
-            React.createElement(FormattedMessage, { id: "ui.accountDataPortability.title", defaultMessage: "ui.accountDataPortability.title", values: { username: capitalize(scUserContext.user.username) } })),
-        React.createElement(Typography, { variant: "body2", component: "div" },
-            React.createElement(FormattedMessage, { id: "ui.accountDataPortability.info", defaultMessage: "ui.accountDataPortability.info", values: {
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                    // @ts-ignore
-                    li: (chunks) => React.createElement("li", null, chunks),
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                    // @ts-ignore
-                    ul: (chunks) => React.createElement("ul", null, chunks)
-                } })),
-        React.createElement(LoadingButton, { size: "small", loading: (dataPortability && dataPortability.computing) || loading, disabled: !dataPortability ||
-                (dataPortability &&
-                    (dataPortability.computing ||
-                        (dataPortability.requested_at && differenceInHours(new Date(), parseISO(dataPortability.requested_at.toString())) < 24))), loadingPosition: "start", startIcon: React.createElement(Icon, null, "folder_open"), variant: "outlined", className: classes.createButton, onClick: handleCreateDataPortabilityFile }, (dataPortability && dataPortability.computing) || loading ? (React.createElement(FormattedMessage, { id: "ui.accountDataPortability.createLoadingButton", defaultMessage: "ui.accountDataPortability.createLoadingButton" })) : (React.createElement(FormattedMessage, { id: "ui.accountDataPortability.createButton", defaultMessage: "ui.accountDataPortability.createButton" }))),
-        dataPortability && !dataPortability.computing && dataPortability.generated_at && (React.createElement(LoadingButton, { size: "small", loading: downloadingDataPortability, loadingPosition: "start", startIcon: React.createElement(Icon, null, "cloud_download_outlined"), variant: 'outlined', className: classes.downloadButton, onClick: handleDownloadDataPortabilityFile },
-            React.createElement(FormattedMessage, { id: "ui.accountDataPortability.downloadButton", defaultMessage: "ui.accountDataPortability.downloadButton" }))),
-        React.createElement("br", null),
-        dataPortability && !dataPortability.computing && dataPortability.generated_at && (React.createElement(Typography, { className: classes.generationInfo, variant: "body2" },
-            React.createElement(FormattedMessage, { id: "ui.accountDataPortability.generatedInfo", defaultMessage: "ui.accountDataPortability.generatedInfo", values: {
-                    date: React.createElement(FormattedDate, { value: dataPortability.requested_at, day: "numeric", month: "long", year: "numeric" }),
-                    time: React.createElement(FormattedTime, { value: dataPortability.requested_at })
-                } })))));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: "ui.accountDataPortability.title", defaultMessage: "ui.accountDataPortability.title", values: { username: capitalize(scUserContext.user.username) } }) })), _jsx(Typography, Object.assign({ variant: "body2", component: "div" }, { children: _jsx(FormattedMessage, { id: "ui.accountDataPortability.info", defaultMessage: "ui.accountDataPortability.info", values: {
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                        // @ts-ignore
+                        li: (chunks) => _jsx("li", { children: chunks }),
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                        // @ts-ignore
+                        ul: (chunks) => _jsx("ul", { children: chunks })
+                    } }) })), _jsx(LoadingButton, Object.assign({ size: "small", loading: (dataPortability && dataPortability.computing) || loading, disabled: !dataPortability ||
+                    (dataPortability &&
+                        (dataPortability.computing ||
+                            (dataPortability.requested_at && differenceInHours(new Date(), parseISO(dataPortability.requested_at.toString())) < 24))), loadingPosition: "start", startIcon: _jsx(Icon, { children: "folder_open" }), variant: "outlined", className: classes.createButton, onClick: handleCreateDataPortabilityFile }, { children: (dataPortability && dataPortability.computing) || loading ? (_jsx(FormattedMessage, { id: "ui.accountDataPortability.createLoadingButton", defaultMessage: "ui.accountDataPortability.createLoadingButton" })) : (_jsx(FormattedMessage, { id: "ui.accountDataPortability.createButton", defaultMessage: "ui.accountDataPortability.createButton" })) })), dataPortability && !dataPortability.computing && dataPortability.generated_at && (_jsx(LoadingButton, Object.assign({ size: "small", loading: downloadingDataPortability, loadingPosition: "start", startIcon: _jsx(Icon, { children: "cloud_download_outlined" }), variant: 'outlined', className: classes.downloadButton, onClick: handleDownloadDataPortabilityFile }, { children: _jsx(FormattedMessage, { id: "ui.accountDataPortability.downloadButton", defaultMessage: "ui.accountDataPortability.downloadButton" }) }))), _jsx("br", {}), dataPortability && !dataPortability.computing && dataPortability.generated_at && (_jsx(Typography, Object.assign({ className: classes.generationInfo, variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.accountDataPortability.generatedInfo", defaultMessage: "ui.accountDataPortability.generatedInfo", values: {
+                        date: _jsx(FormattedDate, { value: dataPortability.requested_at, day: "numeric", month: "long", year: "numeric" }),
+                        time: _jsx(FormattedTime, { value: dataPortability.requested_at })
+                    } }) })))] })));
 }

package/lib/esm/components/AccountDataPortabilityButton/AccountDataPortabilityButton.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
@@ -70,9 +71,5 @@ export default function AccountDataPortabilityButton(inProps) {
     if (!scUserContext.user) {
         return null;
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Root, Object.assign({ onClick: handleOpen, className: classNames(classes.root, className) }, rest),
-            React.createElement(FormattedMessage, { id: "ui.accountDataPortabilityButton.buttonLabel", defaultMessage: "ui.accountDataPortabilityButton.buttonLabel" })),
-        open && (React.createElement(DialogRoot, { title: React.createElement(FormattedMessage, { id: "ui.accountDataPortabilityButton.dialogTitle", defaultMessage: "ui.accountDataPortabilityButton.dialogTitle", values: { username: scUserContext.user.username } }), onClose: handleClose, open: open, DialogContentProps: {} },
-            React.createElement(AccountDataPortability, null)))));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ onClick: handleOpen, className: classNames(classes.root, className) }, rest, { children: _jsx(FormattedMessage, { id: "ui.accountDataPortabilityButton.buttonLabel", defaultMessage: "ui.accountDataPortabilityButton.buttonLabel" }) })), open && (_jsx(DialogRoot, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.accountDataPortabilityButton.dialogTitle", defaultMessage: "ui.accountDataPortabilityButton.dialogTitle", values: { username: scUserContext.user.username } }), onClose: handleClose, open: open, DialogContentProps: {} }, { children: _jsx(AccountDataPortability, {}) })))] }));
 }

package/lib/esm/components/AccountDelete/AccountDelete.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useCallback, useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
 import { useThemeProps } from '@mui/system';
 import { styled } from '@mui/material/styles';
 import { Box, TextField, Typography } from '@mui/material';
@@ -107,26 +108,18 @@ export default function AccountDelete(inProps) {
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest),
-        React.createElement(Typography, { className: classes.message, component: Box },
-            React.createElement(FormattedMessage, { id: "ui.accountDelete.message", defaultMessage: "ui.accountDelete.message", values: {
-                    communityName,
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                    // @ts-ignore
-                    li: (chunks) => React.createElement("li", null, chunks),
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                    // @ts-ignore
-                    ul: (chunks) => React.createElement("ul", null, chunks)
-                } })),
-        React.createElement(Typography, { className: classes.confirm, component: Box },
-            React.createElement(FormattedMessage, { id: "ui.accountDelete.confirmMessage", defaultMessage: "ui.accountDelete.confirmMessage", values: {
-                    username: scUserContext.user.username,
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                    // @ts-ignore
-                    b: (chunks) => React.createElement("b", null, chunks)
-                } }),
-            React.createElement(TextField, { name: "confirm", value: confirm, onChange: handleChange, autoComplete: "off", size: "small" })),
-        error && React.createElement(Typography, { color: "error" }, error),
-        React.createElement(LoadingButton, { className: classes.button, size: "small", disabled: isDeleting || confirm !== scUserContext.user.username, variant: "outlined", onClick: handleDelete },
-            React.createElement(FormattedMessage, { id: "ui.accountDelete.buttonLabel", defaultMessage: "ui.accountDelete.buttonLabel" }))));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, Object.assign({ className: classes.message, component: Box }, { children: _jsx(FormattedMessage, { id: "ui.accountDelete.message", defaultMessage: "ui.accountDelete.message", values: {
+                        communityName,
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                        // @ts-ignore
+                        li: (chunks) => _jsx("li", { children: chunks }),
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                        // @ts-ignore
+                        ul: (chunks) => _jsx("ul", { children: chunks })
+                    } }) })), _jsxs(Typography, Object.assign({ className: classes.confirm, component: Box }, { children: [_jsx(FormattedMessage, { id: "ui.accountDelete.confirmMessage", defaultMessage: "ui.accountDelete.confirmMessage", values: {
+                            username: scUserContext.user.username,
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                            // @ts-ignore
+                            b: (chunks) => _jsx("b", { children: chunks })
+                        } }), _jsx(TextField, { name: "confirm", value: confirm, onChange: handleChange, autoComplete: "off", size: "small" })] })), error && _jsx(Typography, Object.assign({ color: "error" }, { children: error })), _jsx(LoadingButton, Object.assign({ className: classes.button, size: "small", disabled: isDeleting || confirm !== scUserContext.user.username, variant: "outlined", onClick: handleDelete }, { children: _jsx(FormattedMessage, { id: "ui.accountDelete.buttonLabel", defaultMessage: "ui.accountDelete.buttonLabel" }) }))] })));
 }

package/lib/esm/components/AccountDeleteButton/AccountDeleteButton.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
@@ -74,9 +75,5 @@ export default function AccountDeleteButton(inProps) {
     if (!scUserContext.user) {
         return null;
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Root, Object.assign({ onClick: handleOpen, className: classNames(classes.root, className) }, rest),
-            React.createElement(FormattedMessage, { id: "ui.accountDeleteButton.buttonLabel", defaultMessage: "ui.accountDeleteButton.buttonLabel" })),
-        open && (React.createElement(DialogRoot, { title: React.createElement(FormattedMessage, { id: "ui.accountDeleteButton.dialogTitle", defaultMessage: "ui.accountDeleteButton.dialogTitle" }), onClose: handleClose, open: open, DialogContentProps: {} },
-            React.createElement(AccountDelete, { onDeleteAccount: handleDelete })))));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ onClick: handleOpen, className: classNames(classes.root, className) }, rest, { children: _jsx(FormattedMessage, { id: "ui.accountDeleteButton.buttonLabel", defaultMessage: "ui.accountDeleteButton.buttonLabel" }) })), open && (_jsx(DialogRoot, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.accountDeleteButton.dialogTitle", defaultMessage: "ui.accountDeleteButton.dialogTitle" }), onClose: handleClose, open: open, DialogContentProps: {} }, { children: _jsx(AccountDelete, { onDeleteAccount: handleDelete }) })))] }));
 }

package/lib/esm/components/AccountRecover/AccountRecover.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { useSCUser } from '@selfcommunity/react-core';
 import { Box, Button, Alert } from '@mui/material';
@@ -100,15 +101,10 @@ export default function AccountRecover(inProps) {
         return null;
     }
     // RENDER
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), isSucceed ? (React.createElement(Alert, { severity: "success", className: classes.success },
-        intl.formatMessage({ id: 'ui.accountRecover.success', defaultMessage: 'ui.accountRecover.success' }, {
-            email,
-            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-            // @ts-ignore
-            b: (chunks) => React.createElement("b", null, chunks)
-        }),
-        successAction)) : (React.createElement("form", { className: classes.form, onSubmit: handleSubmit },
-        React.createElement(EmailTextField, Object.assign({ className: classes.email, disabled: isSubmitting, label: React.createElement(FormattedMessage, { id: "ui.accountRecover.email.label", defaultMessage: "ui.accountRecover.email.label" }) }, TextFieldProps, { value: email, onChange: handleChange, error: Boolean(emailError), helperText: emailError && (React.createElement(FormattedMessage, { id: `ui.accountRecover.email.error.${emailError}`, defaultMessage: `ui.accountRecover.email.error.${emailError}` })) })),
-        React.createElement(Button, Object.assign({ type: "submit" }, ButtonProps, { disabled: !email || Boolean(emailError) || isSubmitting }),
-            React.createElement(FormattedMessage, { id: "ui.accountRecover.submit", defaultMessage: "ui.accountRecover.submit" }))))));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: isSucceed ? (_jsxs(Alert, Object.assign({ severity: "success", className: classes.success }, { children: [intl.formatMessage({ id: 'ui.accountRecover.success', defaultMessage: 'ui.accountRecover.success' }, {
+                    email,
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                    // @ts-ignore
+                    b: (chunks) => _jsx("b", { children: chunks })
+                }), successAction] }))) : (_jsxs("form", Object.assign({ className: classes.form, onSubmit: handleSubmit }, { children: [_jsx(EmailTextField, Object.assign({ className: classes.email, disabled: isSubmitting, label: _jsx(FormattedMessage, { id: "ui.accountRecover.email.label", defaultMessage: "ui.accountRecover.email.label" }) }, TextFieldProps, { value: email, onChange: handleChange, error: Boolean(emailError), helperText: emailError && (_jsx(FormattedMessage, { id: `ui.accountRecover.email.error.${emailError}`, defaultMessage: `ui.accountRecover.email.error.${emailError}` })) })), _jsx(Button, Object.assign({ type: "submit" }, ButtonProps, { disabled: !email || Boolean(emailError) || isSubmitting }, { children: _jsx(FormattedMessage, { id: "ui.accountRecover.submit", defaultMessage: "ui.accountRecover.submit" }) }))] }))) })));
 }

package/lib/esm/components/AccountReset/AccountReset.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useEffect, useState } from 'react';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { useSCUser } from '@selfcommunity/react-core';
 import { Alert, Box, Button, CircularProgress } from '@mui/material';
@@ -140,15 +141,5 @@ export default function AccountReset(inProps) {
         return null;
     }
     // RENDER
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), isSucceed ? (React.createElement(Alert, { severity: "success", className: classes.success },
-        intl.formatMessage({ id: 'ui.accountReset.success', defaultMessage: 'ui.accountReset.success' }),
-        successAction)) : validationCodeError ? (React.createElement(Alert, { severity: "error", className: classes.error },
-        React.createElement(FormattedMessage, { id: "ui.accountReset.code.error", defaultMessage: "ui.accountReset.code.error" }),
-        errorAction)) : isLoading ? (React.createElement(Box, { className: classes.validating },
-        React.createElement(CircularProgress, null),
-        React.createElement("p", null,
-            React.createElement(FormattedMessage, { id: "ui.accountReset.code.validatingToken", defaultMessage: "ui.accountReset.code.validatingToken" })))) : (React.createElement("form", { className: classes.form, onSubmit: handleSubmit },
-        React.createElement(PasswordTextField, Object.assign({ className: classes.password, disabled: isSubmitting, label: React.createElement(FormattedMessage, { id: "ui.accountReset.password.label", defaultMessage: "ui.accountReset.password.label" }) }, TextFieldProps, { value: password, onChange: handleChange, error: Boolean(passwordError), helperText: passwordError && (React.createElement(FormattedMessage, { id: `ui.accountReset.password.error.${passwordError}`, defaultMessage: `ui.accountReset.password.error.${passwordError}` })) })),
-        React.createElement(Button, Object.assign({ type: "submit" }, ButtonProps, { disabled: !password || isSubmitting }),
-            React.createElement(FormattedMessage, { id: "ui.accountReset.submit", defaultMessage: "ui.accountReset.submit" }))))));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: isSucceed ? (_jsxs(Alert, Object.assign({ severity: "success", className: classes.success }, { children: [intl.formatMessage({ id: 'ui.accountReset.success', defaultMessage: 'ui.accountReset.success' }), successAction] }))) : validationCodeError ? (_jsxs(Alert, Object.assign({ severity: "error", className: classes.error }, { children: [_jsx(FormattedMessage, { id: "ui.accountReset.code.error", defaultMessage: "ui.accountReset.code.error" }), errorAction] }))) : isLoading ? (_jsxs(Box, Object.assign({ className: classes.validating }, { children: [_jsx(CircularProgress, {}), _jsx("p", { children: _jsx(FormattedMessage, { id: "ui.accountReset.code.validatingToken", defaultMessage: "ui.accountReset.code.validatingToken" }) })] }))) : (_jsxs("form", Object.assign({ className: classes.form, onSubmit: handleSubmit }, { children: [_jsx(PasswordTextField, Object.assign({ className: classes.password, disabled: isSubmitting, label: _jsx(FormattedMessage, { id: "ui.accountReset.password.label", defaultMessage: "ui.accountReset.password.label" }) }, TextFieldProps, { value: password, onChange: handleChange, error: Boolean(passwordError), helperText: passwordError && (_jsx(FormattedMessage, { id: `ui.accountReset.password.error.${passwordError}`, defaultMessage: `ui.accountReset.password.error.${passwordError}` })) })), _jsx(Button, Object.assign({ type: "submit" }, ButtonProps, { disabled: !password || isSubmitting }, { children: _jsx(FormattedMessage, { id: "ui.accountReset.submit", defaultMessage: "ui.accountReset.submit" }) }))] }))) })));
 }

package/lib/esm/components/AccountVerify/AccountVerify.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { useSCUser } from '@selfcommunity/react-core';
 import { Alert, Box, CircularProgress } from '@mui/material';
@@ -83,11 +84,5 @@ export default function AccountVerify(inProps) {
         return null;
     }
     // RENDER
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), succeed ? (React.createElement(Alert, { severity: "success", className: classes.success },
-        typeof succeed === 'string' ? succeed : React.createElement(FormattedMessage, { id: "ui.accountVerify.success", defaultMessage: "ui.accountVerify.success" }),
-        successAction)) : error ? (React.createElement(Alert, { severity: "error", className: classes.error },
-        React.createElement(FormattedMessage, { id: "ui.accountVerify.error", defaultMessage: "ui.accountVerify.error" }),
-        errorAction)) : (React.createElement(React.Fragment, null,
-        React.createElement(CircularProgress, null),
-        React.createElement(FormattedMessage, { id: "ui.accountVerify.verifying", defaultMessage: "ui.accountVerify.verifying" })))));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: succeed ? (_jsxs(Alert, Object.assign({ severity: "success", className: classes.success }, { children: [typeof succeed === 'string' ? succeed : _jsx(FormattedMessage, { id: "ui.accountVerify.success", defaultMessage: "ui.accountVerify.success" }), successAction] }))) : error ? (_jsxs(Alert, Object.assign({ severity: "error", className: classes.error }, { children: [_jsx(FormattedMessage, { id: "ui.accountVerify.error", defaultMessage: "ui.accountVerify.error" }), errorAction] }))) : (_jsxs(_Fragment, { children: [_jsx(CircularProgress, {}), _jsx(FormattedMessage, { id: "ui.accountVerify.verifying", defaultMessage: "ui.accountVerify.verifying" })] })) })));
 }

package/lib/esm/components/BottomNavigation/BottomNavigation.js

@@ -1,6 +1,7 @@
 import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Badge, BottomNavigation as MuiBottomNavigation, BottomNavigationAction, Icon, styled } from '@mui/material';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { Link, SCPreferences, SCRoutes, UserUtils, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
@@ -61,20 +62,27 @@ export default function BottomNavigation(inProps) {
     // MEMO
     const privateMessagingEnabled = useMemo(() => features.includes(SCFeatureName.PRIVATE_MESSAGING), [features]);
     const groupsEnabled = useMemo(() => features.includes(SCFeatureName.GROUPING) && features.includes(SCFeatureName.TAGGING), [features]);
+    const eventsEnabled = useMemo(() => features && features.includes(SCFeatureName.EVENT) && features.includes(SCFeatureName.TAGGING), [features]);
+    const exploreStreamEnabled = preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value;
+    const postOnlyStaffEnabled = preferences[SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value;
+    const contentAvailable = preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
     const isIOS = useMemo(() => iOS(), []);
     // RENDER
-    return (React.createElement(Root, Object.assign({ className: classNames(className, classes.root, { [classes.ios]: isIOS }) }, rest), children
-        ? children
-        : [
-            React.createElement(BottomNavigationAction, { key: "home", className: classes.action, component: Link, to: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: React.createElement(Icon, null, "home") }),
-            (scUserContext.user || preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value) &&
-                preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value ? (React.createElement(BottomNavigationAction, { key: "explore", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: React.createElement(Icon, null, "explore") })) : null,
-            !preferences[SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value ||
-                (UserUtils.isStaff(scUserContext.user) && preferences[SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value) ? (React.createElement(BottomNavigationAction, { key: "composer", className: classNames(classes.composer, classes.action), component: ComposerIconButton, disableRipple: true })) : null,
-            groupsEnabled && scUserContext.user ? (React.createElement(BottomNavigationAction, { key: "groups", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), icon: React.createElement(Icon, null, "groups") })) : null,
-            scUserContext.user && !groupsEnabled ? (React.createElement(BottomNavigationAction, { key: "notifications", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: React.createElement(Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
-                    React.createElement(Icon, null, "notifications_active")) })) : null,
-            privateMessagingEnabled && scUserContext.user ? (React.createElement(BottomNavigationAction, { key: "messages", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), icon: React.createElement(Badge, { badgeContent: 0, color: "secondary" },
-                    React.createElement(Icon, null, "email")) })) : null
-        ]));
+    return (_jsx(Root, Object.assign({ className: classNames(className, classes.root, { [classes.ios]: isIOS }) }, rest, { children: children
+            ? children
+            : [
+                _jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: _jsx(Icon, { children: "home" }) }, "home"),
+                (scUserContext.user || contentAvailable) && exploreStreamEnabled ? (_jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: _jsx(Icon, { children: "explore" }) }, "explore")) : null,
+                (!postOnlyStaffEnabled || (UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
+                    ((groupsEnabled && !eventsEnabled) || (!groupsEnabled && eventsEnabled)) &&
+                    !exploreStreamEnabled ? (_jsx(BottomNavigationAction, { className: classNames(classes.composer, classes.action), component: ComposerIconButton, disableRipple: true }, "composer")) : null,
+                groupsEnabled && scUserContext.user ? (_jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), icon: _jsx(Icon, { children: "groups" }) }, "groups")) : null,
+                (!postOnlyStaffEnabled || (UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
+                    groupsEnabled &&
+                    eventsEnabled &&
+                    !exploreStreamEnabled ? (_jsx(BottomNavigationAction, { className: classNames(classes.composer, classes.action), component: ComposerIconButton, disableRipple: true }, "composer")) : null,
+                eventsEnabled ? (_jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}), icon: _jsx(Icon, { children: "CalendarIcon" }) }, "events")) : null,
+                scUserContext.user && !groupsEnabled && !eventsEnabled ? (_jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: _jsx(Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: _jsx(Icon, { children: "notifications_active" }) })) }, "notifications")) : null,
+                privateMessagingEnabled && scUserContext.user ? (_jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), icon: _jsx(Badge, Object.assign({ badgeContent: 0, color: "secondary" }, { children: _jsx(Icon, { children: "email" }) })) }, "messages")) : null
+            ] })));
 }

package/lib/esm/components/BroadcastMessages/BroadcastMessages.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Avatar, Box, Button, CardContent } from '@mui/material';
 import PubSub from 'pubsub-js';
@@ -145,13 +146,5 @@ export default function BroadcastMessages(inProps) {
         onHeightChange && onHeightChange();
     }, [data.results.length, loading, viewAll, cacheStrategy]);
     const messagesToShow = [...unViewedMessages, ...data.results.slice(unViewedMessages.length, viewAll ? viewedMessageCounter : 1)];
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
-        messagesToShow.map((message, index) => (React.createElement(Box, { key: index },
-            React.createElement(Message, Object.assign({ message: message }, MessageProps, { onClose: handleDisposeMessage, onRead: handleMarkRead }))))),
-        loading && !disableLoader && React.createElement(MessageSkeleton, null),
-        loading !== null && !loading && (data.next || (data.count > 1 && viewedMessageCounter > 0 && !viewAll)) && (React.createElement(Widget, { className: classes.boxLoadMore },
-            React.createElement(CardContent, null,
-                React.createElement(Button, { variant: "text", onClick: fetchOtherMessages, disabled: loading, color: "inherit", classes: { root: classes.buttonLoadMore } },
-                    React.createElement(Avatar, { component: "span", className: classes.avatarLoadMore, alt: preferences[SCPreferences.TEXT_APPLICATION_NAME], src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }),
-                    React.createElement(FormattedMessage, { id: "ui.broadcastMessages.loadMore", defaultMessage: "ui.broadcastMessages.loadMore" })))))));
+    return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [messagesToShow.map((message, index) => (_jsx(Box, { children: _jsx(Message, Object.assign({ message: message }, MessageProps, { onClose: handleDisposeMessage, onRead: handleMarkRead })) }, index))), loading && !disableLoader && _jsx(MessageSkeleton, {}), loading !== null && !loading && (data.next || (data.count > 1 && viewedMessageCounter > 0 && !viewAll)) && (_jsx(Widget, Object.assign({ className: classes.boxLoadMore }, { children: _jsx(CardContent, { children: _jsxs(Button, Object.assign({ variant: "text", onClick: fetchOtherMessages, disabled: loading, color: "inherit", classes: { root: classes.buttonLoadMore } }, { children: [_jsx(Avatar, { component: "span", className: classes.avatarLoadMore, alt: preferences[SCPreferences.TEXT_APPLICATION_NAME], src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), _jsx(FormattedMessage, { id: "ui.broadcastMessages.loadMore", defaultMessage: "ui.broadcastMessages.loadMore" })] })) }) })))] })));
 }

package/lib/esm/components/BroadcastMessages/Message.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useEffect, useMemo, useState } from 'react';
 import { Avatar, Box, CardContent, CardHeader, CardMedia, Chip, CircularProgress, Fade, IconButton, ListItem, ListItemAvatar, ListItemText, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Icon from '@mui/material/Icon';
@@ -82,14 +83,7 @@ export default function Message(props) {
     }, [message]);
     // RENDER
     const renderContent = (banner) => {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(CardContent, { className: classes.title },
-                React.createElement(Typography, { variant: "h6" }, banner.title)),
-            banner.image && React.createElement(CardMedia, { className: classes.media, component: "img", image: banner.image, alt: banner.title }),
-            (banner.body_text || banner.link_text) && (React.createElement(CardContent, { className: classes.content },
-                banner.body_text && (React.createElement(Typography, { variant: "body1", color: "text.secondary" }, banner.body_text)),
-                banner.link_text && (React.createElement(Typography, { variant: "body1", color: "text.secondary" },
-                    React.createElement("a", { href: banner.link, target: banner.open_in_new_tab ? '_blank' : '_self' }, banner.link_text)))))));
+        return (_jsxs(_Fragment, { children: [_jsx(CardContent, Object.assign({ className: classes.title }, { children: _jsx(Typography, Object.assign({ variant: "h6" }, { children: banner.title })) })), banner.image && _jsx(CardMedia, { className: classes.media, component: "img", image: banner.image, alt: banner.title }), (banner.body_text || banner.link_text) && (_jsxs(CardContent, Object.assign({ className: classes.content }, { children: [banner.body_text && (_jsx(Typography, Object.assign({ variant: "body1", color: "text.secondary" }, { children: banner.body_text }))), banner.link_text && (_jsx(Typography, Object.assign({ variant: "body1", color: "text.secondary" }, { children: _jsx("a", Object.assign({ href: banner.link, target: banner.open_in_new_tab ? '_blank' : '_self' }, { children: banner.link_text })) })))] })))] }));
     };
     // Banner
     const { banner } = message;
@@ -98,21 +92,10 @@ export default function Message(props) {
          * With a fade in transition show the Card (Widget)
          * Include also MarkRead component to
          */
-        return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
-            React.createElement(Fade, { in: open, unmountOnExit: true },
-                React.createElement(Box, null,
-                    message.viewed_at === null && !disableMarkRead && (React.createElement(MarkRead, { endpoint: Endpoints.BroadcastMessagesMarkRead, data: { banner_ids: [message.id] }, callback: handleOnRead })),
-                    React.createElement(CardHeader, { className: classes.header, avatar: React.createElement(Avatar, { alt: preferences[SCPreferences.TEXT_APPLICATION_NAME], src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), action: template === SCBroadcastMessageTemplateType.DETAIL && (React.createElement(IconButton, { "aria-label": "close", onClick: handleClose, disabled: closing }, closing ? React.createElement(CircularProgress, { size: 20 }) : React.createElement(Icon, null, "close"))), title: React.createElement(Chip, { color: "secondary", size: "small", label: React.createElement(FormattedMessage, { id: "ui.broadcastMessages.message.chip", defaultMessage: "ui.broadcastMessages.message.chip" }) }) }),
-                    renderContent(banner)))));
+        return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: _jsx(Fade, Object.assign({ in: open, unmountOnExit: true }, { children: _jsxs(Box, { children: [message.viewed_at === null && !disableMarkRead && (_jsx(MarkRead, { endpoint: Endpoints.BroadcastMessagesMarkRead, data: { banner_ids: [message.id] }, callback: handleOnRead })), _jsx(CardHeader, { className: classes.header, avatar: _jsx(Avatar, { alt: preferences[SCPreferences.TEXT_APPLICATION_NAME], src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), action: template === SCBroadcastMessageTemplateType.DETAIL && (_jsx(IconButton, Object.assign({ "aria-label": "close", onClick: handleClose, disabled: closing }, { children: closing ? _jsx(CircularProgress, { size: 20 }) : _jsx(Icon, { children: "close" }) }))), title: _jsx(Chip, { color: "secondary", size: "small", label: _jsx(FormattedMessage, { id: "ui.broadcastMessages.message.chip", defaultMessage: "ui.broadcastMessages.message.chip" }) }) }), renderContent(banner)] }) })) })));
     }
     // SCBroadcastMessageTemplateType.SNIPPET
-    return (React.createElement(Root, Object.assign({ id: id, className: className }, rest),
-        React.createElement(ListItem, { alignItems: 'center', component: 'div', classes: {
+    return (_jsx(Root, Object.assign({ id: id, className: className }, rest, { children: _jsxs(ListItem, Object.assign({ alignItems: 'center', component: 'div', classes: {
                 root: classNames(classes.listItemSnippet, classes.listItemSnippetNew)
-            } },
-            React.createElement(ListItemAvatar, { classes: { root: classes.messageIconWrap } },
-                React.createElement(Avatar, { variant: "circular", classes: { root: classes.messageIconSnippet } },
-                    React.createElement(Icon, null, "info"))),
-            React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(Link, { to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) },
-                    React.createElement(Typography, { component: "span", color: "inherit" }, banner.title)) }))));
+            } }, { children: [_jsx(ListItemAvatar, Object.assign({ classes: { root: classes.messageIconWrap } }, { children: _jsx(Avatar, Object.assign({ variant: "circular", classes: { root: classes.messageIconSnippet } }, { children: _jsx(Icon, { children: "info" }) })) })), _jsx(ListItemText, { disableTypography: true, primary: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: _jsx(Typography, Object.assign({ component: "span", color: "inherit" }, { children: banner.title })) })) })] })) })));
 }

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Box, CardContent, CardHeader, Skeleton, useTheme } from '@mui/material';
 import { styled } from '@mui/material/styles';
@@ -40,17 +41,7 @@ const MessageSkeletonRoot = styled(Widget, {
  */
 export function MessageSkeleton(props) {
     const theme = useTheme();
-    return (React.createElement(MessageSkeletonRoot, { className: messageClasses.root },
-        React.createElement(CardHeader, { className: messageClasses.header, avatar: React.createElement(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: React.createElement(Skeleton, { animation: "wave", variant: "rectangular", width: 60, height: 20 }) }),
-        React.createElement(CardContent, { className: messageClasses.title },
-            React.createElement(React.Fragment, null,
-                React.createElement(Skeleton, { animation: "wave", height: 10, width: "80%" }))),
-        React.createElement(Box, { className: messageClasses.media },
-            React.createElement(Skeleton, { height: 190, animation: "wave", variant: "rectangular" })),
-        React.createElement(CardContent, { className: messageClasses.content },
-            React.createElement(React.Fragment, null,
-                React.createElement(Skeleton, { animation: "wave", height: 10, width: "80%" }),
-                React.createElement(Skeleton, { animation: "wave", height: 10, width: 60 })))));
+    return (_jsxs(MessageSkeletonRoot, Object.assign({ className: messageClasses.root }, { children: [_jsx(CardHeader, { className: messageClasses.header, avatar: _jsx(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: _jsx(Skeleton, { animation: "wave", variant: "rectangular", width: 60, height: 20 }) }), _jsx(CardContent, Object.assign({ className: messageClasses.title }, { children: _jsx(React.Fragment, { children: _jsx(Skeleton, { animation: "wave", height: 10, width: "80%" }) }) })), _jsx(Box, Object.assign({ className: messageClasses.media }, { children: _jsx(Skeleton, { height: 190, animation: "wave", variant: "rectangular" }) })), _jsx(CardContent, Object.assign({ className: messageClasses.content }, { children: _jsxs(React.Fragment, { children: [_jsx(Skeleton, { animation: "wave", height: 10, width: "80%" }), _jsx(Skeleton, { animation: "wave", height: 10, width: 60 })] }) }))] })));
 }
 const classes = {
     root: `${PREFIX}-skeleton-root`
@@ -80,8 +71,5 @@ const Root = styled(Box, {
  *
  */
 export default function BroadcastMessagesSkeleton(props) {
-    return (React.createElement(Root, Object.assign({ className: classes.root }, props),
-        React.createElement(MessageSkeleton, null),
-        React.createElement(MessageSkeleton, null),
-        React.createElement(MessageSkeleton, null)));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, props, { children: [_jsx(MessageSkeleton, {}), _jsx(MessageSkeleton, {}), _jsx(MessageSkeleton, {})] })));
 }

package/lib/esm/components/Categories/Categories.js

@@ -1,5 +1,6 @@
 import { __awaiter, __rest } from "tslib";
-import React, { useContext, useEffect, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box, Grid, TextField, Typography } from '@mui/material';
 import { CategoryService, Endpoints } from '@selfcommunity/api-services';
@@ -124,18 +125,12 @@ export default function Categories(inProps) {
      * Renders categories list
      */
     const filteredCategories = sortByAttr(getFilteredCategories(), 'order');
-    const c = (React.createElement(React.Fragment, null,
-        showFilters && (React.createElement(Grid, { container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, filters ? (filters) : (React.createElement(Grid, { item: true, xs: 12, md: 6 },
-            React.createElement(TextField, { fullWidth: true, value: filterName, label: React.createElement(FormattedMessage, { id: "ui.categories.filterByName", defaultMessage: "ui.categories.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }))))),
-        loading ? (React.createElement(CategoriesSkeletonComponent, Object.assign({}, CategoriesSkeletonProps))) : (React.createElement(Grid, { container: true, spacing: { xs: 3 }, className: classes.categories }, !filteredCategories.length ? (React.createElement(Grid, { item: true },
-            React.createElement(Typography, { className: classes.noResults, variant: "body2" },
-                React.createElement(FormattedMessage, { id: "ui.categories.noResults", defaultMessage: "ui.categories.noResults" })))) : (React.createElement(React.Fragment, null, filteredCategories.map((category) => (React.createElement(Grid, { item: true, xs: 12, sm: 6, md: 6, lg: 4, key: category.id },
-            React.createElement(CategoryComponent, Object.assign({ category: category }, CategoryComponentProps, { showTooltip: true, className: classes.category })))))))))));
+    const c = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, { children: filters ? (filters) : (_jsx(Grid, Object.assign({ item: true, xs: 12, md: 6 }, { children: _jsx(TextField, { fullWidth: true, value: filterName, label: _jsx(FormattedMessage, { id: "ui.categories.filterByName", defaultMessage: "ui.categories.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }) }))) }))), loading ? (_jsx(CategoriesSkeletonComponent, Object.assign({}, CategoriesSkeletonProps))) : (_jsx(Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.categories }, { children: !filteredCategories.length ? (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.categories.noResults", defaultMessage: "ui.categories.noResults" }) })) }))) : (_jsx(_Fragment, { children: filteredCategories.map((category) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 6, md: 6, lg: 4 }, { children: _jsx(CategoryComponent, Object.assign({ category: category }, CategoryComponentProps, { showTooltip: true, className: classes.category })) }), category.id))) })) })))] }));
     /**
      * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
      */
     if (!contentAvailability && !scUserContext.user) {
-        return React.createElement(HiddenPlaceholder, null);
+        return _jsx(HiddenPlaceholder, {});
     }
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), c));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: c })));
 }

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

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { Box, Grid } from '@mui/material';
 import CategorySkeleton from '../Category/Skeleton';
@@ -36,7 +36,5 @@ const Root = styled(Box, {
  */
 export default function CategoriesSkeleton(inProps) {
     const { className, CategorySkeletonProps = {} } = inProps, rest = __rest(inProps, ["className", "CategorySkeletonProps"]);
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest),
-        React.createElement(Grid, { container: true, spacing: { xs: 3 }, className: classes.categories }, [...Array(15)].map((category, index) => (React.createElement(Grid, { item: true, xs: 12, sm: 6, md: 4, key: index },
-            React.createElement(CategorySkeleton, Object.assign({ elevation: 0, variant: 'outlined' }, CategorySkeletonProps))))))));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.categories }, { children: [...Array(15)].map((category, index) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 6, md: 4 }, { children: _jsx(CategorySkeleton, Object.assign({ elevation: 0, variant: 'outlined' }, CategorySkeletonProps)) }), index))) })) })));
 }

package/lib/esm/components/CategoriesPopularWidget/CategoriesPopularWidget.js

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useContext, useEffect, useMemo, useReducer, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Button, CardContent, List, ListItem, Typography, useMediaQuery, useTheme } from '@mui/material';
@@ -179,24 +180,11 @@ export default function CategoriesPopularWidget(inProps) {
     };
     // RENDER
     if ((!contentAvailability && !scUserContext.user) || (state.initialized && autoHide && !state.count)) {
-        return React.createElement(HiddenPlaceholder, null);
+        return _jsx(HiddenPlaceholder, {});
     }
     if (!state.initialized) {
-        return React.createElement(Skeleton, null);
+        return _jsx(Skeleton, {});
     }
-    const content = (React.createElement(CardContent, null,
-        React.createElement(Typography, { className: classes.title, variant: "h5" },
-            React.createElement(FormattedMessage, { id: "ui.categoriesPopularWidget.title", defaultMessage: "ui.categoriesPopularWidget.title" })),
-        !state.count ? (React.createElement(Typography, { className: classes.noResults, variant: "body2" },
-            React.createElement(FormattedMessage, { id: "ui.categoriesPopularWidget.noResults", defaultMessage: "ui.categoriesPopularWidget.noResults" }))) : (React.createElement(React.Fragment, null,
-            React.createElement(List, null, state.results.slice(0, state.visibleItems).map((category) => (React.createElement(ListItem, { key: category.id },
-                React.createElement(Category, Object.assign({ elevation: 0, category: category, categoryFollowButtonProps: { onFollow: handleFollowersUpdate } }, CategoryProps)))))),
-            state.count > state.visibleItems && (React.createElement(Button, { className: classes.showMore, onClick: handleToggleDialogOpen },
-                React.createElement(FormattedMessage, { id: "ui.categoriesPopularWidget.button.showAll", defaultMessage: "ui.categoriesPopularWidget.button.showAll" }))))),
-        openDialog && (React.createElement(DialogRoot, Object.assign({ className: classes.dialogRoot, title: React.createElement(FormattedMessage, { defaultMessage: "ui.categoriesPopularWidget.title", id: "ui.categoriesPopularWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps),
-            React.createElement(InfiniteScroll, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: React.createElement(CategorySkeleton, Object.assign({ elevation: 0 }, CategoryProps)), height: isMobile ? '100%' : 400, endMessage: React.createElement(Typography, { className: classes.endMessage },
-                    React.createElement(FormattedMessage, { id: "ui.categoriesPopularWidget.noMoreResults", defaultMessage: "ui.categoriesPopularWidget.noMoreResults" })) },
-                React.createElement(List, null, state.results.map((c) => (React.createElement(ListItem, { key: c.id },
-                    React.createElement(Category, Object.assign({ elevation: 0, category: c }, CategoryProps, { categoryFollowButtonProps: { onFollow: handleFollowersUpdate } })))))))))));
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), content));
+    const content = (_jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.categoriesPopularWidget.title", defaultMessage: "ui.categoriesPopularWidget.title" }) })), !state.count ? (_jsx(Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.categoriesPopularWidget.noResults", defaultMessage: "ui.categoriesPopularWidget.noResults" }) }))) : (_jsxs(React.Fragment, { children: [_jsx(List, { children: state.results.slice(0, state.visibleItems).map((category) => (_jsx(ListItem, { children: _jsx(Category, Object.assign({ elevation: 0, category: category, categoryFollowButtonProps: { onFollow: handleFollowersUpdate } }, CategoryProps)) }, category.id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: _jsx(FormattedMessage, { id: "ui.categoriesPopularWidget.button.showAll", defaultMessage: "ui.categoriesPopularWidget.button.showAll" }) })))] })), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.categoriesPopularWidget.title", id: "ui.categoriesPopularWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(CategorySkeleton, Object.assign({ elevation: 0 }, CategoryProps)), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.categoriesPopularWidget.noMoreResults", defaultMessage: "ui.categoriesPopularWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((c) => (_jsx(ListItem, { children: _jsx(Category, Object.assign({ elevation: 0, category: c }, CategoryProps, { categoryFollowButtonProps: { onFollow: handleFollowersUpdate } })) }, c.id))) }) })) })))] }));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: content })));
 }

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

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