@selfcommunity/react-ui 0.7.0-alpha.314 → 0.7.0-alpha.316

package/lib/esm/components/Editor/nodes/ImageNode.js

@@ -1,250 +1,20 @@
-import React, { Suspense, useCallback, useEffect, useRef, useState } from 'react';
-import { $getNodeByKey, $getSelection, $isNodeSelection, $setSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, DecoratorNode, DRAGSTART_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, TextNode } from 'lexical';
+import React, { Suspense, useCallback, useEffect, useRef } from 'react';
+import { $getNodeByKey, $getSelection, $isNodeSelection, $setSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, DecoratorNode, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, TextNode } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
 import { mergeRegister } from '@lexical/utils';
-import { styled } from '@mui/material/styles';
-import { FormattedMessage } from 'react-intl';
-import { Box, Button, InputAdornment, Paper, TextField } from '@mui/material';
-const PREFIX = 'SCEditorImagePluginImageEdit';
-const classes = {
-    root: `${PREFIX}-root`
-};
-const Root = styled(Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    zIndex: 2000,
-    outline: `2px solid ${theme.palette.primary.main}`,
-    userSelect: 'none',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    '& .MuiPaper-root': {
-        padding: theme.spacing(1),
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '50%',
-        backgroundColor: theme.palette.background.paper,
-        '& > *': {
-            margin: theme.spacing(1)
-        }
-    }
-}));
-const ImageEdit = ({ onResize, onDelete, imageRef }) => {
-    // STATE
-    const [width, setWidth] = useState(imageRef.current.width);
-    const [height, setHeight] = useState(imageRef.current.height);
-    const [openResizePanel, setOpenResizePanel] = useState(false);
-    // HANDLERS
-    const handleStopPropagation = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        return false;
-    };
-    const handleOpenResizePanel = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        setOpenResizePanel(true);
-        return false;
-    };
-    const handleChangeWidth = (event) => {
-        setWidth(event.target.value);
-    };
-    const handleChangeHeight = (event) => {
-        setHeight(event.target.value);
-    };
-    const handleResize = (event) => {
-        onResize(width, height);
-        setOpenResizePanel(false);
-    };
-    // RENDER
-    return (React.createElement(Root, { className: classes.root, style: { width: imageRef.current.width, height: imageRef.current.height }, contentEditable: false, onClick: handleStopPropagation },
-        React.createElement(Paper, null, openResizePanel ? (React.createElement(React.Fragment, null,
-            React.createElement(TextField, { value: width, type: "number", onChange: handleChangeWidth, label: React.createElement(FormattedMessage, { id: "ui.editor.imagePluginEdit.width", defaultMessage: "ui.editor.imagePluginEdit.width" }), InputProps: {
-                    endAdornment: React.createElement(InputAdornment, { position: "start" }, "px")
-                } }),
-            React.createElement(TextField, { value: height, type: "number", onChange: handleChangeHeight, label: React.createElement(FormattedMessage, { id: "ui.editor.imagePluginEdit.height", defaultMessage: "ui.editor.imagePluginEdit.height" }), InputProps: {
-                    endAdornment: React.createElement(InputAdornment, { position: "start" }, "px")
-                } }),
-            React.createElement(Button, { variant: "contained", color: "primary", disabled: width === imageRef.current.width && height === imageRef.current.height, onClick: handleResize },
-                React.createElement(FormattedMessage, { id: "ui.editor.imagePluginEdit.resize", defaultMessage: "ui.editor.imagePluginEdit.resize" })))) : (React.createElement(React.Fragment, null,
-            React.createElement(Button, { variant: "contained", color: "primary", onClick: handleOpenResizePanel },
-                React.createElement(FormattedMessage, { id: "ui.editor.imagePluginEdit.resize", defaultMessage: "ui.editor.imagePluginEdit.resize" })),
-            React.createElement(Button, { variant: "contained", color: "secondary", onClick: onDelete },
-                React.createElement(FormattedMessage, { id: "ui.editor.imagePluginEdit.delete", defaultMessage: "ui.editor.imagePluginEdit.delete" })))))));
-};
-function clamp(value, min, max) {
-    return Math.min(Math.max(value, min), Number(max));
-}
-const Direction = {
-    east: 1 << 0,
-    north: 1 << 3,
-    south: 1 << 1,
-    west: 1 << 2
-};
-function ImageResizer({ onResizeStart, onResizeEnd, imageRef, maxWidth, editor }) {
-    const controlWrapperRef = useRef(null);
-    const userSelect = useRef({
-        priority: '',
-        value: 'default'
-    });
-    const positioningRef = useRef({
-        currentHeight: 0,
-        currentWidth: 0,
-        direction: 0,
-        isResizing: false,
-        ratio: 0,
-        startHeight: 0,
-        startWidth: 0,
-        startX: 0,
-        startY: 0
-    });
-    const editorRootElement = editor.getRootElement();
-    // Find max width, accounting for editor padding.
-    const maxWidthContainer = maxWidth ? maxWidth : editorRootElement !== null ? editorRootElement.getBoundingClientRect().width - 20 : 100;
-    const maxHeightContainer = editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;
-    const minWidth = 100;
-    const minHeight = 100;
-    const setStartCursor = (direction) => {
-        const ew = direction === Direction.east || direction === Direction.west;
-        const ns = direction === Direction.north || direction === Direction.south;
-        const nwse = (direction & Direction.north && direction & Direction.west) || (direction & Direction.south && direction & Direction.east);
-        const cursorDir = ew ? 'ew' : ns ? 'ns' : nwse ? 'nwse' : 'nesw';
-        if (editorRootElement !== null) {
-            editorRootElement.style.setProperty('cursor', `${cursorDir}-resize`, 'important');
-        }
-        if (document.body !== null) {
-            document.body.style.setProperty('cursor', `${cursorDir}-resize`, 'important');
-            userSelect.current.value = document.body.style.getPropertyValue('-webkit-user-select');
-            userSelect.current.priority = document.body.style.getPropertyPriority('-webkit-user-select');
-            document.body.style.setProperty('-webkit-user-select', `none`, 'important');
-        }
-    };
-    const setEndCursor = () => {
-        if (editorRootElement !== null) {
-            editorRootElement.style.setProperty('cursor', 'text');
-        }
-        if (document.body !== null) {
-            document.body.style.setProperty('cursor', 'default');
-            document.body.style.setProperty('-webkit-user-select', userSelect.current.value, userSelect.current.priority);
-        }
-    };
-    const handlePointerDown = (event, direction) => {
-        if (!editor.isEditable()) {
-            return;
-        }
-        const image = imageRef.current;
-        const controlWrapper = controlWrapperRef.current;
-        if (image !== null && controlWrapper !== null) {
-            const { width, height } = image.getBoundingClientRect();
-            const positioning = positioningRef.current;
-            positioning.startWidth = width;
-            positioning.startHeight = height;
-            positioning.ratio = width / height;
-            positioning.currentWidth = width;
-            positioning.currentHeight = height;
-            positioning.startX = event.clientX;
-            positioning.startY = event.clientY;
-            positioning.isResizing = true;
-            positioning.direction = direction;
-            setStartCursor(direction);
-            onResizeStart();
-            controlWrapper.classList.add('image-control-wrapper--resizing');
-            image.style.height = `${height}px`;
-            image.style.width = `${width}px`;
-            document.addEventListener('pointermove', handlePointerMove);
-            document.addEventListener('pointerup', handlePointerUp);
-        }
-    };
-    const handlePointerMove = (event) => {
-        const image = imageRef.current;
-        const positioning = positioningRef.current;
-        const isHorizontal = positioning.direction & (Direction.east | Direction.west);
-        const isVertical = positioning.direction & (Direction.south | Direction.north);
-        if (image !== null && positioning.isResizing) {
-            // Corner cursor
-            if (isHorizontal && isVertical) {
-                let diff = Math.floor(positioning.startX - event.clientX);
-                diff = positioning.direction & Direction.east ? -diff : diff;
-                const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
-                const height = width / positioning.ratio;
-                image.style.width = `${width}px`;
-                image.style.height = `${height}px`;
-                positioning.currentHeight = height;
-                positioning.currentWidth = width;
-            }
-            else if (isVertical) {
-                let diff = Math.floor(positioning.startY - event.clientY);
-                diff = positioning.direction & Direction.south ? -diff : diff;
-                const height = clamp(positioning.startHeight + diff, minHeight, maxHeightContainer);
-                image.style.height = `${height}px`;
-                positioning.currentHeight = height;
-            }
-            else {
-                let diff = Math.floor(positioning.startX - event.clientX);
-                diff = positioning.direction & Direction.east ? -diff : diff;
-                const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
-                image.style.width = `${width}px`;
-                positioning.currentWidth = width;
-            }
-        }
-    };
-    const handlePointerUp = () => {
-        const image = imageRef.current;
-        const positioning = positioningRef.current;
-        const controlWrapper = controlWrapperRef.current;
-        if (image !== null && controlWrapper !== null && positioning.isResizing) {
-            const width = positioning.currentWidth;
-            const height = positioning.currentHeight;
-            positioning.startWidth = 0;
-            positioning.startHeight = 0;
-            positioning.ratio = 0;
-            positioning.startX = 0;
-            positioning.startY = 0;
-            positioning.currentWidth = 0;
-            positioning.currentHeight = 0;
-            positioning.isResizing = false;
-            controlWrapper.classList.remove('image-control-wrapper--resizing');
-            setEndCursor();
-            console.log(width);
-            console.log(height);
-            onResizeEnd(width, height);
-            document.removeEventListener('pointermove', handlePointerMove);
-            document.removeEventListener('pointerup', handlePointerUp);
-        }
-    };
-    return (React.createElement("div", { ref: controlWrapperRef },
-        React.createElement("div", { className: "image-resizer image-resizer-n", onPointerDown: (event) => {
-                handlePointerDown(event, Direction.north);
-            } }),
-        React.createElement("div", { className: "image-resizer image-resizer-ne", onPointerDown: (event) => {
-                handlePointerDown(event, Direction.north | Direction.east);
-            } }),
-        React.createElement("div", { className: "image-resizer image-resizer-e", onPointerDown: (event) => {
-                handlePointerDown(event, Direction.east);
-            } }),
-        React.createElement("div", { className: "image-resizer image-resizer-se", onPointerDown: (event) => {
-                handlePointerDown(event, Direction.south | Direction.east);
-            } }),
-        React.createElement("div", { className: "image-resizer image-resizer-s", onPointerDown: (event) => {
-                handlePointerDown(event, Direction.south);
-            } }),
-        React.createElement("div", { className: "image-resizer image-resizer-sw", onPointerDown: (event) => {
-                handlePointerDown(event, Direction.south | Direction.west);
-            } }),
-        React.createElement("div", { className: "image-resizer image-resizer-w", onPointerDown: (event) => {
-                handlePointerDown(event, Direction.west);
-            } }),
-        React.createElement("div", { className: "image-resizer image-resizer-nw", onPointerDown: (event) => {
-                handlePointerDown(event, Direction.north | Direction.west);
-            } })));
+/**
+ * Limit the width of an image
+ * Used to compute the padding-bottom of the div that wrap the img
+ */
+const IMAGE_WIDTH_THRESHOLD = 500;
+/**
+ * Calc aspect-ratio of image
+ * @param width
+ * @param height
+ */
+function getAspectRatio(width, height) {
+    return width / height;
 }
 const imageCache = new Set();
 function useSuspenseImage(src) {
@@ -259,21 +29,21 @@ function useSuspenseImage(src) {
         });
     }
 }
-function LazyImage({ altText, className, imageRef, src, width, height, maxWidth }) {
+function LazyImage({ altText, className, imageRef, src, width, height }) {
     useSuspenseImage(src);
-    return (React.createElement("img", { className: className, src: src, alt: altText, ref: imageRef, style: {
-            height: `${height}${height === 'inherit' ? '' : 'px'}`,
-            maxWidth,
-            width: `${width}${width === 'inherit' ? '' : 'px'}`
-        } }));
+    const aspectRatio = getAspectRatio(IMAGE_WIDTH_THRESHOLD, height);
+    return (React.createElement("div", { draggable: false, className: className, style: { position: 'relative', paddingBottom: `${100 / aspectRatio}%` } },
+        React.createElement("img", { src: src, alt: altText, ref: imageRef, style: {
+                position: 'absolute',
+                height: `100%`,
+                width: `100%`
+            } })));
 }
-function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, resizable }) {
+function ImageComponent({ src, altText, nodeKey, width, height }) {
     const imageRef = useRef(null);
     const buttonRef = useRef(null);
     const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
-    const [isResizing, setIsResizing] = useState(false);
     const [editor] = useLexicalComposerContext();
-    const [selection, setSelection] = useState(null);
     const activeEditorRef = useRef(null);
     const onDelete = useCallback((payload) => {
         if (isSelected && $isNodeSelection($getSelection())) {
@@ -314,19 +84,11 @@ function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, resiza
         return false;
     }, [editor, setSelected]);
     useEffect(() => {
-        let isMounted = true;
-        const unregister = mergeRegister(editor.registerUpdateListener(({ editorState }) => {
-            if (isMounted) {
-                setSelection(editorState.read(() => $getSelection()));
-            }
-        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, (_, activeEditor) => {
+        const unregister = mergeRegister(editor.registerCommand(SELECTION_CHANGE_COMMAND, (_, activeEditor) => {
             activeEditorRef.current = activeEditor;
             return false;
         }, COMMAND_PRIORITY_LOW), editor.registerCommand(CLICK_COMMAND, (payload) => {
             const event = payload;
-            if (isResizing) {
-                return true;
-            }
             if (event.target === imageRef.current) {
                 if (event.shiftKey) {
                     setSelected(!isSelected);
@@ -338,65 +100,36 @@ function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, resiza
                 return true;
             }
             return false;
-        }, COMMAND_PRIORITY_LOW), editor.registerCommand(DRAGSTART_COMMAND, (event) => {
-            if (event.target === imageRef.current) {
-                // TODO This is just a temporary workaround for FF to behave like other browsers.
-                // Ideally, this handles drag & drop too (and all browsers).
-                event.preventDefault();
-                return true;
-            }
-            return false;
         }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ENTER_COMMAND, onEnter, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ESCAPE_COMMAND, onEscape, COMMAND_PRIORITY_LOW));
         return () => {
-            isMounted = false;
             unregister();
         };
-    }, [clearSelection, editor, isResizing, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
-    const onResizeEnd = (nextWidth, nextHeight) => {
-        // Delay hiding the resize bars for click case
-        setTimeout(() => {
-            setIsResizing(false);
-        }, 200);
-        editor.update(() => {
-            const node = $getNodeByKey(nodeKey);
-            if ($isImageNode(node)) {
-                node.setWidthAndHeight(nextWidth, nextHeight);
-            }
-        });
-    };
-    const onResizeStart = () => {
-        setIsResizing(true);
-    };
-    const draggable = isSelected && $isNodeSelection(selection) && !isResizing;
-    const isFocused = isSelected || isResizing;
+    }, [clearSelection, editor, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
+    const isFocused = isSelected;
     return (React.createElement(Suspense, { fallback: null },
-        React.createElement(React.Fragment, null,
-            React.createElement("div", { draggable: draggable },
-                React.createElement(LazyImage, { className: isFocused ? `focused ${$isNodeSelection(selection) ? 'draggable' : ''}` : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth })),
-            resizable && $isNodeSelection(selection) && isFocused && (React.createElement(ImageResizer, { editor: editor, imageRef: imageRef, maxWidth: typeof maxWidth === 'number' ? maxWidth : null, onResizeStart: onResizeStart, onResizeEnd: onResizeEnd })))));
+        React.createElement(LazyImage, { className: isFocused ? `focused` : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height })));
 }
 function convertImageElement(domNode) {
     if (domNode instanceof HTMLImageElement) {
-        const { alt: altText, src, width, height } = domNode;
-        const node = $createImageNode({ altText, height, src, width, maxWidth: '100%' });
+        const { alt: altText, src, dataset: { width, height } } = domNode;
+        const node = $createImageNode({ altText, height: Number(height), src, width: Number(width) });
         return { node };
     }
     return null;
 }
 export class ImageNode extends DecoratorNode {
-    constructor(src, altText, maxWidth, width, height, key) {
+    constructor(src, altText, width, height, key) {
         super(key);
         this.__src = src;
         this.__altText = altText;
-        this.__maxWidth = maxWidth;
-        this.__width = width || 'inherit';
-        this.__height = height || 'inherit';
+        this.__width = width;
+        this.__height = height;
     }
     static getType() {
         return 'image';
     }
     static clone(node) {
-        return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__width, node.__height, node.__key);
+        return new ImageNode(node.__src, node.__altText, node.__width, node.__height, node.__key);
     }
     setWidthAndHeight(width, height) {
         const writable = this.getWritable();
@@ -430,24 +163,26 @@ export class ImageNode extends DecoratorNode {
             }) }, dom);
     }
     exportDOM() {
-        const element = document.createElement('img');
-        element.setAttribute('src', this.__src);
-        element.setAttribute('alt', this.__altText);
-        element.setAttribute('width', `${this.__width}`);
-        element.setAttribute('height', `${this.__height}`);
-        element.setAttribute('style', `max-width: ${this.__maxWidth}px;`);
+        const aspectRatio = getAspectRatio(this.__width, this.__height);
+        const element = document.createElement('div');
+        element.setAttribute('style', `position: relative;padding-bottom:${100 / aspectRatio}%`);
+        const image = document.createElement('img');
+        image.setAttribute('src', this.__src);
+        image.setAttribute('alt', this.__altText);
+        image.setAttribute('style', `position: absolute;width:100%;height:100%;`);
+        image.setAttribute('data-width', `${this.__width}`);
+        image.setAttribute('data-height', `${this.__height}`);
+        element.appendChild(image);
         return { element };
     }
     decorate() {
-        console.log(this.__maxWidth);
-        return (React.createElement(ImageComponent, { src: this.__src, altText: this.__altText, width: this.__width, height: this.__height, maxWidth: this.__maxWidth, nodeKey: this.getKey(), resizable: true }));
+        return React.createElement(ImageComponent, { src: this.__src, altText: this.__altText, width: this.__width, height: this.__height, nodeKey: this.getKey() });
     }
     static importJSON(serializedNode) {
-        const { altText, height, width, maxWidth, src } = serializedNode;
+        const { altText, height, width, src } = serializedNode;
         const node = $createImageNode({
             altText,
             height,
-            maxWidth,
             src,
             width
         });
@@ -456,17 +191,16 @@ export class ImageNode extends DecoratorNode {
     exportJSON() {
         return {
             altText: this.getAltText(),
-            height: this.__height === 'inherit' ? 0 : this.__height,
-            maxWidth: this.__maxWidth,
+            height: this.__height,
             src: this.getSrc(),
             type: 'image',
             version: 1,
-            width: this.__width === 'inherit' ? 0 : this.__width
+            width: this.__width
         };
     }
 }
-export function $createImageNode({ src, altText, maxWidth, width = null, height = null }) {
-    return new ImageNode(src, altText, maxWidth, width, height);
+export function $createImageNode({ src, altText, width, height }) {
+    return new ImageNode(src, altText, width, height);
 }
 export function $isImageNode(node) {
     return node.getType() === 'image';

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

@@ -91,7 +91,7 @@ export default function ImagePlugin() {
                 if ($isRootNode(selection.anchor.getNode())) {
                     selection.insertParagraph();
                 }
-                const imageNode = $createImageNode({ src: payload.src, altText: payload.altText, maxWidth: '100%', width: payload.width, height: payload.height });
+                const imageNode = $createImageNode({ src: payload.src, altText: payload.altText, width: payload.width, height: payload.height });
                 selection.insertNodes([imageNode]);
             }
             return true;

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

@@ -2,7 +2,7 @@
 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 { styled, useTheme } from '@mui/material/styles';
-import { Box, 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';
@@ -25,6 +25,7 @@ const PREFIX = 'SCFeed';
 const classes = {
     root: `${PREFIX}-root`,
     left: `${PREFIX}-left`,
+    leftItems: `${PREFIX}-left-items`,
     start: `${PREFIX}-start`,
     end: `${PREFIX}-end`,
     endMessage: `${PREFIX}-end-message`,
@@ -411,14 +412,14 @@ const Feed = (inProps, ref) => {
             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(Box, { className: classes.end },
+                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: '80%', 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' } },
                     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(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 }, 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),