@atlaskit/help 9.2.1 → 9.2.3

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

@@ -16,7 +16,7 @@ import { RelatedArticlesTitle } from './styled';
 import useCancellablePromise from '../../util/hooks/cancellablePromise';
 import { usePrevious } from '../../util/hooks/previous';
 const packageName = "@atlaskit/help";
-const packageVersion = "9.2.0";
+const packageVersion = "0.0.0-development";
 const buttonStyles = null;
 export const RelatedArticles = ({
   style = 'primary',

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

@@ -7,7 +7,7 @@ import Textfield from '@atlaskit/textfield';
 import Button from '@atlaskit/button/custom-theme-button';
 import Spinner from '@atlaskit/spinner';
 import SearchIcon from '@atlaskit/icon/core/migration/search';
-import EditorCloseIcon from '@atlaskit/icon/core/migration/cross--editor-close';
+import EditorCloseIcon from '@atlaskit/icon/core/cross';
 import { injectIntl } from 'react-intl-next';
 import { REQUEST_STATE } from '../../../model/Requests';
 import { useSearchContext } from '../../contexts/searchContext';
@@ -18,7 +18,7 @@ import { useNavigationContext } from '../../contexts/navigationContext';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'searchInput',
   packageName: "@atlaskit/help",
-  packageVersion: "9.2.0"
+  packageVersion: "0.0.0-development"
 };
 const buttonStyles = null;
 export const SearchInput = ({

package/dist/es2019/components/Search/SearchResults/SearchExternalSite.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import * as colors from '@atlaskit/theme/colors';
 import Button from '@atlaskit/button';
-import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
+import ShortcutIcon from '@atlaskit/icon/core/link-external';
 import { injectIntl } from 'react-intl-next';
 import { Text } from '@atlaskit/primitives/compiled';
 import { messages } from '../../../messages';

package/dist/es2019/components/Search/SearchResults/SearchResultsEmpty.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import * as colors from '@atlaskit/theme/colors';
 import Button from '@atlaskit/button';
-import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
+import ShortcutIcon from '@atlaskit/icon/core/link-external';
 import { injectIntl } from 'react-intl-next';
 import { Text } from '@atlaskit/primitives/compiled';
 import NotFoundImage from '../../../assets/NotFoundImage';

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

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import * as colors from '@atlaskit/theme/colors';
-import LightbulbIcon from '@atlaskit/icon/core/migration/lightbulb';
+import LightbulbIcon from '@atlaskit/icon/core/lightbulb';
 import { injectIntl } from 'react-intl-next';
 import { useWhatsNewArticleContext } from '../../contexts/whatsNewArticleContext';
 import { useNavigationContext } from '../../contexts/navigationContext';
@@ -11,7 +11,7 @@ import { ARTICLE_TYPE } from '../../../model/Help';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'WhatsNewButton',
   packageName: "@atlaskit/help",
-  packageVersion: "9.2.0"
+  packageVersion: "0.0.0-development"
 };
 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: "9.2.0"
+  packageVersion: "0.0.0-development"
 };
 export const WhatsNewResultListItem = ({
   intl: {

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

@@ -81,15 +81,15 @@ const getCurrentArticleItemSlim = history => {
   if (article) {
     if (type === ARTICLE_TYPE.HELP_ARTICLE) {
       const {
-        body,
-        relatedArticles,
+        body: _body,
+        relatedArticles: _relatedArticles,
         ...articleItemData
       } = article;
       const currentArticleSlimData = articleItemData;
       return currentArticleSlimData;
     } else if (type === ARTICLE_TYPE.WHATS_NEW) {
       const {
-        description,
+        description: _description,
         ...whatsNewArticleItemData
       } = article;
       const currentWhatsNewArticleSlimData = whatsNewArticleItemData;
@@ -273,6 +273,9 @@ export const NavigationContextProvider = ({
   const onGetHelpArticleRef = useRef(onGetHelpArticle);
   const onGetWhatsNewArticleRef = useRef(onGetWhatsNewArticle);
 
+  // Ref to store triggering elements for focus restoration on navigate back
+  const triggerElementsRef = useRef([]);
+
   // Update refs when functions change
   onGetHelpArticleRef.current = onGetHelpArticle;
   onGetWhatsNewArticleRef.current = onGetWhatsNewArticle;
@@ -312,7 +315,7 @@ export const NavigationContextProvider = ({
         }),
         state: REQUEST_STATE.done
       };
-    } catch (error) {
+    } catch {
       return {
         ...historyItem,
         state: REQUEST_STATE.error
@@ -354,6 +357,9 @@ export const NavigationContextProvider = ({
 
     //  if the history is not empty and ...
     if (currentHistory.length > 0) {
+      // Pop the trigger element before navigating back
+      const triggerElement = triggerElementsRef.current.pop();
+
       // the history has more than one article, navigate back through the history
       if (currentHistory.length > 1) {
         // Remove last element
@@ -376,10 +382,23 @@ export const NavigationContextProvider = ({
           });
         }
       }
+
+      // Restore focus to the element that triggered the navigation
+      if (triggerElement) {
+        // Wait for slide-out animation to complete (300ms) plus a buffer
+        const timeoutId = setTimeout(() => {
+          if (document.body.contains(triggerElement)) {
+            triggerElement.focus();
+          }
+        }, 400); // Increased from 350ms to 400ms
+        return () => clearTimeout(timeoutId);
+      }
     }
   }, [currentView, searchValue, currentArticleId, currentHistory, onSearch, searchResult === null || searchResult === void 0 ? void 0 : searchResult.length]);
   const onClose = useCallback((event, analyticsEvent) => {
     if (onCloseButtonClick) {
+      // Clear trigger elements stack when closing
+      triggerElementsRef.current = [];
       dispatchNavigationAction({
         type: 'removeAllHistoryItems'
       });
@@ -387,6 +406,11 @@ export const NavigationContextProvider = ({
     }
   }, [onCloseButtonClick]);
   const onOpenArticle = useCallback(newArticleId => {
+    // Capture the currently focused element before opening article
+    const triggerElement = document.activeElement;
+    if (triggerElement && triggerElement !== document.body) {
+      triggerElementsRef.current.push(triggerElement);
+    }
     dispatchNavigationAction({
       type: 'addNewHistoryItem',
       payload: newArticleId
@@ -426,7 +450,12 @@ export const NavigationContextProvider = ({
       } else {
         /**
          * Otherwise we need to add a new article
+         * Capture the focused element for focus restoration when navigating back
          */
+        const triggerElement = document.activeElement;
+        if (triggerElement && triggerElement !== document.body && propsArticleId.id !== '') {
+          triggerElementsRef.current.push(triggerElement);
+        }
         dispatchNavigationAction({
           type: 'newArticle',
           payload: propsArticleId

package/dist/esm/analytics.js

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

package/dist/esm/assets/IconWrapper.js

@@ -4,13 +4,11 @@ import { IconTile } from '@atlaskit/icon';
 import { fg } from '@atlaskit/platform-feature-flags';
 export var IconWrapper = function IconWrapper(_ref) {
   var Icon = _ref.Icon,
-    LegacyIcon = _ref.LegacyIcon,
     appearance = _ref.appearance;
   return /*#__PURE__*/React.createElement(Flex, {
     alignItems: "center",
     justifyContent: "center"
   }, !fg('platform-visual-refresh-icons') ? /*#__PURE__*/React.createElement(Icon, {
-    LEGACY_fallbackIcon: LegacyIcon,
     label: "",
     color: "var(--ds-icon-inverse, #FFFFFF)"
   }) :

package/dist/esm/assets/WhatsNewIcoExperiment.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import LegacyFlaskIcon from '@atlaskit/legacy-custom-icons/flask-icon';
 import FlaskIcon from '@atlaskit/icon/core/flask';
 import { IconWrapper } from './IconWrapper';
 import { P500 } from '@atlaskit/theme/colors';
 export default function WhatsNewIcoExperiment() {
   return /*#__PURE__*/React.createElement(IconWrapper, {
     Icon: FlaskIcon,
-    LegacyIcon: LegacyFlaskIcon,
     appearance: "var(--ds-icon-discovery, ".concat(P500, ")")
   });
 }

package/dist/esm/assets/WhatsNewIconFix.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import LegacyBugIcon from '@atlaskit/legacy-custom-icons/bug-icon';
 import BugIcon from '@atlaskit/icon/core/bug';
 import { IconWrapper } from './IconWrapper';
 import { B500 } from '@atlaskit/theme/colors';
 export default function WhatsNewIconFix() {
   return /*#__PURE__*/React.createElement(IconWrapper, {
     Icon: BugIcon,
-    LegacyIcon: LegacyBugIcon,
     appearance: "var(--ds-icon-information, ".concat(B500, ")")
   });
 }

package/dist/esm/assets/WhatsNewIconImprovement.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import LegacyMegaphoneWithStarIcon from '@atlaskit/legacy-custom-icons/megaphone-star-icon';
 import MegaphoneIcon from '@atlaskit/icon/core/megaphone';
 import { IconWrapper } from './IconWrapper';
 import { Y200 } from '@atlaskit/theme/colors';
 export default function WhatsNewIconImprovement() {
   return /*#__PURE__*/React.createElement(IconWrapper, {
     Icon: MegaphoneIcon,
-    LegacyIcon: LegacyMegaphoneWithStarIcon,
     appearance: "var(--ds-icon-warning, ".concat(Y200, ")")
   });
 }

package/dist/esm/assets/WhatsNewIconNew.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import LegacyMegaphoneIcon from '@atlaskit/legacy-custom-icons/megaphone-icon';
 import MegaphoneIcon from '@atlaskit/icon/core/megaphone';
 import { IconWrapper } from './IconWrapper';
 import { N400 } from '@atlaskit/theme/colors';
 export default function WhatsNewIconNew() {
   return /*#__PURE__*/React.createElement(IconWrapper, {
     Icon: MegaphoneIcon,
-    LegacyIcon: LegacyMegaphoneIcon,
     appearance: "var(--ds-icon, ".concat(N400, ")")
   });
 }

package/dist/esm/assets/WhatsNewIconRemoved.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import LegacyDeleteIcon from '@atlaskit/legacy-custom-icons/delete-icon';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import { IconWrapper } from './IconWrapper';
 import { N700 } from '@atlaskit/theme/colors';
 export default function WhatsNewIconRemoved() {
   return /*#__PURE__*/React.createElement(IconWrapper, {
     Icon: DeleteIcon,
-    LegacyIcon: LegacyDeleteIcon,
     appearance: "var(--ds-icon-disabled, ".concat(N700, ")")
   });
 }

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

@@ -10,7 +10,7 @@ import { LoadingErrorMessage, LoadingErrorButtonContainer, LoadingErrorHeading }
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleLoadingFail',
   packageName: "@atlaskit/help",
-  packageVersion: "9.2.0"
+  packageVersion: "0.0.0-development"
 };
 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: "9.2.0"
+  packageVersion: "0.0.0-development"
 };
 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: "9.2.0"
+  packageVersion: "0.0.0-development"
 };
 export var ArticleWasHelpfulYesButton = function ArticleWasHelpfulYesButton(_ref) {
   var _ref$isSelected = _ref.isSelected,

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

@@ -15,7 +15,7 @@ import Form, { Field, CheckboxField, FormFooter } from '@atlaskit/form';
 import { RadioGroup } from '@atlaskit/radio';
 import { Checkbox } from '@atlaskit/checkbox';
 import TextArea from '@atlaskit/textarea';
-import CheckCircleIcon from '@atlaskit/icon/core/migration/status-success--check-circle';
+import CheckCircleIcon from '@atlaskit/icon/core/status-success';
 import { colors } from '@atlaskit/theme';
 import { Text } from '@atlaskit/primitives/compiled';
 import { messages } from '../../../../messages';
@@ -27,7 +27,7 @@ var FEEDBACK_REASON_TEXT_MAX_LENGTH = '16000';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulForm',
   packageName: "@atlaskit/help",
-  packageVersion: "9.2.0"
+  packageVersion: "0.0.0-development"
 };
 var buttonStyles = null;
 export var ArticleWasHelpfulForm = function ArticleWasHelpfulForm(_ref) {

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

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

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import { BODY_FORMAT_TYPES } from '@atlaskit/help-article';
 import HelpArticleContent from '@atlaskit/help-article';
-import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
+import ShortcutIcon from '@atlaskit/icon/core/link-external';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button';
 import { messages } from '../../../messages';
@@ -13,7 +13,7 @@ import { WhatsNewTypeTitle, WhatsNewTitleText, WhatsNewIconContainer, RelatedLin
 var analyticsContextData = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "9.2.0"
+  packageVersion: "0.0.0-development"
 };
 export var WhatsNewArticle = function WhatsNewArticle(_ref) {
   var formatMessage = _ref.intl.formatMessage,

package/dist/esm/components/Article/WhatsNewArticle/styled.compiled.css

@@ -1,16 +1,7 @@
-._11c81bq0{font:var(--_bo9t81)}
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._19bv1b66{padding-left:var(--ds-space-050,4px)}
+
+._zulpu2gc{gap:var(--ds-space-100,8px)}._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1e0c1o8l{display:inline-block}
-._1e0c1ule{display:block}
-._1hmsglyw{text-decoration-line:none}
-._1reo15vq{overflow-x:hidden}
-._4bfu1r31{text-decoration-color:currentColor}
-._ajmmnqa1{text-decoration-style:solid}
-._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._1e0c1txw{display:flex}
 ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
-._o5724jg8{white-space:normal}
 ._otyru2gc{margin-bottom:var(--ds-space-100,8px)}
-._s7n4nkob{vertical-align:middle}
-._syaz1o8f{color:var(--_ggxzyp)}
-._syazg0pi{color:var(--_1dzgjqk)}
+._s7n4nkob{vertical-align:middle}

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

@@ -2,35 +2,26 @@
 import "./styled.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { fontFallback } from '@atlaskit/theme/typography';
-import { N300, N800 } from '@atlaskit/theme/colors';
-var body = fontFallback.body;
-var whatsNewTypeTitleStyles = null;
+import Heading from '@atlaskit/heading';
 export var WhatsNewTypeTitle = function WhatsNewTypeTitle(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React.createElement("span", {
-    className: ax(["_4bfu1r31 _1hmsglyw _ajmmnqa1 _11c81bq0 _syazg0pi _s7n4nkob _19bv1b66 _o5724jg8 _1reo15vq"]),
-    style: {
-      "--_1dzgjqk": ix("var(--ds-text-subtlest, ".concat(N300, ")")),
-      "--_bo9t81": ix("var(--ds-font-body, ".concat(body.medium, ")"))
-    }
+  return /*#__PURE__*/React.createElement(Heading, {
+    size: "xsmall",
+    as: "h3"
   }, children);
 };
 var whatsNewIconContainerStyles = null;
 export var WhatsNewIconContainer = function WhatsNewIconContainer(_ref2) {
   var children = _ref2.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: ax(["_1e0c1ule _n3tdu2gc"])
+    className: ax(["_zulpu2gc _1e0c1txw _n3tdu2gc"])
   }, children);
 };
-var whatsNewTitleText = null;
 export var WhatsNewTitleText = function WhatsNewTitleText(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/React.createElement("span", {
-    className: ax(["_4bfu1r31 _1hmsglyw _ajmmnqa1 _11c82smr _syaz1o8f _k48p1pd9 _o5724jg8 _1reo15vq _n3tdu2gc _1e0c1ule"]),
-    style: {
-      "--_ggxzyp": ix("var(--ds-text, ".concat(N800, ")"))
-    }
+  return /*#__PURE__*/React.createElement(Heading, {
+    size: "xsmall",
+    as: "h4"
   }, children);
 };
 var relatedLinkContainerStyles = null;

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

@@ -30,7 +30,8 @@ var articlesList = function articlesList(_ref) {
     minItemsToDisplay = _ref$minItemsToDispla === void 0 ? MIN_ITEMS_TO_DISPLAY : _ref$minItemsToDispla,
     _ref$numberOfArticles = _ref.numberOfArticlesToDisplay,
     numberOfArticlesToDisplay = _ref$numberOfArticles === void 0 ? MIN_ITEMS_TO_DISPLAY : _ref$numberOfArticles,
-    onArticlesListItemClick = _ref.onArticlesListItemClick;
+    onArticlesListItemClick = _ref.onArticlesListItemClick,
+    firstExpandedArticleRef = _ref.firstExpandedArticleRef;
   var isExpanded = numberOfArticlesToDisplay > minItemsToDisplay;
   return articles ? /*#__PURE__*/React.createElement(Box, {
     as: "ul",
@@ -38,6 +39,8 @@ var articlesList = function articlesList(_ref) {
     role: "list"
   }, articles.slice(0, numberOfArticlesToDisplay).map(function (article, index) {
     var isVisible = index < minItemsToDisplay || isExpanded;
+    // The first expanded article is at index minItemsToDisplay
+    var isFirstExpandedArticle = index === minItemsToDisplay;
     return /*#__PURE__*/React.createElement(Box, {
       as: "li",
       xcss: listStyles,
@@ -58,7 +61,8 @@ var articlesList = function articlesList(_ref) {
       href: article.href,
       trustFactors: article.trustFactors,
       source: article.source,
-      lastPublished: article.lastPublished
+      lastPublished: article.lastPublished,
+      ref: isFirstExpandedArticle ? firstExpandedArticleRef : undefined
     }));
   })) : null;
 };

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

@@ -1,14 +1,15 @@
-import React from 'react';
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
 import * as colors from '@atlaskit/theme/colors';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
-import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
+import ShortcutIcon from '@atlaskit/icon/core/link-external';
 import { injectIntl } from 'react-intl-next';
-import LikeIcon from '@atlaskit/icon/core/migration/thumbs-up--like';
+import LikeIcon from '@atlaskit/icon/core/thumbs-up';
 import { ArticlesListItemWrapper, ArticlesListItemContainer, ArticlesListItemTitleText, ArticlesListItemDescription, ArticlesListItemLinkIcon, ArticlesListItemTrustFactor, ArticlesListItemViewCount, ArticlesListItemHelpfulCount, ArticlesListItemSource, ArticlesListItemLastModified, ArticlesListItemTitleSection, ArticlesListItemDescriptionHighlight } from './styled';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "9.2.0"
+  packageVersion: "0.0.0-development"
 };
 var highlightText = function highlightText(text) {
   if (!text) {
@@ -27,7 +28,7 @@ var highlightText = function highlightText(text) {
   });
   return sections;
 };
-export var ArticlesListItem = function ArticlesListItem(_ref) {
+export var ArticlesListItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var styles = _ref.styles,
     title = _ref.title,
     description = _ref.description,
@@ -57,6 +58,7 @@ export var ArticlesListItem = function ArticlesListItem(_ref) {
   var isSourceVisible = source != null;
   var isLastPublishedVisible = lastPublished != null && lastPublished !== '';
   return /*#__PURE__*/React.createElement(ArticlesListItemWrapper, {
+    ref: ref,
     styles: styles,
     "aria-disabled": "false",
     role: "button",
@@ -79,11 +81,15 @@ export var ArticlesListItem = function ArticlesListItem(_ref) {
     label: "Like",
     LEGACY_size: "small"
   }), trustFactors.helpfulCount)));
-};
-var ArticlesListItemWithContext = function ArticlesListItemWithContext(props) {
+});
+var ArticlesListItemWithContext = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: ANALYTICS_CONTEXT_DATA
-  }, /*#__PURE__*/React.createElement(ArticlesListItem, props));
-};
-var _default_1 = injectIntl(ArticlesListItemWithContext);
+  }, /*#__PURE__*/React.createElement(ArticlesListItem, _extends({
+    ref: ref
+  }, props)));
+});
+var _default_1 = injectIntl(ArticlesListItemWithContext, {
+  forwardRef: true
+});
 export default _default_1;

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

@@ -14,11 +14,13 @@ import { B100, B50, N200, N30, N400, N400A, N800, Y100 } from '@atlaskit/theme/c
 var heading = fontFallback.heading,
   body = fontFallback.body;
 var articlesListItemWrapperStyles = null;
-export var ArticlesListItemWrapper = function ArticlesListItemWrapper(_ref) {
+export var ArticlesListItemWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var styles = _ref.styles,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("a", _extends({}, rest, {
+  return /*#__PURE__*/React.createElement("a", _extends({
+    ref: ref
+  }, rest, {
     className: ax(["_4bfu1r31 _1hmsglyw _ajmmnqa1 _2rkofajl _kqswh2mm _vchhusvi _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _1e0c1ule _80omtlke _syazpsu8 _bfhkqtfy _7ehi13ga _1nrm1r31 _1a3b1r31 _9oik1r31 _1ydc1r31 _c2waglyw _4fprglyw _1bnxglyw _1x28glyw _1iohnqa1 _5goinqa1 _jf4cnqa1 _1726nqa1 _1q5t1r31 _nt751r31 _1dit1r31 _9nxe1r31 _1ohyglyw _49pcglyw _ksodglyw _tpgfglyw _1r9x1o36 _1hvw1o36 _4hz81o36 _12gr1o36 _13roglyw _1bg4glyw _1qb1glyw _1dnaglyw _irr32tgk _1di618xb"]),
     style: _objectSpread(_objectSpread({}, styles), {}, {
       "--_vrm7dk": ix("var(--ds-text-subtlest, ".concat(N200, ")")),
@@ -27,7 +29,7 @@ export var ArticlesListItemWrapper = function ArticlesListItemWrapper(_ref) {
       "--_18th9fi": ix("var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")"))
     })
   }), children);
-};
+});
 var articlesListItemContainerStyles = null;
 export var ArticlesListItemContainer = function ArticlesListItemContainer(_ref2) {
   var children = _ref2.children;

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

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import ArticlesList from './ArticlesList';
 import ShowMoreButton from '../ShowMoreButton';
 import { ArticlesListContainer } from './styled';
@@ -15,6 +15,8 @@ var ArticleList = function ArticleList(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     showMoreToggled = _useState2[0],
     setShowMoreToggled = _useState2[1];
+  var firstExpandedArticleRef = useRef(null);
+  var isExpandingRef = useRef(false);
   var getMinItemsToDisplay = function getMinItemsToDisplay() {
     return minItemsToDisplay ? minItemsToDisplay : MIN_ITEMS_TO_DISPLAY;
   };
@@ -27,7 +29,24 @@ var ArticleList = function ArticleList(_ref) {
   var getNumberOfArticlesToDisplay = function getNumberOfArticlesToDisplay(showMoreToggeled) {
     return showMoreToggeled ? getMinItemsToDisplay() : getMaxItemsToDisplay();
   };
+
+  // Focus on the first newly revealed article after expansion
+  useEffect(function () {
+    if (isExpandingRef.current && !showMoreToggled) {
+      if (firstExpandedArticleRef.current) {
+        firstExpandedArticleRef.current.focus();
+      }
+      isExpandingRef.current = false;
+    }
+  }, [showMoreToggled]);
+  var setFirstExpandedArticleRef = useCallback(function (element) {
+    firstExpandedArticleRef.current = element;
+  }, []);
   var toggleArticlesList = function toggleArticlesList(event, analyticsEvent) {
+    // Track if we're expanding (going from collapsed to expanded)
+    if (showMoreToggled) {
+      isExpandingRef.current = true;
+    }
     setShowMoreToggled(!showMoreToggled);
     if (onToggleArticlesList) {
       onToggleArticlesList(event, analyticsEvent, !showMoreToggled);
@@ -39,7 +58,9 @@ var ArticleList = function ArticleList(_ref) {
     style: style,
     onArticlesListItemClick: onArticlesListItemClick,
     articles: articles,
-    numberOfArticlesToDisplay: getNumberOfArticlesToDisplay(showMoreToggled)
+    numberOfArticlesToDisplay: getNumberOfArticlesToDisplay(showMoreToggled),
+    minItemsToDisplay: getMinItemsToDisplay(),
+    firstExpandedArticleRef: setFirstExpandedArticleRef
   }), articles.length > getMinItemsToDisplay() && /*#__PURE__*/React.createElement(ShowMoreButton, {
     minItemsToDisplay: getMinItemsToDisplay(),
     maxItemsToDisplay: getMaxItemsToDisplay(),

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import { Transition } from 'react-transition-group';
-import ArrowleftIcon from '@atlaskit/icon/core/migration/arrow-left';
+import ArrowleftIcon from '@atlaskit/icon/core/arrow-left';
 import Button from '@atlaskit/button/standard-button';
 import { messages } from '../../messages';
 import { BackButtonContainer, BACK_BUTTON_CONTAINER_TRANSITION_DURATION_MS } from '../styled';
@@ -49,7 +49,7 @@ var BackButtonWithContext = function BackButtonWithContext(props) {
     data: {
       componentName: 'backButton',
       packageName: "@atlaskit/help",
-      packageVersion: "9.2.0"
+      packageVersion: "0.0.0-development"
     }
   }, /*#__PURE__*/React.createElement(BackButton, props));
 };

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

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
+import ShortcutIcon from '@atlaskit/icon/core/link-external';
 import Tooltip from '@atlaskit/tooltip';
 import { NotificationIndicator } from '@atlaskit/notification-indicator';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
@@ -7,7 +7,7 @@ import { HelpContentButtonContainer, HelpContentButtonIcon, HelpContentButtonTex
 var analitycsContextData = {
   componentName: 'HelpContentButton',
   packageName: "@atlaskit/help",
-  packageVersion: "9.2.0"
+  packageVersion: "0.0.0-development"
 };
 var HelpContentButton = function HelpContentButton(_ref) {
   var _ref$id = _ref.id,
@@ -48,7 +48,7 @@ var HelpContentButton = function HelpContentButton(_ref) {
   }, /*#__PURE__*/React.createElement(ShortcutIcon, {
     color: "currentColor",
     LEGACY_size: "small",
-    label: ""
+    label: "Opens in a new window"
   }))));
   var target = href ? openInSameTab ? '_self' : '_blank' : undefined;
   return /*#__PURE__*/React.createElement(AnalyticsContext, {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import LightbulbIcon from '@atlaskit/icon/core/migration/lightbulb';
+import LightbulbIcon from '@atlaskit/icon/core/lightbulb';
 import { Inline } from '@atlaskit/primitives/compiled';
 import { useIntl } from 'react-intl-next';
 import { NeedMoreHelpContainer, NeedMoreHelpContent, HelpAskAI } from './styled';

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

@@ -20,7 +20,7 @@ import { RelatedArticlesTitle } from './styled';
 import useCancellablePromise from '../../util/hooks/cancellablePromise';
 import { usePrevious } from '../../util/hooks/previous';
 var packageName = "@atlaskit/help";
-var packageVersion = "9.2.0";
+var packageVersion = "0.0.0-development";
 var buttonStyles = null;
 export var RelatedArticles = function RelatedArticles(_ref) {
   var _ref$style = _ref.style,