@atlaskit/help 7.3.2 → 7.4.0

package/dist/es2019/components/ArticlesList/ArticlesListItem/styled.js

@@ -29,31 +29,65 @@ export const ArticlesListItemWrapper = styled.a({
 }, props => props.styles);
 export const ArticlesListItemContainer = styled.div({
   width: '100%',
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
+  display: 'flex'
+});
+export const ArticlesListItemTitleSection = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1
 });
 export const ArticlesListItemTypeTitle = styled.div({
   font: `var(--ds-font-body-small, ${fontFallback.body.small})`,
   fontWeight: "var(--ds-font-weight-bold, bold)",
-  color: `var(--ds-text-subtlest, ${colors.N200})`,
-  paddingBottom: "var(--ds-space-050, 4px)"
+  color: `var(--ds-text-subtlest, ${colors.N200})`
 });
 export const ArticlesListItemLinkIcon = styled.span({
   alignSelf: 'auto',
   paddingInlineStart: "var(--ds-space-050, 4px)",
   verticalAlign: 'middle'
 });
-export const ArticlesListItemTitleText = styled.span({
+export const ArticlesListItemTitleText = styled.p({
   textDecoration: 'none',
   color: `var(--ds-text, ${colors.N800})`,
   font: `var(--ds-font-heading-xsmall, ${fontFallback.heading.xsmall})`,
   display: 'inline-block',
   whiteSpace: 'normal',
-  overflowX: 'hidden',
-  marginBottom: "var(--ds-space-100, 8px)"
+  overflow: 'hidden',
+  marginBottom: "var(--ds-space-100, 4px)"
 });
 export const ArticlesListItemDescription = styled.p({
   display: 'block',
   lineHeight: '20px',
   color: `var(--ds-text-subtle, ${colors.N400})`,
-  margin: 0
+  margin: 0,
+  paddingBottom: "var(--ds-space-025, 2px)"
+});
+export const ArticlesListItemSource = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  font: `var(--ds-font-heading-xxsmall, ${fontFallback.heading.xxsmall})`,
+  color: `var(--ds-surface-hovered, ${colors.N200})`,
+  padding: `${"var(--ds-space-050, 4px)"} 0`,
+  fontWeight: "var(--ds-font-weight-bold, bold)",
+  textTransform: 'uppercase'
+});
+export const ArticlesListItemTrustFactor = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  font: `var(--ds-font-body-small, ${fontFallback.body.small})`,
+  color: `var(--ds-background-accent-gray-subtlest-pressed, ${colors.N400})`,
+  paddingTop: "var(--ds-space-025, 2px)"
+});
+export const ArticlesListItemViewCount = styled.span({
+  paddingRight: "var(--ds-space-100, 8px)"
+});
+export const ArticlesListItemHelpfulCount = styled.span({
+  display: 'inline-flex',
+  paddingRight: "var(--ds-space-100, 8px)"
+});
+export const ArticlesListItemLastModified = styled.div({
+  font: `var(--ds-font-body-small, ${fontFallback.body.small})`,
+  color: `var(--ds-text-subtle, ${colors.N200})`,
+  padding: `${"var(--ds-space-050, 4px)"} 0`
 });

package/dist/es2019/components/HelpContentButton/index.js

@@ -7,7 +7,7 @@ import { HelpContentButtonContainer, HelpContentButtonIcon, HelpContentButtonTex
 const analitycsContextData = {
   componentName: 'HelpContentButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 const HelpContentButton = ({
   id = '',

package/dist/es2019/components/RelatedArticles/index.js

@@ -15,7 +15,7 @@ import useCancellablePromise from '../../util/hooks/cancellablePromise';
 import { usePrevious } from '../../util/hooks/previous';
 import { jsx } from '@emotion/react';
 const packageName = "@atlaskit/help";
-const packageVersion = "7.3.2";
+const packageVersion = "7.4.0";
 export const RelatedArticles = ({
   style = 'primary',
   routeGroup,

package/dist/es2019/components/Search/SearchInput/index.js

@@ -17,7 +17,7 @@ import { SearchInputContainer, SearchIconContainer, CloseButtonAndSpinnerContain
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'searchInput',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 export const SearchInput = ({
   intl: {

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

@@ -11,7 +11,7 @@ import { ARTICLE_TYPE } from '../../../model/Help';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'WhatsNewButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 export const WhatsNewButton = ({
   productName,

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

@@ -8,7 +8,7 @@ import { WhatsNewResultListItemWrapper, WhatsNewResultListItemTitleContainer, Wh
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 export const WhatsNewResultListItem = ({
   intl: {

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

@@ -182,7 +182,8 @@ const navigationReducer = ({
     newState = {
       articleId: newArticleId,
       history: currentHistory,
-      view: getViewForArticleId(newArticleId)
+      // If the current view is the search view and the new article id is empty, keep the current view
+      view: currentView === VIEW.SEARCH && newArticleId.id === '' ? currentView : getViewForArticleId(newArticleId)
     };
   } else if (action.type === 'updateView' && action.payload) {
     const {
@@ -190,7 +191,7 @@ const navigationReducer = ({
     } = action;
     newState = {
       articleId: currentArticleId,
-      history: currentHistory,
+      history: newView === VIEW.SEARCH ? [] : currentHistory,
       view: newView
     };
   }
@@ -217,7 +218,8 @@ export const NavigationContextProvider = ({
   const {
     onSearch,
     isSearchResultVisible,
-    searchValue
+    searchValue,
+    searchResult
   } = useSearchContext();
   const {
     onCloseButtonClick
@@ -339,13 +341,23 @@ export const NavigationContextProvider = ({
           type: 'removeLastHistoryItem'
         });
       } else if (currentHistory.length === 1) {
-        // but if the history only has one item, clear the history
-        dispatchNavigationAction({
-          type: 'removeAllHistoryItems'
-        });
+        var _searchResult$length;
+        // If the search value is not empty and search result is not empty, show the search results
+        if (searchValue !== '' && ((_searchResult$length = searchResult === null || searchResult === void 0 ? void 0 : searchResult.length) !== null && _searchResult$length !== void 0 ? _searchResult$length : 0) > 0 && onSearch !== undefined) {
+          dispatchNavigationAction({
+            type: 'updateView',
+            payload: VIEW.SEARCH
+          });
+        }
+        // If the search value is empty, show the default content
+        else {
+          dispatchNavigationAction({
+            type: 'removeAllHistoryItems'
+          });
+        }
       }
     }
-  }, [currentView, onSearch, currentHistory.length, searchValue, currentArticleId.type]);
+  }, [currentView, searchValue, currentArticleId, currentHistory, onSearch, searchResult === null || searchResult === void 0 ? void 0 : searchResult.length]);
   const onClose = useCallback((event, analyticsEvent) => {
     if (onCloseButtonClick) {
       dispatchNavigationAction({
@@ -361,13 +373,20 @@ export const NavigationContextProvider = ({
     });
   }, []);
   useEffect(() => {
-    if (isSearchResultVisible) {
+    // If the search result is visible or the search value is not empty, show the search result
+    if (isSearchResultVisible || searchValue !== '') {
       dispatchNavigationAction({
         type: 'updateView',
         payload: VIEW.SEARCH
       });
+      // If the search result is not visible and the search value is empty, show the default content
+    } else if (!isSearchResultVisible && searchValue === '') {
+      dispatchNavigationAction({
+        type: 'updateView',
+        payload: VIEW.DEFAULT_CONTENT
+      });
     }
-  }, [isSearchResultVisible]);
+  }, [isSearchResultVisible, searchValue]);
   useEffect(() => {
     const lastHistoryItem = currentHistory.length > 0 ? getCurrentArticle(currentHistory) : getNewHistoryItem(DEFAULT_ARTICLE_ID.id, DEFAULT_ARTICLE_ID.type);
 

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

@@ -62,9 +62,6 @@ export const SearchContextProvider = ({
     if (onSearchResultItemClick) {
       onSearchResultItemClick(event, analyticsEvent, articleData);
     }
-    if (!openExternalSearchUrlInNewTab || articleData.href == null) {
-      setSearchResultsVisible(false);
-    }
   };
   return /*#__PURE__*/React.createElement(CtxProvider, {
     value: {

package/dist/esm/analytics.js

@@ -5,5 +5,5 @@ export var createAndFire = x.createAndFireEvent('atlaskit');
 export var defaultAnalyticsAttributes = {
   componentName: 'help',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };

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

@@ -8,7 +8,7 @@ import { LoadingErrorMessage, LoadingErrorButtonContainer } from './styled';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleLoadingFail',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 export var ArticleLoadingFail = function ArticleLoadingFail(_ref) {
   var onTryAgainButtonClick = _ref.onTryAgainButtonClick,

package/dist/esm/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulNoButton.js

@@ -6,7 +6,7 @@ import { messages } from '../../../../messages';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulNoButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 export var ArticleWasHelpfulNoButton = function ArticleWasHelpfulNoButton(_ref) {
   var _ref$isSelected = _ref.isSelected,

package/dist/esm/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulYesButton.js

@@ -6,7 +6,7 @@ import { messages } from '../../../../messages';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulYesButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 export var ArticleWasHelpfulYesButton = function ArticleWasHelpfulYesButton(_ref) {
   var _ref$isSelected = _ref.isSelected,

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

@@ -26,7 +26,7 @@ var FEEDBACK_REASON_TEXT_MAX_LENGTH = '16000';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulForm',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 export var ArticleWasHelpfulForm = function ArticleWasHelpfulForm(_ref) {
   var onWasHelpfulSubmit = _ref.onWasHelpfulSubmit,

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

@@ -55,7 +55,7 @@ export var HelpArticle = function HelpArticle(_ref) {
     analyticsEvent.payload.attributes = {
       componentName: 'Article',
       packageName: "@atlaskit/help",
-      packageVersion: "7.3.2"
+      packageVersion: "7.4.0"
     };
     if (onRelatedArticlesShowMoreClick) {
       onRelatedArticlesShowMoreClick(event, analyticsEvent, isCollapsed);

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

@@ -13,7 +13,7 @@ import { WhatsNewTypeTitle, WhatsNewTitleText, WhatsNewIconContainer, RelatedLin
 var analyticsContextData = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 export var WhatsNewArticle = function WhatsNewArticle(_ref) {
   var formatMessage = _ref.intl.formatMessage,

package/dist/esm/components/ArticlesList/ArticlesList.js

@@ -39,7 +39,10 @@ var articlesList = function articlesList(_ref) {
       title: article.title,
       description: article.description,
       key: article.id,
-      href: article.href
+      href: article.href,
+      trustFactors: article.trustFactors,
+      source: article.source,
+      lastPublished: article.lastPublished
     });
   })), /*#__PURE__*/React.createElement(AnimateHeight, {
     duration: ANIMATE_HEIGHT_TRANSITION_DURATION_MS,
@@ -57,7 +60,10 @@ var articlesList = function articlesList(_ref) {
       title: article.title,
       description: article.description,
       key: article.id,
-      href: article.href
+      href: article.href,
+      trustFactors: article.trustFactors,
+      source: article.source,
+      lastPublished: article.lastPublished
     });
   })));
 };

package/dist/esm/components/ArticlesList/ArticlesListItem/index.js

@@ -3,11 +3,12 @@ import * as colors from '@atlaskit/theme/colors';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { injectIntl } from 'react-intl-next';
-import { ArticlesListItemWrapper, ArticlesListItemContainer, ArticlesListItemTitleText, ArticlesListItemDescription, ArticlesListItemLinkIcon } from './styled';
+import LikeIcon from '@atlaskit/icon/glyph/like';
+import { ArticlesListItemWrapper, ArticlesListItemContainer, ArticlesListItemTitleText, ArticlesListItemDescription, ArticlesListItemLinkIcon, ArticlesListItemTrustFactor, ArticlesListItemViewCount, ArticlesListItemHelpfulCount, ArticlesListItemSource, ArticlesListItemLastModified, ArticlesListItemTitleSection } from './styled';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 export var ArticlesListItem = function ArticlesListItem(_ref) {
   var styles = _ref.styles,
@@ -15,7 +16,10 @@ export var ArticlesListItem = function ArticlesListItem(_ref) {
     description = _ref.description,
     _ref$href = _ref.href,
     href = _ref$href === void 0 ? '' : _ref$href,
-    onClick = _ref.onClick;
+    onClick = _ref.onClick,
+    trustFactors = _ref.trustFactors,
+    source = _ref.source,
+    lastPublished = _ref.lastPublished;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var handleOnClick = function handleOnClick(event) {
@@ -27,18 +31,29 @@ export var ArticlesListItem = function ArticlesListItem(_ref) {
       onClick(event, _analyticsEvent);
     }
   };
+
+  // Check if trust factors are available
+  var isNumViewsVisible = (trustFactors === null || trustFactors === void 0 ? void 0 : trustFactors.numViews) != null;
+  var isHelpfulCountVisible = (trustFactors === null || trustFactors === void 0 ? void 0 : trustFactors.helpfulCount) != null;
+  var isTrustFactorVisible = isNumViewsVisible || isHelpfulCountVisible;
+  // Check if source is available
+  var isSourceVisible = source != null;
+  var isLastPublishedVisible = lastPublished != null && lastPublished !== '';
   return /*#__PURE__*/React.createElement(ArticlesListItemWrapper, {
     styles: styles,
     "aria-disabled": "false",
     role: "button",
     href: href,
     onClick: handleOnClick
-  }, /*#__PURE__*/React.createElement(ArticlesListItemContainer, null, /*#__PURE__*/React.createElement(ArticlesListItemTitleText, null, title, href && /*#__PURE__*/React.createElement(ArticlesListItemLinkIcon, null, /*#__PURE__*/React.createElement(ShortcutIcon, {
+  }, /*#__PURE__*/React.createElement(ArticlesListItemContainer, null, /*#__PURE__*/React.createElement(ArticlesListItemTitleSection, null, /*#__PURE__*/React.createElement(ArticlesListItemTitleText, null, title), isLastPublishedVisible && /*#__PURE__*/React.createElement(ArticlesListItemLastModified, null, "Last modified: ", lastPublished)), href && /*#__PURE__*/React.createElement(ArticlesListItemLinkIcon, null, /*#__PURE__*/React.createElement(ShortcutIcon, {
     size: "small",
     label: "",
     primaryColor: "var(--ds-icon-subtle, ".concat(colors.N90, ")"),
     secondaryColor: "var(--ds-icon-subtle, ".concat(colors.N90, ")")
-  })))), /*#__PURE__*/React.createElement(ArticlesListItemDescription, null, description));
+  }))), /*#__PURE__*/React.createElement(ArticlesListItemDescription, null, description), isSourceVisible && /*#__PURE__*/React.createElement(ArticlesListItemSource, null, source), isTrustFactorVisible && /*#__PURE__*/React.createElement(ArticlesListItemTrustFactor, null, isNumViewsVisible && /*#__PURE__*/React.createElement(ArticlesListItemViewCount, null, trustFactors.numViews, " views"), isHelpfulCountVisible && /*#__PURE__*/React.createElement(ArticlesListItemHelpfulCount, null, /*#__PURE__*/React.createElement(LikeIcon, {
+    label: "Like",
+    size: "small"
+  }), trustFactors.helpfulCount)));
 };
 var ArticlesListItemWithContext = function ArticlesListItemWithContext(props) {
   return /*#__PURE__*/React.createElement(AnalyticsContext, {

package/dist/esm/components/ArticlesList/ArticlesListItem/styled.js

@@ -31,31 +31,65 @@ export var ArticlesListItemWrapper = styled.a({
 });
 export var ArticlesListItemContainer = styled.div({
   width: '100%',
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
+  display: 'flex'
+});
+export var ArticlesListItemTitleSection = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1
 });
 export var ArticlesListItemTypeTitle = styled.div({
   font: "var(--ds-font-body-small, ".concat(fontFallback.body.small, ")"),
   fontWeight: "var(--ds-font-weight-bold, bold)",
-  color: "var(--ds-text-subtlest, ".concat(colors.N200, ")"),
-  paddingBottom: "var(--ds-space-050, 4px)"
+  color: "var(--ds-text-subtlest, ".concat(colors.N200, ")")
 });
 export var ArticlesListItemLinkIcon = styled.span({
   alignSelf: 'auto',
   paddingInlineStart: "var(--ds-space-050, 4px)",
   verticalAlign: 'middle'
 });
-export var ArticlesListItemTitleText = styled.span({
+export var ArticlesListItemTitleText = styled.p({
   textDecoration: 'none',
   color: "var(--ds-text, ".concat(colors.N800, ")"),
   font: "var(--ds-font-heading-xsmall, ".concat(fontFallback.heading.xsmall, ")"),
   display: 'inline-block',
   whiteSpace: 'normal',
-  overflowX: 'hidden',
-  marginBottom: "var(--ds-space-100, 8px)"
+  overflow: 'hidden',
+  marginBottom: "var(--ds-space-100, 4px)"
 });
 export var ArticlesListItemDescription = styled.p({
   display: 'block',
   lineHeight: '20px',
   color: "var(--ds-text-subtle, ".concat(colors.N400, ")"),
-  margin: 0
+  margin: 0,
+  paddingBottom: "var(--ds-space-025, 2px)"
+});
+export var ArticlesListItemSource = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  font: "var(--ds-font-heading-xxsmall, ".concat(fontFallback.heading.xxsmall, ")"),
+  color: "var(--ds-surface-hovered, ".concat(colors.N200, ")"),
+  padding: "var(--ds-space-050, 4px)".concat(" 0"),
+  fontWeight: "var(--ds-font-weight-bold, bold)",
+  textTransform: 'uppercase'
+});
+export var ArticlesListItemTrustFactor = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  font: "var(--ds-font-body-small, ".concat(fontFallback.body.small, ")"),
+  color: "var(--ds-background-accent-gray-subtlest-pressed, ".concat(colors.N400, ")"),
+  paddingTop: "var(--ds-space-025, 2px)"
+});
+export var ArticlesListItemViewCount = styled.span({
+  paddingRight: "var(--ds-space-100, 8px)"
+});
+export var ArticlesListItemHelpfulCount = styled.span({
+  display: 'inline-flex',
+  paddingRight: "var(--ds-space-100, 8px)"
+});
+export var ArticlesListItemLastModified = styled.div({
+  font: "var(--ds-font-body-small, ".concat(fontFallback.body.small, ")"),
+  color: "var(--ds-text-subtle, ".concat(colors.N200, ")"),
+  padding: "var(--ds-space-050, 4px)".concat(" 0")
 });

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

@@ -7,7 +7,7 @@ import { HelpContentButtonContainer, HelpContentButtonIcon, HelpContentButtonTex
 var analitycsContextData = {
   componentName: 'HelpContentButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 var HelpContentButton = function HelpContentButton(_ref) {
   var _ref$id = _ref.id,

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

@@ -18,7 +18,7 @@ import useCancellablePromise from '../../util/hooks/cancellablePromise';
 import { usePrevious } from '../../util/hooks/previous';
 import { jsx } from '@emotion/react';
 var packageName = "@atlaskit/help";
-var packageVersion = "7.3.2";
+var packageVersion = "7.4.0";
 export var RelatedArticles = function RelatedArticles(_ref) {
   var _ref$style = _ref.style,
     style = _ref$style === void 0 ? 'primary' : _ref$style,

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

@@ -17,7 +17,7 @@ import { SearchInputContainer, SearchIconContainer, CloseButtonAndSpinnerContain
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'searchInput',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 export var SearchInput = function SearchInput(_ref) {
   var formatMessage = _ref.intl.formatMessage;

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

@@ -11,7 +11,7 @@ import { ARTICLE_TYPE } from '../../../model/Help';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'WhatsNewButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 export var WhatsNewButton = function WhatsNewButton(_ref) {
   var productName = _ref.productName,

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

@@ -8,7 +8,7 @@ import { WhatsNewResultListItemWrapper, WhatsNewResultListItemTitleContainer, Wh
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.3.2"
+  packageVersion: "7.4.0"
 };
 export var WhatsNewResultListItem = function WhatsNewResultListItem(_ref) {
   var formatMessage = _ref.intl.formatMessage,

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

@@ -186,13 +186,14 @@ var navigationReducer = function navigationReducer(_ref3, action) {
     newState = {
       articleId: _newArticleId2,
       history: currentHistory,
-      view: getViewForArticleId(_newArticleId2)
+      // If the current view is the search view and the new article id is empty, keep the current view
+      view: currentView === VIEW.SEARCH && _newArticleId2.id === '' ? currentView : getViewForArticleId(_newArticleId2)
     };
   } else if (action.type === 'updateView' && action.payload) {
     var newView = action.payload;
     newState = {
       articleId: currentArticleId,
-      history: currentHistory,
+      history: newView === VIEW.SEARCH ? [] : currentHistory,
       view: newView
     };
   }
@@ -216,7 +217,8 @@ export var NavigationContextProvider = function NavigationContextProvider(_ref4)
   var _useSearchContext = useSearchContext(),
     onSearch = _useSearchContext.onSearch,
     isSearchResultVisible = _useSearchContext.isSearchResultVisible,
-    searchValue = _useSearchContext.searchValue;
+    searchValue = _useSearchContext.searchValue,
+    searchResult = _useSearchContext.searchResult;
   var _useHeaderContext = useHeaderContext(),
     onCloseButtonClick = _useHeaderContext.onCloseButtonClick;
   var propsArticleId = navigationData.articleId,
@@ -349,6 +351,7 @@ export var NavigationContextProvider = function NavigationContextProvider(_ref4)
     };
   }(), []);
   var navigateBack = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var _searchResult$length;
     return _regeneratorRuntime.wrap(function _callee3$(_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
@@ -378,10 +381,19 @@ export var NavigationContextProvider = function NavigationContextProvider(_ref4)
                 type: 'removeLastHistoryItem'
               });
             } else if (currentHistory.length === 1) {
-              // but if the history only has one item, clear the history
-              dispatchNavigationAction({
-                type: 'removeAllHistoryItems'
-              });
+              // If the search value is not empty and search result is not empty, show the search results
+              if (searchValue !== '' && ((_searchResult$length = searchResult === null || searchResult === void 0 ? void 0 : searchResult.length) !== null && _searchResult$length !== void 0 ? _searchResult$length : 0) > 0 && onSearch !== undefined) {
+                dispatchNavigationAction({
+                  type: 'updateView',
+                  payload: VIEW.SEARCH
+                });
+              }
+              // If the search value is empty, show the default content
+              else {
+                dispatchNavigationAction({
+                  type: 'removeAllHistoryItems'
+                });
+              }
             }
           }
         case 9:
@@ -389,7 +401,7 @@ export var NavigationContextProvider = function NavigationContextProvider(_ref4)
           return _context3.stop();
       }
     }, _callee3);
-  })), [currentView, onSearch, currentHistory.length, searchValue, currentArticleId.type]);
+  })), [currentView, searchValue, currentArticleId, currentHistory, onSearch, searchResult === null || searchResult === void 0 ? void 0 : searchResult.length]);
   var onClose = useCallback(function (event, analyticsEvent) {
     if (onCloseButtonClick) {
       dispatchNavigationAction({
@@ -405,13 +417,20 @@ export var NavigationContextProvider = function NavigationContextProvider(_ref4)
     });
   }, []);
   useEffect(function () {
-    if (isSearchResultVisible) {
+    // If the search result is visible or the search value is not empty, show the search result
+    if (isSearchResultVisible || searchValue !== '') {
       dispatchNavigationAction({
         type: 'updateView',
         payload: VIEW.SEARCH
       });
+      // If the search result is not visible and the search value is empty, show the default content
+    } else if (!isSearchResultVisible && searchValue === '') {
+      dispatchNavigationAction({
+        type: 'updateView',
+        payload: VIEW.DEFAULT_CONTENT
+      });
     }
-  }, [isSearchResultVisible]);
+  }, [isSearchResultVisible, searchValue]);
   useEffect(function () {
     var lastHistoryItem = currentHistory.length > 0 ? _getCurrentArticle2(currentHistory) : getNewHistoryItem(DEFAULT_ARTICLE_ID.id, DEFAULT_ARTICLE_ID.type);
 

package/dist/esm/components/contexts/searchContext.js

@@ -103,9 +103,6 @@ export var SearchContextProvider = function SearchContextProvider(_ref) {
     if (onSearchResultItemClick) {
       onSearchResultItemClick(event, analyticsEvent, articleData);
     }
-    if (!openExternalSearchUrlInNewTab || articleData.href == null) {
-      setSearchResultsVisible(false);
-    }
   };
   return /*#__PURE__*/React.createElement(CtxProvider, {
     value: {

package/dist/types/components/ArticlesList/ArticlesList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ArticlesList as ArticlesListInterface } from './model/ArticlesListItem';
+import { type ArticlesList as ArticlesListInterface } from './model/ArticlesListItem';
 export interface Props {
     numberOfArticlesToDisplay?: number;
 }

package/dist/types/components/ArticlesList/ArticlesListItem/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { WrappedComponentProps } from 'react-intl-next';
-import { ArticleItem } from '../../../model/Article';
+import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type WrappedComponentProps } from 'react-intl-next';
+import { type ArticleItem } from '../../../model/Article';
 interface Props {
     styles?: {};
     onClick?: (event: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;