@atlaskit/dropdown-menu 11.5.5 → 11.5.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 (8) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/internal/utils/handle-focus.js +53 -6
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/es2019/internal/utils/handle-focus.js +50 -6
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/esm/internal/utils/handle-focus.js +54 -6
  7. package/dist/esm/version.json +1 -1
  8. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/dropdown-menu
2
2
 
3
+ ## 11.5.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [`6ae8910147b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6ae8910147b) - [ux] Allow users to navigate past disabled menu items with arrow keys
8
+
3
9
  ## 11.5.5
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/internal/utils/handle-focus.js CHANGED
@@ -14,6 +14,43 @@ var _keycodes = require("@atlaskit/ds-lib/keycodes");
14
14
  var _actionMap;
15
15
 
16
16
  var actionMap = (_actionMap = {}, (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_DOWN, 'next'), (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_UP, 'prev'), (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_HOME, 'first'), (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_END, 'last'), _actionMap);
17
+ /**
18
+ * currentFocusedIdx + 1 will not work if the next focusable element
19
+ * is disabled. So, we need to iterate through the following menu items
20
+ * to find one that isn't disabled. If all following elements are disabled,
21
+ * return undefined.
22
+ */
23
+
24
+ var getNextFocusableElement = function getNextFocusableElement(refs, currentFocusedIdx) {
25
+ while (currentFocusedIdx + 1 < refs.length) {
26
+ var isDisabled = refs[currentFocusedIdx + 1].getAttribute('disabled') !== null;
27
+
28
+ if (!isDisabled) {
29
+ return refs[currentFocusedIdx + 1];
30
+ }
31
+
32
+ currentFocusedIdx++;
33
+ }
34
+ };
35
+ /**
36
+ * currentFocusedIdx - 1 will not work if the prev focusable element
37
+ * is disabled. So, we need to iterate through the previous menu items
38
+ * to find one that isn't disabled. If all previous elements are disabled,
39
+ * return undefined.
40
+ */
41
+
42
+
43
+ var getPrevFocusableElement = function getPrevFocusableElement(refs, currentFocusedIdx) {
44
+ while (currentFocusedIdx > 0) {
45
+ var isDisabled = refs[currentFocusedIdx - 1].getAttribute('disabled') !== null;
46
+
47
+ if (!isDisabled) {
48
+ return refs[currentFocusedIdx - 1];
49
+ }
50
+
51
+ currentFocusedIdx--;
52
+ }
53
+ };
17
54
 
18
55
  function handleFocus(refs) {
19
56
  return function (e) {
@@ -28,7 +65,10 @@ function handleFocus(refs) {
28
65
  case 'next':
29
66
  if (currentFocusedIdx < refs.length - 1) {
30
67
  e.preventDefault();
31
- refs[currentFocusedIdx + 1].focus();
68
+
69
+ var _nextFocusableElement = getNextFocusableElement(refs, currentFocusedIdx);
70
+
71
+ _nextFocusableElement && _nextFocusableElement.focus();
32
72
  }
33
73
 
34
74
  break;
@@ -36,19 +76,26 @@ function handleFocus(refs) {
36
76
  case 'prev':
37
77
  if (currentFocusedIdx > 0) {
38
78
  e.preventDefault();
39
- refs[currentFocusedIdx - 1].focus();
79
+
80
+ var _prevFocusableElement = getPrevFocusableElement(refs, currentFocusedIdx);
81
+
82
+ _prevFocusableElement && _prevFocusableElement.focus();
40
83
  }
41
84
 
42
85
  break;
43
86
 
44
87
  case 'first':
45
- e.preventDefault();
46
- refs[0].focus();
88
+ e.preventDefault(); // Search for first non-disabled element if first element is disabled
89
+
90
+ var nextFocusableElement = getNextFocusableElement(refs, -1);
91
+ nextFocusableElement && nextFocusableElement.focus();
47
92
  break;
48
93
 
49
94
  case 'last':
50
- e.preventDefault();
51
- refs[refs.length - 1].focus();
95
+ e.preventDefault(); // Search for last non-disabled element if last element is disabled
96
+
97
+ var prevFocusableElement = getPrevFocusableElement(refs, refs.length);
98
+ prevFocusableElement && prevFocusableElement.focus();
52
99
  break;
53
100
 
54
101
  default:
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/dropdown-menu",
3
- "version": "11.5.5",
3
+ "version": "11.5.6",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/internal/utils/handle-focus.js CHANGED
@@ -5,6 +5,44 @@ const actionMap = {
5
5
  [KEY_HOME]: 'first',
6
6
  [KEY_END]: 'last'
7
7
  };
8
+ /**
9
+ * currentFocusedIdx + 1 will not work if the next focusable element
10
+ * is disabled. So, we need to iterate through the following menu items
11
+ * to find one that isn't disabled. If all following elements are disabled,
12
+ * return undefined.
13
+ */
14
+
15
+ const getNextFocusableElement = (refs, currentFocusedIdx) => {
16
+ while (currentFocusedIdx + 1 < refs.length) {
17
+ const isDisabled = refs[currentFocusedIdx + 1].getAttribute('disabled') !== null;
18
+
19
+ if (!isDisabled) {
20
+ return refs[currentFocusedIdx + 1];
21
+ }
22
+
23
+ currentFocusedIdx++;
24
+ }
25
+ };
26
+ /**
27
+ * currentFocusedIdx - 1 will not work if the prev focusable element
28
+ * is disabled. So, we need to iterate through the previous menu items
29
+ * to find one that isn't disabled. If all previous elements are disabled,
30
+ * return undefined.
31
+ */
32
+
33
+
34
+ const getPrevFocusableElement = (refs, currentFocusedIdx) => {
35
+ while (currentFocusedIdx > 0) {
36
+ const isDisabled = refs[currentFocusedIdx - 1].getAttribute('disabled') !== null;
37
+
38
+ if (!isDisabled) {
39
+ return refs[currentFocusedIdx - 1];
40
+ }
41
+
42
+ currentFocusedIdx--;
43
+ }
44
+ };
45
+
8
46
  export default function handleFocus(refs) {
9
47
  return e => {
10
48
  const currentFocusedIdx = refs.findIndex(el => {
@@ -18,7 +56,8 @@ export default function handleFocus(refs) {
18
56
  case 'next':
19
57
  if (currentFocusedIdx < refs.length - 1) {
20
58
  e.preventDefault();
21
- refs[currentFocusedIdx + 1].focus();
59
+ const nextFocusableElement = getNextFocusableElement(refs, currentFocusedIdx);
60
+ nextFocusableElement && nextFocusableElement.focus();
22
61
  }
23
62
 
24
63
  break;
@@ -26,19 +65,24 @@ export default function handleFocus(refs) {
26
65
  case 'prev':
27
66
  if (currentFocusedIdx > 0) {
28
67
  e.preventDefault();
29
- refs[currentFocusedIdx - 1].focus();
68
+ const prevFocusableElement = getPrevFocusableElement(refs, currentFocusedIdx);
69
+ prevFocusableElement && prevFocusableElement.focus();
30
70
  }
31
71
 
32
72
  break;
33
73
 
34
74
  case 'first':
35
- e.preventDefault();
36
- refs[0].focus();
75
+ e.preventDefault(); // Search for first non-disabled element if first element is disabled
76
+
77
+ const nextFocusableElement = getNextFocusableElement(refs, -1);
78
+ nextFocusableElement && nextFocusableElement.focus();
37
79
  break;
38
80
 
39
81
  case 'last':
40
- e.preventDefault();
41
- refs[refs.length - 1].focus();
82
+ e.preventDefault(); // Search for last non-disabled element if last element is disabled
83
+
84
+ const prevFocusableElement = getPrevFocusableElement(refs, refs.length);
85
+ prevFocusableElement && prevFocusableElement.focus();
42
86
  break;
43
87
 
44
88
  default:
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/dropdown-menu",
3
- "version": "11.5.5",
3
+ "version": "11.5.6",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/internal/utils/handle-focus.js CHANGED
@@ -4,6 +4,44 @@ var _actionMap;
4
4
 
5
5
  import { KEY_DOWN, KEY_END, KEY_HOME, KEY_UP } from '@atlaskit/ds-lib/keycodes';
6
6
  var actionMap = (_actionMap = {}, _defineProperty(_actionMap, KEY_DOWN, 'next'), _defineProperty(_actionMap, KEY_UP, 'prev'), _defineProperty(_actionMap, KEY_HOME, 'first'), _defineProperty(_actionMap, KEY_END, 'last'), _actionMap);
7
+ /**
8
+ * currentFocusedIdx + 1 will not work if the next focusable element
9
+ * is disabled. So, we need to iterate through the following menu items
10
+ * to find one that isn't disabled. If all following elements are disabled,
11
+ * return undefined.
12
+ */
13
+
14
+ var getNextFocusableElement = function getNextFocusableElement(refs, currentFocusedIdx) {
15
+ while (currentFocusedIdx + 1 < refs.length) {
16
+ var isDisabled = refs[currentFocusedIdx + 1].getAttribute('disabled') !== null;
17
+
18
+ if (!isDisabled) {
19
+ return refs[currentFocusedIdx + 1];
20
+ }
21
+
22
+ currentFocusedIdx++;
23
+ }
24
+ };
25
+ /**
26
+ * currentFocusedIdx - 1 will not work if the prev focusable element
27
+ * is disabled. So, we need to iterate through the previous menu items
28
+ * to find one that isn't disabled. If all previous elements are disabled,
29
+ * return undefined.
30
+ */
31
+
32
+
33
+ var getPrevFocusableElement = function getPrevFocusableElement(refs, currentFocusedIdx) {
34
+ while (currentFocusedIdx > 0) {
35
+ var isDisabled = refs[currentFocusedIdx - 1].getAttribute('disabled') !== null;
36
+
37
+ if (!isDisabled) {
38
+ return refs[currentFocusedIdx - 1];
39
+ }
40
+
41
+ currentFocusedIdx--;
42
+ }
43
+ };
44
+
7
45
  export default function handleFocus(refs) {
8
46
  return function (e) {
9
47
  var currentFocusedIdx = refs.findIndex(function (el) {
@@ -17,7 +55,10 @@ export default function handleFocus(refs) {
17
55
  case 'next':
18
56
  if (currentFocusedIdx < refs.length - 1) {
19
57
  e.preventDefault();
20
- refs[currentFocusedIdx + 1].focus();
58
+
59
+ var _nextFocusableElement = getNextFocusableElement(refs, currentFocusedIdx);
60
+
61
+ _nextFocusableElement && _nextFocusableElement.focus();
21
62
  }
22
63
 
23
64
  break;
@@ -25,19 +66,26 @@ export default function handleFocus(refs) {
25
66
  case 'prev':
26
67
  if (currentFocusedIdx > 0) {
27
68
  e.preventDefault();
28
- refs[currentFocusedIdx - 1].focus();
69
+
70
+ var _prevFocusableElement = getPrevFocusableElement(refs, currentFocusedIdx);
71
+
72
+ _prevFocusableElement && _prevFocusableElement.focus();
29
73
  }
30
74
 
31
75
  break;
32
76
 
33
77
  case 'first':
34
- e.preventDefault();
35
- refs[0].focus();
78
+ e.preventDefault(); // Search for first non-disabled element if first element is disabled
79
+
80
+ var nextFocusableElement = getNextFocusableElement(refs, -1);
81
+ nextFocusableElement && nextFocusableElement.focus();
36
82
  break;
37
83
 
38
84
  case 'last':
39
- e.preventDefault();
40
- refs[refs.length - 1].focus();
85
+ e.preventDefault(); // Search for last non-disabled element if last element is disabled
86
+
87
+ var prevFocusableElement = getPrevFocusableElement(refs, refs.length);
88
+ prevFocusableElement && prevFocusableElement.focus();
41
89
  break;
42
90
 
43
91
  default:
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/dropdown-menu",
3
- "version": "11.5.5",
3
+ "version": "11.5.6",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/dropdown-menu",
3
- "version": "11.5.5",
3
+ "version": "11.5.6",
4
4
  "description": "A dropdown menu displays a list of actions or options to a user.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -45,7 +45,7 @@
45
45
  "devDependencies": {
46
46
  "@atlaskit/avatar": "^21.1.0",
47
47
  "@atlaskit/docs": "*",
48
- "@atlaskit/ds-explorations": "^1.0.0",
48
+ "@atlaskit/ds-explorations": "^1.4.0",
49
49
  "@atlaskit/heading": "^1.0.0",
50
50
  "@atlaskit/lozenge": "11.3.1",
51
51
  "@atlaskit/modal-dialog": "^12.4.0",