@selfcommunity/react-ui 0.7.0-alpha.326 → 0.7.0-alpha.328

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

@@ -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 {}

package/lib/cjs/components/Feed/Feed.js

@@ -78,7 +78,7 @@ const Feed = (inProps, ref) => {
         props: inProps,
         name: PREFIX
     });
-    const { id = 'feed', className, endpoint, endpointQueryParams = { limit: Pagination_1.DEFAULT_PAGINATION_LIMIT, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, endMessage = react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.feed.noOtherFeedObject", defaultMessage: "ui.feed.noOtherFeedObject" }), refreshMessage = react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.feed.refreshRelease", defaultMessage: "ui.feed.refreshRelease" }), HeaderComponent, FooterComponent = Footer_1.default, FooterComponentProps = {}, widgets = [], ItemComponent, itemPropsGenerator, itemIdGenerator, ItemProps = {}, ItemSkeleton, ItemSkeletonProps = {}, onNextData, onPreviousData, FeedSidebarProps = {}, CustomAdvProps = {}, enabledCustomAdvPositions = [types_1.SCCustomAdvPosition.POSITION_FEED_SIDEBAR, types_1.SCCustomAdvPosition.POSITION_FEED], requireAuthentication = false, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY, prefetchedData, VirtualizedScrollerProps = {}, disablePaginationLinks = false, hidePaginationLinks = true, paginationLinksPageQueryParam = Pagination_1.DEFAULT_PAGINATION_QUERY_PARAM_NAME, PaginationLinkProps = {}, hideAdvs = false } = props;
+    const { id = 'feed', className, endpoint, endpointQueryParams = { limit: Pagination_1.DEFAULT_PAGINATION_LIMIT, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, endMessage = react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.feed.noOtherFeedObject", defaultMessage: "ui.feed.noOtherFeedObject" }), refreshMessage = react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.feed.refreshRelease", defaultMessage: "ui.feed.refreshRelease" }), HeaderComponent, FooterComponent = Footer_1.default, FooterComponentProps = {}, widgets = [], ItemComponent, itemPropsGenerator, itemIdGenerator, ItemProps = {}, ItemSkeleton, ItemSkeletonProps = {}, onNextData, onPreviousData, FeedSidebarProps = {}, CustomAdvProps = {}, enabledCustomAdvPositions = [types_1.SCCustomAdvPosition.POSITION_FEED_SIDEBAR, types_1.SCCustomAdvPosition.POSITION_FEED], requireAuthentication = false, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY, prefetchedData, scrollableTargetId, VirtualizedScrollerProps = {}, disablePaginationLinks = false, hidePaginationLinks = true, paginationLinksPageQueryParam = Pagination_1.DEFAULT_PAGINATION_QUERY_PARAM_NAME, PaginationLinkProps = {}, hideAdvs = false } = props;
     // CONTEXT
     const scPreferences = (0, react_1.useContext)(react_core_1.SCPreferencesContext);
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
@@ -94,6 +94,7 @@ const Feed = (inProps, ref) => {
     }, [endpointQueryParams, prefetchedData]);
     // REF
     const isMountRef = (0, react_core_1.useIsComponentMountedRef)();
+    const containerRef = (0, react_1.useRef)(null);
     /**
      * Compute preferences
      */
@@ -414,15 +415,14 @@ const Feed = (inProps, ref) => {
         advEnabled && !hideAdvs && enabledCustomAdvPositions.includes(types_1.SCCustomAdvPosition.POSITION_BELOW_TOPBAR) ? (react_1.default.createElement(material_1.Grid, { item: true, xs: 12 },
             react_1.default.createElement(CustomAdv_1.default, Object.assign({ position: types_1.SCCustomAdvPosition.POSITION_BELOW_TOPBAR }, CustomAdvProps)))) : null,
         react_1.default.createElement(material_1.Grid, { item: true, xs: 12, md: 7 },
-            react_1.default.createElement("div", { style: { overflow: 'visible' } },
-                react_1.default.createElement(InfiniteScroll_1.default, { className: classes.left, dataLength: feedDataLeft.length, next: getNextPage, previous: getPreviousPage, hasMoreNext: Boolean(feedDataObject.next), hasMorePrevious: Boolean(feedDataObject.previous), header: PreviousPageLink, footer: NextPageLink, loaderNext: react_1.default.createElement(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), loaderPrevious: react_1.default.createElement(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), scrollThreshold: '90%', endMessage: react_1.default.createElement(material_1.Box, { className: classes.end },
-                        react_1.default.createElement(Widget_1.default, { className: classes.endMessage },
-                            react_1.default.createElement(material_1.CardContent, null, endMessage)),
-                        advEnabled && !hideAdvs && enabledCustomAdvPositions.includes(types_1.SCCustomAdvPosition.POSITION_ABOVE_FOOTER_BAR) ? (react_1.default.createElement(CustomAdv_1.default, Object.assign({ position: types_1.SCCustomAdvPosition.POSITION_ABOVE_FOOTER_BAR }, CustomAdvProps))) : null,
-                        FooterComponent ? react_1.default.createElement(FooterComponent, Object.assign({}, FooterComponentProps)) : null), refreshFunction: refresh, pullDownToRefresh: true, pullDownToRefreshThreshold: 1000, pullDownToRefreshContent: null, releaseToRefreshContent: react_1.default.createElement(Widget_1.default, { variant: "outlined", className: classes.refresh },
-                        react_1.default.createElement(material_1.CardContent, null, refreshMessage)), style: { overflow: 'visible' } },
-                    renderHeaderComponent(),
-                    react_1.default.createElement(VirtualizedScroller_1.default, Object.assign({ className: classes.leftItems, items: feedDataLeft, itemComponent: InnerItem, onMount: onScrollerMount, onScrollerStateChange: onScrollerStateChange, getItemId: getScrollItemId, preserveScrollPosition: true, preserveScrollPositionOnPrependItems: true, cacheScrollStateKey: react_core_1.SCCache.getVirtualizedScrollStateCacheKey(id), cacheScrollerPositionKey: react_core_1.SCCache.getFeedSPCacheKey(id), cacheStrategy: cacheStrategy }, VirtualizedScrollerProps))))),
+            react_1.default.createElement(InfiniteScroll_1.default, 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_1.default.createElement(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), loaderPrevious: react_1.default.createElement(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), scrollThreshold: '90%', endMessage: react_1.default.createElement(material_1.Box, { className: classes.end },
+                    react_1.default.createElement(Widget_1.default, { className: classes.endMessage },
+                        react_1.default.createElement(material_1.CardContent, null, endMessage)),
+                    advEnabled && !hideAdvs && enabledCustomAdvPositions.includes(types_1.SCCustomAdvPosition.POSITION_ABOVE_FOOTER_BAR) ? (react_1.default.createElement(CustomAdv_1.default, Object.assign({ position: types_1.SCCustomAdvPosition.POSITION_ABOVE_FOOTER_BAR }, CustomAdvProps))) : null,
+                    FooterComponent ? react_1.default.createElement(FooterComponent, Object.assign({}, FooterComponentProps)) : null), refreshFunction: refresh, pullDownToRefresh: true, pullDownToRefreshThreshold: 1000, pullDownToRefreshContent: null, releaseToRefreshContent: react_1.default.createElement(Widget_1.default, { variant: "outlined", className: classes.refresh },
+                    react_1.default.createElement(material_1.CardContent, null, refreshMessage)), style: { overflow: 'visible' } }, (scrollableTargetId && { scrollableTarget: scrollableTargetId })),
+                renderHeaderComponent(),
+                react_1.default.createElement(VirtualizedScroller_1.default, Object.assign({ className: classes.leftItems, items: feedDataLeft, itemComponent: InnerItem, onMount: onScrollerMount, onScrollerStateChange: onScrollerStateChange, getItemId: getScrollItemId, preserveScrollPosition: true, preserveScrollPositionOnPrependItems: true, cacheScrollStateKey: react_core_1.SCCache.getVirtualizedScrollStateCacheKey(id), cacheScrollerPositionKey: react_core_1.SCCache.getFeedSPCacheKey(id), cacheStrategy: cacheStrategy }, (scrollableTargetId && { getScrollableContainer: () => document.getElementById(scrollableTargetId) }), VirtualizedScrollerProps)))),
         feedDataRight.length > 0 && !hideAdvs && (react_1.default.createElement(material_1.Hidden, { smDown: true },
             react_1.default.createElement(material_1.Grid, { item: true, xs: 12, md: 5 },
                 react_1.default.createElement(StickyBox_1.default, Object.assign({ className: classes.right }, FeedSidebarProps),

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

@@ -1,6 +1,6 @@
 import { Component, ReactNode, CSSProperties } from 'react';
 declare type Fn = () => any;
-export interface Props {
+export interface InfiniteScrollProps {
     next?: Fn;
     hasMoreNext?: boolean;
     previous?: Fn;
@@ -33,8 +33,8 @@ interface State {
     pullToRefreshThresholdBreached: boolean;
     prevDataLength: number | undefined;
 }
-export default class InfiniteScroll extends Component<Props, State> {
-    constructor(props: Props);
+declare class InfiniteScroll extends Component<InfiniteScrollProps, State> {
+    constructor(props: InfiniteScrollProps);
     private throttledOnScrollListener;
     private _scrollableNode;
     private el;
@@ -48,8 +48,8 @@ export default class InfiniteScroll extends Component<Props, State> {
     private maxPullDownDistance;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    componentDidUpdate(prevProps: Props): void;
-    static getDerivedStateFromProps(nextProps: Props, prevState: State): {
+    componentDidUpdate(prevProps: InfiniteScrollProps): void;
+    static getDerivedStateFromProps(nextProps: InfiniteScrollProps, prevState: State): {
         prevDataLength: number;
         showLoaderNext: boolean;
         showLoaderPrevious: boolean;
@@ -64,4 +64,4 @@ export default class InfiniteScroll extends Component<Props, State> {
     onScrollListener: (event: MouseEvent) => void;
     render(): JSX.Element;
 }
-export {};
+export default InfiniteScroll;

package/lib/cjs/shared/InfiniteScroll/stories/ScrollableTargetFixedInfScroll.d.ts

@@ -0,0 +1 @@
+export default function ScrollableTargetFixedInfScroll(): JSX.Element;

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const index_1 = tslib_1.__importDefault(require("../index"));
+const style = {
+    height: 30,
+    border: '1px solid green',
+    margin: 6,
+    padding: 8
+};
+function ScrollableTargetFixedInfScroll() {
+    const [items, setItems] = (0, react_1.useState)(Array.from({ length: 20 }));
+    const fetchMoreData = () => {
+        // a fake async api call like which sends
+        // 20 more records in 1.5 secs
+        setTimeout(() => {
+            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)))))));
+}
+exports.default = ScrollableTargetFixedInfScroll;

package/lib/cjs/shared/VirtualizedScroller/VirtualizedScroller.d.ts

@@ -5,6 +5,8 @@ import { VirtualScrollerCommonOptions } from 'virtual-scroller';
  * VirtualizedScrollerCommonProps Interface
  */
 export interface VirtualizedScrollerCommonProps extends VirtualScrollerCommonOptions<HTMLElement, any>, React.HTMLAttributes<HTMLElement> {
+    scrollableContainer?: any;
+    getScrollableContainer?: () => Element;
 }
 /**
  * VirtualizedScrollerProps Interface

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

@@ -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 {}

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

@@ -75,7 +75,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);
@@ -91,6 +91,7 @@ const Feed = (inProps, ref) => {
     }, [endpointQueryParams, prefetchedData]);
     // REF
     const isMountRef = useIsComponentMountedRef();
+    const containerRef = useRef(null);
     /**
      * Compute preferences
      */
@@ -411,15 +412,14 @@ 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: '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' } },
-                    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 }, 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),

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

@@ -1,6 +1,6 @@
 import { Component, ReactNode, CSSProperties } from 'react';
 declare type Fn = () => any;
-export interface Props {
+export interface InfiniteScrollProps {
     next?: Fn;
     hasMoreNext?: boolean;
     previous?: Fn;
@@ -33,8 +33,8 @@ interface State {
     pullToRefreshThresholdBreached: boolean;
     prevDataLength: number | undefined;
 }
-export default class InfiniteScroll extends Component<Props, State> {
-    constructor(props: Props);
+declare class InfiniteScroll extends Component<InfiniteScrollProps, State> {
+    constructor(props: InfiniteScrollProps);
     private throttledOnScrollListener;
     private _scrollableNode;
     private el;
@@ -48,8 +48,8 @@ export default class InfiniteScroll extends Component<Props, State> {
     private maxPullDownDistance;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    componentDidUpdate(prevProps: Props): void;
-    static getDerivedStateFromProps(nextProps: Props, prevState: State): {
+    componentDidUpdate(prevProps: InfiniteScrollProps): void;
+    static getDerivedStateFromProps(nextProps: InfiniteScrollProps, prevState: State): {
         prevDataLength: number;
         showLoaderNext: boolean;
         showLoaderPrevious: boolean;
@@ -64,4 +64,4 @@ export default class InfiniteScroll extends Component<Props, State> {
     onScrollListener: (event: MouseEvent) => void;
     render(): JSX.Element;
 }
-export {};
+export default InfiniteScroll;

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

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { throttle } from 'throttle-debounce';
 import { ThresholdUnits, parseThreshold } from '../../utils/threshold';
-export default class InfiniteScroll extends Component {
+class InfiniteScroll extends Component {
     constructor(props) {
         super(props);
         this.lastScrollTop = 0;
@@ -241,3 +241,4 @@ export default class InfiniteScroll extends Component {
                 this.props.footer)));
     }
 }
+export default InfiniteScroll;

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

@@ -0,0 +1 @@
+export default function ScrollableTargetFixedInfScroll(): JSX.Element;

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

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import InfiniteScroll from '../index';
+const style = {
+    height: 30,
+    border: '1px solid green',
+    margin: 6,
+    padding: 8
+};
+export default function ScrollableTargetFixedInfScroll() {
+    const [items, setItems] = useState(Array.from({ length: 20 }));
+    const fetchMoreData = () => {
+        // a fake async api call like which sends
+        // 20 more records in 1.5 secs
+        setTimeout(() => {
+            setItems(items.concat(Array.from({ length: 20 })));
+        }, 1500);
+    };
+    return (React.createElement("div", null,
+        React.createElement("h1", null, "demo: Infinite Scroll with scrollable target FIXED"),
+        React.createElement("hr", null),
+        React.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.createElement(InfiniteScroll, { dataLength: items.length, hasMoreNext: true, next: fetchMoreData, loaderNext: React.createElement("h4", null, "Loading..."), scrollableTarget: "scrollableDiv" }, items.map((_, index) => (React.createElement("div", { style: style, key: index },
+                "div - #",
+                index)))))));
+}

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

@@ -5,6 +5,8 @@ import { VirtualScrollerCommonOptions } from 'virtual-scroller';
  * VirtualizedScrollerCommonProps Interface
  */
 export interface VirtualizedScrollerCommonProps extends VirtualScrollerCommonOptions<HTMLElement, any>, React.HTMLAttributes<HTMLElement> {
+    scrollableContainer?: any;
+    getScrollableContainer?: () => Element;
 }
 /**
  * VirtualizedScrollerProps Interface