@atlaskit/help 7.0.0 → 7.0.1

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 (8) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/components/WhatsNew/WhatsNewResults/index.js +31 -4
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/es2019/components/WhatsNew/WhatsNewResults/index.js +31 -5
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/esm/components/WhatsNew/WhatsNewResults/index.js +31 -5
  7. package/dist/esm/version.json +1 -1
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/help
2
2
 
3
+ ## 7.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`4ef57768666`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ef57768666) - [ux] Improve navigation in the "What's new" section
8
+
3
9
  ## 7.0.0
4
10
 
5
11
  ### Major Changes
package/dist/cjs/components/WhatsNew/WhatsNewResults/index.js CHANGED
@@ -17,6 +17,8 @@ var _react = _interopRequireWildcard(require("react"));
17
17
 
18
18
  var _reactTransitionGroup = require("react-transition-group");
19
19
 
20
+ var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
21
+
20
22
  var _select = _interopRequireDefault(require("@atlaskit/select"));
21
23
 
22
24
  var _reactIntlNext = require("react-intl-next");
@@ -87,12 +89,18 @@ var WhatsNewResults = function WhatsNewResults(_ref) {
87
89
  searchWhatsNewArticlesState = _useWhatsNewArticleCo.searchWhatsNewArticlesState,
88
90
  onWhatsNewResultItemClick = _useWhatsNewArticleCo.onWhatsNewResultItemClick;
89
91
 
92
+ var containerRef = (0, _react.useRef)(null);
93
+ var containerScrollPosition = (0, _react.useRef)(0);
90
94
  var SELECT_DEFAULT_VALUE = {
91
95
  value: '',
92
96
  label: formatMessage(_messages.messages.help_whats_new_filter_select_option_all)
93
97
  };
98
+ var SELECT_EMPTY_VALUE = {
99
+ value: undefined,
100
+ label: ''
101
+ };
94
102
 
95
- var _useState = (0, _react.useState)(SELECT_DEFAULT_VALUE),
103
+ var _useState = (0, _react.useState)(SELECT_EMPTY_VALUE),
96
104
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
97
105
  selectedOption = _useState2[0],
98
106
  setSelectedOption = _useState2[1];
@@ -109,8 +117,25 @@ var WhatsNewResults = function WhatsNewResults(_ref) {
109
117
  }, [onSearchWhatsNewArticles, searchWhatsNewArticlesResult, selectedOption]);
110
118
 
111
119
  var handleOnEnter = function handleOnEnter() {
112
- setSelectedOption(SELECT_DEFAULT_VALUE);
113
- onSearchWhatsNewArticles && onSearchWhatsNewArticles();
120
+ setTimeout(function () {
121
+ if (containerRef.current) {
122
+ containerRef.current.scrollTop = containerScrollPosition.current;
123
+ }
124
+ }, 0);
125
+
126
+ if ((0, _isEqual.default)(selectedOption, SELECT_EMPTY_VALUE)) {
127
+ setSelectedOption(SELECT_DEFAULT_VALUE);
128
+ onSearchWhatsNewArticles && onSearchWhatsNewArticles();
129
+ }
130
+ };
131
+
132
+ var handleOnExit = function handleOnExit() {
133
+ if (helpContextView === _constants.VIEW.DEFAULT_CONTENT) {
134
+ setSelectedOption(SELECT_EMPTY_VALUE);
135
+ containerScrollPosition.current = 0;
136
+ } else {
137
+ containerScrollPosition.current = containerRef.current ? containerRef.current.scrollTop : 0;
138
+ }
114
139
  };
115
140
 
116
141
  var handleOnClearFilter = function handleOnClearFilter() {
@@ -126,9 +151,11 @@ var WhatsNewResults = function WhatsNewResults(_ref) {
126
151
  return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
127
152
  in: helpContextView === _constants.VIEW.WHATS_NEW,
128
153
  timeout: _constants.FADEIN_OVERLAY_TRANSITION_DURATION_MS,
129
- onEnter: handleOnEnter
154
+ onEnter: handleOnEnter,
155
+ onExit: handleOnExit
130
156
  }, function (state) {
131
157
  return /*#__PURE__*/_react.default.createElement(_styled.WhatsNewResultsContainer, {
158
+ ref: containerRef,
132
159
  style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
133
160
  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, searchWhatsNewArticlesState === _Requests.REQUEST_STATE.loading && searchWhatsNewArticlesResult === null && state !== 'exited' && /*#__PURE__*/_react.default.createElement(_WhatsNewResultsLoading.default, null), (searchWhatsNewArticlesState === _Requests.REQUEST_STATE.done || searchWhatsNewArticlesState === _Requests.REQUEST_STATE.loading) && searchWhatsNewArticlesResult !== null && state !== 'exited' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.SelectContainer, null, /*#__PURE__*/_react.default.createElement(_select.default, {
134
161
  defaultValue: selectedOption,
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/help",
3
- "version": "7.0.0",
3
+ "version": "7.0.1",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/components/WhatsNew/WhatsNewResults/index.js CHANGED
@@ -1,5 +1,6 @@
1
- import React, { useCallback, useState } from 'react';
1
+ import React, { useCallback, useState, useRef } from 'react';
2
2
  import { Transition } from 'react-transition-group';
3
+ import isEqual from 'lodash/isEqual';
3
4
  import Select from '@atlaskit/select';
4
5
  import { injectIntl } from 'react-intl-next';
5
6
  import { VIEW } from '../../constants';
@@ -51,11 +52,17 @@ export const WhatsNewResults = ({
51
52
  searchWhatsNewArticlesState,
52
53
  onWhatsNewResultItemClick
53
54
  } = useWhatsNewArticleContext();
55
+ const containerRef = useRef(null);
56
+ const containerScrollPosition = useRef(0);
54
57
  const SELECT_DEFAULT_VALUE = {
55
58
  value: '',
56
59
  label: formatMessage(messages.help_whats_new_filter_select_option_all)
57
60
  };
58
- const [selectedOption, setSelectedOption] = useState(SELECT_DEFAULT_VALUE);
61
+ const SELECT_EMPTY_VALUE = {
62
+ value: undefined,
63
+ label: ''
64
+ };
65
+ const [selectedOption, setSelectedOption] = useState(SELECT_EMPTY_VALUE);
59
66
  const handleOnShowMoreButtonClick = useCallback(() => {
60
67
  if (searchWhatsNewArticlesResult && onSearchWhatsNewArticles) {
61
68
  const {
@@ -70,8 +77,25 @@ export const WhatsNewResults = ({
70
77
  }, [onSearchWhatsNewArticles, searchWhatsNewArticlesResult, selectedOption]);
71
78
 
72
79
  const handleOnEnter = () => {
73
- setSelectedOption(SELECT_DEFAULT_VALUE);
74
- onSearchWhatsNewArticles && onSearchWhatsNewArticles();
80
+ setTimeout(() => {
81
+ if (containerRef.current) {
82
+ containerRef.current.scrollTop = containerScrollPosition.current;
83
+ }
84
+ }, 0);
85
+
86
+ if (isEqual(selectedOption, SELECT_EMPTY_VALUE)) {
87
+ setSelectedOption(SELECT_DEFAULT_VALUE);
88
+ onSearchWhatsNewArticles && onSearchWhatsNewArticles();
89
+ }
90
+ };
91
+
92
+ const handleOnExit = () => {
93
+ if (helpContextView === VIEW.DEFAULT_CONTENT) {
94
+ setSelectedOption(SELECT_EMPTY_VALUE);
95
+ containerScrollPosition.current = 0;
96
+ } else {
97
+ containerScrollPosition.current = containerRef.current ? containerRef.current.scrollTop : 0;
98
+ }
75
99
  };
76
100
 
77
101
  const handleOnClearFilter = () => {
@@ -87,8 +111,10 @@ export const WhatsNewResults = ({
87
111
  return /*#__PURE__*/React.createElement(Transition, {
88
112
  in: helpContextView === VIEW.WHATS_NEW,
89
113
  timeout: FADEIN_OVERLAY_TRANSITION_DURATION_MS,
90
- onEnter: handleOnEnter
114
+ onEnter: handleOnEnter,
115
+ onExit: handleOnExit
91
116
  }, state => /*#__PURE__*/React.createElement(WhatsNewResultsContainer, {
117
+ ref: containerRef,
92
118
  style: { ...defaultStyle,
93
119
  ...transitionStyles[state]
94
120
  }
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/help",
3
- "version": "7.0.0",
3
+ "version": "7.0.1",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/components/WhatsNew/WhatsNewResults/index.js CHANGED
@@ -5,8 +5,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
5
5
 
6
6
  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; }
7
7
 
8
- import React, { useCallback, useState } from 'react';
8
+ import React, { useCallback, useState, useRef } from 'react';
9
9
  import { Transition } from 'react-transition-group';
10
+ import isEqual from 'lodash/isEqual';
10
11
  import Select from '@atlaskit/select';
11
12
  import { injectIntl } from 'react-intl-next';
12
13
  import { VIEW } from '../../constants';
@@ -56,12 +57,18 @@ export var WhatsNewResults = function WhatsNewResults(_ref) {
56
57
  searchWhatsNewArticlesState = _useWhatsNewArticleCo.searchWhatsNewArticlesState,
57
58
  onWhatsNewResultItemClick = _useWhatsNewArticleCo.onWhatsNewResultItemClick;
58
59
 
60
+ var containerRef = useRef(null);
61
+ var containerScrollPosition = useRef(0);
59
62
  var SELECT_DEFAULT_VALUE = {
60
63
  value: '',
61
64
  label: formatMessage(messages.help_whats_new_filter_select_option_all)
62
65
  };
66
+ var SELECT_EMPTY_VALUE = {
67
+ value: undefined,
68
+ label: ''
69
+ };
63
70
 
64
- var _useState = useState(SELECT_DEFAULT_VALUE),
71
+ var _useState = useState(SELECT_EMPTY_VALUE),
65
72
  _useState2 = _slicedToArray(_useState, 2),
66
73
  selectedOption = _useState2[0],
67
74
  setSelectedOption = _useState2[1];
@@ -78,8 +85,25 @@ export var WhatsNewResults = function WhatsNewResults(_ref) {
78
85
  }, [onSearchWhatsNewArticles, searchWhatsNewArticlesResult, selectedOption]);
79
86
 
80
87
  var handleOnEnter = function handleOnEnter() {
81
- setSelectedOption(SELECT_DEFAULT_VALUE);
82
- onSearchWhatsNewArticles && onSearchWhatsNewArticles();
88
+ setTimeout(function () {
89
+ if (containerRef.current) {
90
+ containerRef.current.scrollTop = containerScrollPosition.current;
91
+ }
92
+ }, 0);
93
+
94
+ if (isEqual(selectedOption, SELECT_EMPTY_VALUE)) {
95
+ setSelectedOption(SELECT_DEFAULT_VALUE);
96
+ onSearchWhatsNewArticles && onSearchWhatsNewArticles();
97
+ }
98
+ };
99
+
100
+ var handleOnExit = function handleOnExit() {
101
+ if (helpContextView === VIEW.DEFAULT_CONTENT) {
102
+ setSelectedOption(SELECT_EMPTY_VALUE);
103
+ containerScrollPosition.current = 0;
104
+ } else {
105
+ containerScrollPosition.current = containerRef.current ? containerRef.current.scrollTop : 0;
106
+ }
83
107
  };
84
108
 
85
109
  var handleOnClearFilter = function handleOnClearFilter() {
@@ -95,9 +119,11 @@ export var WhatsNewResults = function WhatsNewResults(_ref) {
95
119
  return /*#__PURE__*/React.createElement(Transition, {
96
120
  in: helpContextView === VIEW.WHATS_NEW,
97
121
  timeout: FADEIN_OVERLAY_TRANSITION_DURATION_MS,
98
- onEnter: handleOnEnter
122
+ onEnter: handleOnEnter,
123
+ onExit: handleOnExit
99
124
  }, function (state) {
100
125
  return /*#__PURE__*/React.createElement(WhatsNewResultsContainer, {
126
+ ref: containerRef,
101
127
  style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
102
128
  }, /*#__PURE__*/React.createElement(React.Fragment, null, searchWhatsNewArticlesState === REQUEST_STATE.loading && searchWhatsNewArticlesResult === null && state !== 'exited' && /*#__PURE__*/React.createElement(WhatsNewResultsLoading, null), (searchWhatsNewArticlesState === REQUEST_STATE.done || searchWhatsNewArticlesState === REQUEST_STATE.loading) && searchWhatsNewArticlesResult !== null && state !== 'exited' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectContainer, null, /*#__PURE__*/React.createElement(Select, {
103
129
  defaultValue: selectedOption,
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/help",
3
- "version": "7.0.0",
3
+ "version": "7.0.1",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/help",
3
- "version": "7.0.0",
3
+ "version": "7.0.1",
4
4
  "description": "A cross-product help component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"