@atlaskit/help 9.2.1 → 9.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (94) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/afm-cc/tsconfig.json +0 -3
  3. package/afm-jira/tsconfig.json +0 -3
  4. package/afm-products/tsconfig.json +0 -3
  5. package/dist/cjs/analytics.js +1 -1
  6. package/dist/cjs/assets/IconWrapper.js +0 -2
  7. package/dist/cjs/assets/WhatsNewIcoExperiment.js +0 -2
  8. package/dist/cjs/assets/WhatsNewIconFix.js +0 -2
  9. package/dist/cjs/assets/WhatsNewIconImprovement.js +0 -2
  10. package/dist/cjs/assets/WhatsNewIconNew.js +0 -2
  11. package/dist/cjs/assets/WhatsNewIconRemoved.js +0 -2
  12. package/dist/cjs/components/Article/ArticleLoadingFail/index.js +1 -1
  13. package/dist/cjs/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulNoButton.js +1 -1
  14. package/dist/cjs/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulYesButton.js +1 -1
  15. package/dist/cjs/components/Article/HelpArticle/WasHelpfulForm/index.js +3 -3
  16. package/dist/cjs/components/Article/HelpArticle/index.js +1 -1
  17. package/dist/cjs/components/Article/WhatsNewArticle/index.js +4 -4
  18. package/dist/cjs/components/Article/WhatsNewArticle/styled.compiled.css +4 -13
  19. package/dist/cjs/components/Article/WhatsNewArticle/styled.js +8 -17
  20. package/dist/cjs/components/ArticlesList/ArticlesList.js +6 -2
  21. package/dist/cjs/components/ArticlesList/ArticlesListItem/index.js +18 -12
  22. package/dist/cjs/components/ArticlesList/ArticlesListItem/styled.js +5 -3
  23. package/dist/cjs/components/ArticlesList/index.js +22 -1
  24. package/dist/cjs/components/BackButton/index.js +1 -1
  25. package/dist/cjs/components/HelpContentButton/index.js +4 -4
  26. package/dist/cjs/components/RelatedArticles/index.js +1 -1
  27. package/dist/cjs/components/Search/SearchInput/index.js +3 -3
  28. package/dist/cjs/components/Search/SearchResults/SearchExternalSite.js +2 -2
  29. package/dist/cjs/components/Search/SearchResults/SearchResultsEmpty.js +2 -2
  30. package/dist/cjs/components/WhatsNew/WhatsNewButton/index.js +1 -1
  31. package/dist/cjs/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultItem/index.js +1 -1
  32. package/dist/es2019/analytics.js +1 -1
  33. package/dist/es2019/assets/IconWrapper.js +0 -2
  34. package/dist/es2019/assets/WhatsNewIcoExperiment.js +0 -2
  35. package/dist/es2019/assets/WhatsNewIconFix.js +0 -2
  36. package/dist/es2019/assets/WhatsNewIconImprovement.js +0 -2
  37. package/dist/es2019/assets/WhatsNewIconNew.js +0 -2
  38. package/dist/es2019/assets/WhatsNewIconRemoved.js +0 -2
  39. package/dist/es2019/components/Article/ArticleLoadingFail/index.js +1 -1
  40. package/dist/es2019/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulNoButton.js +1 -1
  41. package/dist/es2019/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulYesButton.js +1 -1
  42. package/dist/es2019/components/Article/HelpArticle/WasHelpfulForm/index.js +2 -2
  43. package/dist/es2019/components/Article/HelpArticle/index.js +1 -1
  44. package/dist/es2019/components/Article/WhatsNewArticle/index.js +2 -2
  45. package/dist/es2019/components/Article/WhatsNewArticle/styled.compiled.css +4 -12
  46. package/dist/es2019/components/Article/WhatsNewArticle/styled.js +8 -12
  47. package/dist/es2019/components/ArticlesList/ArticlesList.js +6 -2
  48. package/dist/es2019/components/ArticlesList/ArticlesListItem/index.js +17 -11
  49. package/dist/es2019/components/ArticlesList/ArticlesListItem/styled.js +4 -3
  50. package/dist/es2019/components/ArticlesList/index.js +23 -2
  51. package/dist/es2019/components/BackButton/index.js +1 -1
  52. package/dist/es2019/components/HelpContentButton/index.js +3 -3
  53. package/dist/es2019/components/RelatedArticles/index.js +1 -1
  54. package/dist/es2019/components/Search/SearchInput/index.js +2 -2
  55. package/dist/es2019/components/Search/SearchResults/SearchExternalSite.js +1 -1
  56. package/dist/es2019/components/Search/SearchResults/SearchResultsEmpty.js +1 -1
  57. package/dist/es2019/components/WhatsNew/WhatsNewButton/index.js +1 -1
  58. package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultItem/index.js +1 -1
  59. package/dist/esm/analytics.js +1 -1
  60. package/dist/esm/assets/IconWrapper.js +0 -2
  61. package/dist/esm/assets/WhatsNewIcoExperiment.js +0 -2
  62. package/dist/esm/assets/WhatsNewIconFix.js +0 -2
  63. package/dist/esm/assets/WhatsNewIconImprovement.js +0 -2
  64. package/dist/esm/assets/WhatsNewIconNew.js +0 -2
  65. package/dist/esm/assets/WhatsNewIconRemoved.js +0 -2
  66. package/dist/esm/components/Article/ArticleLoadingFail/index.js +1 -1
  67. package/dist/esm/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulNoButton.js +1 -1
  68. package/dist/esm/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulYesButton.js +1 -1
  69. package/dist/esm/components/Article/HelpArticle/WasHelpfulForm/index.js +2 -2
  70. package/dist/esm/components/Article/HelpArticle/index.js +1 -1
  71. package/dist/esm/components/Article/WhatsNewArticle/index.js +2 -2
  72. package/dist/esm/components/Article/WhatsNewArticle/styled.compiled.css +4 -13
  73. package/dist/esm/components/Article/WhatsNewArticle/styled.js +8 -17
  74. package/dist/esm/components/ArticlesList/ArticlesList.js +6 -2
  75. package/dist/esm/components/ArticlesList/ArticlesListItem/index.js +16 -10
  76. package/dist/esm/components/ArticlesList/ArticlesListItem/styled.js +5 -3
  77. package/dist/esm/components/ArticlesList/index.js +23 -2
  78. package/dist/esm/components/BackButton/index.js +1 -1
  79. package/dist/esm/components/HelpContentButton/index.js +3 -3
  80. package/dist/esm/components/RelatedArticles/index.js +1 -1
  81. package/dist/esm/components/Search/SearchInput/index.js +2 -2
  82. package/dist/esm/components/Search/SearchResults/SearchExternalSite.js +1 -1
  83. package/dist/esm/components/Search/SearchResults/SearchResultsEmpty.js +1 -1
  84. package/dist/esm/components/WhatsNew/WhatsNewButton/index.js +1 -1
  85. package/dist/esm/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultItem/index.js +1 -1
  86. package/dist/types/assets/IconWrapper.d.ts +3 -4
  87. package/dist/types/components/ArticlesList/ArticlesList.d.ts +1 -0
  88. package/dist/types/components/ArticlesList/ArticlesListItem/index.d.ts +4 -4
  89. package/dist/types/components/ArticlesList/ArticlesListItem/styled.d.ts +2 -2
  90. package/dist/types-ts4.5/assets/IconWrapper.d.ts +3 -4
  91. package/dist/types-ts4.5/components/ArticlesList/ArticlesList.d.ts +1 -0
  92. package/dist/types-ts4.5/components/ArticlesList/ArticlesListItem/index.d.ts +4 -4
  93. package/dist/types-ts4.5/components/ArticlesList/ArticlesListItem/styled.d.ts +2 -2
  94. package/package.json +10 -11
@@ -6,7 +6,7 @@ import { messages } from '../../../../messages';
6
6
  var ANALYTICS_CONTEXT_DATA = {
7
7
  componentName: 'ArticleWasHelpfulYesButton',
8
8
  packageName: "@atlaskit/help",
9
- packageVersion: "9.2.0"
9
+ packageVersion: "0.0.0-development"
10
10
  };
11
11
  export var ArticleWasHelpfulYesButton = function ArticleWasHelpfulYesButton(_ref) {
12
12
  var _ref$isSelected = _ref.isSelected,
@@ -15,7 +15,7 @@ import Form, { Field, CheckboxField, FormFooter } from '@atlaskit/form';
15
15
  import { RadioGroup } from '@atlaskit/radio';
16
16
  import { Checkbox } from '@atlaskit/checkbox';
17
17
  import TextArea from '@atlaskit/textarea';
18
- import CheckCircleIcon from '@atlaskit/icon/core/migration/status-success--check-circle';
18
+ import CheckCircleIcon from '@atlaskit/icon/core/status-success';
19
19
  import { colors } from '@atlaskit/theme';
20
20
  import { Text } from '@atlaskit/primitives/compiled';
21
21
  import { messages } from '../../../../messages';
@@ -27,7 +27,7 @@ var FEEDBACK_REASON_TEXT_MAX_LENGTH = '16000';
27
27
  var ANALYTICS_CONTEXT_DATA = {
28
28
  componentName: 'ArticleWasHelpfulForm',
29
29
  packageName: "@atlaskit/help",
30
- packageVersion: "9.2.0"
30
+ packageVersion: "0.0.0-development"
31
31
  };
32
32
  var buttonStyles = null;
33
33
  export var ArticleWasHelpfulForm = function ArticleWasHelpfulForm(_ref) {
@@ -56,7 +56,7 @@ export var HelpArticle = function HelpArticle(_ref) {
56
56
  analyticsEvent.payload.attributes = {
57
57
  componentName: 'Article',
58
58
  packageName: "@atlaskit/help",
59
- packageVersion: "9.2.0"
59
+ packageVersion: "0.0.0-development"
60
60
  };
61
61
  if (onRelatedArticlesShowMoreClick) {
62
62
  onRelatedArticlesShowMoreClick(event, analyticsEvent, isCollapsed);
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { injectIntl } from 'react-intl-next';
3
3
  import { BODY_FORMAT_TYPES } from '@atlaskit/help-article';
4
4
  import HelpArticleContent from '@atlaskit/help-article';
5
- import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
5
+ import ShortcutIcon from '@atlaskit/icon/core/link-external';
6
6
  import { AnalyticsContext } from '@atlaskit/analytics-next';
7
7
  import Button from '@atlaskit/button';
8
8
  import { messages } from '../../../messages';
@@ -13,7 +13,7 @@ import { WhatsNewTypeTitle, WhatsNewTitleText, WhatsNewIconContainer, RelatedLin
13
13
  var analyticsContextData = {
14
14
  componentName: 'ArticlesListItem',
15
15
  packageName: "@atlaskit/help",
16
- packageVersion: "9.2.0"
16
+ packageVersion: "0.0.0-development"
17
17
  };
18
18
  export var WhatsNewArticle = function WhatsNewArticle(_ref) {
19
19
  var formatMessage = _ref.intl.formatMessage,
@@ -1,16 +1,7 @@
1
- ._11c81bq0{font:var(--_bo9t81)}
2
- ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
- ._19bv1b66{padding-left:var(--ds-space-050,4px)}
1
+
2
+ ._zulpu2gc{gap:var(--ds-space-100,8px)}._19bv1b66{padding-left:var(--ds-space-050,4px)}
4
3
  ._1e0c1o8l{display:inline-block}
5
- ._1e0c1ule{display:block}
6
- ._1hmsglyw{text-decoration-line:none}
7
- ._1reo15vq{overflow-x:hidden}
8
- ._4bfu1r31{text-decoration-color:currentColor}
9
- ._ajmmnqa1{text-decoration-style:solid}
10
- ._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
4
+ ._1e0c1txw{display:flex}
11
5
  ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
12
- ._o5724jg8{white-space:normal}
13
6
  ._otyru2gc{margin-bottom:var(--ds-space-100,8px)}
14
- ._s7n4nkob{vertical-align:middle}
15
- ._syaz1o8f{color:var(--_ggxzyp)}
16
- ._syazg0pi{color:var(--_1dzgjqk)}
7
+ ._s7n4nkob{vertical-align:middle}
@@ -2,35 +2,26 @@
2
2
  import "./styled.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React from 'react';
5
- import { fontFallback } from '@atlaskit/theme/typography';
6
- import { N300, N800 } from '@atlaskit/theme/colors';
7
- var body = fontFallback.body;
8
- var whatsNewTypeTitleStyles = null;
5
+ import Heading from '@atlaskit/heading';
9
6
  export var WhatsNewTypeTitle = function WhatsNewTypeTitle(_ref) {
10
7
  var children = _ref.children;
11
- return /*#__PURE__*/React.createElement("span", {
12
- className: ax(["_4bfu1r31 _1hmsglyw _ajmmnqa1 _11c81bq0 _syazg0pi _s7n4nkob _19bv1b66 _o5724jg8 _1reo15vq"]),
13
- style: {
14
- "--_1dzgjqk": ix("var(--ds-text-subtlest, ".concat(N300, ")")),
15
- "--_bo9t81": ix("var(--ds-font-body, ".concat(body.medium, ")"))
16
- }
8
+ return /*#__PURE__*/React.createElement(Heading, {
9
+ size: "xsmall",
10
+ as: "h3"
17
11
  }, children);
18
12
  };
19
13
  var whatsNewIconContainerStyles = null;
20
14
  export var WhatsNewIconContainer = function WhatsNewIconContainer(_ref2) {
21
15
  var children = _ref2.children;
22
16
  return /*#__PURE__*/React.createElement("div", {
23
- className: ax(["_1e0c1ule _n3tdu2gc"])
17
+ className: ax(["_zulpu2gc _1e0c1txw _n3tdu2gc"])
24
18
  }, children);
25
19
  };
26
- var whatsNewTitleText = null;
27
20
  export var WhatsNewTitleText = function WhatsNewTitleText(_ref3) {
28
21
  var children = _ref3.children;
29
- return /*#__PURE__*/React.createElement("span", {
30
- className: ax(["_4bfu1r31 _1hmsglyw _ajmmnqa1 _11c82smr _syaz1o8f _k48p1pd9 _o5724jg8 _1reo15vq _n3tdu2gc _1e0c1ule"]),
31
- style: {
32
- "--_ggxzyp": ix("var(--ds-text, ".concat(N800, ")"))
33
- }
22
+ return /*#__PURE__*/React.createElement(Heading, {
23
+ size: "xsmall",
24
+ as: "h4"
34
25
  }, children);
35
26
  };
36
27
  var relatedLinkContainerStyles = null;
@@ -30,7 +30,8 @@ var articlesList = function articlesList(_ref) {
30
30
  minItemsToDisplay = _ref$minItemsToDispla === void 0 ? MIN_ITEMS_TO_DISPLAY : _ref$minItemsToDispla,
31
31
  _ref$numberOfArticles = _ref.numberOfArticlesToDisplay,
32
32
  numberOfArticlesToDisplay = _ref$numberOfArticles === void 0 ? MIN_ITEMS_TO_DISPLAY : _ref$numberOfArticles,
33
- onArticlesListItemClick = _ref.onArticlesListItemClick;
33
+ onArticlesListItemClick = _ref.onArticlesListItemClick,
34
+ firstExpandedArticleRef = _ref.firstExpandedArticleRef;
34
35
  var isExpanded = numberOfArticlesToDisplay > minItemsToDisplay;
35
36
  return articles ? /*#__PURE__*/React.createElement(Box, {
36
37
  as: "ul",
@@ -38,6 +39,8 @@ var articlesList = function articlesList(_ref) {
38
39
  role: "list"
39
40
  }, articles.slice(0, numberOfArticlesToDisplay).map(function (article, index) {
40
41
  var isVisible = index < minItemsToDisplay || isExpanded;
42
+ // The first expanded article is at index minItemsToDisplay
43
+ var isFirstExpandedArticle = index === minItemsToDisplay;
41
44
  return /*#__PURE__*/React.createElement(Box, {
42
45
  as: "li",
43
46
  xcss: listStyles,
@@ -58,7 +61,8 @@ var articlesList = function articlesList(_ref) {
58
61
  href: article.href,
59
62
  trustFactors: article.trustFactors,
60
63
  source: article.source,
61
- lastPublished: article.lastPublished
64
+ lastPublished: article.lastPublished,
65
+ ref: isFirstExpandedArticle ? firstExpandedArticleRef : undefined
62
66
  }));
63
67
  })) : null;
64
68
  };
@@ -1,14 +1,15 @@
1
- import React from 'react';
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React, { forwardRef } from 'react';
2
3
  import * as colors from '@atlaskit/theme/colors';
3
4
  import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
4
- import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
5
+ import ShortcutIcon from '@atlaskit/icon/core/link-external';
5
6
  import { injectIntl } from 'react-intl-next';
6
- import LikeIcon from '@atlaskit/icon/core/migration/thumbs-up--like';
7
+ import LikeIcon from '@atlaskit/icon/core/thumbs-up';
7
8
  import { ArticlesListItemWrapper, ArticlesListItemContainer, ArticlesListItemTitleText, ArticlesListItemDescription, ArticlesListItemLinkIcon, ArticlesListItemTrustFactor, ArticlesListItemViewCount, ArticlesListItemHelpfulCount, ArticlesListItemSource, ArticlesListItemLastModified, ArticlesListItemTitleSection, ArticlesListItemDescriptionHighlight } from './styled';
8
9
  var ANALYTICS_CONTEXT_DATA = {
9
10
  componentName: 'ArticlesListItem',
10
11
  packageName: "@atlaskit/help",
11
- packageVersion: "9.2.0"
12
+ packageVersion: "0.0.0-development"
12
13
  };
13
14
  var highlightText = function highlightText(text) {
14
15
  if (!text) {
@@ -27,7 +28,7 @@ var highlightText = function highlightText(text) {
27
28
  });
28
29
  return sections;
29
30
  };
30
- export var ArticlesListItem = function ArticlesListItem(_ref) {
31
+ export var ArticlesListItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
31
32
  var styles = _ref.styles,
32
33
  title = _ref.title,
33
34
  description = _ref.description,
@@ -57,6 +58,7 @@ export var ArticlesListItem = function ArticlesListItem(_ref) {
57
58
  var isSourceVisible = source != null;
58
59
  var isLastPublishedVisible = lastPublished != null && lastPublished !== '';
59
60
  return /*#__PURE__*/React.createElement(ArticlesListItemWrapper, {
61
+ ref: ref,
60
62
  styles: styles,
61
63
  "aria-disabled": "false",
62
64
  role: "button",
@@ -79,11 +81,15 @@ export var ArticlesListItem = function ArticlesListItem(_ref) {
79
81
  label: "Like",
80
82
  LEGACY_size: "small"
81
83
  }), trustFactors.helpfulCount)));
82
- };
83
- var ArticlesListItemWithContext = function ArticlesListItemWithContext(props) {
84
+ });
85
+ var ArticlesListItemWithContext = /*#__PURE__*/forwardRef(function (props, ref) {
84
86
  return /*#__PURE__*/React.createElement(AnalyticsContext, {
85
87
  data: ANALYTICS_CONTEXT_DATA
86
- }, /*#__PURE__*/React.createElement(ArticlesListItem, props));
87
- };
88
- var _default_1 = injectIntl(ArticlesListItemWithContext);
88
+ }, /*#__PURE__*/React.createElement(ArticlesListItem, _extends({
89
+ ref: ref
90
+ }, props)));
91
+ });
92
+ var _default_1 = injectIntl(ArticlesListItemWithContext, {
93
+ forwardRef: true
94
+ });
89
95
  export default _default_1;
@@ -14,11 +14,13 @@ import { B100, B50, N200, N30, N400, N400A, N800, Y100 } from '@atlaskit/theme/c
14
14
  var heading = fontFallback.heading,
15
15
  body = fontFallback.body;
16
16
  var articlesListItemWrapperStyles = null;
17
- export var ArticlesListItemWrapper = function ArticlesListItemWrapper(_ref) {
17
+ export var ArticlesListItemWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
18
18
  var styles = _ref.styles,
19
19
  children = _ref.children,
20
20
  rest = _objectWithoutProperties(_ref, _excluded);
21
- return /*#__PURE__*/React.createElement("a", _extends({}, rest, {
21
+ return /*#__PURE__*/React.createElement("a", _extends({
22
+ ref: ref
23
+ }, rest, {
22
24
  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"]),
23
25
  style: _objectSpread(_objectSpread({}, styles), {}, {
24
26
  "--_vrm7dk": ix("var(--ds-text-subtlest, ".concat(N200, ")")),
@@ -27,7 +29,7 @@ export var ArticlesListItemWrapper = function ArticlesListItemWrapper(_ref) {
27
29
  "--_18th9fi": ix("var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")"))
28
30
  })
29
31
  }), children);
30
- };
32
+ });
31
33
  var articlesListItemContainerStyles = null;
32
34
  export var ArticlesListItemContainer = function ArticlesListItemContainer(_ref2) {
33
35
  var children = _ref2.children;
@@ -1,5 +1,5 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
- import React, { useState } from 'react';
2
+ import React, { useState, useRef, useEffect, useCallback } from 'react';
3
3
  import ArticlesList from './ArticlesList';
4
4
  import ShowMoreButton from '../ShowMoreButton';
5
5
  import { ArticlesListContainer } from './styled';
@@ -15,6 +15,8 @@ var ArticleList = function ArticleList(_ref) {
15
15
  _useState2 = _slicedToArray(_useState, 2),
16
16
  showMoreToggled = _useState2[0],
17
17
  setShowMoreToggled = _useState2[1];
18
+ var firstExpandedArticleRef = useRef(null);
19
+ var isExpandingRef = useRef(false);
18
20
  var getMinItemsToDisplay = function getMinItemsToDisplay() {
19
21
  return minItemsToDisplay ? minItemsToDisplay : MIN_ITEMS_TO_DISPLAY;
20
22
  };
@@ -27,7 +29,24 @@ var ArticleList = function ArticleList(_ref) {
27
29
  var getNumberOfArticlesToDisplay = function getNumberOfArticlesToDisplay(showMoreToggeled) {
28
30
  return showMoreToggeled ? getMinItemsToDisplay() : getMaxItemsToDisplay();
29
31
  };
32
+
33
+ // Focus on the first newly revealed article after expansion
34
+ useEffect(function () {
35
+ if (isExpandingRef.current && !showMoreToggled) {
36
+ if (firstExpandedArticleRef.current) {
37
+ firstExpandedArticleRef.current.focus();
38
+ }
39
+ isExpandingRef.current = false;
40
+ }
41
+ }, [showMoreToggled]);
42
+ var setFirstExpandedArticleRef = useCallback(function (element) {
43
+ firstExpandedArticleRef.current = element;
44
+ }, []);
30
45
  var toggleArticlesList = function toggleArticlesList(event, analyticsEvent) {
46
+ // Track if we're expanding (going from collapsed to expanded)
47
+ if (showMoreToggled) {
48
+ isExpandingRef.current = true;
49
+ }
31
50
  setShowMoreToggled(!showMoreToggled);
32
51
  if (onToggleArticlesList) {
33
52
  onToggleArticlesList(event, analyticsEvent, !showMoreToggled);
@@ -39,7 +58,9 @@ var ArticleList = function ArticleList(_ref) {
39
58
  style: style,
40
59
  onArticlesListItemClick: onArticlesListItemClick,
41
60
  articles: articles,
42
- numberOfArticlesToDisplay: getNumberOfArticlesToDisplay(showMoreToggled)
61
+ numberOfArticlesToDisplay: getNumberOfArticlesToDisplay(showMoreToggled),
62
+ minItemsToDisplay: getMinItemsToDisplay(),
63
+ firstExpandedArticleRef: setFirstExpandedArticleRef
43
64
  }), articles.length > getMinItemsToDisplay() && /*#__PURE__*/React.createElement(ShowMoreButton, {
44
65
  minItemsToDisplay: getMinItemsToDisplay(),
45
66
  maxItemsToDisplay: getMaxItemsToDisplay(),
@@ -49,7 +49,7 @@ var BackButtonWithContext = function BackButtonWithContext(props) {
49
49
  data: {
50
50
  componentName: 'backButton',
51
51
  packageName: "@atlaskit/help",
52
- packageVersion: "9.2.0"
52
+ packageVersion: "0.0.0-development"
53
53
  }
54
54
  }, /*#__PURE__*/React.createElement(BackButton, props));
55
55
  };
@@ -1,5 +1,5 @@
1
1
  import React, { useCallback } from 'react';
2
- import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
2
+ import ShortcutIcon from '@atlaskit/icon/core/link-external';
3
3
  import Tooltip from '@atlaskit/tooltip';
4
4
  import { NotificationIndicator } from '@atlaskit/notification-indicator';
5
5
  import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
@@ -7,7 +7,7 @@ import { HelpContentButtonContainer, HelpContentButtonIcon, HelpContentButtonTex
7
7
  var analitycsContextData = {
8
8
  componentName: 'HelpContentButton',
9
9
  packageName: "@atlaskit/help",
10
- packageVersion: "9.2.0"
10
+ packageVersion: "0.0.0-development"
11
11
  };
12
12
  var HelpContentButton = function HelpContentButton(_ref) {
13
13
  var _ref$id = _ref.id,
@@ -48,7 +48,7 @@ var HelpContentButton = function HelpContentButton(_ref) {
48
48
  }, /*#__PURE__*/React.createElement(ShortcutIcon, {
49
49
  color: "currentColor",
50
50
  LEGACY_size: "small",
51
- label: ""
51
+ label: "Opens in a new window"
52
52
  }))));
53
53
  var target = href ? openInSameTab ? '_self' : '_blank' : undefined;
54
54
  return /*#__PURE__*/React.createElement(AnalyticsContext, {
@@ -20,7 +20,7 @@ import { RelatedArticlesTitle } from './styled';
20
20
  import useCancellablePromise from '../../util/hooks/cancellablePromise';
21
21
  import { usePrevious } from '../../util/hooks/previous';
22
22
  var packageName = "@atlaskit/help";
23
- var packageVersion = "9.2.0";
23
+ var packageVersion = "0.0.0-development";
24
24
  var buttonStyles = null;
25
25
  export var RelatedArticles = function RelatedArticles(_ref) {
26
26
  var _ref$style = _ref.style,
@@ -7,7 +7,7 @@ import Textfield from '@atlaskit/textfield';
7
7
  import Button from '@atlaskit/button/custom-theme-button';
8
8
  import Spinner from '@atlaskit/spinner';
9
9
  import SearchIcon from '@atlaskit/icon/core/migration/search';
10
- import EditorCloseIcon from '@atlaskit/icon/core/migration/cross--editor-close';
10
+ import EditorCloseIcon from '@atlaskit/icon/core/cross';
11
11
  import { injectIntl } from 'react-intl-next';
12
12
  import { REQUEST_STATE } from '../../../model/Requests';
13
13
  import { useSearchContext } from '../../contexts/searchContext';
@@ -18,7 +18,7 @@ import { useNavigationContext } from '../../contexts/navigationContext';
18
18
  var ANALYTICS_CONTEXT_DATA = {
19
19
  componentName: 'searchInput',
20
20
  packageName: "@atlaskit/help",
21
- packageVersion: "9.2.0"
21
+ packageVersion: "0.0.0-development"
22
22
  };
23
23
  var buttonStyles = null;
24
24
  export var SearchInput = function SearchInput(_ref) {
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
3
3
  import * as colors from '@atlaskit/theme/colors';
4
4
  import Button from '@atlaskit/button';
5
- import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
5
+ import ShortcutIcon from '@atlaskit/icon/core/link-external';
6
6
  import { injectIntl } from 'react-intl-next';
7
7
  import { Text } from '@atlaskit/primitives/compiled';
8
8
  import { messages } from '../../../messages';
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
3
3
  import * as colors from '@atlaskit/theme/colors';
4
4
  import Button from '@atlaskit/button';
5
- import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
5
+ import ShortcutIcon from '@atlaskit/icon/core/link-external';
6
6
  import { injectIntl } from 'react-intl-next';
7
7
  import { Text } from '@atlaskit/primitives/compiled';
8
8
  import NotFoundImage from '../../../assets/NotFoundImage';
@@ -11,7 +11,7 @@ import { ARTICLE_TYPE } from '../../../model/Help';
11
11
  var ANALYTICS_CONTEXT_DATA = {
12
12
  componentName: 'WhatsNewButton',
13
13
  packageName: "@atlaskit/help",
14
- packageVersion: "9.2.0"
14
+ packageVersion: "0.0.0-development"
15
15
  };
16
16
  export var WhatsNewButton = function WhatsNewButton(_ref) {
17
17
  var productName = _ref.productName,
@@ -8,7 +8,7 @@ import { WhatsNewResultListItemWrapper, WhatsNewResultListItemTitleContainer, Wh
8
8
  var ANALYTICS_CONTEXT_DATA = {
9
9
  componentName: 'ArticlesListItem',
10
10
  packageName: "@atlaskit/help",
11
- packageVersion: "9.2.0"
11
+ packageVersion: "0.0.0-development"
12
12
  };
13
13
  export var WhatsNewResultListItem = function WhatsNewResultListItem(_ref) {
14
14
  var formatMessage = _ref.intl.formatMessage,
@@ -1,9 +1,8 @@
1
1
  import React from 'react';
2
- import { type IconProps, type NewCoreIconProps } from '@atlaskit/icon';
2
+ import { type NewCoreIconProps } from '@atlaskit/icon';
3
3
  type IconWrapperProps = {
4
4
  appearance: string;
5
- Icon: React.FC<NewCoreIconProps>;
6
- LegacyIcon: ({ label, primaryColor, secondaryColor, size, testId }: IconProps) => JSX.Element;
5
+ Icon: (props: NewCoreIconProps) => JSX.Element;
7
6
  };
8
- export declare const IconWrapper: ({ Icon, LegacyIcon, appearance, }: IconWrapperProps) => React.JSX.Element;
7
+ export declare const IconWrapper: ({ Icon, appearance }: IconWrapperProps) => React.JSX.Element;
9
8
  export {};
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import { type ArticlesList as ArticlesListInterface } from './model/ArticlesListItem';
3
3
  export interface Props {
4
+ firstExpandedArticleRef?: (element: HTMLAnchorElement | null) => void;
4
5
  numberOfArticlesToDisplay?: number;
5
6
  }
6
7
  declare const articlesList: React.FC<Partial<ArticlesListInterface> & Props>;
@@ -1,13 +1,13 @@
1
1
  import React from 'react';
2
2
  import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
3
- import { type WithIntlProps, type WrappedComponentProps } from 'react-intl-next';
3
+ import { type WrappedComponentProps } from 'react-intl-next';
4
4
  import { type ArticleItem } from '../../../model/Article';
5
5
  interface Props {
6
6
  onClick?: (event: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
7
7
  styles?: {};
8
8
  }
9
- export declare const ArticlesListItem: React.FC<Props & Partial<ArticleItem> & WrappedComponentProps>;
10
- declare const _default_1: React.FC<WithIntlProps<Props & Partial<ArticleItem> & WrappedComponentProps>> & {
11
- WrappedComponent: React.ComponentType<Props & Partial<ArticleItem> & WrappedComponentProps>;
9
+ export declare const ArticlesListItem: React.ForwardRefExoticComponent<Props & Partial<ArticleItem> & WrappedComponentProps & React.RefAttributes<HTMLAnchorElement>>;
10
+ declare const _default_1: React.ForwardRefExoticComponent<Omit<import("react-intl-next").WithIntlProps<React.PropsWithChildren<Props & Partial<ArticleItem> & WrappedComponentProps & React.RefAttributes<HTMLAnchorElement>>>, "ref"> & React.RefAttributes<any>> & {
11
+ WrappedComponent: React.ComponentType<Props & Partial<ArticleItem> & WrappedComponentProps & React.RefAttributes<HTMLAnchorElement>>;
12
12
  };
13
13
  export default _default_1;
@@ -3,11 +3,11 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  import React from 'react';
6
- export declare const ArticlesListItemWrapper: ({ styles, children, ...rest }: {
6
+ export declare const ArticlesListItemWrapper: React.ForwardRefExoticComponent<Omit<{
7
7
  [rest: string]: any;
8
8
  children: React.ReactNode;
9
9
  styles?: React.CSSProperties;
10
- }) => JSX.Element;
10
+ }, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
11
11
  export declare const ArticlesListItemContainer: ({ children, }: {
12
12
  children: React.ReactNode;
13
13
  }) => JSX.Element;
@@ -1,9 +1,8 @@
1
1
  import React from 'react';
2
- import { type IconProps, type NewCoreIconProps } from '@atlaskit/icon';
2
+ import { type NewCoreIconProps } from '@atlaskit/icon';
3
3
  type IconWrapperProps = {
4
4
  appearance: string;
5
- Icon: React.FC<NewCoreIconProps>;
6
- LegacyIcon: ({ label, primaryColor, secondaryColor, size, testId }: IconProps) => JSX.Element;
5
+ Icon: (props: NewCoreIconProps) => JSX.Element;
7
6
  };
8
- export declare const IconWrapper: ({ Icon, LegacyIcon, appearance, }: IconWrapperProps) => React.JSX.Element;
7
+ export declare const IconWrapper: ({ Icon, appearance }: IconWrapperProps) => React.JSX.Element;
9
8
  export {};
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import { type ArticlesList as ArticlesListInterface } from './model/ArticlesListItem';
3
3
  export interface Props {
4
+ firstExpandedArticleRef?: (element: HTMLAnchorElement | null) => void;
4
5
  numberOfArticlesToDisplay?: number;
5
6
  }
6
7
  declare const articlesList: React.FC<Partial<ArticlesListInterface> & Props>;
@@ -1,13 +1,13 @@
1
1
  import React from 'react';
2
2
  import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
3
- import { type WithIntlProps, type WrappedComponentProps } from 'react-intl-next';
3
+ import { type WrappedComponentProps } from 'react-intl-next';
4
4
  import { type ArticleItem } from '../../../model/Article';
5
5
  interface Props {
6
6
  onClick?: (event: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
7
7
  styles?: {};
8
8
  }
9
- export declare const ArticlesListItem: React.FC<Props & Partial<ArticleItem> & WrappedComponentProps>;
10
- declare const _default_1: React.FC<WithIntlProps<Props & Partial<ArticleItem> & WrappedComponentProps>> & {
11
- WrappedComponent: React.ComponentType<Props & Partial<ArticleItem> & WrappedComponentProps>;
9
+ export declare const ArticlesListItem: React.ForwardRefExoticComponent<Props & Partial<ArticleItem> & WrappedComponentProps & React.RefAttributes<HTMLAnchorElement>>;
10
+ declare const _default_1: React.ForwardRefExoticComponent<Omit<import("react-intl-next").WithIntlProps<React.PropsWithChildren<Props & Partial<ArticleItem> & WrappedComponentProps & React.RefAttributes<HTMLAnchorElement>>>, "ref"> & React.RefAttributes<any>> & {
11
+ WrappedComponent: React.ComponentType<Props & Partial<ArticleItem> & WrappedComponentProps & React.RefAttributes<HTMLAnchorElement>>;
12
12
  };
13
13
  export default _default_1;
@@ -3,11 +3,11 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  import React from 'react';
6
- export declare const ArticlesListItemWrapper: ({ styles, children, ...rest }: {
6
+ export declare const ArticlesListItemWrapper: React.ForwardRefExoticComponent<Omit<{
7
7
  [rest: string]: any;
8
8
  children: React.ReactNode;
9
9
  styles?: React.CSSProperties;
10
- }) => JSX.Element;
10
+ }, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
11
11
  export declare const ArticlesListItemContainer: ({ children, }: {
12
12
  children: React.ReactNode;
13
13
  }) => JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/help",
3
- "version": "9.2.1",
3
+ "version": "9.2.2",
4
4
  "description": "A cross-product help component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -32,26 +32,25 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@atlaskit/analytics-next": "^11.1.0",
35
- "@atlaskit/button": "^23.7.0",
35
+ "@atlaskit/button": "^23.9.0",
36
36
  "@atlaskit/checkbox": "^17.2.0",
37
- "@atlaskit/form": "^15.0.0",
37
+ "@atlaskit/form": "^15.1.0",
38
38
  "@atlaskit/heading": "^5.2.0",
39
39
  "@atlaskit/help-article": "^6.0.0",
40
40
  "@atlaskit/help-layout": "^6.3.0",
41
- "@atlaskit/icon": "^29.0.0",
42
- "@atlaskit/legacy-custom-icons": "^0.22.0",
41
+ "@atlaskit/icon": "^29.3.0",
43
42
  "@atlaskit/notification-indicator": "^10.0.0",
44
- "@atlaskit/notification-log-client": "^6.3.0",
43
+ "@atlaskit/notification-log-client": "^6.4.0",
45
44
  "@atlaskit/platform-feature-flags": "^1.1.0",
46
- "@atlaskit/primitives": "^16.4.0",
45
+ "@atlaskit/primitives": "^17.0.0",
47
46
  "@atlaskit/radio": "^8.3.0",
48
- "@atlaskit/section-message": "^8.10.0",
49
- "@atlaskit/select": "^21.5.0",
47
+ "@atlaskit/section-message": "^8.11.0",
48
+ "@atlaskit/select": "^21.6.0",
50
49
  "@atlaskit/spinner": "^19.0.0",
51
50
  "@atlaskit/textarea": "^8.2.0",
52
51
  "@atlaskit/textfield": "^8.2.0",
53
52
  "@atlaskit/theme": "^21.0.0",
54
- "@atlaskit/tokens": "^8.4.0",
53
+ "@atlaskit/tokens": "^9.0.0",
55
54
  "@atlaskit/tooltip": "^20.11.0",
56
55
  "@babel/runtime": "^7.0.0",
57
56
  "@compiled/react": "^0.18.6",
@@ -66,7 +65,7 @@
66
65
  "react-intl-next": "npm:react-intl@^5.18.1"
67
66
  },
68
67
  "devDependencies": {
69
- "@testing-library/react": "^13.4.0",
68
+ "@testing-library/react": "^16.3.0",
70
69
  "@types/react-transition-group": "^2.0.6",
71
70
  "algoliasearch": "^3.35.1",
72
71
  "enzyme": "^3.10.0",