@atlaskit/link-datasource 6.0.5 → 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.
Files changed (5) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/ui/issue-like-table/column-picker/index.js +16 -4
  3. package/dist/es2019/ui/issue-like-table/column-picker/index.js +16 -4
  4. package/dist/esm/ui/issue-like-table/column-picker/index.js +16 -4
  5. package/package.json +4 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
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
+
3
12
  ## 6.0.5
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/ui/issue-like-table/column-picker/index.js CHANGED
@@ -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 () {
package/dist/es2019/ui/issue-like-table/column-picker/index.js CHANGED
@@ -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(() => {
package/dist/esm/ui/issue-like-table/column-picker/index.js CHANGED
@@ -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 () {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/link-datasource",
3
- "version": "6.0.5",
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",
@@ -185,6 +185,9 @@
185
185
  "platform_lp_jira_sllv_renderer_column_sorting": {
186
186
  "type": "boolean"
187
187
  },
188
+ "platform_sllv_a11y_modal_options_focus": {
189
+ "type": "boolean"
190
+ },
188
191
  "linking_platform_link_datasource_unit_compliant": {
189
192
  "type": "boolean"
190
193
  },