@atlaskit/dropdown-menu 11.5.5 → 11.5.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 (9) hide show
  1. package/CHANGELOG.md +12 -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 +6 -6
  9. package/report.api.md +32 -27
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/dropdown-menu
2
2
 
3
+ ## 11.5.7
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 11.5.6
10
+
11
+ ### Patch Changes
12
+
13
+ - [`6ae8910147b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6ae8910147b) - [ux] Allow users to navigate past disabled menu items with arrow keys
14
+
3
15
  ## 11.5.5
4
16
 
5
17
  ### 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.7",
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.7",
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.7",
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.7",
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/"
@@ -24,15 +24,15 @@
24
24
  }
25
25
  },
26
26
  "dependencies": {
27
- "@atlaskit/button": "^16.4.0",
27
+ "@atlaskit/button": "^16.5.0",
28
28
  "@atlaskit/codemod-utils": "^4.1.0",
29
29
  "@atlaskit/ds-lib": "^2.1.0",
30
30
  "@atlaskit/icon": "^21.11.0",
31
31
  "@atlaskit/menu": "^1.4.0",
32
32
  "@atlaskit/popup": "^1.5.0",
33
- "@atlaskit/spinner": "^15.2.0",
33
+ "@atlaskit/spinner": "^15.3.0",
34
34
  "@atlaskit/theme": "^12.2.0",
35
- "@atlaskit/tokens": "^0.11.0",
35
+ "@atlaskit/tokens": "^0.12.0",
36
36
  "@atlaskit/visually-hidden": "^1.1.0",
37
37
  "@babel/runtime": "^7.0.0",
38
38
  "@emotion/react": "^11.7.1",
@@ -45,9 +45,9 @@
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.6.0",
49
49
  "@atlaskit/heading": "^1.0.0",
50
- "@atlaskit/lozenge": "11.3.1",
50
+ "@atlaskit/lozenge": "11.3.3",
51
51
  "@atlaskit/modal-dialog": "^12.4.0",
52
52
  "@atlaskit/section-message": "^6.3.0",
53
53
  "@atlaskit/ssr": "*",
package/report.api.md CHANGED
@@ -1,12 +1,17 @@
1
+ <!-- API Report Version: 2.2 -->
2
+
1
3
  ## API Report File for "@atlaskit/dropdown-menu"
2
4
 
3
- > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
5
+ > Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
6
+ > [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
7
+
8
+ ### Table of contents
9
+
10
+ - [Main Entry Types](#main-entry-types)
4
11
 
5
- <!--
6
- Generated API Report version: 2.0
7
- -->
12
+ ### Main Entry Types
8
13
 
9
- [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
14
+ <!--SECTION START: Main Entry Types-->
10
15
 
11
16
  ```ts
12
17
  /// <reference types="react" />
@@ -28,7 +33,7 @@ export interface CustomTriggerProps<
28
33
  TriggerElement extends HTMLElement = HTMLElement,
29
34
  > extends Omit<TriggerProps, 'ref'> {
30
35
  isSelected?: boolean;
31
- onClick?: (e: MouseEvent_2 | KeyboardEvent_2) => void;
36
+ onClick?: (e: KeyboardEvent_2 | MouseEvent_2) => void;
32
37
  testId?: string;
33
38
  triggerRef: Ref<TriggerElement>;
34
39
  }
@@ -55,11 +60,11 @@ interface DropdownItemCheckboxGroupProps extends SectionProps {
55
60
  interface DropdownItemCheckboxProps {
56
61
  children: React.ReactNode;
57
62
  defaultSelected?: boolean;
58
- description?: string | JSX.Element;
63
+ description?: JSX.Element | string;
59
64
  id: string;
60
65
  isDisabled?: boolean;
61
66
  isSelected?: boolean;
62
- onClick?: (e: MouseEvent_2 | KeyboardEvent_2) => void;
67
+ onClick?: (e: KeyboardEvent_2 | MouseEvent_2) => void;
63
68
  shouldDescriptionWrap?: boolean;
64
69
  shouldTitleWrap?: boolean;
65
70
  testId?: string;
@@ -72,13 +77,13 @@ export { DropdownItemGroup };
72
77
  export interface DropdownItemProps {
73
78
  children: React.ReactNode;
74
79
  component?: CustomItemProps['component'];
75
- description?: string | JSX.Element;
80
+ description?: JSX.Element | string;
76
81
  elemAfter?: React.ReactNode;
77
82
  elemBefore?: React.ReactNode;
78
83
  href?: string;
79
84
  isDisabled?: boolean;
80
85
  isSelected?: boolean;
81
- onClick?: (e: MouseEvent_2 | KeyboardEvent_2) => void;
86
+ onClick?: (e: KeyboardEvent_2 | MouseEvent_2) => void;
82
87
  rel?: string;
83
88
  shouldDescriptionWrap?: boolean;
84
89
  shouldTitleWrap?: boolean;
@@ -105,11 +110,11 @@ interface DropdownItemRadioGroupProps extends SectionProps {
105
110
  interface DropdownItemRadioProps {
106
111
  children: React.ReactNode;
107
112
  defaultSelected?: boolean;
108
- description?: string | JSX.Element;
113
+ description?: JSX.Element | string;
109
114
  id: string;
110
115
  isDisabled?: boolean;
111
116
  isSelected?: boolean;
112
- onClick?: (e: MouseEvent_2 | KeyboardEvent_2) => void;
117
+ onClick?: (e: KeyboardEvent_2 | MouseEvent_2) => void;
113
118
  shouldDescriptionWrap?: boolean;
114
119
  shouldTitleWrap?: boolean;
115
120
  testId?: string;
@@ -141,38 +146,38 @@ export interface DropdownMenuProps<
141
146
  statusLabel?: string;
142
147
  testId?: string;
143
148
  trigger?:
144
- | string
145
- | ((
146
- triggerButtonProps: CustomTriggerProps<TriggerElement>,
147
- ) => ReactElement);
149
+ | ((triggerButtonProps: CustomTriggerProps<TriggerElement>) => ReactElement)
150
+ | string;
148
151
  zIndex?: number;
149
152
  }
150
153
 
151
154
  // @public (undocumented)
152
155
  export interface OnOpenChangeArgs {
153
156
  // (undocumented)
154
- event: MouseEvent_2 | KeyboardEvent_2;
157
+ event: KeyboardEvent_2 | MouseEvent_2;
155
158
  // (undocumented)
156
159
  isOpen: boolean;
157
160
  }
158
161
 
159
162
  // @public (undocumented)
160
163
  type Placement =
161
- | 'auto-start'
162
164
  | 'auto'
163
165
  | 'auto-end'
164
- | 'top-start'
165
- | 'top'
166
- | 'top-end'
167
- | 'right-start'
168
- | 'right'
169
- | 'right-end'
170
- | 'bottom-end'
166
+ | 'auto-start'
171
167
  | 'bottom'
168
+ | 'bottom-end'
172
169
  | 'bottom-start'
173
- | 'left-end'
174
170
  | 'left'
175
- | 'left-start';
171
+ | 'left-end'
172
+ | 'left-start'
173
+ | 'right'
174
+ | 'right-end'
175
+ | 'right-start'
176
+ | 'top'
177
+ | 'top-end'
178
+ | 'top-start';
176
179
 
177
180
  // (No @packageDocumentation comment for this package)
178
181
  ```
182
+
183
+ <!--SECTION END: Main Entry Types-->