@atlaskit/link-datasource 6.0.5 → 6.0.7

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 +16 -1
  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 +10 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/link-datasource
2
2
 
3
+ ## 6.0.7
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 6.0.6
10
+
11
+ ### Patch Changes
12
+
13
+ - [`312cd0649a120`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/312cd0649a120) -
14
+ Fix keyboard focus stealing in ColumnPicker: focus no longer jumps back to the search input when
15
+ allOptions re-sorts after the popup is already open, resolving an a11y issue for keyboard and
16
+ screen reader users. Fix is behind feature gate platform_sllv_a11y_modal_options_focus.
17
+
3
18
  ## 6.0.5
4
19
 
5
20
  ### Patch Changes
@@ -26,7 +41,7 @@
26
41
  - [`5960cad1ecc81`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5960cad1ecc81) -
27
42
  Remove unused platform feature flag declarations (no runtime impact)
28
43
  - [`ee28cf33718b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ee28cf33718b0) -
29
- Add @atlassian/react-compiler-gating as a runtime dependency to enable React Compiler platform
44
+ Add @atlaskit/react-compiler-gating as a runtime dependency to enable React Compiler platform
30
45
  gating.
31
46
  - [`6600d9566a565`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6600d9566a565) -
32
47
  Internal changes to use tokens for skeleton component border radius.
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.7",
4
4
  "description": "UI Components to support linking platform dataset feature",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -20,7 +20,7 @@
20
20
  "react-compiler": {
21
21
  "enabled": true,
22
22
  "gating": {
23
- "source": "@atlassian/react-compiler-gating",
23
+ "source": "@atlaskit/react-compiler-gating",
24
24
  "importSpecifierName": "isReactCompilerActivePlatform"
25
25
  }
26
26
  },
@@ -77,9 +77,10 @@
77
77
  "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^3.0.0",
78
78
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^4.0.0",
79
79
  "@atlaskit/primitives": "^20.0.0",
80
- "@atlaskit/react-select": "^4.1.0",
80
+ "@atlaskit/react-compiler-gating": "^0.2.0",
81
+ "@atlaskit/react-select": "^4.2.0",
81
82
  "@atlaskit/select": "^22.1.0",
82
- "@atlaskit/smart-card": "^45.3.0",
83
+ "@atlaskit/smart-card": "^45.4.0",
83
84
  "@atlaskit/smart-user-picker": "^11.0.0",
84
85
  "@atlaskit/spinner": "^20.0.0",
85
86
  "@atlaskit/tag": "^15.0.0",
@@ -89,8 +90,7 @@
89
90
  "@atlaskit/tooltip": "^23.0.0",
90
91
  "@atlaskit/ufo": "^1.0.0",
91
92
  "@atlaskit/width-detector": "^6.0.0",
92
- "@atlassian/assets-workspace-host": "^0.6.0",
93
- "@atlassian/react-compiler-gating": "^0.2.0",
93
+ "@atlassian/assets-workspace-host": "^0.7.0",
94
94
  "@babel/runtime": "^7.0.0",
95
95
  "@compiled/react": "^0.20.0",
96
96
  "@types/dompurify": "^2.2.3",
@@ -114,7 +114,7 @@
114
114
  "@atlaskit/json-ld-types": "^2.0.0",
115
115
  "@atlaskit/link-test-helpers": "^11.0.0",
116
116
  "@atlaskit/ssr": "workspace:^",
117
- "@atlassian/a11y-jest-testing": "^0.12.0",
117
+ "@atlassian/a11y-jest-testing": "^0.13.0",
118
118
  "@atlassian/a11y-playwright-testing": "^0.10.0",
119
119
  "@atlassian/feature-flags-test-utils": "^1.1.0",
120
120
  "@atlassian/structured-docs-types": "workspace:^",
@@ -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
  },