@atlaskit/help 6.0.7 → 7.0.2

package/dist/es2019/components/WhatsNew/WhatsNewButton/index.js

@@ -25,20 +25,18 @@ export const WhatsNewButton = ({
     whatsNewGetNotificationProvider
   } = useWhatsNewArticleContext();
   const {
-    setArticleId
+    openArticle
   } = useNavigationContext();
   const handleOnButtonClick = useCallback((id, analytics, event) => {
     if (onWhatsNewButtonClick) {
       onWhatsNewButtonClick(event, analytics);
     }
 
-    if (setArticleId) {
-      setArticleId({
-        id: '',
-        type: ARTICLE_TYPE.WHATS_NEW
-      });
-    }
-  }, [onWhatsNewButtonClick, setArticleId]);
+    openArticle({
+      id: '',
+      type: ARTICLE_TYPE.WHATS_NEW
+    });
+  }, [onWhatsNewButtonClick, openArticle]);
   return /*#__PURE__*/React.createElement(HelpContentButton, {
     id: "whats-new",
     key: "whats-new",

package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultsList.js

@@ -20,7 +20,7 @@ const WhatsNewResultsList = ({
       const featureRolloutDateString = whatsNewArticle === null || whatsNewArticle === void 0 ? void 0 : whatsNewArticle.featureRolloutDate;
 
       if (featureRolloutDateString) {
-        const featureRolloutDateArray = featureRolloutDateString.replace('-', '/');
+        const featureRolloutDateArray = featureRolloutDateString.replace('/-/g', '/');
         const featureRolloutDate = toDate(new Date(featureRolloutDateArray));
 
         if (whatsNewArticlesGroupedByDateTemp[featureRolloutDateString]) {

package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/index.js

@@ -29,7 +29,7 @@ const WhatsNewResultsList = ({
   onShowMoreButtonClick
 }) => {
   const {
-    setArticleId
+    openArticle
   } = useNavigationContext();
 
   const handleShowMoreButtonClick = (event, analyticsEvent) => {
@@ -39,17 +39,15 @@ const WhatsNewResultsList = ({
   };
 
   const handleOnWhatsNewResultItemClick = useCallback((event, analyticsEvent, articleData) => {
-    if (setArticleId) {
-      setArticleId({
-        id: articleData.id,
-        type: ARTICLE_TYPE.WHATS_NEW
-      });
-    }
+    openArticle({
+      id: articleData.id,
+      type: ARTICLE_TYPE.WHATS_NEW
+    });
 
     if (onWhatsNewResultItemClick) {
       onWhatsNewResultItemClick(event, analyticsEvent, articleData);
     }
-  }, [onWhatsNewResultItemClick, setArticleId]);
+  }, [onWhatsNewResultItemClick, openArticle]);
   return whatsNewArticles && whatsNewArticles.length > 0 ? /*#__PURE__*/React.createElement(WhatsNewResultsListContainer, null, /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: {
       [itemThemeNamespace]: ITEM_THEME

package/dist/es2019/components/WhatsNew/WhatsNewResults/index.js

@@ -1,5 +1,6 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useRef } from 'react';
 import { Transition } from 'react-transition-group';
+import isEqual from 'lodash/isEqual';
 import Select from '@atlaskit/select';
 import { injectIntl } from 'react-intl-next';
 import { VIEW } from '../../constants';
@@ -51,11 +52,17 @@ export const WhatsNewResults = ({
     searchWhatsNewArticlesState,
     onWhatsNewResultItemClick
   } = useWhatsNewArticleContext();
+  const containerRef = useRef(null);
+  const containerScrollPosition = useRef(0);
   const SELECT_DEFAULT_VALUE = {
     value: '',
     label: formatMessage(messages.help_whats_new_filter_select_option_all)
   };
-  const [selectedOption, setSelectedOption] = useState(SELECT_DEFAULT_VALUE);
+  const SELECT_EMPTY_VALUE = {
+    value: undefined,
+    label: ''
+  };
+  const [selectedOption, setSelectedOption] = useState(SELECT_EMPTY_VALUE);
   const handleOnShowMoreButtonClick = useCallback(() => {
     if (searchWhatsNewArticlesResult && onSearchWhatsNewArticles) {
       const {
@@ -70,8 +77,25 @@ export const WhatsNewResults = ({
   }, [onSearchWhatsNewArticles, searchWhatsNewArticlesResult, selectedOption]);
 
   const handleOnEnter = () => {
-    setSelectedOption(SELECT_DEFAULT_VALUE);
-    onSearchWhatsNewArticles && onSearchWhatsNewArticles();
+    setTimeout(() => {
+      if (containerRef.current) {
+        containerRef.current.scrollTop = containerScrollPosition.current;
+      }
+    }, 0);
+
+    if (isEqual(selectedOption, SELECT_EMPTY_VALUE)) {
+      setSelectedOption(SELECT_DEFAULT_VALUE);
+      onSearchWhatsNewArticles && onSearchWhatsNewArticles();
+    }
+  };
+
+  const handleOnExit = () => {
+    if (helpContextView === VIEW.DEFAULT_CONTENT) {
+      setSelectedOption(SELECT_EMPTY_VALUE);
+      containerScrollPosition.current = 0;
+    } else {
+      containerScrollPosition.current = containerRef.current ? containerRef.current.scrollTop : 0;
+    }
   };
 
   const handleOnClearFilter = () => {
@@ -87,8 +111,10 @@ export const WhatsNewResults = ({
   return /*#__PURE__*/React.createElement(Transition, {
     in: helpContextView === VIEW.WHATS_NEW,
     timeout: FADEIN_OVERLAY_TRANSITION_DURATION_MS,
-    onEnter: handleOnEnter
+    onEnter: handleOnEnter,
+    onExit: handleOnExit
   }, state => /*#__PURE__*/React.createElement(WhatsNewResultsContainer, {
+    ref: containerRef,
     style: { ...defaultStyle,
       ...transitionStyles[state]
     }

package/dist/es2019/components/contexts/navigationContext.js

@@ -1,4 +1,5 @@
 import React, { useReducer, useEffect, useCallback, useMemo } from 'react';
+import isEqual from 'lodash/isEqual';
 import { REQUEST_STATE } from '../../model/Requests';
 import { ARTICLE_TYPE } from '../../model/Help';
 import { createCtx } from '../../util/hooks/ctx';
@@ -8,6 +9,10 @@ import { useWhatsNewArticleContext } from './whatsNewArticleContext';
 import { useHomeContext } from './homeContext';
 import { useSearchContext } from './searchContext';
 import { useHeaderContext } from './headerContext';
+const DEFAULT_ARTICLE_ID = {
+  id: '',
+  type: ARTICLE_TYPE.HELP_ARTICLE
+};
 export const [useNavigationContext, CtxProvider] = createCtx();
 
 const getNewHistoryItem = (id, type) => {
@@ -39,6 +44,21 @@ const getSimpleHistory = history => history.map(historyItem => {
     type
   };
 });
+/**
+ * Get history data (list of IDs and UID)
+ */
+
+
+const getHistoryData = history => history.map(historyItem => {
+  const {
+    id,
+    uid
+  } = historyItem;
+  return {
+    id,
+    uid
+  };
+});
 /**
  * Get the last article in the history
  */
@@ -111,10 +131,28 @@ const navigationReducer = ({
     const {
       payload: newArticleId
     } = action;
+
+    if (isEqual(newArticleId, DEFAULT_ARTICLE_ID)) {
+      newState = {
+        articleId: newArticleId,
+        history: [],
+        view: VIEW.DEFAULT_CONTENT
+      };
+    } else {
+      newState = {
+        articleId: newArticleId,
+        history: [...currentHistory, getNewHistoryItem(newArticleId.id, newArticleId.type)],
+        view: getViewForArticleId(newArticleId)
+      };
+    }
+  } else if (action.type === 'addNewHistoryItem' && action.payload) {
+    const {
+      payload: newArticleId
+    } = action;
     newState = {
-      articleId: newArticleId,
+      articleId: currentArticleId,
       history: [...currentHistory, getNewHistoryItem(newArticleId.id, newArticleId.type)],
-      view: getViewForArticleId(newArticleId)
+      view: getViewForArticleId(currentArticleId)
     };
   } else if (action.type === 'updateHistoryItem' && action.payload) {
     const {
@@ -175,13 +213,11 @@ const navigationReducer = ({
 };
 
 export const NavigationContextProvider = ({
-  articleId: propsArticleId = {
-    id: '',
-    type: ARTICLE_TYPE.HELP_ARTICLE
+  navigationData = {
+    articleId: DEFAULT_ARTICLE_ID,
+    history: []
   },
-  articleIdSetter,
-  history: propsHistory = [],
-  historySetter,
+  setNavigationData,
   children
 }) => {
   const {
@@ -202,13 +238,17 @@ export const NavigationContextProvider = ({
   const {
     onCloseButtonClick
   } = useHeaderContext();
+  const {
+    articleId: propsArticleId,
+    history: propsHistory
+  } = navigationData;
   const [{
     articleId: currentArticleId,
     history: currentHistory,
     view: currentView
   }, dispatchNavigationAction] = useReducer(navigationReducer, {
     articleId: propsArticleId,
-    history: propsHistory,
+    history: !isEqual(propsArticleId, DEFAULT_ARTICLE_ID) && propsHistory.length === 0 ? [getNewHistoryItem(propsArticleId.id, propsArticleId.type)] : propsHistory,
     view: VIEW.DEFAULT_CONTENT
   });
   const isOverlayVisible = useMemo(() => {
@@ -221,8 +261,6 @@ export const NavigationContextProvider = ({
     /**
      * - If default content isn't defined and the history only has one article,
      * we should not display the back button
-     * - If the prop.article.setArticleId is not defined, we should also hide the back
-     * button because we are not able to navigate though the history without it
      */
     if (currentHistory.length === 1 && !isDefaultContentDefined || currentView === VIEW.WHATS_NEW && !isDefaultContentDefined) {
       return false;
@@ -339,6 +377,12 @@ export const NavigationContextProvider = ({
       onCloseButtonClick(event, analyticsEvent);
     }
   }, [onCloseButtonClick]);
+  const onOpenArticle = useCallback(newArticleId => {
+    dispatchNavigationAction({
+      type: 'addNewHistoryItem',
+      payload: newArticleId
+    });
+  }, []);
   useEffect(() => {
     if (isSearchResultVisible) {
       dispatchNavigationAction({
@@ -348,43 +392,59 @@ export const NavigationContextProvider = ({
     }
   }, [isSearchResultVisible]);
   useEffect(() => {
-    const simpleHistory = getSimpleHistory(currentHistory);
-    historySetter && historySetter(simpleHistory);
-  }, [historySetter, currentHistory]);
-  useEffect(() => {
+    const lastHistoryItem = currentHistory.length > 0 ? getCurrentArticle(currentHistory) : getNewHistoryItem(DEFAULT_ARTICLE_ID.id, DEFAULT_ARTICLE_ID.type);
     /**
      * If the propsArticleId.id (host articleId) is different from currentArticleId.id (internal articleId)
-     * it means the host updated propsArticleId and we need to use this new value to load a new article.
      * */
-    if ((propsArticleId === null || propsArticleId === void 0 ? void 0 : propsArticleId.id) !== currentArticleId.id || (propsArticleId === null || propsArticleId === void 0 ? void 0 : propsArticleId.type) !== currentArticleId.type) {
-      dispatchNavigationAction({
-        type: 'newArticle',
-        payload: propsArticleId
-      });
-    } else {
+
+    if (!isEqual(propsArticleId, currentArticleId)) {
       /**
-       * If the propsArticleId.id (host articleId) is equal to currentArticleId.id (internal articleId)
-       * and the id from the last history item is different from currentArticleId.id, it means the history
-       * changed and we need to update the host articleId (propsArticleId) using 'articleIdSetter' and the local
-       * history using the dispatchNavigationAction reducer
-       * */
-      const lastHistoryItem = currentHistory.length > 0 ? getCurrentArticle(currentHistory) : getNewHistoryItem('', ARTICLE_TYPE.HELP_ARTICLE);
-
-      if (articleIdSetter && lastHistoryItem && (currentArticleId.id !== lastHistoryItem.id || currentArticleId.type !== lastHistoryItem.type)) {
+       * If propsArticleId and lastHistoryItem are the same, we just need to update the articleId
+       * because is out of sync
+       */
+      if (propsArticleId.id === lastHistoryItem.id && propsArticleId.type === lastHistoryItem.type) {
         dispatchNavigationAction({
           type: 'updateArticleId',
-          payload: {
-            id: lastHistoryItem.id,
-            type: lastHistoryItem.type
-          }
+          payload: propsArticleId
         });
-        articleIdSetter({
-          id: lastHistoryItem.id,
-          type: lastHistoryItem.type
+      } else {
+        /**
+         * Otherwise we need to add a new article
+         */
+        dispatchNavigationAction({
+          type: 'newArticle',
+          payload: propsArticleId
         });
       }
+    } else {
+      // console.log('same articleId');
+      if (setNavigationData) {
+        const simpleHistory = getSimpleHistory(currentHistory);
+
+        if (currentArticleId.id !== lastHistoryItem.id || currentArticleId.type !== lastHistoryItem.type) {
+          /**
+           * If the propsArticleId.id (host articleId) is equal to currentArticleId.id (internal articleId)
+           * and the id from the last history item is different from currentArticleId.id, it means the history
+           * changed
+           * */
+          if (setNavigationData) {
+            setNavigationData({
+              articleId: {
+                id: lastHistoryItem.id,
+                type: lastHistoryItem.type
+              },
+              history: simpleHistory
+            });
+          }
+        } else if (!isEqual(getHistoryData(propsHistory), getHistoryData(currentHistory))) {
+          setNavigationData({
+            articleId: propsArticleId,
+            history: simpleHistory
+          });
+        }
+      }
     }
-  }, [currentArticleId, propsArticleId, currentHistory, articleIdSetter]);
+  }, [currentArticleId, propsArticleId, currentHistory, setNavigationData, propsHistory]);
   useEffect(() => {
     const requestNewArticle = async historyItem => {
       const historyItemUpdate = await fetchArticleData(historyItem);
@@ -408,7 +468,7 @@ export const NavigationContextProvider = ({
     value: {
       view: currentView,
       articleId: currentArticleId,
-      setArticleId: articleIdSetter,
+      openArticle: onOpenArticle,
       history: currentHistory,
       getCurrentArticle: () => getCurrentArticle(currentHistory),
       getCurrentArticleItemData: () => getCurrentArticleItemSlim(currentHistory),

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/help",
-	"version": "6.0.7",
+	"version": "7.0.2",
 	"sideEffects": false
 }

package/dist/esm/components/Article/HelpArticle/index.js

@@ -14,7 +14,7 @@ export var HelpArticle = function HelpArticle(_ref) {
       isLoading = _ref.isLoading;
 
   var _useNavigationContext = useNavigationContext(),
-      setArticleId = _useNavigationContext.setArticleId,
+      openArticle = _useNavigationContext.openArticle,
       getCurrentArticleItemData = _useNavigationContext.getCurrentArticleItemData;
 
   var _useHelpArticleContex = useHelpArticleContext(),
@@ -56,13 +56,11 @@ export var HelpArticle = function HelpArticle(_ref) {
       onRelatedArticlesListItemClick(event, analyticsEvent, articleData);
     }
 
-    if (setArticleId) {
-      setArticleId({
-        id: articleData.id,
-        type: ARTICLE_TYPE.HELP_ARTICLE
-      });
-    }
-  }, [setArticleId, onRelatedArticlesListItemClick]);
+    openArticle({
+      id: articleData.id,
+      type: ARTICLE_TYPE.HELP_ARTICLE
+    });
+  }, [openArticle, onRelatedArticlesListItemClick]);
   var handleOnRelatedArticlesShowMoreClick = useCallback(function (event, analyticsEvent, isCollapsed) {
     analyticsEvent.payload.attributes = {
       componentName: 'Article',

package/dist/esm/components/Article/index.js

@@ -1,9 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useState, useLayoutEffect, useRef, useEffect, useCallback } from 'react';
 import { Transition } from 'react-transition-group';

package/dist/esm/components/Help.js

@@ -5,6 +5,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+var _excluded = ["children", "footer"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -39,7 +40,7 @@ export var Help = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props = this.props,
           children = _this$props.children,
           footer = _this$props.footer,
-          rest = _objectWithoutProperties(_this$props, ["children", "footer"]);
+          rest = _objectWithoutProperties(_this$props, _excluded);
 
       return /*#__PURE__*/React.createElement(HeaderContextProvider, rest.header, /*#__PURE__*/React.createElement(HomeContextProvider, _extends({}, rest.home, {
         homeContent: children

package/dist/esm/components/Search/SearchResults/index.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useCallback } from 'react';
 import { Transition } from 'react-transition-group';
@@ -50,19 +50,16 @@ export var SearchResults = function SearchResults() {
       onSearchExternalUrlClick = _useSearchContext.onSearchExternalUrlClick;
 
   var _useNavigationContext = useNavigationContext(),
-      setArticleId = _useNavigationContext.setArticleId,
+      openArticle = _useNavigationContext.openArticle,
       view = _useNavigationContext.view;
 
   var handleOnSearchResultItemClick = useCallback(function (event, analyticsEvent, articleData) {
-    if (setArticleId) {
-      setArticleId({
-        id: articleData.id,
-        type: ARTICLE_TYPE.HELP_ARTICLE
-      });
-    }
-
+    openArticle({
+      id: articleData.id,
+      type: ARTICLE_TYPE.HELP_ARTICLE
+    });
     onSearchResultItemClick(event, analyticsEvent, articleData);
-  }, [onSearchResultItemClick, setArticleId]);
+  }, [onSearchResultItemClick, openArticle]);
   return /*#__PURE__*/React.createElement(Transition, {
     in: view === VIEW.SEARCH && isSearchResultVisible,
     timeout: FADEIN_OVERLAY_TRANSITION_DURATION_MS

package/dist/esm/components/WhatsNew/WhatsNewButton/index.js

@@ -23,20 +23,18 @@ export var WhatsNewButton = function WhatsNewButton(_ref) {
       whatsNewGetNotificationProvider = _useWhatsNewArticleCo.whatsNewGetNotificationProvider;
 
   var _useNavigationContext = useNavigationContext(),
-      setArticleId = _useNavigationContext.setArticleId;
+      openArticle = _useNavigationContext.openArticle;
 
   var handleOnButtonClick = useCallback(function (id, analytics, event) {
     if (onWhatsNewButtonClick) {
       onWhatsNewButtonClick(event, analytics);
     }
 
-    if (setArticleId) {
-      setArticleId({
-        id: '',
-        type: ARTICLE_TYPE.WHATS_NEW
-      });
-    }
-  }, [onWhatsNewButtonClick, setArticleId]);
+    openArticle({
+      id: '',
+      type: ARTICLE_TYPE.WHATS_NEW
+    });
+  }, [onWhatsNewButtonClick, openArticle]);
   return /*#__PURE__*/React.createElement(HelpContentButton, {
     id: "whats-new",
     key: "whats-new",

package/dist/esm/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultsList.js

@@ -27,7 +27,7 @@ var WhatsNewResultsList = function WhatsNewResultsList(_ref) {
       var featureRolloutDateString = whatsNewArticle === null || whatsNewArticle === void 0 ? void 0 : whatsNewArticle.featureRolloutDate;
 
       if (featureRolloutDateString) {
-        var featureRolloutDateArray = featureRolloutDateString.replace('-', '/');
+        var featureRolloutDateArray = featureRolloutDateString.replace('/-/g', '/');
         var featureRolloutDate = toDate(new Date(featureRolloutDateArray));
 
         if (whatsNewArticlesGroupedByDateTemp[featureRolloutDateString]) {

package/dist/esm/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/index.js

@@ -31,7 +31,7 @@ var WhatsNewResultsList = function WhatsNewResultsList(_ref) {
       onShowMoreButtonClick = _ref.onShowMoreButtonClick;
 
   var _useNavigationContext = useNavigationContext(),
-      setArticleId = _useNavigationContext.setArticleId;
+      openArticle = _useNavigationContext.openArticle;
 
   var handleShowMoreButtonClick = function handleShowMoreButtonClick(event, analyticsEvent) {
     if (onShowMoreButtonClick) {
@@ -40,17 +40,15 @@ var WhatsNewResultsList = function WhatsNewResultsList(_ref) {
   };
 
   var handleOnWhatsNewResultItemClick = useCallback(function (event, analyticsEvent, articleData) {
-    if (setArticleId) {
-      setArticleId({
-        id: articleData.id,
-        type: ARTICLE_TYPE.WHATS_NEW
-      });
-    }
+    openArticle({
+      id: articleData.id,
+      type: ARTICLE_TYPE.WHATS_NEW
+    });
 
     if (onWhatsNewResultItemClick) {
       onWhatsNewResultItemClick(event, analyticsEvent, articleData);
     }
-  }, [onWhatsNewResultItemClick, setArticleId]);
+  }, [onWhatsNewResultItemClick, openArticle]);
   return whatsNewArticles && whatsNewArticles.length > 0 ? /*#__PURE__*/React.createElement(WhatsNewResultsListContainer, null, /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: _defineProperty({}, itemThemeNamespace, ITEM_THEME)
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArticlesList, {

package/dist/esm/components/WhatsNew/WhatsNewResults/index.js

@@ -1,12 +1,13 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useRef } from 'react';
 import { Transition } from 'react-transition-group';
+import isEqual from 'lodash/isEqual';
 import Select from '@atlaskit/select';
 import { injectIntl } from 'react-intl-next';
 import { VIEW } from '../../constants';
@@ -56,12 +57,18 @@ export var WhatsNewResults = function WhatsNewResults(_ref) {
       searchWhatsNewArticlesState = _useWhatsNewArticleCo.searchWhatsNewArticlesState,
       onWhatsNewResultItemClick = _useWhatsNewArticleCo.onWhatsNewResultItemClick;
 
+  var containerRef = useRef(null);
+  var containerScrollPosition = useRef(0);
   var SELECT_DEFAULT_VALUE = {
     value: '',
     label: formatMessage(messages.help_whats_new_filter_select_option_all)
   };
+  var SELECT_EMPTY_VALUE = {
+    value: undefined,
+    label: ''
+  };
 
-  var _useState = useState(SELECT_DEFAULT_VALUE),
+  var _useState = useState(SELECT_EMPTY_VALUE),
       _useState2 = _slicedToArray(_useState, 2),
       selectedOption = _useState2[0],
       setSelectedOption = _useState2[1];
@@ -78,8 +85,25 @@ export var WhatsNewResults = function WhatsNewResults(_ref) {
   }, [onSearchWhatsNewArticles, searchWhatsNewArticlesResult, selectedOption]);
 
   var handleOnEnter = function handleOnEnter() {
-    setSelectedOption(SELECT_DEFAULT_VALUE);
-    onSearchWhatsNewArticles && onSearchWhatsNewArticles();
+    setTimeout(function () {
+      if (containerRef.current) {
+        containerRef.current.scrollTop = containerScrollPosition.current;
+      }
+    }, 0);
+
+    if (isEqual(selectedOption, SELECT_EMPTY_VALUE)) {
+      setSelectedOption(SELECT_DEFAULT_VALUE);
+      onSearchWhatsNewArticles && onSearchWhatsNewArticles();
+    }
+  };
+
+  var handleOnExit = function handleOnExit() {
+    if (helpContextView === VIEW.DEFAULT_CONTENT) {
+      setSelectedOption(SELECT_EMPTY_VALUE);
+      containerScrollPosition.current = 0;
+    } else {
+      containerScrollPosition.current = containerRef.current ? containerRef.current.scrollTop : 0;
+    }
   };
 
   var handleOnClearFilter = function handleOnClearFilter() {
@@ -95,9 +119,11 @@ export var WhatsNewResults = function WhatsNewResults(_ref) {
   return /*#__PURE__*/React.createElement(Transition, {
     in: helpContextView === VIEW.WHATS_NEW,
     timeout: FADEIN_OVERLAY_TRANSITION_DURATION_MS,
-    onEnter: handleOnEnter
+    onEnter: handleOnEnter,
+    onExit: handleOnExit
   }, function (state) {
     return /*#__PURE__*/React.createElement(WhatsNewResultsContainer, {
+      ref: containerRef,
       style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
     }, /*#__PURE__*/React.createElement(React.Fragment, null, searchWhatsNewArticlesState === REQUEST_STATE.loading && searchWhatsNewArticlesResult === null && state !== 'exited' && /*#__PURE__*/React.createElement(WhatsNewResultsLoading, null), (searchWhatsNewArticlesState === REQUEST_STATE.done || searchWhatsNewArticlesState === REQUEST_STATE.loading) && searchWhatsNewArticlesResult !== null && state !== 'exited' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectContainer, null, /*#__PURE__*/React.createElement(Select, {
       defaultValue: selectedOption,