@selfcommunity/react-ui 0.7.0-alpha.99 → 0.7.1-alpha.0

package/lib/esm/components/Editor/plugins/ToolbarPlugin.js

@@ -0,0 +1,289 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { $createParagraphNode, $getSelection, $isRangeSelection, $isRootOrShadowRoot, $isTextNode, COMMAND_PRIORITY_CRITICAL, DEPRECATED_$isGridSelection, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, SELECTION_CHANGE_COMMAND } from 'lexical';
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode, REMOVE_LIST_COMMAND } from '@lexical/list';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $isDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import { $createHeadingNode, $createQuoteNode, $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
+import { $setBlocksType } from '@lexical/selection';
+import { $isTableNode } from '@lexical/table';
+import { $findMatchingParent, $getNearestBlockElementAncestorOrThrow, $getNearestNodeOfType, mergeRegister } from '@lexical/utils';
+import * as React from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { getSelectedNode } from '../../../utils/editor';
+import { Box, Icon, IconButton, Menu, MenuItem, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import ImagePlugin from './ImagePlugin';
+import EmojiPlugin from './EmojiPlugin';
+import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode';
+import { PREFIX } from '../constants';
+const blockTypeToBlockIcon = {
+    h1: 'format_heading_1',
+    h2: 'format_heading_2',
+    h3: 'format_heading_3',
+    bullet: 'format_list_bulleted',
+    number: 'format_list_numbered',
+    quote: 'format_quote',
+    paragraph: 'format_paragraph'
+};
+const rootTypeToRootName = {
+    root: 'Root',
+    table: 'Table'
+};
+const FORMATS = ['bold', 'underline', 'italic', 'strikethrough', 'subscript', 'superscript'];
+const ALIGNMENTS = ['left', 'right', 'center', 'justify'];
+function BlockFormatIconButton({ className = '', editor, blockType, disabled = false }) {
+    // STATE
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    // FORMAT METHODS
+    const formatParagraph = () => {
+        editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
+                $setBlocksType(selection, () => $createParagraphNode());
+            }
+        });
+    };
+    const formatHeading = (headingSize) => {
+        if (blockType !== headingSize) {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
+                    $setBlocksType(selection, () => $createHeadingNode(headingSize));
+                }
+            });
+        }
+    };
+    const formatBulletList = () => {
+        if (blockType !== 'bullet') {
+            editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+        }
+        else {
+            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+        }
+    };
+    const formatNumberedList = () => {
+        if (blockType !== 'number') {
+            editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+        }
+        else {
+            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+        }
+    };
+    const formatQuote = () => {
+        if (blockType !== 'quote') {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
+                    $setBlocksType(selection, () => $createQuoteNode());
+                }
+            });
+        }
+    };
+    // HANDLERS
+    const handleSelect = (block) => (event) => {
+        switch (block) {
+            case 'bullet':
+                formatBulletList();
+                break;
+            case 'number':
+                formatNumberedList();
+                break;
+            case 'paragraph':
+                formatParagraph();
+                break;
+            case 'quote':
+                formatQuote();
+                break;
+            default:
+                formatHeading(block);
+                break;
+        }
+        setAnchorEl(null);
+    };
+    const handleOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(IconButton, { className: className, disabled: disabled, onClick: handleOpen },
+            React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.editor.toolbarPlugin.blockType", defaultMessage: "ui.editor.toolbarPlugin.blockType" }) },
+                React.createElement(React.Fragment, null,
+                    React.createElement(Icon, null, blockTypeToBlockIcon[blockType]),
+                    React.createElement(Icon, null, anchorEl ? 'expand_less' : 'expand_more')))),
+        React.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose }, Object.keys(blockTypeToBlockIcon).map((block) => (React.createElement(MenuItem, { key: block, onClick: handleSelect(block) },
+            React.createElement(Icon, null, blockTypeToBlockIcon[block])))))));
+}
+const classes = {
+    root: `${PREFIX}-toolbar-plugin-root`,
+    blockFormat: `${PREFIX}-block-format`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'ToolbarPluginRoot'
+})(() => ({}));
+export default function ToolbarPlugin(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { uploadImage = false } = props;
+    // STATE
+    const [editor] = useLexicalComposerContext();
+    const [activeEditor, setActiveEditor] = useState(editor);
+    const [blockType, setBlockType] = useState('paragraph');
+    const [rootType, setRootType] = useState('root');
+    const [selectedElementKey, setSelectedElementKey] = useState(null);
+    const [isLink, setIsLink] = useState(false);
+    const [isEditable, setIsEditable] = useState(() => editor.isEditable());
+    const [formats, setFormats] = useState([]);
+    const [alignment, setAlignment] = useState(ALIGNMENTS[0]);
+    const $updateToolbar = useCallback(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+            const anchorNode = selection.anchor.getNode();
+            let element = anchorNode.getKey() === 'root'
+                ? anchorNode
+                : $findMatchingParent(anchorNode, (e) => {
+                    const parent = e.getParent();
+                    return parent !== null && $isRootOrShadowRoot(parent);
+                });
+            if (element === null) {
+                element = anchorNode.getTopLevelElementOrThrow();
+            }
+            const elementKey = element.getKey();
+            const elementDOM = activeEditor.getElementByKey(elementKey);
+            // Update text format
+            setFormats(FORMATS.filter((f) => selection.hasFormat(f)));
+            setAlignment(ALIGNMENTS.find((a) => element.getFormatType() === a) || ALIGNMENTS[0]);
+            // Update links
+            const node = getSelectedNode(selection);
+            const parent = node.getParent();
+            if ($isLinkNode(parent) || $isLinkNode(node)) {
+                setIsLink(true);
+            }
+            else {
+                setIsLink(false);
+            }
+            const tableNode = $findMatchingParent(node, $isTableNode);
+            if ($isTableNode(tableNode)) {
+                setRootType('table');
+            }
+            else {
+                setRootType('root');
+            }
+            if (elementDOM !== null) {
+                setSelectedElementKey(elementKey);
+                if ($isListNode(element)) {
+                    const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+                    const type = parentList ? parentList.getListType() : element.getListType();
+                    setBlockType(type);
+                }
+                else {
+                    const type = $isHeadingNode(element) ? element.getTag() : element.getType();
+                    if (type in blockTypeToBlockIcon) {
+                        setBlockType(type);
+                    }
+                }
+            }
+        }
+    }, [activeEditor]);
+    useEffect(() => {
+        return editor.registerCommand(SELECTION_CHANGE_COMMAND, (_payload, newEditor) => {
+            $updateToolbar();
+            setActiveEditor(newEditor);
+            return false;
+        }, COMMAND_PRIORITY_CRITICAL);
+    }, [editor, $updateToolbar]);
+    useEffect(() => {
+        return mergeRegister(editor.registerEditableListener((editable) => {
+            setIsEditable(editable);
+        }), activeEditor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                $updateToolbar();
+            });
+        }));
+    }, [$updateToolbar, activeEditor, editor]);
+    const clearFormatting = useCallback(() => {
+        activeEditor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                const anchor = selection.anchor;
+                const focus = selection.focus;
+                const nodes = selection.getNodes();
+                if (anchor.key === focus.key && anchor.offset === focus.offset) {
+                    return;
+                }
+                nodes.forEach((node, idx) => {
+                    // We split the first and last node by the selection
+                    // So that we don't format unselected text inside those nodes
+                    if ($isTextNode(node)) {
+                        if (idx === 0 && anchor.offset !== 0) {
+                            node = node.splitText(anchor.offset)[1] || node;
+                        }
+                        if (idx === nodes.length - 1) {
+                            node = node.splitText(focus.offset)[0] || node;
+                        }
+                        if (node.__style !== '') {
+                            node.setStyle('');
+                        }
+                        if (node.__format !== 0) {
+                            node.setFormat(0);
+                            $getNearestBlockElementAncestorOrThrow(node).setFormat('');
+                        }
+                    }
+                    else if ($isHeadingNode(node) || $isQuoteNode(node)) {
+                        node.replace($createParagraphNode(), true);
+                    }
+                    else if ($isDecoratorBlockNode(node)) {
+                        node.setFormat('');
+                    }
+                });
+            }
+        });
+    }, [activeEditor]);
+    const insertLink = useCallback(() => {
+        if (!isLink) {
+            editor.dispatchCommand(TOGGLE_LINK_COMMAND, 'https://');
+        }
+        else {
+            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+        }
+    }, [editor, isLink]);
+    return (React.createElement(Root, { className: classes.root },
+        blockType in blockTypeToBlockIcon && activeEditor === editor && (React.createElement(BlockFormatIconButton, { className: classes.blockFormat, disabled: !isEditable, blockType: blockType, editor: editor })),
+        React.createElement(IconButton, { disabled: !isEditable, onClick: () => {
+                activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, ALIGNMENTS[(ALIGNMENTS.findIndex((a) => alignment === a) + 1) % ALIGNMENTS.length]);
+            } },
+            React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: `ui.editor.toolbarPlugin.${alignment}`, defaultMessage: `ui.editor.toolbarPlugin.${alignment}` }) },
+                React.createElement(Icon, null, `format_align_${alignment}`))),
+        React.createElement(ToggleButtonGroup, { value: formats }, FORMATS.map((format) => (React.createElement(ToggleButton, { key: format, value: format, disabled: !isEditable, onClick: () => {
+                activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
+            } },
+            React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: `ui.editor.toolbarPlugin.${format}`, defaultMessage: `ui.editor.toolbarPlugin.${format}` }) },
+                React.createElement(Icon, null, `format_${format}`)))))),
+        React.createElement(IconButton, { disabled: !isEditable, onClick: clearFormatting },
+            React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.editor.toolbarPlugin.clear", defaultMessage: "ui.editor.toolbarPlugin.clear" }) },
+                React.createElement(Icon, null, "format_clear"))),
+        React.createElement(IconButton, { disabled: !isEditable, onClick: () => {
+                activeEditor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined);
+            } },
+            React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.editor.toolbarPlugin.horizontalRule", defaultMessage: "ui.editor.toolbarPlugin.horizontalRule" }) },
+                React.createElement(Icon, null, "format_horizontal_rule"))),
+        uploadImage && React.createElement(ImagePlugin, null),
+        React.createElement(IconButton, { disabled: !isEditable, onClick: insertLink },
+            React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.editor.toolbarPlugin.link", defaultMessage: "ui.editor.toolbarPlugin.link" }) },
+                React.createElement(Icon, null, "format_link"))),
+        React.createElement(EmojiPlugin, null)));
+}

package/lib/esm/components/Editor/plugins/index.d.ts

@@ -4,5 +4,5 @@ import EmojiPlugin from './EmojiPlugin';
 import ImagePlugin from './ImagePlugin';
 import MentionsPlugin from './MentionsPlugin';
 import OnChangePlugin from './OnChangePlugin';
-export { AutoLinkPlugin, DefaultHtmlValuePlugin, EmojiPlugin, ImagePlugin, MentionsPlugin, OnChangePlugin };
-//# sourceMappingURL=index.d.ts.map
+import HashtagPlugin from './HashtagPlugin';
+export { AutoLinkPlugin, DefaultHtmlValuePlugin, EmojiPlugin, ImagePlugin, MentionsPlugin, OnChangePlugin, HashtagPlugin };

package/lib/esm/components/Editor/plugins/index.js

@@ -4,5 +4,5 @@ import EmojiPlugin from './EmojiPlugin';
 import ImagePlugin from './ImagePlugin';
 import MentionsPlugin from './MentionsPlugin';
 import OnChangePlugin from './OnChangePlugin';
-export { AutoLinkPlugin, DefaultHtmlValuePlugin, EmojiPlugin, ImagePlugin, MentionsPlugin, OnChangePlugin };
-//# sourceMappingURL=index.js.map
+import HashtagPlugin from './HashtagPlugin';
+export { AutoLinkPlugin, DefaultHtmlValuePlugin, EmojiPlugin, ImagePlugin, MentionsPlugin, OnChangePlugin, HashtagPlugin };

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

@@ -96,11 +96,11 @@ export interface FeedProps {
     /**
      * Callback invoked whenever data is loaded during paging next
      */
-    onNextData?: (data: any) => any;
+    onNextData?: (page: number, offset: number, total: number, data: any[]) => any;
     /**
      * Callback invoked whenever data is loaded during paging previous
      */
-    onPreviousData?: (data: any) => any;
+    onPreviousData?: (page: number, offset: number, total: number, data: any[]) => any;
     /**
      * Authenticated or not
      */
@@ -130,6 +130,13 @@ export interface FeedProps {
      * Use this to init the component (in particular useSCFetchFeed)
      */
     prefetchedData?: SCPaginatedResponse<SCFeedUnitType>;
+    /**
+     * If the feed is being rendered in a "scrollable container"
+     * (for example, if one of the parent elements of the list is
+     * styled with max-height and overflow: auto),
+     * then passing the "scrollableTargetId"
+     */
+    scrollableTargetId?: string;
     /**
      * Props to spread to VirtualizedScroller object.
      * @default {}
@@ -163,4 +170,3 @@ export interface FeedProps {
 }
 declare const _default: React.ForwardRefExoticComponent<FeedProps & React.RefAttributes<FeedRef>>;
 export default _default;
-//# sourceMappingURL=Feed.d.ts.map

package/lib/esm/components/Feed/Feed.js

@@ -1,8 +1,8 @@
 // @ts-nocheck
 import React, { forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Link, SCCache, SCPreferences, SCPreferencesContext, SCUserContext, useSCFetchFeed, usePreviousValue, useIsComponentMountedRef } from '@selfcommunity/react-core';
+import { Link, SCCache, SCPreferences, SCPreferencesContext, SCUserContext, useIsComponentMountedRef, usePreviousValue, useSCFetchFeed } from '@selfcommunity/react-core';
 import { styled, useTheme } from '@mui/material/styles';
-import { CardContent, Grid, Hidden, useMediaQuery } from '@mui/material';
+import { Box, CardContent, Grid, Hidden, useMediaQuery } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { GenericSkeleton } from '../Skeleton';
 import CustomAdv from '../CustomAdv';
@@ -21,47 +21,29 @@ import Footer from '../Footer';
 import FeedSkeleton from './Skeleton';
 import { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect';
 import StickyBoxComp from '../../shared/StickyBox';
-const PREFIX = 'SCFeed';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     left: `${PREFIX}-left`,
-    right: `${PREFIX}-right`,
+    leftItems: `${PREFIX}-left-items`,
+    start: `${PREFIX}-start`,
     end: `${PREFIX}-end`,
+    endMessage: `${PREFIX}-end-message`,
+    right: `${PREFIX}-right`,
     refresh: `${PREFIX}-refresh`,
     paginationLink: `${PREFIX}-pagination-link`
 };
 const Root = styled(Grid, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    marginTop: theme.spacing(-2),
-    [`& .${classes.left}`]: {
-        padding: '0 2px 0 2px',
-        '& > div:first-child': {
-            marginTop: 0
-        },
-        '& > div:last-child': {
-            marginTop: 0
-        },
-        [theme.breakpoints.down('md')]: {
-            '& > .SCWidget-root, & > .SCCustomAdv-root': {
-                maxWidth: 850,
-                marginLeft: 'auto',
-                marginRight: 'auto'
-            }
-        }
-    },
-    [`& .${classes.end}, & .${classes.refresh}`]: {
-        textAlign: 'center'
-    },
-    [`& .${classes.paginationLink}`]: {
-        display: 'none'
-    }
-}));
+    slot: 'Root'
+})(() => ({}));
 const PREFERENCES = [SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED, SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED];
 /**
  * > API documentation for the Community-JS Feed component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a feed.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Feed)
 
  #### Import
 
@@ -92,7 +74,7 @@ const Feed = (inProps, ref) => {
         props: inProps,
         name: PREFIX
     });
-    const { id = 'feed', className, endpoint, endpointQueryParams = { limit: DEFAULT_PAGINATION_LIMIT, offset: DEFAULT_PAGINATION_OFFSET }, endMessage = React.createElement(FormattedMessage, { id: "ui.feed.noOtherFeedObject", defaultMessage: "ui.feed.noOtherFeedObject" }), refreshMessage = React.createElement(FormattedMessage, { id: "ui.feed.refreshRelease", defaultMessage: "ui.feed.refreshRelease" }), HeaderComponent, FooterComponent = Footer, FooterComponentProps = {}, widgets = [], ItemComponent, itemPropsGenerator, itemIdGenerator, ItemProps = {}, ItemSkeleton, ItemSkeletonProps = {}, onNextData, onPreviousData, FeedSidebarProps = {}, CustomAdvProps = {}, enabledCustomAdvPositions = [SCCustomAdvPosition.POSITION_FEED_SIDEBAR, SCCustomAdvPosition.POSITION_FEED], requireAuthentication = false, cacheStrategy = CacheStrategies.NETWORK_ONLY, prefetchedData, VirtualizedScrollerProps = {}, disablePaginationLinks = false, hidePaginationLinks = true, paginationLinksPageQueryParam = DEFAULT_PAGINATION_QUERY_PARAM_NAME, PaginationLinkProps = {}, hideAdvs = false } = props;
+    const { id = 'feed', className, endpoint, endpointQueryParams = { limit: DEFAULT_PAGINATION_LIMIT, offset: DEFAULT_PAGINATION_OFFSET }, endMessage = React.createElement(FormattedMessage, { id: "ui.feed.noOtherFeedObject", defaultMessage: "ui.feed.noOtherFeedObject" }), refreshMessage = React.createElement(FormattedMessage, { id: "ui.feed.refreshRelease", defaultMessage: "ui.feed.refreshRelease" }), HeaderComponent, FooterComponent = Footer, FooterComponentProps = {}, widgets = [], ItemComponent, itemPropsGenerator, itemIdGenerator, ItemProps = {}, ItemSkeleton, ItemSkeletonProps = {}, onNextData, onPreviousData, FeedSidebarProps = {}, CustomAdvProps = {}, enabledCustomAdvPositions = [SCCustomAdvPosition.POSITION_FEED_SIDEBAR, SCCustomAdvPosition.POSITION_FEED], requireAuthentication = false, cacheStrategy = CacheStrategies.NETWORK_ONLY, prefetchedData, scrollableTargetId, VirtualizedScrollerProps = {}, disablePaginationLinks = false, hidePaginationLinks = true, paginationLinksPageQueryParam = DEFAULT_PAGINATION_QUERY_PARAM_NAME, PaginationLinkProps = {}, hideAdvs = false } = props;
     // CONTEXT
     const scPreferences = useContext(SCPreferencesContext);
     const scUserContext = useContext(SCUserContext);
@@ -108,6 +90,7 @@ const Feed = (inProps, ref) => {
     }, [endpointQueryParams, prefetchedData]);
     // REF
     const isMountRef = useIsComponentMountedRef();
+    const containerRef = useRef(null);
     /**
      * Compute preferences
      */
@@ -271,7 +254,7 @@ const Feed = (inProps, ref) => {
     /**
      * Callback on refresh
      */
-    const refresh = () => {
+    const refresh = useMemo(() => () => {
         /**
          * Only if the feedDataObject is loaded reload data
          */
@@ -281,7 +264,7 @@ const Feed = (inProps, ref) => {
             setFeedDataRight(_getFeedDataRight());
             feedDataObject.reload();
         }
-    };
+    }, [feedDataObject.componentLoaded, setHeadData, setFeedDataLeft, setFeedDataRight]);
     /**
      * Callback subscribe events
      * @param msg
@@ -296,7 +279,7 @@ const Feed = (inProps, ref) => {
      * Render HeaderComponent
      */
     const renderHeaderComponent = () => {
-        return (React.createElement(React.Fragment, null, !feedDataObject.previous && (React.createElement(React.Fragment, null,
+        return (React.createElement(Box, { className: classes.start }, !feedDataObject.previous && (React.createElement(React.Fragment, null,
             virtualScrollerMountState.current && HeaderComponent,
             headData.map((item) => {
                 const _itemId = `item_${itemIdGenerator(item)}`;
@@ -315,7 +298,7 @@ const Feed = (inProps, ref) => {
      * Infinite scroll getNextPage
      */
     const getPreviousPage = useMemo(() => () => {
-        if (isMountRef.current && feedDataObject.componentLoaded && feedDataObject.isLoadingPrevious) {
+        if (isMountRef.current && feedDataObject.componentLoaded && !feedDataObject.isLoadingPrevious) {
             feedDataObject.getPreviousPage();
         }
     }, [isMountRef.current, feedDataObject.componentLoaded, feedDataObject.isLoadingPrevious]);
@@ -366,7 +349,7 @@ const Feed = (inProps, ref) => {
         return () => {
             PubSub.unsubscribe(refreshSubscription.current);
         };
-    }, []);
+    }, [subscriber]);
     /**
      * Remove duplicated data when load previous page and
      * previously some elements have been added in the head
@@ -428,19 +411,17 @@ const Feed = (inProps, ref) => {
         advEnabled && !hideAdvs && enabledCustomAdvPositions.includes(SCCustomAdvPosition.POSITION_BELOW_TOPBAR) ? (React.createElement(Grid, { item: true, xs: 12 },
             React.createElement(CustomAdv, Object.assign({ position: SCCustomAdvPosition.POSITION_BELOW_TOPBAR }, CustomAdvProps)))) : null,
         React.createElement(Grid, { item: true, xs: 12, md: 7 },
-            React.createElement("div", { style: { overflow: 'visible' } },
-                React.createElement(InfiniteScroll, { className: classes.left, dataLength: feedDataLeft.length, next: getNextPage, previous: getPreviousPage, hasMoreNext: Boolean(feedDataObject.next), hasMorePrevious: Boolean(feedDataObject.previous), header: PreviousPageLink, footer: NextPageLink, loaderNext: React.createElement(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), loaderPrevious: React.createElement(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), scrollThreshold: 1, endMessage: React.createElement(React.Fragment, null,
-                        React.createElement(Widget, { className: classes.end },
-                            React.createElement(CardContent, null, endMessage)),
-                        advEnabled && !hideAdvs && enabledCustomAdvPositions.includes(SCCustomAdvPosition.POSITION_ABOVE_FOOTER_BAR) ? (React.createElement(CustomAdv, Object.assign({ position: SCCustomAdvPosition.POSITION_ABOVE_FOOTER_BAR }, CustomAdvProps))) : null,
-                        FooterComponent ? React.createElement(FooterComponent, Object.assign({}, FooterComponentProps)) : null), refreshFunction: refresh, pullDownToRefresh: true, pullDownToRefreshThreshold: 1000, pullDownToRefreshContent: null, releaseToRefreshContent: React.createElement(Widget, { variant: "outlined", className: classes.refresh },
-                        React.createElement(CardContent, null, refreshMessage)), style: { overflow: 'visible' } },
-                    renderHeaderComponent(),
-                    React.createElement(VirtualizedScroller, Object.assign({ items: feedDataLeft, itemComponent: InnerItem, onMount: onScrollerMount, onScrollerStateChange: onScrollerStateChange, getItemId: getScrollItemId, preserveScrollPosition: true, preserveScrollPositionOnPrependItems: true, cacheScrollStateKey: SCCache.getVirtualizedScrollStateCacheKey(id), cacheScrollerPositionKey: SCCache.getFeedSPCacheKey(id), cacheStrategy: cacheStrategy }, VirtualizedScrollerProps))))),
+            React.createElement(InfiniteScroll, Object.assign({ ref: containerRef, className: classes.left, dataLength: feedDataLeft.length, next: getNextPage, previous: getPreviousPage, hasMoreNext: Boolean(feedDataObject.next), hasMorePrevious: Boolean(feedDataObject.previous), header: PreviousPageLink, footer: NextPageLink, loaderNext: React.createElement(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), loaderPrevious: React.createElement(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), scrollThreshold: '90%', endMessage: React.createElement(Box, { className: classes.end },
+                    React.createElement(Widget, { className: classes.endMessage },
+                        React.createElement(CardContent, null, endMessage)),
+                    advEnabled && !hideAdvs && enabledCustomAdvPositions.includes(SCCustomAdvPosition.POSITION_ABOVE_FOOTER_BAR) ? (React.createElement(CustomAdv, Object.assign({ position: SCCustomAdvPosition.POSITION_ABOVE_FOOTER_BAR }, CustomAdvProps))) : null,
+                    FooterComponent ? React.createElement(FooterComponent, Object.assign({}, FooterComponentProps)) : null), refreshFunction: refresh, pullDownToRefresh: true, pullDownToRefreshThreshold: 1000, pullDownToRefreshContent: null, releaseToRefreshContent: React.createElement(Widget, { variant: "outlined", className: classes.refresh },
+                    React.createElement(CardContent, null, refreshMessage)), style: { overflow: 'visible' } }, (scrollableTargetId && { scrollableTarget: scrollableTargetId })),
+                renderHeaderComponent(),
+                React.createElement(VirtualizedScroller, Object.assign({ className: classes.leftItems, items: feedDataLeft, itemComponent: InnerItem, onMount: onScrollerMount, onScrollerStateChange: onScrollerStateChange, getItemId: getScrollItemId, preserveScrollPosition: true, preserveScrollPositionOnPrependItems: true, cacheScrollStateKey: SCCache.getVirtualizedScrollStateCacheKey(id), cacheScrollerPositionKey: SCCache.getFeedSPCacheKey(id), cacheStrategy: cacheStrategy }, (scrollableTargetId && { getScrollableContainer: () => document.getElementById(scrollableTargetId) }), VirtualizedScrollerProps)))),
         feedDataRight.length > 0 && !hideAdvs && (React.createElement(Hidden, { smDown: true },
             React.createElement(Grid, { item: true, xs: 12, md: 5 },
                 React.createElement(StickyBoxComp, Object.assign({ className: classes.right }, FeedSidebarProps),
                     React.createElement(React.Suspense, { fallback: React.createElement(GenericSkeleton, null) }, feedDataRight.map((d, i) => (React.createElement(d.component, Object.assign({ key: i }, d.componentProps)))))))))));
 };
 export default forwardRef(Feed);
-//# sourceMappingURL=Feed.js.map

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

@@ -23,17 +23,16 @@ export declare type FeedSkeletonProps = React.PropsWithChildren<FeedSkeletonMap>
 
  #### Component Name
 
- The name `SCFeedSkeleton` can be used when providing style overrides in the theme.
+ The name `SCFeed-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCFeedSkeleton-root|Styles applied to the root element.|
- |left|.SCFeedSkeleton-left|Styles applied to the left section.|
- |right|.SCFeedSkeleton-right|Styles applied to the right section.|
+ |root|.SCFeed-skeleton-root|Styles applied to the root element.|
+ |left|.SCFeed-left|Styles applied to the left section.|
+ |right|.SCFeed-right|Styles applied to the right section.|
  *
  */
 export default function FeedSkeleton(props: FeedSkeletonProps): JSX.Element;
 export {};
-//# sourceMappingURL=Skeleton.d.ts.map

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

@@ -3,17 +3,16 @@ import { styled } from '@mui/material/styles';
 import { Grid, Hidden } from '@mui/material';
 import { GenericSkeleton } from '../Skeleton';
 import classNames from 'classnames';
-const PREFIX = 'SCFeedSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
     left: `${PREFIX}-left`,
     right: `${PREFIX}-right`
 };
 const Root = styled(Grid, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Feed Skeleton component. Learn about the available props and the CSS API.
 
@@ -25,15 +24,15 @@ const Root = styled(Grid, {
 
  #### Component Name
 
- The name `SCFeedSkeleton` can be used when providing style overrides in the theme.
+ The name `SCFeed-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCFeedSkeleton-root|Styles applied to the root element.|
- |left|.SCFeedSkeleton-left|Styles applied to the left section.|
- |right|.SCFeedSkeleton-right|Styles applied to the right section.|
+ |root|.SCFeed-skeleton-root|Styles applied to the root element.|
+ |left|.SCFeed-left|Styles applied to the left section.|
+ |right|.SCFeed-right|Styles applied to the right section.|
  *
  */
 export default function FeedSkeleton(props) {
@@ -51,4 +50,3 @@ export default function FeedSkeleton(props) {
             React.createElement(Grid, { item: true, xs: 12, md: 5 },
                 React.createElement("div", { className: classes.right }, sidebar)))));
 }
-//# sourceMappingURL=Skeleton.js.map

package/lib/esm/components/Feed/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCFeed";

package/lib/esm/components/Feed/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCFeed';

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

@@ -2,4 +2,3 @@ import Feed, { FeedRef, FeedProps, FeedSidebarProps } from './Feed';
 import FeedSkeleton from './Skeleton';
 export default Feed;
 export { FeedRef, FeedProps, FeedSkeleton, FeedSidebarProps };
-//# sourceMappingURL=index.d.ts.map

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

@@ -2,4 +2,3 @@ import Feed from './Feed';
 import FeedSkeleton from './Skeleton';
 export default Feed;
 export { FeedSkeleton };
-//# sourceMappingURL=index.js.map