@atlaskit/dropdown-menu 11.5.2 → 11.5.4
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 +13 -0
- package/dist/cjs/dropdown-menu.js +7 -20
- package/dist/cjs/internal/components/menu-wrapper.js +55 -20
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/dropdown-menu.js +8 -18
- package/dist/es2019/internal/components/menu-wrapper.js +44 -7
- package/dist/es2019/version.json +1 -1
- package/dist/esm/dropdown-menu.js +8 -19
- package/dist/esm/internal/components/menu-wrapper.js +51 -12
- package/dist/esm/version.json +1 -1
- package/dist/types/internal/components/menu-wrapper.d.ts +2 -2
- package/dist/types/types.d.ts +3 -0
- package/package.json +8 -14
- package/report.api.md +78 -296
- package/dist/types-ts4.0/checkbox/dropdown-item-checkbox-group.d.ts +0 -16
- package/dist/types-ts4.0/checkbox/dropdown-item-checkbox.d.ts +0 -13
- package/dist/types-ts4.0/dropdown-menu-item-group.d.ts +0 -11
- package/dist/types-ts4.0/dropdown-menu-item.d.ts +0 -13
- package/dist/types-ts4.0/dropdown-menu.d.ts +0 -13
- package/dist/types-ts4.0/index.d.ts +0 -8
- package/dist/types-ts4.0/internal/components/focus-manager.d.ts +0 -19
- package/dist/types-ts4.0/internal/components/menu-wrapper.d.ts +0 -11
- package/dist/types-ts4.0/internal/context/checkbox-group-context.d.ts +0 -5
- package/dist/types-ts4.0/internal/context/selection-store.d.ts +0 -27
- package/dist/types-ts4.0/internal/hooks/use-checkbox-state.d.ts +0 -17
- package/dist/types-ts4.0/internal/hooks/use-radio-state.d.ts +0 -12
- package/dist/types-ts4.0/internal/hooks/use-register-item-with-focus-manager.d.ts +0 -4
- package/dist/types-ts4.0/internal/utils/get-icon-colors.d.ts +0 -8
- package/dist/types-ts4.0/internal/utils/handle-focus.d.ts +0 -2
- package/dist/types-ts4.0/internal/utils/is-checkbox-item.d.ts +0 -1
- package/dist/types-ts4.0/internal/utils/is-radio-item.d.ts +0 -1
- package/dist/types-ts4.0/internal/utils/is-voice-over-supported.d.ts +0 -2
- package/dist/types-ts4.0/internal/utils/reset-options-in-group.d.ts +0 -4
- package/dist/types-ts4.0/internal/utils/use-generated-id.d.ts +0 -5
- package/dist/types-ts4.0/radio/dropdown-item-radio-group.d.ts +0 -25
- package/dist/types-ts4.0/radio/dropdown-item-radio.d.ts +0 -13
- package/dist/types-ts4.0/types.d.ts +0 -289
package/report.api.md
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
## API Report File for "@atlaskit/dropdown-menu"
|
|
1
|
+
## API Report File for "@atlaskit/dropdown-menu"
|
|
2
2
|
|
|
3
|
-
> Do not edit this file.
|
|
3
|
+
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
|
|
4
|
+
|
|
5
|
+
<!--
|
|
6
|
+
Generated API Report version: 2.0
|
|
7
|
+
-->
|
|
4
8
|
|
|
5
9
|
[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
|
|
6
10
|
|
|
@@ -19,363 +23,141 @@ import type { SectionProps } from '@atlaskit/menu';
|
|
|
19
23
|
import type { SectionProps as SectionProps_2 } from '@atlaskit/menu/types';
|
|
20
24
|
import type { TriggerProps } from '@atlaskit/popup/types';
|
|
21
25
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
triggerRef: Ref<HTMLElement>;
|
|
27
|
-
/**
|
|
28
|
-
* Makes the trigger appear selected.
|
|
29
|
-
*/
|
|
26
|
+
// @public (undocumented)
|
|
27
|
+
export interface CustomTriggerProps<
|
|
28
|
+
TriggerElement extends HTMLElement = HTMLElement
|
|
29
|
+
> extends Omit<TriggerProps, 'ref'> {
|
|
30
30
|
isSelected?: boolean;
|
|
31
|
-
/**
|
|
32
|
-
* Event that is triggered when the element is clicked.
|
|
33
|
-
*/
|
|
34
31
|
onClick?: (e: MouseEvent_2 | KeyboardEvent_2) => void;
|
|
35
|
-
/**
|
|
36
|
-
* A `testId` prop is provided for specified elements, which is a unique
|
|
37
|
-
* string that appears as a data attribute `data-testid` in the rendered code,
|
|
38
|
-
* serving as a hook for automated tests.
|
|
39
|
-
*
|
|
40
|
-
* As dropdown-menu is composed of different components, we passed down the testId to the sub component you want to test:
|
|
41
|
-
* - `testId--trigger` to get the menu trigger.
|
|
42
|
-
* - `testId--content` to get the dropdown content trigger.
|
|
43
|
-
*/
|
|
44
32
|
testId?: string;
|
|
33
|
+
triggerRef: Ref<TriggerElement>;
|
|
45
34
|
}
|
|
46
35
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
*
|
|
50
|
-
* A dropdown item populates the dropdown menu with items. Every item should be inside a dropdown item group.
|
|
51
|
-
*
|
|
52
|
-
* - [Examples](https://atlassian.design/components/dropdown-item/examples)
|
|
53
|
-
* - [Code](https://atlassian.design/components/dropdown-item/code)
|
|
54
|
-
* - [Usage](https://atlassian.design/components/dropdown-item/usage)
|
|
55
|
-
*/
|
|
56
|
-
export declare const DropdownItem: (props: DropdownItemProps) => JSX.Element;
|
|
36
|
+
// @public
|
|
37
|
+
export const DropdownItem: (props: DropdownItemProps) => JSX.Element;
|
|
57
38
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
*
|
|
61
|
-
* A dropdown item checkbox creates groups that have multiple selections.
|
|
62
|
-
*
|
|
63
|
-
* - [Examples](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/examples)
|
|
64
|
-
* - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/code)
|
|
65
|
-
* - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/usage)
|
|
66
|
-
*/
|
|
67
|
-
export declare const DropdownItemCheckbox: (
|
|
39
|
+
// @public
|
|
40
|
+
export const DropdownItemCheckbox: (
|
|
68
41
|
props: DropdownItemCheckboxProps,
|
|
69
42
|
) => JSX.Element;
|
|
70
43
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
*
|
|
74
|
-
* A wrapping element for dropdown menu checkbox items.
|
|
75
|
-
*
|
|
76
|
-
*/
|
|
77
|
-
export declare const DropdownItemCheckboxGroup: (
|
|
44
|
+
// @public
|
|
45
|
+
export const DropdownItemCheckboxGroup: (
|
|
78
46
|
props: DropdownItemCheckboxGroupProps,
|
|
79
47
|
) => JSX.Element;
|
|
80
48
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
* Unique identifier for the checkbox group.
|
|
84
|
-
*/
|
|
49
|
+
// @public (undocumented)
|
|
50
|
+
interface DropdownItemCheckboxGroupProps extends SectionProps {
|
|
85
51
|
id: string;
|
|
86
52
|
}
|
|
87
53
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
* Primary content for the item.
|
|
91
|
-
*/
|
|
54
|
+
// @public (undocumented)
|
|
55
|
+
interface DropdownItemCheckboxProps {
|
|
92
56
|
children: React.ReactNode;
|
|
93
|
-
|
|
94
|
-
* Description of the item.
|
|
95
|
-
* This will render smaller text below the primary text of the item as well as slightly increasing the height of the item.
|
|
96
|
-
*/
|
|
57
|
+
defaultSelected?: boolean;
|
|
97
58
|
description?: string | JSX.Element;
|
|
98
|
-
|
|
99
|
-
* Makes the checkbox appear disabled as well as removing interactivity.
|
|
100
|
-
*/
|
|
59
|
+
id: string;
|
|
101
60
|
isDisabled?: boolean;
|
|
102
|
-
/**
|
|
103
|
-
* When `true` the title of the item will wrap multiple lines if it's long enough.
|
|
104
|
-
*/
|
|
105
|
-
shouldTitleWrap?: boolean;
|
|
106
|
-
/**
|
|
107
|
-
* When `true` the description of the item will wrap multiple lines if it's long enough.
|
|
108
|
-
*/
|
|
109
|
-
shouldDescriptionWrap?: boolean;
|
|
110
|
-
/**
|
|
111
|
-
* Event that is triggered when the checkbox is clicked.
|
|
112
|
-
*/
|
|
113
|
-
onClick?: (e: MouseEvent_2 | KeyboardEvent_2) => void;
|
|
114
|
-
/**
|
|
115
|
-
* Sets whether the checkbox is checked or unchecked.
|
|
116
|
-
*/
|
|
117
61
|
isSelected?: boolean;
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
defaultSelected?: boolean;
|
|
122
|
-
/**
|
|
123
|
-
* Unique id of a checkbox
|
|
124
|
-
*/
|
|
125
|
-
id: string;
|
|
126
|
-
/**
|
|
127
|
-
* Adds a title attribute to the root item element.
|
|
128
|
-
*/
|
|
129
|
-
title?: string;
|
|
130
|
-
/**
|
|
131
|
-
* A `testId` prop is provided for specified elements,
|
|
132
|
-
* which is a unique string that appears as a data attribute `data-testid` in the rendered code,
|
|
133
|
-
* serving as a hook for automated tests.
|
|
134
|
-
*/
|
|
62
|
+
onClick?: (e: MouseEvent_2 | KeyboardEvent_2) => void;
|
|
63
|
+
shouldDescriptionWrap?: boolean;
|
|
64
|
+
shouldTitleWrap?: boolean;
|
|
135
65
|
testId?: string;
|
|
66
|
+
title?: string;
|
|
136
67
|
}
|
|
137
68
|
|
|
138
69
|
export { DropdownItemGroup };
|
|
139
70
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
* Primary content for the item.
|
|
143
|
-
*/
|
|
71
|
+
// @public (undocumented)
|
|
72
|
+
export interface DropdownItemProps {
|
|
144
73
|
children: React.ReactNode;
|
|
145
|
-
/**
|
|
146
|
-
* Custom component to render as an item.
|
|
147
|
-
*/
|
|
148
74
|
component?: CustomItemProps['component'];
|
|
149
|
-
/**
|
|
150
|
-
* Description of the item.
|
|
151
|
-
* This will render smaller text below the primary text of the item as well as slightly increasing the height of the item.
|
|
152
|
-
*/
|
|
153
75
|
description?: string | JSX.Element;
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
76
|
+
elemAfter?: React.ReactNode;
|
|
77
|
+
elemBefore?: React.ReactNode;
|
|
78
|
+
href?: string;
|
|
157
79
|
isDisabled?: boolean;
|
|
158
|
-
/**
|
|
159
|
-
* When `true` the title of the item will wrap multiple lines if it's long enough.
|
|
160
|
-
*/
|
|
161
|
-
shouldTitleWrap?: boolean;
|
|
162
|
-
/**
|
|
163
|
-
* When `true` the description of the item will wrap multiple lines if it's long enough.
|
|
164
|
-
*/
|
|
165
|
-
shouldDescriptionWrap?: boolean;
|
|
166
|
-
/**
|
|
167
|
-
* Event that is triggered when the element is clicked.
|
|
168
|
-
*/
|
|
169
|
-
onClick?: (e: MouseEvent_2 | KeyboardEvent_2) => void;
|
|
170
|
-
/**
|
|
171
|
-
* Makes the element appear selected.
|
|
172
|
-
*/
|
|
173
80
|
isSelected?: boolean;
|
|
174
|
-
|
|
175
|
-
* Link to another page.
|
|
176
|
-
*/
|
|
177
|
-
href?: string;
|
|
178
|
-
/**
|
|
179
|
-
* Where to display the linked URL,
|
|
180
|
-
* see [anchor information](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) on mdn for more information.
|
|
181
|
-
*/
|
|
182
|
-
target?: string;
|
|
183
|
-
/**
|
|
184
|
-
* Adds a title attribute to the root item element.
|
|
185
|
-
*/
|
|
186
|
-
title?: string;
|
|
187
|
-
/**
|
|
188
|
-
* Element to render before the item text.
|
|
189
|
-
* Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
|
|
190
|
-
*/
|
|
191
|
-
elemBefore?: React.ReactNode;
|
|
192
|
-
/**
|
|
193
|
-
* Element to render after the item text.
|
|
194
|
-
* Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
|
|
195
|
-
*/
|
|
196
|
-
elemAfter?: React.ReactNode;
|
|
197
|
-
/**
|
|
198
|
-
* The relationship of the linked URL as space-separated link types.
|
|
199
|
-
* Generally you'll want to set this to "noopener noreferrer" when `target` is "_blank".
|
|
200
|
-
*/
|
|
81
|
+
onClick?: (e: MouseEvent_2 | KeyboardEvent_2) => void;
|
|
201
82
|
rel?: string;
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
* serving as a hook for automated tests.
|
|
206
|
-
*/
|
|
83
|
+
shouldDescriptionWrap?: boolean;
|
|
84
|
+
shouldTitleWrap?: boolean;
|
|
85
|
+
target?: string;
|
|
207
86
|
testId?: string;
|
|
87
|
+
title?: string;
|
|
208
88
|
}
|
|
209
89
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
*
|
|
213
|
-
* A dropdown item radio displays groups that have a single selection.
|
|
214
|
-
*
|
|
215
|
-
* - [Examples](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/examples)
|
|
216
|
-
* - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/code)
|
|
217
|
-
* - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/usage)
|
|
218
|
-
*/
|
|
219
|
-
export declare const DropdownItemRadio: (
|
|
220
|
-
props: DropdownItemRadioProps,
|
|
221
|
-
) => JSX.Element;
|
|
90
|
+
// @public
|
|
91
|
+
export const DropdownItemRadio: (props: DropdownItemRadioProps) => JSX.Element;
|
|
222
92
|
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
* Store which manages the selection state for each DropdownItemRadio
|
|
226
|
-
* across mount and unmounts.
|
|
227
|
-
*
|
|
228
|
-
*/
|
|
229
|
-
export declare const DropdownItemRadioGroup: (
|
|
93
|
+
// @public
|
|
94
|
+
export const DropdownItemRadioGroup: (
|
|
230
95
|
props: DropdownItemRadioGroupProps,
|
|
231
96
|
) => JSX.Element;
|
|
232
97
|
|
|
233
|
-
|
|
98
|
+
// @public (undocumented)
|
|
99
|
+
interface DropdownItemRadioGroupProps extends SectionProps {
|
|
100
|
+
// (undocumented)
|
|
234
101
|
id: string;
|
|
235
102
|
}
|
|
236
103
|
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
* Primary content for the item.
|
|
240
|
-
*/
|
|
104
|
+
// @public (undocumented)
|
|
105
|
+
interface DropdownItemRadioProps {
|
|
241
106
|
children: React.ReactNode;
|
|
242
|
-
|
|
243
|
-
* Description of the item.
|
|
244
|
-
* This will render smaller text below the primary text of the item as well as slightly increasing the height of the item.
|
|
245
|
-
*/
|
|
107
|
+
defaultSelected?: boolean;
|
|
246
108
|
description?: string | JSX.Element;
|
|
247
|
-
|
|
248
|
-
* Makes the checkbox appear disabled as well as removing interactivity.
|
|
249
|
-
*/
|
|
109
|
+
id: string;
|
|
250
110
|
isDisabled?: boolean;
|
|
251
|
-
/**
|
|
252
|
-
* When `true` the title of the item will wrap multiple lines if it's long enough.
|
|
253
|
-
*/
|
|
254
|
-
shouldTitleWrap?: boolean;
|
|
255
|
-
/**
|
|
256
|
-
* When `true` the description of the item will wrap multiple lines if it's long enough.
|
|
257
|
-
*/
|
|
258
|
-
shouldDescriptionWrap?: boolean;
|
|
259
|
-
/**
|
|
260
|
-
* Event that is triggered when the checkbox is clicked.
|
|
261
|
-
*/
|
|
262
|
-
onClick?: (e: MouseEvent_2 | KeyboardEvent_2) => void;
|
|
263
|
-
/**
|
|
264
|
-
* Sets whether the checkbox is checked or unchecked.
|
|
265
|
-
*/
|
|
266
111
|
isSelected?: boolean;
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
defaultSelected?: boolean;
|
|
271
|
-
/**
|
|
272
|
-
* Unique id of a checkbox
|
|
273
|
-
*/
|
|
274
|
-
id: string;
|
|
275
|
-
/**
|
|
276
|
-
* Adds a title attribute to the root item element.
|
|
277
|
-
*/
|
|
278
|
-
title?: string;
|
|
279
|
-
/**
|
|
280
|
-
* A `testId` prop is provided for specified elements,
|
|
281
|
-
* which is a unique string that appears as a data attribute `data-testid` in the rendered code,
|
|
282
|
-
* serving as a hook for automated tests.
|
|
283
|
-
*/
|
|
112
|
+
onClick?: (e: MouseEvent_2 | KeyboardEvent_2) => void;
|
|
113
|
+
shouldDescriptionWrap?: boolean;
|
|
114
|
+
shouldTitleWrap?: boolean;
|
|
284
115
|
testId?: string;
|
|
116
|
+
title?: string;
|
|
285
117
|
}
|
|
286
118
|
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
*
|
|
292
|
-
* - [Examples](https://atlassian.design/components/dropdown-menu/examples)
|
|
293
|
-
* - [Code](https://atlassian.design/components/dropdown-menu/code)
|
|
294
|
-
* - [Usage](https://atlassian.design/components/dropdown-menu/usage)
|
|
295
|
-
*/
|
|
296
|
-
declare const DropdownMenu: (props: DropdownMenuProps) => jsx.JSX.Element;
|
|
119
|
+
// @public
|
|
120
|
+
const DropdownMenu: <T extends HTMLElement = HTMLElement>(
|
|
121
|
+
props: DropdownMenuProps<T>,
|
|
122
|
+
) => jsx.JSX.Element;
|
|
297
123
|
export default DropdownMenu;
|
|
298
124
|
|
|
299
|
-
|
|
125
|
+
// @public (undocumented)
|
|
126
|
+
export interface DropdownMenuGroupProps extends SectionProps_2 {}
|
|
300
127
|
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
* Tall menu has no scroll until the height exceeds the height of the viewport.
|
|
306
|
-
*/
|
|
128
|
+
// @public (undocumented)
|
|
129
|
+
export interface DropdownMenuProps<
|
|
130
|
+
TriggerElement extends HTMLElement = HTMLElement
|
|
131
|
+
> {
|
|
307
132
|
appearance?: 'default' | 'tall';
|
|
308
|
-
/**
|
|
309
|
-
* Controls if the first menu item receives focus when menu is opened. Note that the menu has a focus lock
|
|
310
|
-
* which traps the focus within the menu. Also, the first item gets fouced automatically
|
|
311
|
-
* if the menu is triggered using the keyboard.
|
|
312
|
-
*
|
|
313
|
-
*/
|
|
314
133
|
autoFocus?: boolean;
|
|
315
|
-
/**
|
|
316
|
-
* Content that will be rendered inside the layer element. Should typically be
|
|
317
|
-
* `DropdownItemGroup` or `DropdownItem`, or checkbox / radio variants of those.
|
|
318
|
-
*/
|
|
319
134
|
children?: ReactNode;
|
|
320
|
-
|
|
321
|
-
* If true, a Spinner is rendered instead of the items
|
|
322
|
-
*/
|
|
135
|
+
defaultOpen?: boolean;
|
|
323
136
|
isLoading?: boolean;
|
|
324
|
-
/**
|
|
325
|
-
* Text to be used as status for assistive technologies. Defaults to "Loading".
|
|
326
|
-
*/
|
|
327
|
-
statusLabel?: string;
|
|
328
|
-
/**
|
|
329
|
-
* Controls the open state of the dropdown.
|
|
330
|
-
*/
|
|
331
137
|
isOpen?: boolean;
|
|
332
|
-
|
|
333
|
-
* Position of the menu.
|
|
334
|
-
*/
|
|
138
|
+
onOpenChange?: (args: OnOpenChangeArgs) => void;
|
|
335
139
|
placement?: Placement;
|
|
336
|
-
/**
|
|
337
|
-
* Allows the dropdown menu to be placed on the opposite side of its trigger if it does not
|
|
338
|
-
* fit in the viewport.
|
|
339
|
-
*/
|
|
340
140
|
shouldFlip?: boolean;
|
|
341
|
-
|
|
342
|
-
* Content which will trigger the dropdown menu to open and close. Use with `triggerType`
|
|
343
|
-
* to easily get a button trigger.
|
|
344
|
-
*/
|
|
345
|
-
trigger?: string | ((triggerButtonProps: CustomTriggerProps) => ReactElement);
|
|
346
|
-
/**
|
|
347
|
-
* A `testId` prop is provided for specified elements, which is a unique
|
|
348
|
-
* string that appears as a data attribute `data-testid` in the rendered code,
|
|
349
|
-
* serving as a hook for automated tests.
|
|
350
|
-
*
|
|
351
|
-
* As dropdown-menu is composed of different components, we passed down the testId to the sub component you want to test:
|
|
352
|
-
* - `testId--trigger` to get the menu trigger.
|
|
353
|
-
* - `testId--content` to get the dropdown content trigger.
|
|
354
|
-
*/
|
|
141
|
+
statusLabel?: string;
|
|
355
142
|
testId?: string;
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
/**
|
|
362
|
-
* Called when the menu should be open/closed. Receives an object with `isOpen` state.
|
|
363
|
-
*/
|
|
364
|
-
onOpenChange?: (args: OnOpenChangeArgs) => void;
|
|
365
|
-
/**
|
|
366
|
-
* Z-index that the popup should be displayed in.
|
|
367
|
-
* This is passed to the portal component.
|
|
368
|
-
* Defaults to `layers.modal()` from `@atlaskit/theme` which is 510.
|
|
369
|
-
*/
|
|
143
|
+
trigger?:
|
|
144
|
+
| string
|
|
145
|
+
| ((
|
|
146
|
+
triggerButtonProps: CustomTriggerProps<TriggerElement>,
|
|
147
|
+
) => ReactElement);
|
|
370
148
|
zIndex?: number;
|
|
371
149
|
}
|
|
372
150
|
|
|
373
|
-
|
|
374
|
-
|
|
151
|
+
// @public (undocumented)
|
|
152
|
+
export interface OnOpenChangeArgs {
|
|
153
|
+
// (undocumented)
|
|
375
154
|
event: MouseEvent_2 | KeyboardEvent_2;
|
|
155
|
+
// (undocumented)
|
|
156
|
+
isOpen: boolean;
|
|
376
157
|
}
|
|
377
158
|
|
|
378
|
-
|
|
159
|
+
// @public (undocumented)
|
|
160
|
+
type Placement =
|
|
379
161
|
| 'auto-start'
|
|
380
162
|
| 'auto'
|
|
381
163
|
| 'auto-end'
|
|
@@ -392,5 +174,5 @@ declare type Placement =
|
|
|
392
174
|
| 'left'
|
|
393
175
|
| 'left-start';
|
|
394
176
|
|
|
395
|
-
|
|
177
|
+
// (No @packageDocumentation comment for this package)
|
|
396
178
|
```
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import type { SectionProps } from '@atlaskit/menu';
|
|
3
|
-
interface DropdownItemCheckboxGroupProps extends SectionProps {
|
|
4
|
-
/**
|
|
5
|
-
* Unique identifier for the checkbox group.
|
|
6
|
-
*/
|
|
7
|
-
id: string;
|
|
8
|
-
}
|
|
9
|
-
/**
|
|
10
|
-
* __Dropdown item checkbox group__
|
|
11
|
-
*
|
|
12
|
-
* A wrapping element for dropdown menu checkbox items.
|
|
13
|
-
*
|
|
14
|
-
*/
|
|
15
|
-
declare const DropdownItemCheckboxGroup: (props: DropdownItemCheckboxGroupProps) => JSX.Element;
|
|
16
|
-
export default DropdownItemCheckboxGroup;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { DropdownItemCheckboxProps } from '../types';
|
|
3
|
-
/**
|
|
4
|
-
* __Dropdown item checkbox__
|
|
5
|
-
*
|
|
6
|
-
* A dropdown item checkbox creates groups that have multiple selections.
|
|
7
|
-
*
|
|
8
|
-
* - [Examples](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/examples)
|
|
9
|
-
* - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/code)
|
|
10
|
-
* - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/usage)
|
|
11
|
-
*/
|
|
12
|
-
declare const DropdownItemCheckbox: (props: DropdownItemCheckboxProps) => JSX.Element;
|
|
13
|
-
export default DropdownItemCheckbox;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* __Section__
|
|
3
|
-
*
|
|
4
|
-
* A dropdown item group includes all the actions or items in a dropdown menu.
|
|
5
|
-
*
|
|
6
|
-
* - [Examples](https://atlassian.design/components/dropdown-menu/dropdown-item-group/examples)
|
|
7
|
-
* - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-group/code)
|
|
8
|
-
* - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-group/usage)
|
|
9
|
-
*/
|
|
10
|
-
import Section from '@atlaskit/menu/section';
|
|
11
|
-
export default Section;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { DropdownItemProps } from './types';
|
|
3
|
-
/**
|
|
4
|
-
* __Dropdown menu item__
|
|
5
|
-
*
|
|
6
|
-
* A dropdown item populates the dropdown menu with items. Every item should be inside a dropdown item group.
|
|
7
|
-
*
|
|
8
|
-
* - [Examples](https://atlassian.design/components/dropdown-item/examples)
|
|
9
|
-
* - [Code](https://atlassian.design/components/dropdown-item/code)
|
|
10
|
-
* - [Usage](https://atlassian.design/components/dropdown-item/usage)
|
|
11
|
-
*/
|
|
12
|
-
declare const DropdownMenuItem: (props: DropdownItemProps) => JSX.Element;
|
|
13
|
-
export default DropdownMenuItem;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { jsx } from '@emotion/react';
|
|
2
|
-
import type { DropdownMenuProps } from './types';
|
|
3
|
-
/**
|
|
4
|
-
* __Dropdown menu__
|
|
5
|
-
*
|
|
6
|
-
* A dropdown menu displays a list of actions or options to a user.
|
|
7
|
-
*
|
|
8
|
-
* - [Examples](https://atlassian.design/components/dropdown-menu/examples)
|
|
9
|
-
* - [Code](https://atlassian.design/components/dropdown-menu/code)
|
|
10
|
-
* - [Usage](https://atlassian.design/components/dropdown-menu/usage)
|
|
11
|
-
*/
|
|
12
|
-
declare const DropdownMenu: <T extends HTMLElement = HTMLElement>(props: DropdownMenuProps<T>) => jsx.JSX.Element;
|
|
13
|
-
export default DropdownMenu;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export { default } from './dropdown-menu';
|
|
2
|
-
export { default as DropdownItemGroup } from './dropdown-menu-item-group';
|
|
3
|
-
export { default as DropdownItem } from './dropdown-menu-item';
|
|
4
|
-
export { default as DropdownItemCheckbox } from './checkbox/dropdown-item-checkbox';
|
|
5
|
-
export { default as DropdownItemCheckboxGroup } from './checkbox/dropdown-item-checkbox-group';
|
|
6
|
-
export { default as DropdownItemRadio } from './radio/dropdown-item-radio';
|
|
7
|
-
export { default as DropdownItemRadioGroup } from './radio/dropdown-item-radio-group';
|
|
8
|
-
export type { DropdownMenuProps, DropdownMenuGroupProps, DropdownItemProps, OnOpenChangeArgs, CustomTriggerProps, } from './types';
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import React, { FC } from 'react';
|
|
2
|
-
import { FocusableElement } from '../../types';
|
|
3
|
-
/**
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* Context provider which maintains the list of focusable elements and a method to
|
|
7
|
-
* register new menu items.
|
|
8
|
-
* This list drives the keyboard navgation of the menu.
|
|
9
|
-
*
|
|
10
|
-
*/
|
|
11
|
-
export declare const FocusManagerContext: React.Context<{
|
|
12
|
-
menuItemRefs: FocusableElement[];
|
|
13
|
-
registerRef: (ref: FocusableElement) => void;
|
|
14
|
-
}>;
|
|
15
|
-
/**
|
|
16
|
-
* Focus manager logic
|
|
17
|
-
*/
|
|
18
|
-
declare const FocusManager: FC;
|
|
19
|
-
export default FocusManager;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { MenuWrapperProps } from '../../types';
|
|
3
|
-
/**
|
|
4
|
-
*
|
|
5
|
-
* MenuWrapper wraps all the menu items.
|
|
6
|
-
* It handles the logic to close the menu when a MenuItem is clicked, but leaves it open
|
|
7
|
-
* if a CheckboxItem or RadioItem is clicked.
|
|
8
|
-
* It also sets focus to the first menu item when opened.
|
|
9
|
-
*/
|
|
10
|
-
declare const MenuWrapper: ({ onClose, setInitialFocusRef, ...props }: MenuWrapperProps) => JSX.Element;
|
|
11
|
-
export default MenuWrapper;
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
declare type OptionsInGroup = {
|
|
3
|
-
[key: string]: boolean | undefined;
|
|
4
|
-
};
|
|
5
|
-
declare type SelectionStoreContextProps = {
|
|
6
|
-
setItemState: (group: string, id: string, value: boolean | undefined) => void;
|
|
7
|
-
getItemState: (group: string, id: string) => boolean | undefined;
|
|
8
|
-
setGroupState: (group: string, value: OptionsInGroup) => void;
|
|
9
|
-
getGroupState: (group: string) => OptionsInGroup;
|
|
10
|
-
};
|
|
11
|
-
/**
|
|
12
|
-
*
|
|
13
|
-
* SelectionStoreContext maintains the state of the selected items
|
|
14
|
-
* and getter setters.
|
|
15
|
-
*
|
|
16
|
-
*/
|
|
17
|
-
export declare const SelectionStoreContext: React.Context<SelectionStoreContextProps>;
|
|
18
|
-
declare type SelectionStoreProps = {
|
|
19
|
-
children: React.ReactNode;
|
|
20
|
-
};
|
|
21
|
-
/**
|
|
22
|
-
* Selection store will persist data as long as it remains mounted.
|
|
23
|
-
* It handles the uncontrolled story for dropdown menu when the menu
|
|
24
|
-
* items can be mounted/unmounted depending if the menu is open or closed.
|
|
25
|
-
*/
|
|
26
|
-
declare const SelectionStore: (props: SelectionStoreProps) => JSX.Element;
|
|
27
|
-
export default SelectionStore;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
declare type CheckboxStateArgs = {
|
|
2
|
-
id: string;
|
|
3
|
-
isSelected: boolean | undefined;
|
|
4
|
-
defaultSelected: boolean | undefined;
|
|
5
|
-
};
|
|
6
|
-
declare type SetStateCallback = (value: boolean | undefined) => boolean;
|
|
7
|
-
declare type CheckboxStateValue = [
|
|
8
|
-
boolean,
|
|
9
|
-
(newValue: SetStateCallback) => void
|
|
10
|
-
];
|
|
11
|
-
/**
|
|
12
|
-
* Custom hook to handle checkbox state for dropdown menu.
|
|
13
|
-
* It works in tandem with the selection store context when the
|
|
14
|
-
* component is uncontrolled.
|
|
15
|
-
*/
|
|
16
|
-
declare const useCheckboxState: ({ isSelected, id, defaultSelected, }: CheckboxStateArgs) => CheckboxStateValue;
|
|
17
|
-
export default useCheckboxState;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
declare type RadioStateArgs = {
|
|
2
|
-
id: string;
|
|
3
|
-
isSelected: boolean | undefined;
|
|
4
|
-
defaultSelected: boolean | undefined;
|
|
5
|
-
};
|
|
6
|
-
declare type SetStateCallback = (value: boolean | undefined) => boolean;
|
|
7
|
-
declare type RadioStateValue = [
|
|
8
|
-
boolean,
|
|
9
|
-
(newValue: SetStateCallback) => void
|
|
10
|
-
];
|
|
11
|
-
declare function useRadioState({ id, isSelected, defaultSelected, }: RadioStateArgs): RadioStateValue;
|
|
12
|
-
export default useRadioState;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
declare const getIconColors: (isSelected: boolean | undefined) => {
|
|
2
|
-
primary: "var(--ds-background-brand-bold)";
|
|
3
|
-
secondary: "var(--ds-icon-inverse)";
|
|
4
|
-
} | {
|
|
5
|
-
primary: "var(--ds-background-neutral)";
|
|
6
|
-
secondary: "var(--ds-UNSAFE_util-transparent)";
|
|
7
|
-
};
|
|
8
|
-
export default getIconColors;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export default function isCheckboxItem(element: HTMLElement): boolean;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export default function isCheckboxItem(element: HTMLElement): boolean;
|