@atlaskit/link-datasource 6.0.4 → 6.0.6

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/link-datasource
2
2
 
3
+ ## 6.0.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [`312cd0649a120`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/312cd0649a120) -
8
+ Fix keyboard focus stealing in ColumnPicker: focus no longer jumps back to the search input when
9
+ allOptions re-sorts after the popup is already open, resolving an a11y issue for keyboard and
10
+ screen reader users. Fix is behind feature gate platform_sllv_a11y_modal_options_focus.
11
+
12
+ ## 6.0.5
13
+
14
+ ### Patch Changes
15
+
16
+ - [`0cc616f1c23b6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0cc616f1c23b6) -
17
+ Clean up feature gate `platform_navx_sllv_j2ws_dropdown_for_single_row`. Single-row inline edit
18
+ dropdown menus now always render in a portal.
19
+ - Updated dependencies
20
+
3
21
  ## 6.0.4
4
22
 
5
23
  ### Patch Changes
@@ -18,6 +18,7 @@ var _reactIntl = require("react-intl");
18
18
  var _new = _interopRequireDefault(require("@atlaskit/button/new"));
19
19
  var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
20
20
  var _customize = _interopRequireDefault(require("@atlaskit/icon/core/customize"));
21
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
21
22
  var _compiled = require("@atlaskit/primitives/compiled");
22
23
  var _select = require("@atlaskit/select");
23
24
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -107,10 +108,21 @@ var ColumnPicker = exports.ColumnPicker = function ColumnPicker(_ref) {
107
108
  });
108
109
  };
109
110
  (0, _react.useEffect)(function () {
110
- if (allOptions.length) {
111
- var _pickerRef$current;
112
- // necessary to refocus the search input after the loading state
113
- pickerRef === null || pickerRef === void 0 || (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 || (_pickerRef$current = _pickerRef$current.selectRef) === null || _pickerRef$current === void 0 || (_pickerRef$current = _pickerRef$current.select) === null || _pickerRef$current === void 0 || (_pickerRef$current = _pickerRef$current.inputRef) === null || _pickerRef$current === void 0 || _pickerRef$current.focus();
111
+ if ((0, _platformFeatureFlags.fg)('platform_sllv_a11y_modal_options_focus')) {
112
+ if (pickerRef !== null && pickerRef !== void 0 && pickerRef.current && allOptions.length > 0) {
113
+ var _pickerRef$current;
114
+ // necessary to refocus the search input after the loading state
115
+ pickerRef === null || pickerRef === void 0 || (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 || (_pickerRef$current = _pickerRef$current.selectRef) === null || _pickerRef$current === void 0 || (_pickerRef$current = _pickerRef$current.select) === null || _pickerRef$current === void 0 || (_pickerRef$current = _pickerRef$current.inputRef) === null || _pickerRef$current === void 0 || _pickerRef$current.focus();
116
+ }
117
+ }
118
+ }, [allOptions.length]);
119
+ (0, _react.useEffect)(function () {
120
+ if (!(0, _platformFeatureFlags.fg)('platform_sllv_a11y_modal_options_focus')) {
121
+ if (allOptions.length) {
122
+ var _pickerRef$current2;
123
+ // necessary to refocus the search input after the loading state
124
+ pickerRef === null || pickerRef === void 0 || (_pickerRef$current2 = pickerRef.current) === null || _pickerRef$current2 === void 0 || (_pickerRef$current2 = _pickerRef$current2.selectRef) === null || _pickerRef$current2 === void 0 || (_pickerRef$current2 = _pickerRef$current2.select) === null || _pickerRef$current2 === void 0 || (_pickerRef$current2 = _pickerRef$current2.inputRef) === null || _pickerRef$current2 === void 0 || _pickerRef$current2.focus();
125
+ }
114
126
  }
115
127
  }, [allOptions]);
116
128
  (0, _react.useEffect)(function () {
@@ -9,7 +9,6 @@ exports.default = void 0;
9
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var _layering = require("@atlaskit/layering");
12
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
13
12
  var _select = _interopRequireDefault(require("@atlaskit/select"));
14
13
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
15
14
  var _ufoExperiences = require("../../../../analytics/ufoExperiences");
@@ -48,7 +47,7 @@ var IconEditType = function IconEditType(props) {
48
47
  return /*#__PURE__*/_react.default.createElement(_layering.Layering, {
49
48
  isDisabled: false
50
49
  }, /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({}, (0, _utils.getCleanedSelectProps)(props), {
51
- menuPortalTarget: (0, _platformFeatureFlags.fg)('platform_navx_sllv_j2ws_dropdown_for_single_row') ? document.body : undefined,
50
+ menuPortalTarget: document.body,
52
51
  autoFocus: true,
53
52
  blurInputOnSelect: true,
54
53
  defaultMenuIsOpen: true
@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var _layering = require("@atlaskit/layering");
12
12
  var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
13
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
13
  var _select = _interopRequireDefault(require("@atlaskit/select"));
15
14
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
16
15
  var _ufoExperiences = require("../../../../analytics/ufoExperiences");
@@ -48,7 +47,7 @@ var StatusEditType = function StatusEditType(props) {
48
47
  return /*#__PURE__*/_react.default.createElement(_layering.Layering, {
49
48
  isDisabled: false
50
49
  }, /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({}, (0, _utils.getCleanedSelectProps)(props), {
51
- menuPortalTarget: (0, _platformFeatureFlags.fg)('platform_navx_sllv_j2ws_dropdown_for_single_row') ? document.body : undefined,
50
+ menuPortalTarget: document.body,
52
51
  autoFocus: true,
53
52
  options: options,
54
53
  defaultMenuIsOpen: true,
@@ -13,7 +13,6 @@ var _reactIntl = require("react-intl");
13
13
  var _useDebounce = require("use-debounce");
14
14
  var _avatar = _interopRequireWildcard(require("@atlaskit/avatar"));
15
15
  var _layering = require("@atlaskit/layering");
16
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
17
16
  var _select = _interopRequireDefault(require("@atlaskit/select"));
18
17
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
19
18
  var _ufoExperiences = require("../../../../analytics/ufoExperiences");
@@ -78,7 +77,7 @@ var UserEditType = function UserEditType(props) {
78
77
  return /*#__PURE__*/_react.default.createElement(_layering.Layering, {
79
78
  isDisabled: false
80
79
  }, /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({}, (0, _utils.getCleanedSelectProps)(props), {
81
- menuPortalTarget: (0, _platformFeatureFlags.fg)('platform_navx_sllv_j2ws_dropdown_for_single_row') ? document.body : undefined,
80
+ menuPortalTarget: document.body,
82
81
  autoFocus: true,
83
82
  defaultMenuIsOpen: true,
84
83
  blurInputOnSelect: true,
@@ -7,6 +7,7 @@ import { useIntl } from 'react-intl';
7
7
  import Button from '@atlaskit/button/new';
8
8
  import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
9
9
  import CustomizeIcon from '@atlaskit/icon/core/customize';
10
+ import { fg } from '@atlaskit/platform-feature-flags';
10
11
  import { Box } from '@atlaskit/primitives/compiled';
11
12
  import { createFilter, PopupSelect } from '@atlaskit/select';
12
13
  import Tooltip from '@atlaskit/tooltip';
@@ -80,10 +81,21 @@ export const ColumnPicker = ({
80
81
  return selectValue.length === 1 && selectValue.some(selectedValue => selectedValue.value === option.value);
81
82
  };
82
83
  useEffect(() => {
83
- if (allOptions.length) {
84
- var _pickerRef$current, _pickerRef$current$se, _pickerRef$current$se2, _pickerRef$current$se3;
85
- // necessary to refocus the search input after the loading state
86
- pickerRef === null || pickerRef === void 0 ? void 0 : (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 ? void 0 : (_pickerRef$current$se = _pickerRef$current.selectRef) === null || _pickerRef$current$se === void 0 ? void 0 : (_pickerRef$current$se2 = _pickerRef$current$se.select) === null || _pickerRef$current$se2 === void 0 ? void 0 : (_pickerRef$current$se3 = _pickerRef$current$se2.inputRef) === null || _pickerRef$current$se3 === void 0 ? void 0 : _pickerRef$current$se3.focus();
84
+ if (fg('platform_sllv_a11y_modal_options_focus')) {
85
+ if (pickerRef !== null && pickerRef !== void 0 && pickerRef.current && allOptions.length > 0) {
86
+ var _pickerRef$current, _pickerRef$current$se, _pickerRef$current$se2, _pickerRef$current$se3;
87
+ // necessary to refocus the search input after the loading state
88
+ pickerRef === null || pickerRef === void 0 ? void 0 : (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 ? void 0 : (_pickerRef$current$se = _pickerRef$current.selectRef) === null || _pickerRef$current$se === void 0 ? void 0 : (_pickerRef$current$se2 = _pickerRef$current$se.select) === null || _pickerRef$current$se2 === void 0 ? void 0 : (_pickerRef$current$se3 = _pickerRef$current$se2.inputRef) === null || _pickerRef$current$se3 === void 0 ? void 0 : _pickerRef$current$se3.focus();
89
+ }
90
+ }
91
+ }, [allOptions.length]);
92
+ useEffect(() => {
93
+ if (!fg('platform_sllv_a11y_modal_options_focus')) {
94
+ if (allOptions.length) {
95
+ var _pickerRef$current2, _pickerRef$current2$s, _pickerRef$current2$s2, _pickerRef$current2$s3;
96
+ // necessary to refocus the search input after the loading state
97
+ pickerRef === null || pickerRef === void 0 ? void 0 : (_pickerRef$current2 = pickerRef.current) === null || _pickerRef$current2 === void 0 ? void 0 : (_pickerRef$current2$s = _pickerRef$current2.selectRef) === null || _pickerRef$current2$s === void 0 ? void 0 : (_pickerRef$current2$s2 = _pickerRef$current2$s.select) === null || _pickerRef$current2$s2 === void 0 ? void 0 : (_pickerRef$current2$s3 = _pickerRef$current2$s2.inputRef) === null || _pickerRef$current2$s3 === void 0 ? void 0 : _pickerRef$current2$s3.focus();
98
+ }
87
99
  }
88
100
  }, [allOptions]);
89
101
  useEffect(() => {
@@ -1,7 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React, { useEffect } from 'react';
3
3
  import { Layering } from '@atlaskit/layering';
4
- import { fg } from '@atlaskit/platform-feature-flags';
5
4
  import Select from '@atlaskit/select';
6
5
  import Tooltip from '@atlaskit/tooltip';
7
6
  import { failUfoExperience, succeedUfoExperience } from '../../../../analytics/ufoExperiences';
@@ -42,7 +41,7 @@ const IconEditType = props => {
42
41
  return /*#__PURE__*/React.createElement(Layering, {
43
42
  isDisabled: false
44
43
  }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
45
- menuPortalTarget: fg('platform_navx_sllv_j2ws_dropdown_for_single_row') ? document.body : undefined,
44
+ menuPortalTarget: document.body,
46
45
  autoFocus: true,
47
46
  blurInputOnSelect: true,
48
47
  defaultMenuIsOpen: true
@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import React, { useEffect } from 'react';
3
3
  import { Layering } from '@atlaskit/layering';
4
4
  import Lozenge from '@atlaskit/lozenge';
5
- import { fg } from '@atlaskit/platform-feature-flags';
6
5
  import Select from '@atlaskit/select';
7
6
  import Tooltip from '@atlaskit/tooltip';
8
7
  import { failUfoExperience, succeedUfoExperience } from '../../../../analytics/ufoExperiences';
@@ -42,7 +41,7 @@ const StatusEditType = props => {
42
41
  return /*#__PURE__*/React.createElement(Layering, {
43
42
  isDisabled: false
44
43
  }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
45
- menuPortalTarget: fg('platform_navx_sllv_j2ws_dropdown_for_single_row') ? document.body : undefined,
44
+ menuPortalTarget: document.body,
46
45
  autoFocus: true,
47
46
  options: options,
48
47
  defaultMenuIsOpen: true,
@@ -4,7 +4,6 @@ import { useIntl } from 'react-intl';
4
4
  import { useDebouncedCallback } from 'use-debounce';
5
5
  import Avatar, { AvatarItem } from '@atlaskit/avatar';
6
6
  import { Layering } from '@atlaskit/layering';
7
- import { fg } from '@atlaskit/platform-feature-flags';
8
7
  import Select from '@atlaskit/select';
9
8
  import Tooltip from '@atlaskit/tooltip';
10
9
  import { failUfoExperience, succeedUfoExperience } from '../../../../analytics/ufoExperiences';
@@ -63,7 +62,7 @@ const UserEditType = props => {
63
62
  return /*#__PURE__*/React.createElement(Layering, {
64
63
  isDisabled: false
65
64
  }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
66
- menuPortalTarget: fg('platform_navx_sllv_j2ws_dropdown_for_single_row') ? document.body : undefined,
65
+ menuPortalTarget: document.body,
67
66
  autoFocus: true,
68
67
  defaultMenuIsOpen: true,
69
68
  blurInputOnSelect: true,
@@ -11,6 +11,7 @@ import { useIntl } from 'react-intl';
11
11
  import Button from '@atlaskit/button/new';
12
12
  import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
13
13
  import CustomizeIcon from '@atlaskit/icon/core/customize';
14
+ import { fg } from '@atlaskit/platform-feature-flags';
14
15
  import { Box } from '@atlaskit/primitives/compiled';
15
16
  import { createFilter, PopupSelect } from '@atlaskit/select';
16
17
  import Tooltip from '@atlaskit/tooltip';
@@ -98,10 +99,21 @@ export var ColumnPicker = function ColumnPicker(_ref) {
98
99
  });
99
100
  };
100
101
  useEffect(function () {
101
- if (allOptions.length) {
102
- var _pickerRef$current;
103
- // necessary to refocus the search input after the loading state
104
- pickerRef === null || pickerRef === void 0 || (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 || (_pickerRef$current = _pickerRef$current.selectRef) === null || _pickerRef$current === void 0 || (_pickerRef$current = _pickerRef$current.select) === null || _pickerRef$current === void 0 || (_pickerRef$current = _pickerRef$current.inputRef) === null || _pickerRef$current === void 0 || _pickerRef$current.focus();
102
+ if (fg('platform_sllv_a11y_modal_options_focus')) {
103
+ if (pickerRef !== null && pickerRef !== void 0 && pickerRef.current && allOptions.length > 0) {
104
+ var _pickerRef$current;
105
+ // necessary to refocus the search input after the loading state
106
+ pickerRef === null || pickerRef === void 0 || (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 || (_pickerRef$current = _pickerRef$current.selectRef) === null || _pickerRef$current === void 0 || (_pickerRef$current = _pickerRef$current.select) === null || _pickerRef$current === void 0 || (_pickerRef$current = _pickerRef$current.inputRef) === null || _pickerRef$current === void 0 || _pickerRef$current.focus();
107
+ }
108
+ }
109
+ }, [allOptions.length]);
110
+ useEffect(function () {
111
+ if (!fg('platform_sllv_a11y_modal_options_focus')) {
112
+ if (allOptions.length) {
113
+ var _pickerRef$current2;
114
+ // necessary to refocus the search input after the loading state
115
+ pickerRef === null || pickerRef === void 0 || (_pickerRef$current2 = pickerRef.current) === null || _pickerRef$current2 === void 0 || (_pickerRef$current2 = _pickerRef$current2.selectRef) === null || _pickerRef$current2 === void 0 || (_pickerRef$current2 = _pickerRef$current2.select) === null || _pickerRef$current2 === void 0 || (_pickerRef$current2 = _pickerRef$current2.inputRef) === null || _pickerRef$current2 === void 0 || _pickerRef$current2.focus();
116
+ }
105
117
  }
106
118
  }, [allOptions]);
107
119
  useEffect(function () {
@@ -1,7 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React, { useEffect } from 'react';
3
3
  import { Layering } from '@atlaskit/layering';
4
- import { fg } from '@atlaskit/platform-feature-flags';
5
4
  import Select from '@atlaskit/select';
6
5
  import Tooltip from '@atlaskit/tooltip';
7
6
  import { failUfoExperience, succeedUfoExperience } from '../../../../analytics/ufoExperiences';
@@ -39,7 +38,7 @@ var IconEditType = function IconEditType(props) {
39
38
  return /*#__PURE__*/React.createElement(Layering, {
40
39
  isDisabled: false
41
40
  }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
42
- menuPortalTarget: fg('platform_navx_sllv_j2ws_dropdown_for_single_row') ? document.body : undefined,
41
+ menuPortalTarget: document.body,
43
42
  autoFocus: true,
44
43
  blurInputOnSelect: true,
45
44
  defaultMenuIsOpen: true
@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import React, { useEffect } from 'react';
3
3
  import { Layering } from '@atlaskit/layering';
4
4
  import Lozenge from '@atlaskit/lozenge';
5
- import { fg } from '@atlaskit/platform-feature-flags';
6
5
  import Select from '@atlaskit/select';
7
6
  import Tooltip from '@atlaskit/tooltip';
8
7
  import { failUfoExperience, succeedUfoExperience } from '../../../../analytics/ufoExperiences';
@@ -39,7 +38,7 @@ var StatusEditType = function StatusEditType(props) {
39
38
  return /*#__PURE__*/React.createElement(Layering, {
40
39
  isDisabled: false
41
40
  }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
42
- menuPortalTarget: fg('platform_navx_sllv_j2ws_dropdown_for_single_row') ? document.body : undefined,
41
+ menuPortalTarget: document.body,
43
42
  autoFocus: true,
44
43
  options: options,
45
44
  defaultMenuIsOpen: true,
@@ -5,7 +5,6 @@ import { useIntl } from 'react-intl';
5
5
  import { useDebouncedCallback } from 'use-debounce';
6
6
  import Avatar, { AvatarItem } from '@atlaskit/avatar';
7
7
  import { Layering } from '@atlaskit/layering';
8
- import { fg } from '@atlaskit/platform-feature-flags';
9
8
  import Select from '@atlaskit/select';
10
9
  import Tooltip from '@atlaskit/tooltip';
11
10
  import { failUfoExperience, succeedUfoExperience } from '../../../../analytics/ufoExperiences';
@@ -69,7 +68,7 @@ var UserEditType = function UserEditType(props) {
69
68
  return /*#__PURE__*/React.createElement(Layering, {
70
69
  isDisabled: false
71
70
  }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
72
- menuPortalTarget: fg('platform_navx_sllv_j2ws_dropdown_for_single_row') ? document.body : undefined,
71
+ menuPortalTarget: document.body,
73
72
  autoFocus: true,
74
73
  defaultMenuIsOpen: true,
75
74
  blurInputOnSelect: true,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/link-datasource",
3
- "version": "6.0.4",
3
+ "version": "6.0.6",
4
4
  "description": "UI Components to support linking platform dataset feature",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -63,7 +63,7 @@
63
63
  "@atlaskit/link": "^4.0.0",
64
64
  "@atlaskit/link-client-extension": "^7.0.0",
65
65
  "@atlaskit/link-provider": "^5.0.0",
66
- "@atlaskit/linking-common": "^10.0.0",
66
+ "@atlaskit/linking-common": "^11.0.0",
67
67
  "@atlaskit/linking-types": "^15.0.0",
68
68
  "@atlaskit/logo": "^21.1.0",
69
69
  "@atlaskit/lozenge": "^14.0.0",
@@ -179,15 +179,15 @@
179
179
  "navx-1895-new-logo-design": {
180
180
  "type": "boolean"
181
181
  },
182
- "platform_navx_sllv_j2ws_dropdown_for_single_row": {
183
- "type": "boolean"
184
- },
185
182
  "platform_lp_sllv_jira_type_as_link": {
186
183
  "type": "boolean"
187
184
  },
188
185
  "platform_lp_jira_sllv_renderer_column_sorting": {
189
186
  "type": "boolean"
190
187
  },
188
+ "platform_sllv_a11y_modal_options_focus": {
189
+ "type": "boolean"
190
+ },
191
191
  "linking_platform_link_datasource_unit_compliant": {
192
192
  "type": "boolean"
193
193
  },