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

package/lib/cjs/shared/EventActionsMenu/index.js

@@ -0,0 +1,159 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const react_intl_1 = require("react-intl");
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const system_1 = require("@mui/system");
+const react_core_1 = require("@selfcommunity/react-core");
+const ConfirmDialog_1 = tslib_1.__importDefault(require("../../shared/ConfirmDialog/ConfirmDialog"));
+const api_services_1 = require("@selfcommunity/api-services");
+const EventActionsMenu_1 = require("../../constants/EventActionsMenu");
+const utils_1 = require("@selfcommunity/utils");
+const notistack_1 = require("notistack");
+const PREFIX = 'SCEventActionsMenu';
+const classes = {
+    root: `${PREFIX}-root`,
+    drawerRoot: `${PREFIX}-drawer-root`,
+    menuRoot: `${PREFIX}-menu-root`,
+    paper: `${PREFIX}-paper`,
+    item: `${PREFIX}-item`
+};
+const Root = (0, styles_1.styled)(material_1.IconButton, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+const SwipeableDrawerRoot = (0, styles_1.styled)(material_1.SwipeableDrawer, {
+    name: PREFIX,
+    slot: 'DrawerRoot'
+})(() => ({}));
+const MenuRoot = (0, styles_1.styled)(material_1.Menu, {
+    name: PREFIX,
+    slot: 'MenuRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS EventActionsMenu component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {EventActionsMenu} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCEventActionsMenu` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEventActionsMenu-root|Styles applied to the root element.|
+ |drawerRoot|.SCEventActionsMenu-drawer-root|Styles applied to the drawer root element.|
+ |menuRoot|.SCEventActionsMenu-menu-root|Styles applied to the menu root element.|
+ |paper|.SCEventActionsMenu-paper|Styles applied to the paper element.|
+ |item|.SCEventActionsMenu-item|Styles applied to the item element.|
+
+
+ * @param inProps
+ */
+function EventActionsMenu(inProps) {
+    var _a;
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, event, eventId, onDeleteConfirm } = props, rest = tslib_1.__rest(props, ["className", "event", "eventId", "onDeleteConfirm"]);
+    // STATE
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const [openConfirmDialog, setOpenConfirmDialog] = (0, react_1.useState)(false);
+    // HOOKS
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    const scRoutingContext = (0, react_core_1.useSCRouting)();
+    const scUserContext = (0, react_core_1.useSCUser)();
+    const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
+    const isEventAdmin = (0, react_1.useMemo)(() => { var _a; return scUserContext.user && ((_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
+    const isEventFinished = (0, react_1.useMemo)(() => {
+        if (scEvent && !scEvent.running) {
+            return new Date().getTime() > new Date(scEvent.end_date || scEvent.start_date).getTime();
+        }
+        return false;
+    }, [scEvent]);
+    // HANDLERS
+    const handleOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleCloseDialog = () => {
+        setOpenConfirmDialog(false);
+        setAnchorEl(null);
+    };
+    /**
+     * Handles thread deletion
+     */
+    function handleDeleteThread() {
+        api_services_1.EventService.deleteEvent(scEvent.id)
+            .then(() => {
+            onDeleteConfirm();
+            handleCloseDialog();
+        })
+            .catch((error) => {
+            setOpenConfirmDialog(false);
+            console.log(error);
+        });
+    }
+    const createGoogleCalendarLink = (event) => {
+        const baseUrl = 'https://www.google.com/calendar/render?action=TEMPLATE';
+        return `${baseUrl}&text=${encodeURIComponent(event.name)}&details=${encodeURIComponent(event.description)}&location=${encodeURIComponent(event.geolocation)}&dates=${event.start_date}/${event.end_date}`;
+    };
+    /**
+     * Handles actions
+     */
+    function handleAction(action) {
+        if (action === EventActionsMenu_1.GET_EVENT_LINK) {
+            (0, utils_1.copyTextToClipboard)(`${location.protocol}//${location.host}${scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent)}`).then(() => {
+                (0, notistack_1.enqueueSnackbar)((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.permanentLinkCopied", defaultMessage: "ui.common.permanentLinkCopied" }), {
+                    variant: 'success',
+                    autoHideDuration: 3000
+                });
+            });
+            handleClose();
+        }
+        else if (action === EventActionsMenu_1.ADD_EVENT_TO_CALENDAR) {
+            window.open(createGoogleCalendarLink(scEvent), '_blank', 'noopener,noreferrer');
+            handleClose();
+        }
+        else if (action === EventActionsMenu_1.CANCEL_EVENT) {
+            setOpenConfirmDialog(true);
+            handleClose();
+        }
+    }
+    /**
+     *
+     */
+    const renderList = () => {
+        return [
+            (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(EventActionsMenu_1.GET_EVENT_LINK) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "link" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.eventActionsMenu.item.link", defaultMessage: "ui.shared.eventActionsMenu.item.link" })] }), "link"),
+            (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(EventActionsMenu_1.ADD_EVENT_TO_CALENDAR) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "CalendarIcon" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.eventActionsMenu.item.calendar", defaultMessage: "ui.shared.eventActionsMenu.item.calendar" })] }), "calendar"),
+            isEventAdmin &&
+                !isEventFinished && [
+                (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "divider"),
+                (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(EventActionsMenu_1.CANCEL_EVENT) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.eventActionsMenu.item.cancel", defaultMessage: "ui.shared.eventActionsMenu.item.cancel" })] }), "cancel")
+            ]
+        ];
+    };
+    if (!scEvent) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "more_vert" }) })), isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: renderList() }) }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openConfirmDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.msg", defaultMessage: "ui.shared.eventActionsMenu.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.confirm", defaultMessage: "ui.shared.eventActionsMenu.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog }))] }));
+}
+exports.default = EventActionsMenu;

package/lib/cjs/shared/EventInfoDetails/index.d.ts

@@ -0,0 +1,23 @@
+import { SCEventType } from '@selfcommunity/types';
+import { ReactNode } from 'react';
+export interface EventInfoDetailsProps {
+    event: SCEventType;
+    eventId?: number;
+    hideDateIcon?: boolean;
+    hideRecurringIcon?: boolean;
+    hidePrivacyIcon?: boolean;
+    hideLocationIcon?: boolean;
+    hideCreatedIcon?: boolean;
+    hasDateInfo?: boolean;
+    hasRecurringInfo?: boolean;
+    hasPrivacyInfo?: boolean;
+    hasLocationInfo?: boolean;
+    hasCreatedInfo?: boolean;
+    hasInProgress?: boolean;
+    beforeDateInfo?: ReactNode | null;
+    beforeRecurringInfo?: ReactNode | null;
+    beforePrivacyInfo?: ReactNode | null;
+    beforeLocationInfo?: ReactNode | null;
+    beforeCreatedInfo?: ReactNode | null;
+}
+export default function EventInfoDetails(inProps: EventInfoDetailsProps): JSX.Element;

package/lib/cjs/shared/EventInfoDetails/index.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
+const react_1 = require("react");
+const react_intl_1 = require("react-intl");
+const PREFIX = 'SCEventInfoDetails';
+const classes = {
+    root: `${PREFIX}-root`,
+    iconTextWrapper: `${PREFIX}-icon-text-wrapper`,
+    inProgress: `${PREFIX}-in-progress`,
+    link: `${PREFIX}-link`,
+    url: `${PREFIX}-url`,
+    creationWrapper: `${PREFIX}-creation-wrapper`
+};
+const Root = (0, material_1.styled)(material_1.Stack, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+function EventInfoDetails(inProps) {
+    // PROPS
+    const props = (0, material_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { event, eventId, hideDateIcon = false, hideRecurringIcon = false, hidePrivacyIcon = false, hideLocationIcon = false, hideCreatedIcon = false, hasDateInfo = true, hasRecurringInfo = false, hasPrivacyInfo = true, hasLocationInfo = true, hasCreatedInfo = false, hasInProgress = false, beforeDateInfo, beforeRecurringInfo, beforePrivacyInfo, beforeLocationInfo, beforeCreatedInfo } = props;
+    // HOOKS
+    const intl = (0, react_intl_1.useIntl)();
+    const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
+    const privacy = (0, react_1.useMemo)(() => (scEvent && scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ? 'ui.eventInfoDetails.privacy.public' : 'ui.eventInfoDetails.privacy.private'), [scEvent]);
+    const location = (0, react_1.useMemo)(() => (scEvent && scEvent.location === types_1.SCEventLocationType.ONLINE ? 'ui.eventInfoDetails.location.virtual' : 'ui.eventInfoDetails.location.inPerson'), [scEvent]);
+    if (!scEvent) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [beforeDateInfo, hasDateInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideDateIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: scEvent.active ? 'CalendarIcon' : 'calendar_off' })), (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: !scEvent.active ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.deleted.tooltip", defaultMessage: "ui.eventInfoDetails.deleted.tooltip" })) : null }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.date.startEndTime", defaultMessage: "ui.eventInfoDetails.date.startEndTime", values: {
+                                    date: intl.formatDate(scEvent.running ? scEvent.running_start_date : scEvent.next_start_date, {
+                                        weekday: 'long',
+                                        day: 'numeric',
+                                        year: 'numeric',
+                                        month: 'long'
+                                    }),
+                                    start: intl.formatDate(scEvent.running ? scEvent.running_start_date : scEvent.next_start_date, { hour: 'numeric', minute: 'numeric' })
+                                } }) })) })), hasInProgress && scEvent.active && scEvent.running && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.inProgress", defaultMessage: "ui.eventInfoDetails.inProgress" }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.inProgress }) })))] }))), beforeRecurringInfo, hasRecurringInfo && scEvent.recurring !== types_1.SCEventRecurrenceType.NEVER && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideRecurringIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "frequency" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventInfoDetails.frequency.${scEvent.recurring}.placeholder`, defaultMessage: `ui.eventInfoDetails.frequency.${scEvent.recurring}.placeholder` }) }))] }))), beforePrivacyInfo, hasPrivacyInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hidePrivacyIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ? 'public' : 'private' })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: privacy, defaultMessage: privacy }) })), "-", (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: location, defaultMessage: location }) }))] }))), beforeLocationInfo, hasLocationInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideLocationIcon && ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: scEvent.location === types_1.SCEventLocationType.ONLINE ? 'play_circle_outline' : 'add_location_alt' }))), scEvent.location === types_1.SCEventLocationType.ONLINE ? ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scEvent.link, target: "_blank", className: classes.link }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.url }, { children: scEvent.link })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.url }, { children: scEvent.geolocation })))] }))), beforeCreatedInfo, hasCreatedInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.creationWrapper }, { children: [!hideCreatedIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "create" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.date.create", defaultMessage: "ui.eventInfoDetails.date.create", values: {
+                                date: intl.formatDate(scEvent.created_at, {
+                                    weekday: 'long',
+                                    day: 'numeric',
+                                    year: 'numeric',
+                                    month: 'long'
+                                })
+                            } }) }))] })))] })));
+}
+exports.default = EventInfoDetails;

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

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_1 = require("@mui/material/styles");
 const PREFIX = 'SCHiddenPlaceholder';
 const Root = (0, styles_1.styled)('div', {
@@ -14,6 +13,6 @@ const Root = (0, styles_1.styled)('div', {
     display: 'none'
 }));
 function HiddenPlaceholder(props) {
-    return react_1.default.createElement(Root, Object.assign({}, props));
+    return (0, jsx_runtime_1.jsx)(Root, Object.assign({}, props));
 }
 exports.default = HiddenPlaceholder;

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const throttle_debounce_1 = require("throttle-debounce");
 const threshold_1 = require("../../utils/threshold");
 class InfiniteScroll extends react_1.Component {
@@ -225,23 +225,12 @@ class InfiniteScroll extends react_1.Component {
         // because heighted infiniteScroll visualy breaks
         // on drag down as overflow becomes visible
         const outerDivStyle = this.props.pullDownToRefresh && this.props.height ? { overflow: 'auto' } : {};
-        return (react_1.default.createElement("div", { style: outerDivStyle, className: "infinite-scroll-component__outerdiv" },
-            react_1.default.createElement("div", { className: `infinite-scroll-component ${this.props.className || ''}`, ref: (infScroll) => (this._infScroll = infScroll), style: style },
-                this.props.header,
-                this.props.pullDownToRefresh && (react_1.default.createElement("div", { style: { position: 'relative' }, ref: (pullDown) => (this._pullDown = pullDown) },
-                    react_1.default.createElement("div", { style: {
-                            position: 'absolute',
-                            left: 0,
-                            right: 0,
-                            top: -1 * this.maxPullDownDistance
-                        } }, this.state.pullToRefreshThresholdBreached ? this.props.releaseToRefreshContent : this.props.pullDownToRefreshContent))),
-                !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)));
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: outerDivStyle, className: "infinite-scroll-component__outerdiv" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `infinite-scroll-component ${this.props.className || ''}`, ref: (infScroll) => (this._infScroll = infScroll), style: style }, { children: [this.props.header, this.props.pullDownToRefresh && ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: { position: 'relative' }, ref: (pullDown) => (this._pullDown = pullDown) }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: {
+                                position: 'absolute',
+                                left: 0,
+                                right: 0,
+                                top: -1 * this.maxPullDownDistance
+                            } }, { children: this.state.pullToRefreshThresholdBreached ? this.props.releaseToRefreshContent : this.props.pullDownToRefreshContent })) }))), !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] })) })));
     }
 }
 exports.default = InfiniteScroll;

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const index_1 = tslib_1.__importDefault(require("../index"));
 const style = {
     height: 30,
@@ -23,12 +24,6 @@ function InfiniteScrollWithHeight() {
             setItems(items.concat(Array.from({ length: 20 })));
         }, 500);
     };
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("h1", null, "demo: Infinite Scroll with fixed height"),
-        react_1.default.createElement("hr", null),
-        react_1.default.createElement(index_1.default, { dataLength: items.length, next: fetchMoreData, hasMoreNext: hasMore, loaderNext: react_1.default.createElement("h4", null, "Loading..."), height: 400, endMessage: react_1.default.createElement("p", { style: { textAlign: 'center' } },
-                react_1.default.createElement("b", null, "Yay! You have seen it all")) }, items.map((_, index) => (react_1.default.createElement("div", { style: style, key: index },
-            "div - #",
-            index))))));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { children: "demo: Infinite Scroll with fixed height" }), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)(index_1.default, Object.assign({ dataLength: items.length, next: fetchMoreData, hasMoreNext: hasMore, loaderNext: (0, jsx_runtime_1.jsx)("h4", { children: "Loading..." }), height: 400, endMessage: (0, jsx_runtime_1.jsx)("p", Object.assign({ style: { textAlign: 'center' } }, { children: (0, jsx_runtime_1.jsx)("b", { children: "Yay! You have seen it all" }) })) }, { children: items.map((_, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) }))] }));
 }
 exports.default = InfiniteScrollWithHeight;

package/lib/cjs/shared/InfiniteScroll/stories/PullDownToRefreshInfScroll.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const index_1 = tslib_1.__importDefault(require("../index"));
 const style = {
     height: 30,
@@ -18,11 +19,6 @@ function PullDownToRefreshInfScroll() {
             setItems(items.concat(Array.from({ length: 20 })));
         }, 1500);
     };
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("h1", null, "demo: Pull down to refresh"),
-        react_1.default.createElement("hr", null),
-        react_1.default.createElement(index_1.default, { dataLength: items.length, hasMoreNext: true, next: fetchMoreData, loaderNext: react_1.default.createElement("h4", null, "Loading..."), pullDownToRefresh: true, pullDownToRefreshContent: react_1.default.createElement("h3", { style: { textAlign: 'center' } }, "\u2193 Pull down to refresh"), releaseToRefreshContent: react_1.default.createElement("h3", { style: { textAlign: 'center' } }, "\u2191 Release to refresh"), refreshFunction: fetchMoreData }, items.map((_, index) => (react_1.default.createElement("div", { style: style, key: index },
-            "div - #",
-            index))))));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { children: "demo: Pull down to refresh" }), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)(index_1.default, Object.assign({ dataLength: items.length, hasMoreNext: true, next: fetchMoreData, loaderNext: (0, jsx_runtime_1.jsx)("h4", { children: "Loading..." }), pullDownToRefresh: true, pullDownToRefreshContent: (0, jsx_runtime_1.jsx)("h3", Object.assign({ style: { textAlign: 'center' } }, { children: "\u2193 Pull down to refresh" })), releaseToRefreshContent: (0, jsx_runtime_1.jsx)("h3", Object.assign({ style: { textAlign: 'center' } }, { children: "\u2191 Release to refresh" })), refreshFunction: fetchMoreData }, { children: items.map((_, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) }))] }));
 }
 exports.default = PullDownToRefreshInfScroll;

package/lib/cjs/shared/InfiniteScroll/stories/ScrollableTargetFixedInfScroll.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const index_1 = tslib_1.__importDefault(require("../index"));
 const style = {
     height: 30,
@@ -18,22 +19,16 @@ function ScrollableTargetFixedInfScroll() {
             setItems(items.concat(Array.from({ length: 20 })));
         }, 1500);
     };
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("h1", null, "demo: Infinite Scroll with scrollable target FIXED"),
-        react_1.default.createElement("hr", null),
-        react_1.default.createElement("div", { id: "scrollableDiv", style: {
-                position: 'fixed',
-                bottom: 0,
-                left: 0,
-                right: 0,
-                top: 170,
-                zIndex: 1000,
-                maxWidth: '100% !important',
-                height: '50vh',
-                overflowY: 'scroll'
-            } },
-            react_1.default.createElement(index_1.default, { dataLength: items.length, hasMoreNext: true, next: fetchMoreData, loaderNext: react_1.default.createElement("h4", null, "Loading..."), scrollableTarget: "scrollableDiv" }, items.map((_, index) => (react_1.default.createElement("div", { style: style, key: index },
-                "div - #",
-                index)))))));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { children: "demo: Infinite Scroll with scrollable target FIXED" }), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "scrollableDiv", style: {
+                    position: 'fixed',
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    top: 170,
+                    zIndex: 1000,
+                    maxWidth: '100% !important',
+                    height: '50vh',
+                    overflowY: 'scroll'
+                } }, { children: (0, jsx_runtime_1.jsx)(index_1.default, Object.assign({ dataLength: items.length, hasMoreNext: true, next: fetchMoreData, loaderNext: (0, jsx_runtime_1.jsx)("h4", { children: "Loading..." }), scrollableTarget: "scrollableDiv" }, { children: items.map((_, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) })) }))] }));
 }
 exports.default = ScrollableTargetFixedInfScroll;

package/lib/cjs/shared/InfiniteScroll/stories/ScrollableTargetInfScroll.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const index_1 = tslib_1.__importDefault(require("../index"));
 const style = {
     height: 30,
@@ -18,12 +19,6 @@ function ScrollableTargetInfScroll() {
             setItems(items.concat(Array.from({ length: 20 })));
         }, 1500);
     };
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("h1", null, "demo: Infinite Scroll with scrollable target"),
-        react_1.default.createElement("hr", null),
-        react_1.default.createElement("div", { id: "scrollableDiv", style: { height: 300, overflow: 'auto' } },
-            react_1.default.createElement(index_1.default, { dataLength: items.length, hasMoreNext: true, next: fetchMoreData, loaderNext: react_1.default.createElement("h4", null, "Loading..."), scrollableTarget: "scrollableDiv" }, items.map((_, index) => (react_1.default.createElement("div", { style: style, key: index },
-                "div - #",
-                index)))))));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { children: "demo: Infinite Scroll with scrollable target" }), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "scrollableDiv", style: { height: 300, overflow: 'auto' } }, { children: (0, jsx_runtime_1.jsx)(index_1.default, Object.assign({ dataLength: items.length, hasMoreNext: true, next: fetchMoreData, loaderNext: (0, jsx_runtime_1.jsx)("h4", { children: "Loading..." }), scrollableTarget: "scrollableDiv" }, { children: items.map((_, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) })) }))] }));
 }
 exports.default = ScrollableTargetInfScroll;

package/lib/cjs/shared/InfiniteScroll/stories/ScrolleableTop.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const index_1 = tslib_1.__importDefault(require("../index"));
 const style = {
     height: 30,
@@ -18,15 +19,9 @@ function ScrolleableTop() {
             setItems(items.concat(Array.from({ length: 20 })));
         }, 500);
     };
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("h1", null, "demo: Infinite Scroll on top"),
-        react_1.default.createElement("hr", null),
-        react_1.default.createElement("div", { id: "scrollableDiv", style: {
-                height: 300,
-                overflow: 'auto'
-            } },
-            react_1.default.createElement(index_1.default, { dataLength: items.length, previous: fetchMoreData, hasMorePrevious: true, loaderPrevious: react_1.default.createElement("h4", null, "Loading prev..."), scrollableTarget: "scrollableDiv", scrollThreshold: '0px' }, items.map((_, index) => (react_1.default.createElement("div", { style: style, key: index },
-                "div - #",
-                index)))))));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { children: "demo: Infinite Scroll on top" }), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "scrollableDiv", style: {
+                    height: 300,
+                    overflow: 'auto'
+                } }, { children: (0, jsx_runtime_1.jsx)(index_1.default, Object.assign({ dataLength: items.length, previous: fetchMoreData, hasMorePrevious: true, loaderPrevious: (0, jsx_runtime_1.jsx)("h4", { children: "Loading prev..." }), scrollableTarget: "scrollableDiv", scrollThreshold: '0px' }, { children: items.map((_, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) })) }))] }));
 }
 exports.default = ScrolleableTop;

package/lib/cjs/shared/InfiniteScroll/stories/WindowInfiniteScrollComponent.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const index_1 = tslib_1.__importDefault(require("../index"));
 function WindowInfiniteScrollComponent() {
     const [data, setData] = (0, react_1.useState)(Array.from({ length: 30 }, (_, i) => i));
@@ -24,10 +25,6 @@ function WindowInfiniteScrollComponent() {
             setData(newData);
         }, 500);
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(index_1.default, { hasMoreNext: true, next: next, hasMorePrevious: true, previous: previous, loaderNext: react_1.default.createElement("h1", null, "Loading next..."), loaderPrevious: react_1.default.createElement("h1", null, "Loading prev..."), dataLength: data.length, scrollThreshold: 1 }, data.map((e) => (react_1.default.createElement("div", { key: e, style: { height: 200, margin: 4, border: '1px solid hotpink' } },
-            "#",
-            e,
-            " row"))))));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(index_1.default, Object.assign({ hasMoreNext: true, next: next, hasMorePrevious: true, previous: previous, loaderNext: (0, jsx_runtime_1.jsx)("h1", { children: "Loading next..." }), loaderPrevious: (0, jsx_runtime_1.jsx)("h1", { children: "Loading prev..." }), dataLength: data.length, scrollThreshold: 1 }, { children: data.map((e) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: { height: 200, margin: 4, border: '1px solid hotpink' } }, { children: ["#", e, " row"] }), e))) })) }));
 }
 exports.default = WindowInfiniteScrollComponent;

package/lib/cjs/shared/LanguageSwitcher/index.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -76,9 +77,6 @@ function LanguageSwitcher(inProps) {
             }
         }
     };
-    return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest),
-        react_1.default.createElement(material_1.Typography, Object.assign({ variant: "body1", className: classes.label }, LabelComponentProps),
-            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.languageSwitcher.selectLanguage", defaultMessage: "ui.languageSwitcher.selectLanguage" })),
-        react_1.default.createElement(material_1.Select, Object.assign({ disabled: updating, labelId: "language", id: "language", value: intl.locale, onChange: handleChange, size: "small" }, SelectComponentProps), languages.map((l) => (react_1.default.createElement(material_1.MenuItem, { value: l, key: l }, minimized ? l.toUpperCase() : react_1.default.createElement(react_intl_1.FormattedMessage, { id: `ui.languageSwitcher.language.${l}`, defaultMessage: `ui.languageSwitcher.language.${l}` })))))));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.label }, LabelComponentProps, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.languageSwitcher.selectLanguage", defaultMessage: "ui.languageSwitcher.selectLanguage" }) })), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ disabled: updating, labelId: "language", id: "language", value: intl.locale, onChange: handleChange, size: "small" }, SelectComponentProps, { children: languages.map((l) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: l }, { children: minimized ? l.toUpperCase() : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.languageSwitcher.language.${l}`, defaultMessage: `ui.languageSwitcher.language.${l}` }) }), l))) }))] })));
 }
 exports.default = LanguageSwitcher;

package/lib/cjs/shared/Lightbox/Lightbox.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const react_photo_view_1 = require("react-photo-view");
 const material_1 = require("@mui/material");
@@ -22,8 +23,8 @@ const ReactImageLightbox = (props) => {
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(Root, Object.assign({}, rest, { className: classes.root, images: currentImages, visible: visible && index !== -1, index: currentImageIndex, onIndexChange: setCurrentImageIndex, onClose: onClose, afterClose: afterClose, loadingElement: react_1.default.createElement(material_1.CircularProgress, { color: 'primary' }), toolbarRender: toolbarRender ? toolbarRender : () => {
-            return react_1.default.createElement(react_1.default.Fragment, null, toolbarButtons);
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({}, rest, { className: classes.root, images: currentImages, visible: visible && index !== -1, index: currentImageIndex, onIndexChange: setCurrentImageIndex, onClose: onClose, afterClose: afterClose, loadingElement: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: 'primary' }), toolbarRender: toolbarRender ? toolbarRender : () => {
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: toolbarButtons });
         } })));
 };
 exports.default = ReactImageLightbox;

package/lib/cjs/shared/MarkRead/MarkRead.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_lazyload_1 = tslib_1.__importDefault(require("react-lazyload"));
 const LazyLoad_1 = require("../../constants/LazyLoad");
@@ -35,6 +36,5 @@ const MarkRead = (props) => {
     return null;
 };
 exports.default = (props) => {
-    return (react_1.default.createElement(react_lazyload_1.default, { once: true, offset: LazyLoad_1.MIN_PRELOAD_OFFSET_VIEWPORT },
-        react_1.default.createElement(MarkRead, Object.assign({}, props))));
+    return ((0, jsx_runtime_1.jsx)(react_lazyload_1.default, Object.assign({ once: true, offset: LazyLoad_1.MIN_PRELOAD_OFFSET_VIEWPORT }, { children: (0, jsx_runtime_1.jsx)(MarkRead, Object.assign({}, props)) })));
 };