@atlaskit/dropdown-menu 16.9.2 → 16.9.3
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 +6 -0
- package/dropdown-menu.docs.tsx +229 -227
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
package/dropdown-menu.docs.tsx
CHANGED
|
@@ -1,246 +1,248 @@
|
|
|
1
1
|
import path from 'path';
|
|
2
2
|
|
|
3
|
-
import type {
|
|
3
|
+
import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
|
|
4
4
|
|
|
5
|
-
const documentation:
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
description: 'A dropdown menu component for displaying contextual actions and options.',
|
|
9
|
-
status: 'general-availability',
|
|
10
|
-
import: {
|
|
5
|
+
const documentation: StructuredContentSource = {
|
|
6
|
+
components: [
|
|
7
|
+
{
|
|
11
8
|
name: 'DropdownMenu',
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
'Nested menu: maximum two layers',
|
|
21
|
-
'In a modal, use shouldRenderToParent for correct focus and screen reader behavior',
|
|
22
|
-
'Disabled triggers are not supported (see Button a11y)',
|
|
23
|
-
'Use Select for search/select; Checkbox for multiple from list; Radio for short single choice',
|
|
24
|
-
],
|
|
25
|
-
contentGuidelines: [
|
|
26
|
-
'Logical order (e.g. most selected first); group with uppercase section title',
|
|
27
|
-
'Use verbs for actions, nouns for links; no articles; single line per item',
|
|
28
|
-
'Use clear, descriptive menu item labels',
|
|
29
|
-
'Keep menu item text concise',
|
|
30
|
-
'Group related actions logically',
|
|
31
|
-
'Use consistent terminology across menu items',
|
|
32
|
-
],
|
|
33
|
-
accessibilityGuidelines: [
|
|
34
|
-
'Avoid truncation—ensure max width does not cut off labels',
|
|
35
|
-
'Focus lock when open; keyboard open should focus first item',
|
|
36
|
-
'Nested menu: maximum two layers',
|
|
37
|
-
'In modal use shouldRenderToParent for focus and voicing',
|
|
38
|
-
'Provide clear labels for dropdown triggers',
|
|
39
|
-
'Ensure keyboard navigation with arrow keys',
|
|
40
|
-
'Use appropriate ARIA attributes',
|
|
41
|
-
],
|
|
42
|
-
examples: [
|
|
43
|
-
{
|
|
44
|
-
name: 'Dropdown Menu',
|
|
45
|
-
description: 'Dropdown Menu example',
|
|
46
|
-
source: path.resolve(__dirname, './examples/ai/dropdown-menu.tsx'),
|
|
9
|
+
description: 'A dropdown menu component for displaying contextual actions and options.',
|
|
10
|
+
status: 'general-availability',
|
|
11
|
+
import: {
|
|
12
|
+
name: 'DropdownMenu',
|
|
13
|
+
package: '@atlaskit/dropdown-menu',
|
|
14
|
+
type: 'default',
|
|
15
|
+
packagePath: path.resolve(__dirname),
|
|
16
|
+
packageJson: require('./package.json'),
|
|
47
17
|
},
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
18
|
+
usageGuidelines: [
|
|
19
|
+
'Use for 5–15 items; navigation or command (action on selection)',
|
|
20
|
+
'Avoid truncation—check max width; avoid truncated labels',
|
|
21
|
+
'Nested menu: maximum two layers',
|
|
22
|
+
'In a modal, use shouldRenderToParent for correct focus and screen reader behavior',
|
|
23
|
+
'Disabled triggers are not supported (see Button a11y)',
|
|
24
|
+
'Use Select for search/select; Checkbox for multiple from list; Radio for short single choice',
|
|
25
|
+
],
|
|
26
|
+
contentGuidelines: [
|
|
27
|
+
'Logical order (e.g. most selected first); group with uppercase section title',
|
|
28
|
+
'Use verbs for actions, nouns for links; no articles; single line per item',
|
|
29
|
+
'Use clear, descriptive menu item labels',
|
|
30
|
+
'Keep menu item text concise',
|
|
31
|
+
'Group related actions logically',
|
|
32
|
+
'Use consistent terminology across menu items',
|
|
33
|
+
],
|
|
34
|
+
accessibilityGuidelines: [
|
|
35
|
+
'Avoid truncation—ensure max width does not cut off labels',
|
|
36
|
+
'Focus lock when open; keyboard open should focus first item',
|
|
37
|
+
'Nested menu: maximum two layers',
|
|
38
|
+
'In modal use shouldRenderToParent for focus and voicing',
|
|
39
|
+
'Provide clear labels for dropdown triggers',
|
|
40
|
+
'Ensure keyboard navigation with arrow keys',
|
|
41
|
+
'Use appropriate ARIA attributes',
|
|
42
|
+
],
|
|
43
|
+
examples: [
|
|
44
|
+
{
|
|
45
|
+
name: 'Dropdown Menu',
|
|
46
|
+
description: 'Dropdown Menu example',
|
|
47
|
+
source: path.resolve(__dirname, './examples/ai/dropdown-menu.tsx'),
|
|
48
|
+
},
|
|
49
|
+
],
|
|
50
|
+
keywords: ['dropdown', 'menu', 'actions', 'options', 'popup', 'contextual'],
|
|
51
|
+
categories: ['navigation', 'interaction'],
|
|
63
52
|
},
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
'Avoid truncation—ensure max width does not cut off labels',
|
|
76
|
-
'Ensure keyboard navigation with arrow keys',
|
|
77
|
-
],
|
|
78
|
-
examples: [
|
|
79
|
-
{
|
|
80
|
-
name: 'Dropdown Menu',
|
|
81
|
-
description: 'Dropdown Menu with DropdownItem example',
|
|
82
|
-
source: path.resolve(__dirname, './examples/ai/dropdown-menu.tsx'),
|
|
53
|
+
{
|
|
54
|
+
name: 'DropdownItem',
|
|
55
|
+
description:
|
|
56
|
+
'A dropdown item populates the dropdown menu with items. Use for links or actions; every item must be inside a DropdownItemGroup. Can also be used as the trigger for a nested submenu.',
|
|
57
|
+
status: 'general-availability',
|
|
58
|
+
import: {
|
|
59
|
+
name: 'DropdownItem',
|
|
60
|
+
package: '@atlaskit/dropdown-menu',
|
|
61
|
+
type: 'named',
|
|
62
|
+
packagePath: path.resolve(__dirname),
|
|
63
|
+
packageJson: require('./package.json'),
|
|
83
64
|
},
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
65
|
+
usageGuidelines: [
|
|
66
|
+
'Use inside DropdownMenu with DropdownItemGroup (required parent)',
|
|
67
|
+
'Use for links (href) or actions (onClick); verbs for actions, nouns for links; no articles; single line per item',
|
|
68
|
+
'For a nested submenu: use as the trigger (pass triggerRef and trigger props, use elemAfter e.g. chevron); keep to maximum two layers',
|
|
69
|
+
],
|
|
70
|
+
contentGuidelines: [
|
|
71
|
+
'Use clear, descriptive menu item labels',
|
|
72
|
+
'Keep menu item text concise',
|
|
73
|
+
'Use consistent terminology across menu items',
|
|
74
|
+
],
|
|
75
|
+
accessibilityGuidelines: [
|
|
76
|
+
'Avoid truncation—ensure max width does not cut off labels',
|
|
77
|
+
'Ensure keyboard navigation with arrow keys',
|
|
78
|
+
],
|
|
79
|
+
examples: [
|
|
80
|
+
{
|
|
81
|
+
name: 'Dropdown Menu',
|
|
82
|
+
description: 'Dropdown Menu with DropdownItem example',
|
|
83
|
+
source: path.resolve(__dirname, './examples/ai/dropdown-menu.tsx'),
|
|
84
|
+
},
|
|
85
|
+
],
|
|
86
|
+
keywords: ['dropdown', 'menu', 'item', 'action', 'link', 'menuitem'],
|
|
87
|
+
categories: ['navigation', 'interaction'],
|
|
99
88
|
},
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
{
|
|
112
|
-
name: 'Dropdown Menu',
|
|
113
|
-
description: 'Dropdown Menu with DropdownItemGroup example',
|
|
114
|
-
source: path.resolve(__dirname, './examples/ai/dropdown-menu.tsx'),
|
|
89
|
+
{
|
|
90
|
+
name: 'DropdownItemGroup',
|
|
91
|
+
description:
|
|
92
|
+
'Wrapping element for dropdown menu items. Use to group related items; optional short uppercase title (e.g. "Edit page", "Tools") separates sections.',
|
|
93
|
+
status: 'general-availability',
|
|
94
|
+
import: {
|
|
95
|
+
name: 'DropdownItemGroup',
|
|
96
|
+
package: '@atlaskit/dropdown-menu',
|
|
97
|
+
type: 'named',
|
|
98
|
+
packagePath: path.resolve(__dirname),
|
|
99
|
+
packageJson: require('./package.json'),
|
|
115
100
|
},
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
101
|
+
usageGuidelines: [
|
|
102
|
+
'Use inside DropdownMenu to group related items',
|
|
103
|
+
'Use short, uppercase title to describe the group',
|
|
104
|
+
'Nested menu: maximum two layers',
|
|
105
|
+
],
|
|
106
|
+
contentGuidelines: [
|
|
107
|
+
'Group related actions logically',
|
|
108
|
+
'Use consistent terminology across menu items',
|
|
109
|
+
],
|
|
110
|
+
accessibilityGuidelines: ['Provide clear group titles', 'Nested menu: maximum two layers'],
|
|
111
|
+
examples: [
|
|
112
|
+
{
|
|
113
|
+
name: 'Dropdown Menu',
|
|
114
|
+
description: 'Dropdown Menu with DropdownItemGroup example',
|
|
115
|
+
source: path.resolve(__dirname, './examples/ai/dropdown-menu.tsx'),
|
|
116
|
+
},
|
|
117
|
+
],
|
|
118
|
+
keywords: ['dropdown', 'menu', 'group', 'section', 'title'],
|
|
119
|
+
categories: ['navigation', 'interaction'],
|
|
131
120
|
},
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
{
|
|
144
|
-
name: 'Dropdown Menu',
|
|
145
|
-
description: 'Dropdown Menu with checkbox items example',
|
|
146
|
-
source: path.resolve(__dirname, './examples/ai/dropdown-menu.tsx'),
|
|
121
|
+
{
|
|
122
|
+
name: 'DropdownItemCheckbox',
|
|
123
|
+
description:
|
|
124
|
+
'A dropdown menu item with checkbox selection. Use for multiple selection from a list (e.g. status filters, show/hide toggles).',
|
|
125
|
+
status: 'general-availability',
|
|
126
|
+
import: {
|
|
127
|
+
name: 'DropdownItemCheckbox',
|
|
128
|
+
package: '@atlaskit/dropdown-menu',
|
|
129
|
+
type: 'named',
|
|
130
|
+
packagePath: path.resolve(__dirname),
|
|
131
|
+
packageJson: require('./package.json'),
|
|
147
132
|
},
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
133
|
+
usageGuidelines: [
|
|
134
|
+
'Use with DropdownItemCheckboxGroup; control selection with isSelected and onClick',
|
|
135
|
+
'Use for multiple selection from a list or toggles (e.g. categories, column visibility)',
|
|
136
|
+
'Group related checkboxes; use short uppercase title on DropdownItemCheckboxGroup',
|
|
137
|
+
],
|
|
138
|
+
contentGuidelines: ['Use clear, descriptive labels', 'Keep menu item text concise'],
|
|
139
|
+
accessibilityGuidelines: [
|
|
140
|
+
'Ensure keyboard navigation and clear selection state',
|
|
141
|
+
'Use appropriate ARIA attributes',
|
|
142
|
+
],
|
|
143
|
+
examples: [
|
|
144
|
+
{
|
|
145
|
+
name: 'Dropdown Menu',
|
|
146
|
+
description: 'Dropdown Menu with checkbox items example',
|
|
147
|
+
source: path.resolve(__dirname, './examples/ai/dropdown-menu.tsx'),
|
|
148
|
+
},
|
|
149
|
+
],
|
|
150
|
+
keywords: ['dropdown', 'menu', 'checkbox', 'multi-select', 'toggle'],
|
|
151
|
+
categories: ['navigation', 'interaction', 'form'],
|
|
163
152
|
},
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
'./examples/constellation/dropdown-item-checkbox-selected.tsx',
|
|
176
|
-
),
|
|
153
|
+
{
|
|
154
|
+
name: 'DropdownItemCheckboxGroup',
|
|
155
|
+
description:
|
|
156
|
+
'Groups DropdownItemCheckbox components for multi-select options within a dropdown menu.',
|
|
157
|
+
status: 'general-availability',
|
|
158
|
+
import: {
|
|
159
|
+
name: 'DropdownItemCheckboxGroup',
|
|
160
|
+
package: '@atlaskit/dropdown-menu',
|
|
161
|
+
type: 'named',
|
|
162
|
+
packagePath: path.resolve(__dirname),
|
|
163
|
+
packageJson: require('./package.json'),
|
|
177
164
|
},
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
165
|
+
usageGuidelines: [
|
|
166
|
+
'Use to group related DropdownItemCheckbox items',
|
|
167
|
+
'Use for multiple selection from a list',
|
|
168
|
+
],
|
|
169
|
+
contentGuidelines: ['Group related checkboxes logically', 'Use consistent terminology'],
|
|
170
|
+
examples: [
|
|
171
|
+
{
|
|
172
|
+
name: 'Checkbox group',
|
|
173
|
+
description: 'DropdownItemCheckboxGroup with titled section and checkbox items.',
|
|
174
|
+
source: path.resolve(
|
|
175
|
+
__dirname,
|
|
176
|
+
'./examples/constellation/dropdown-item-checkbox-selected.tsx',
|
|
177
|
+
),
|
|
178
|
+
},
|
|
179
|
+
],
|
|
180
|
+
keywords: ['dropdown', 'menu', 'checkbox', 'group', 'multi-select'],
|
|
181
|
+
categories: ['navigation', 'interaction', 'form'],
|
|
193
182
|
},
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
{
|
|
206
|
-
name: 'Dropdown Menu',
|
|
207
|
-
description: 'Dropdown Menu with radio items example',
|
|
208
|
-
source: path.resolve(__dirname, './examples/ai/dropdown-menu.tsx'),
|
|
183
|
+
{
|
|
184
|
+
name: 'DropdownItemRadio',
|
|
185
|
+
description:
|
|
186
|
+
'A dropdown menu item with radio selection. Use for single selection from a short list (e.g. view mode, sort order).',
|
|
187
|
+
status: 'general-availability',
|
|
188
|
+
import: {
|
|
189
|
+
name: 'DropdownItemRadio',
|
|
190
|
+
package: '@atlaskit/dropdown-menu',
|
|
191
|
+
type: 'named',
|
|
192
|
+
packagePath: path.resolve(__dirname),
|
|
193
|
+
packageJson: require('./package.json'),
|
|
209
194
|
},
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
195
|
+
usageGuidelines: [
|
|
196
|
+
'Use with DropdownItemRadioGroup; control selection with isSelected and onClick',
|
|
197
|
+
'Use for single selection from a short list (e.g. views, density)',
|
|
198
|
+
'Group related radio items; use short uppercase title on DropdownItemRadioGroup',
|
|
199
|
+
],
|
|
200
|
+
contentGuidelines: ['Use clear, descriptive labels', 'Keep menu item text concise'],
|
|
201
|
+
accessibilityGuidelines: [
|
|
202
|
+
'Ensure keyboard navigation and clear selection state',
|
|
203
|
+
'Use appropriate ARIA attributes',
|
|
204
|
+
],
|
|
205
|
+
examples: [
|
|
206
|
+
{
|
|
207
|
+
name: 'Dropdown Menu',
|
|
208
|
+
description: 'Dropdown Menu with radio items example',
|
|
209
|
+
source: path.resolve(__dirname, './examples/ai/dropdown-menu.tsx'),
|
|
210
|
+
},
|
|
211
|
+
],
|
|
212
|
+
keywords: ['dropdown', 'menu', 'radio', 'single-select', 'choice'],
|
|
213
|
+
categories: ['navigation', 'interaction', 'form'],
|
|
225
214
|
},
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
'./examples/constellation/dropdown-item-radio-selected.tsx',
|
|
238
|
-
),
|
|
215
|
+
{
|
|
216
|
+
name: 'DropdownItemRadioGroup',
|
|
217
|
+
description:
|
|
218
|
+
'Groups DropdownItemRadio components for single-select options within a dropdown menu.',
|
|
219
|
+
status: 'general-availability',
|
|
220
|
+
import: {
|
|
221
|
+
name: 'DropdownItemRadioGroup',
|
|
222
|
+
package: '@atlaskit/dropdown-menu',
|
|
223
|
+
type: 'named',
|
|
224
|
+
packagePath: path.resolve(__dirname),
|
|
225
|
+
packageJson: require('./package.json'),
|
|
239
226
|
},
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
]
|
|
227
|
+
usageGuidelines: [
|
|
228
|
+
'Use to group related DropdownItemRadio items',
|
|
229
|
+
'Use for single selection from a short list',
|
|
230
|
+
],
|
|
231
|
+
contentGuidelines: ['Group related radio items logically', 'Use consistent terminology'],
|
|
232
|
+
examples: [
|
|
233
|
+
{
|
|
234
|
+
name: 'Radio group',
|
|
235
|
+
description: 'DropdownItemRadioGroup with titled section and radio items.',
|
|
236
|
+
source: path.resolve(
|
|
237
|
+
__dirname,
|
|
238
|
+
'./examples/constellation/dropdown-item-radio-selected.tsx',
|
|
239
|
+
),
|
|
240
|
+
},
|
|
241
|
+
],
|
|
242
|
+
keywords: ['dropdown', 'menu', 'radio', 'group', 'single-select'],
|
|
243
|
+
categories: ['navigation', 'interaction', 'form'],
|
|
244
|
+
},
|
|
245
|
+
],
|
|
246
|
+
};
|
|
245
247
|
|
|
246
248
|
export default documentation;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/dropdown-menu",
|
|
3
|
-
"version": "16.9.
|
|
3
|
+
"version": "16.9.3",
|
|
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/"
|
|
@@ -38,12 +38,12 @@
|
|
|
38
38
|
"@atlaskit/layering": "^3.7.0",
|
|
39
39
|
"@atlaskit/menu": "^8.5.0",
|
|
40
40
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
41
|
-
"@atlaskit/popup": "^4.
|
|
41
|
+
"@atlaskit/popup": "^4.21.0",
|
|
42
42
|
"@atlaskit/primitives": "^19.0.0",
|
|
43
43
|
"@atlaskit/spinner": "^19.1.0",
|
|
44
44
|
"@atlaskit/theme": "^24.0.0",
|
|
45
45
|
"@atlaskit/tokens": "^13.0.0",
|
|
46
|
-
"@atlaskit/top-layer": "^0.
|
|
46
|
+
"@atlaskit/top-layer": "^0.9.0",
|
|
47
47
|
"@atlaskit/visually-hidden": "^3.1.0",
|
|
48
48
|
"@babel/runtime": "^7.0.0",
|
|
49
49
|
"@compiled/react": "^0.20.0",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"@atlaskit/heading": "^5.4.0",
|
|
67
67
|
"@atlaskit/link": "^3.4.0",
|
|
68
68
|
"@atlaskit/lozenge": "^13.8.0",
|
|
69
|
-
"@atlaskit/modal-dialog": "^15.
|
|
69
|
+
"@atlaskit/modal-dialog": "^15.2.0",
|
|
70
70
|
"@atlaskit/section-message": "^8.13.0",
|
|
71
71
|
"@atlaskit/textfield": "^8.3.0",
|
|
72
72
|
"@atlaskit/toggle": "^15.6.0",
|