@atlaskit/help 6.0.7 → 7.0.2

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

@@ -4,12 +4,15 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["body", "relatedArticles"],
+    _excluded2 = ["description"];
 
-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, { 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';
@@ -19,6 +22,10 @@ import { useWhatsNewArticleContext } from './whatsNewArticleContext';
 import { useHomeContext } from './homeContext';
 import { useSearchContext } from './searchContext';
 import { useHeaderContext } from './headerContext';
+var DEFAULT_ARTICLE_ID = {
+  id: '',
+  type: ARTICLE_TYPE.HELP_ARTICLE
+};
 
 var _createCtx = createCtx(),
     _createCtx2 = _slicedToArray(_createCtx, 2),
@@ -56,6 +63,21 @@ var getSimpleHistory = function getSimpleHistory(history) {
     };
   });
 };
+/**
+ * Get history data (list of IDs and UID)
+ */
+
+
+var getHistoryData = function getHistoryData(history) {
+  return history.map(function (historyItem) {
+    var id = historyItem.id,
+        uid = historyItem.uid;
+    return {
+      id: id,
+      uid: uid
+    };
+  });
+};
 /**
  * Get the last article in the history
  */
@@ -79,14 +101,14 @@ var getCurrentArticleItemSlim = function getCurrentArticleItemSlim(history) {
       var _ref = article,
           body = _ref.body,
           relatedArticles = _ref.relatedArticles,
-          articleItemData = _objectWithoutProperties(_ref, ["body", "relatedArticles"]);
+          articleItemData = _objectWithoutProperties(_ref, _excluded);
 
       var currentArticleSlimData = articleItemData;
       return currentArticleSlimData;
     } else if (type === ARTICLE_TYPE.WHATS_NEW) {
       var _ref2 = article,
           description = _ref2.description,
-          whatsNewArticleItemData = _objectWithoutProperties(_ref2, ["description"]);
+          whatsNewArticleItemData = _objectWithoutProperties(_ref2, _excluded2);
 
       var currentWhatsNewArticleSlimData = whatsNewArticleItemData;
       return currentWhatsNewArticleSlimData;
@@ -126,10 +148,26 @@ var navigationReducer = function navigationReducer(_ref3, action) {
 
   if (action.type === 'newArticle' && action.payload) {
     var newArticleId = action.payload;
+
+    if (isEqual(newArticleId, DEFAULT_ARTICLE_ID)) {
+      newState = {
+        articleId: newArticleId,
+        history: [],
+        view: VIEW.DEFAULT_CONTENT
+      };
+    } else {
+      newState = {
+        articleId: newArticleId,
+        history: [].concat(_toConsumableArray(currentHistory), [getNewHistoryItem(newArticleId.id, newArticleId.type)]),
+        view: getViewForArticleId(newArticleId)
+      };
+    }
+  } else if (action.type === 'addNewHistoryItem' && action.payload) {
+    var _newArticleId = action.payload;
     newState = {
-      articleId: newArticleId,
-      history: [].concat(_toConsumableArray(currentHistory), [getNewHistoryItem(newArticleId.id, newArticleId.type)]),
-      view: getViewForArticleId(newArticleId)
+      articleId: currentArticleId,
+      history: [].concat(_toConsumableArray(currentHistory), [getNewHistoryItem(_newArticleId.id, _newArticleId.type)]),
+      view: getViewForArticleId(currentArticleId)
     };
   } else if (action.type === 'updateHistoryItem' && action.payload) {
     var HistoryItemUpdate = action.payload;
@@ -167,11 +205,11 @@ var navigationReducer = function navigationReducer(_ref3, action) {
       view: VIEW.DEFAULT_CONTENT
     };
   } else if (action.type === 'updateArticleId' && action.payload) {
-    var _newArticleId = action.payload;
+    var _newArticleId2 = action.payload;
     newState = {
-      articleId: _newArticleId,
+      articleId: _newArticleId2,
       history: currentHistory,
-      view: getViewForArticleId(_newArticleId)
+      view: getViewForArticleId(_newArticleId2)
     };
   } else if (action.type === 'updateView' && action.payload) {
     var newView = action.payload;
@@ -186,15 +224,12 @@ var navigationReducer = function navigationReducer(_ref3, action) {
 };
 
 export var NavigationContextProvider = function NavigationContextProvider(_ref4) {
-  var _ref4$articleId = _ref4.articleId,
-      propsArticleId = _ref4$articleId === void 0 ? {
-    id: '',
-    type: ARTICLE_TYPE.HELP_ARTICLE
-  } : _ref4$articleId,
-      articleIdSetter = _ref4.articleIdSetter,
-      _ref4$history = _ref4.history,
-      propsHistory = _ref4$history === void 0 ? [] : _ref4$history,
-      historySetter = _ref4.historySetter,
+  var _ref4$navigationData = _ref4.navigationData,
+      navigationData = _ref4$navigationData === void 0 ? {
+    articleId: DEFAULT_ARTICLE_ID,
+    history: []
+  } : _ref4$navigationData,
+      setNavigationData = _ref4.setNavigationData,
       children = _ref4.children;
 
   var _useHelpArticleContex = useHelpArticleContext(),
@@ -215,9 +250,12 @@ export var NavigationContextProvider = function NavigationContextProvider(_ref4)
   var _useHeaderContext = useHeaderContext(),
       onCloseButtonClick = _useHeaderContext.onCloseButtonClick;
 
+  var propsArticleId = navigationData.articleId,
+      propsHistory = navigationData.history;
+
   var _useReducer = 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
   }),
       _useReducer2 = _slicedToArray(_useReducer, 2),
@@ -237,8 +275,6 @@ export var NavigationContextProvider = function NavigationContextProvider(_ref4)
     /**
      * - 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;
@@ -426,6 +462,12 @@ export var NavigationContextProvider = function NavigationContextProvider(_ref4)
       onCloseButtonClick(event, analyticsEvent);
     }
   }, [onCloseButtonClick]);
+  var onOpenArticle = useCallback(function (newArticleId) {
+    dispatchNavigationAction({
+      type: 'addNewHistoryItem',
+      payload: newArticleId
+    });
+  }, []);
   useEffect(function () {
     if (isSearchResultVisible) {
       dispatchNavigationAction({
@@ -435,43 +477,59 @@ export var NavigationContextProvider = function NavigationContextProvider(_ref4)
     }
   }, [isSearchResultVisible]);
   useEffect(function () {
-    var simpleHistory = getSimpleHistory(currentHistory);
-    historySetter && historySetter(simpleHistory);
-  }, [historySetter, currentHistory]);
-  useEffect(function () {
+    var lastHistoryItem = currentHistory.length > 0 ? _getCurrentArticle2(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
-       * */
-      var lastHistoryItem = currentHistory.length > 0 ? _getCurrentArticle2(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) {
+        var 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(function () {
     var requestNewArticle = /*#__PURE__*/function () {
       var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(historyItem) {
@@ -517,7 +575,7 @@ export var NavigationContextProvider = function NavigationContextProvider(_ref4)
     value: {
       view: currentView,
       articleId: currentArticleId,
-      setArticleId: articleIdSetter,
+      openArticle: onOpenArticle,
       history: currentHistory,
       getCurrentArticle: function getCurrentArticle() {
         return _getCurrentArticle2(currentHistory);

package/dist/esm/version.json

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

package/dist/types/components/contexts/navigationContext.d.ts

@@ -5,14 +5,22 @@ import { WhatsNewArticleItem, WhatsNewArticle } from '../../model/WhatsNew';
 import { HistoryItem, articleId } from '../../model/Help';
 import { VIEW } from '../constants';
 declare type ViewType = keyof typeof VIEW;
-interface NavigationSharedInterface {
+interface NavigationProviderInterface {
+    navigationData?: {
+        articleId: articleId;
+        history: HistoryItem[];
+    };
+    setNavigationData?(navigationData: {
+        articleId: articleId;
+        history: HistoryItem[];
+    }): void;
+}
+interface NavigationContextInterface {
     articleId?: articleId;
     history?: HistoryItem[];
     historySetter?(history: HistoryItem[]): void;
-}
-interface NavigationContextInterface extends NavigationSharedInterface {
     view: ViewType;
-    setArticleId?(id: articleId): void;
+    openArticle(id: articleId): void;
     canNavigateBack: boolean;
     navigateBack?(): void;
     onGetArticle?(id: articleId): Promise<Article | WhatsNewArticle>;
@@ -23,9 +31,6 @@ interface NavigationContextInterface extends NavigationSharedInterface {
     isOverlayVisible: boolean;
     onClose?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent): void;
 }
-interface NavigationProviderInterface extends NavigationSharedInterface {
-    articleIdSetter?(id: articleId): void;
-}
 export declare const useNavigationContext: () => NavigationContextInterface, CtxProvider: React.Provider<NavigationContextInterface | undefined>;
 export declare const NavigationContextProvider: React.FC<NavigationProviderInterface>;
 export {};

package/dist/types/model/Help.d.ts

@@ -38,10 +38,14 @@ export interface Help {
         searchExternalUrl?: string;
     };
     navigation?: {
-        articleId?: articleId;
-        articleIdSetter?(id: articleId): void;
-        history?: HistoryItem[];
-        historySetter?(history: HistoryItem[]): void;
+        navigationData?: {
+            articleId: articleId;
+            history: HistoryItem[];
+        };
+        setNavigationData?(navigationData: {
+            articleId?: articleId;
+            history?: HistoryItem[];
+        }): void;
     };
     helpArticle?: {
         onGetHelpArticle?(articleId: articleId): Promise<Article>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/help",
-  "version": "6.0.7",
+  "version": "7.0.2",
   "description": "A cross-product help component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,10 +30,10 @@
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/checkbox": "^12.3.0",
-    "@atlaskit/form": "^8.4.0",
+    "@atlaskit/form": "^8.5.0",
     "@atlaskit/help-article": "^4.0.0",
     "@atlaskit/help-layout": "^4.0.0",
-    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/icon": "^21.10.0",
     "@atlaskit/item": "^12.0.0",
     "@atlaskit/notification-indicator": "^9.0.0",
     "@atlaskit/notification-log-client": "^6.0.0",
@@ -41,9 +41,9 @@
     "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/select": "^15.0.0",
     "@atlaskit/spinner": "^15.1.0",
-    "@atlaskit/textarea": "^4.2.0",
+    "@atlaskit/textarea": "^4.3.0",
     "@atlaskit/textfield": "^5.1.0",
-    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",