Update catalog scrolling

src/components/catalog/views/navigation/CatalogNavigationItemView.tsx

@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { FC } from 'react';
+import { FC, useRef } from 'react';
 import { ICatalogNode } from '../../../../api';
 import { Base, LayoutGridItem, Text } from '../../../../common';
 import { useCatalog } from '../../../../hooks';
@@ -16,10 +16,18 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
 {
     const { node = null, child = false } = props;
     const { activateNode = null } = useCatalog();
+    const elementRef = useRef<HTMLDivElement>();
+
+    const selectNode = () =>
+    {
+        if(node.isBranch && !node.isActive) elementRef?.current?.scrollIntoView();
+
+        activateNode(node);
+    }
     
     return (
-        <Base className="nitro-catalog-navigation-section">
+        <Base innerRef={ elementRef } className="nitro-catalog-navigation-section">
-            <LayoutGridItem gap={ 1 } column={ false } itemActive={ node.isActive } onClick={ event => activateNode(node) } className={ child ? 'inset' : '' }>
+            <LayoutGridItem gap={ 1 } column={ false } itemActive={ node.isActive } onClick={ selectNode } className={ child ? 'inset' : '' }>
                 <CatalogIconView icon={ node.iconId } />
                 <Text grow truncate>{ node.localization }</Text>
                 { node.isBranch &&

src/components/catalog/views/navigation/CatalogNavigationView.tsx

@@ -20,7 +20,7 @@ export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
         <>
             <CatalogSearchView />
             <Column fullHeight className="nitro-catalog-navigation-grid-container rounded p-1" overflow="hidden">
-                <AutoGrid gap={ 1 } columnCount={ 1 }>
+                <AutoGrid id="nitro-catalog-main-navigation" gap={ 1 } columnCount={ 1 }>
                     { searchResult && (searchResult.filteredNodes.length > 0) && searchResult.filteredNodes.map((n, index) =>
                     {
                         return <CatalogNavigationItemView key={ index } node={ n } />;

src/components/catalog/views/page/widgets/CatalogBundleGridWidgetView.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useEffect, useRef } from 'react';
 import { AutoGrid, AutoGridProps, LayoutGridItem } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 
@@ -11,11 +11,17 @@ export const CatalogBundleGridWidgetView: FC<CatalogBundleGridWidgetViewProps> =
 {
     const { columnCount = 5, children = null, ...rest } = props;
     const { currentOffer = null } = useCatalog();
+    const elementRef = useRef<HTMLDivElement>();
+
+    useEffect(() =>
+    {
+        if(elementRef && elementRef.current) elementRef.current.scrollTop = 0;
+    }, [ currentOffer ]);
 
     if(!currentOffer) return null;
 
     return (
-        <AutoGrid columnCount={ 5 } { ...rest }>
+        <AutoGrid innerRef={ elementRef } columnCount={ 5 } { ...rest }>
             { currentOffer.products && (currentOffer.products.length > 0) && currentOffer.products.map((product, index) => <LayoutGridItem key={ index } itemImage={ product.getIconUrl() } itemCount={ product.productCount } />) }
             { children }
         </AutoGrid>

src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useEffect, useRef } from 'react';
 import { IPurchasableOffer, ProductTypeEnum } from '../../../../../api';
 import { AutoGrid, AutoGridProps } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
@@ -13,6 +13,12 @@ export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = pro
 {
     const { columnCount = 5, children = null, ...rest } = props;
     const { currentOffer = null, setCurrentOffer = null, currentPage = null, setPurchaseOptions = null } = useCatalog();
+    const elementRef = useRef<HTMLDivElement>();
+
+    useEffect(() =>
+    {
+        if(elementRef && elementRef.current) elementRef.current.scrollTop = 0;
+    }, [ currentPage ]);
 
     if(!currentPage) return null;
 
@@ -38,7 +44,7 @@ export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = pro
     }
 
     return (
-        <AutoGrid columnCount={ columnCount } { ...rest }>
+        <AutoGrid innerRef={ elementRef } columnCount={ columnCount } { ...rest }>
             { currentPage.offers && (currentPage.offers.length > 0) && currentPage.offers.map((offer, index) => <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer.offerId === offer.offerId)) } offer={ offer } selectOffer={ selectOffer } />) }
             { children }
         </AutoGrid>

src/components/catalog/views/page/widgets/CatalogSpacesWidgetView.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, useEffect, useRef, useState } from 'react';
 import { IPurchasableOffer, LocalizeText, Offer, ProductTypeEnum } from '../../../../../api';
 import { AutoGrid, AutoGridProps, Button, ButtonGroup } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
@@ -18,6 +18,7 @@ export const CatalogSpacesWidgetView: FC<CatalogSpacesWidgetViewProps> = props =
     const [ selectedGroupIndex, setSelectedGroupIndex ] = useState(-1);
     const [ selectedOfferForGroup, setSelectedOfferForGroup ] = useState<IPurchasableOffer[]>(null);
     const { currentPage = null, currentOffer = null, setCurrentOffer = null, setPurchaseOptions = null } = useCatalog();
+    const elementRef = useRef<HTMLDivElement>();
 
     const setSelectedOffer = (offer: IPurchasableOffer) =>
     {
@@ -91,6 +92,11 @@ export const CatalogSpacesWidgetView: FC<CatalogSpacesWidgetViewProps> = props =
         });
     }, [ currentOffer, selectedGroupIndex, selectedOfferForGroup, setPurchaseOptions ]);
 
+    useEffect(() =>
+    {
+        if(elementRef && elementRef.current) elementRef.current.scrollTop = 0;
+    }, [ selectedGroupIndex ]);
+
     if(!groupedOffers || (selectedGroupIndex === -1)) return null;
 
     const offers = groupedOffers[selectedGroupIndex];
@@ -100,7 +106,7 @@ export const CatalogSpacesWidgetView: FC<CatalogSpacesWidgetViewProps> = props =
             <ButtonGroup>
                 { SPACES_GROUP_NAMES.map((name, index) => <Button key={ index } active={ (selectedGroupIndex === index) } onClick={ event => setSelectedGroupIndex(index) }>{ LocalizeText(`catalog.spaces.tab.${ name }`) }</Button>) }
             </ButtonGroup>
-            <AutoGrid columnCount={ columnCount } { ...rest }>
+            <AutoGrid innerRef={ elementRef } columnCount={ columnCount } { ...rest }>
                 { offers && (offers.length > 0) && offers.map((offer, index) => <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer === offer)) } offer={ offer } selectOffer={ offer => setSelectedOffer(offer) } />) }
                 { children }
             </AutoGrid>