@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.
Files changed (37) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/dropdown-menu.js +7 -20
  3. package/dist/cjs/internal/components/menu-wrapper.js +55 -20
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/dropdown-menu.js +8 -18
  6. package/dist/es2019/internal/components/menu-wrapper.js +44 -7
  7. package/dist/es2019/version.json +1 -1
  8. package/dist/esm/dropdown-menu.js +8 -19
  9. package/dist/esm/internal/components/menu-wrapper.js +51 -12
  10. package/dist/esm/version.json +1 -1
  11. package/dist/types/internal/components/menu-wrapper.d.ts +2 -2
  12. package/dist/types/types.d.ts +3 -0
  13. package/package.json +8 -14
  14. package/report.api.md +78 -296
  15. package/dist/types-ts4.0/checkbox/dropdown-item-checkbox-group.d.ts +0 -16
  16. package/dist/types-ts4.0/checkbox/dropdown-item-checkbox.d.ts +0 -13
  17. package/dist/types-ts4.0/dropdown-menu-item-group.d.ts +0 -11
  18. package/dist/types-ts4.0/dropdown-menu-item.d.ts +0 -13
  19. package/dist/types-ts4.0/dropdown-menu.d.ts +0 -13
  20. package/dist/types-ts4.0/index.d.ts +0 -8
  21. package/dist/types-ts4.0/internal/components/focus-manager.d.ts +0 -19
  22. package/dist/types-ts4.0/internal/components/menu-wrapper.d.ts +0 -11
  23. package/dist/types-ts4.0/internal/context/checkbox-group-context.d.ts +0 -5
  24. package/dist/types-ts4.0/internal/context/selection-store.d.ts +0 -27
  25. package/dist/types-ts4.0/internal/hooks/use-checkbox-state.d.ts +0 -17
  26. package/dist/types-ts4.0/internal/hooks/use-radio-state.d.ts +0 -12
  27. package/dist/types-ts4.0/internal/hooks/use-register-item-with-focus-manager.d.ts +0 -4
  28. package/dist/types-ts4.0/internal/utils/get-icon-colors.d.ts +0 -8
  29. package/dist/types-ts4.0/internal/utils/handle-focus.d.ts +0 -2
  30. package/dist/types-ts4.0/internal/utils/is-checkbox-item.d.ts +0 -1
  31. package/dist/types-ts4.0/internal/utils/is-radio-item.d.ts +0 -1
  32. package/dist/types-ts4.0/internal/utils/is-voice-over-supported.d.ts +0 -2
  33. package/dist/types-ts4.0/internal/utils/reset-options-in-group.d.ts +0 -4
  34. package/dist/types-ts4.0/internal/utils/use-generated-id.d.ts +0 -5
  35. package/dist/types-ts4.0/radio/dropdown-item-radio-group.d.ts +0 -25
  36. package/dist/types-ts4.0/radio/dropdown-item-radio.d.ts +0 -13
  37. 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. This report is auto-generated by [API Extractor](https://api-extractor.com/).
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
- export declare interface CustomTriggerProps extends Omit<TriggerProps, 'ref'> {
23
- /**
24
- * Ref that should be applied to the trigger. This is used to calculate the menu position.
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
- * __Dropdown menu item__
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
- * __Dropdown item checkbox__
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
- * __Dropdown item checkbox group__
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
- declare interface DropdownItemCheckboxGroupProps extends SectionProps {
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
- declare interface DropdownItemCheckboxProps {
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
- * Sets whether the checkbox begins selected.
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
- export declare interface DropdownItemProps {
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
- * Makes the element appear disabled as well as removing interactivity.
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
- * A `testId` prop is provided for specified elements,
204
- * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
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
- * __Dropdown item radio__
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
- * __Dropdown item radio group__
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
- declare interface DropdownItemRadioGroupProps extends SectionProps {
98
+ // @public (undocumented)
99
+ interface DropdownItemRadioGroupProps extends SectionProps {
100
+ // (undocumented)
234
101
  id: string;
235
102
  }
236
103
 
237
- declare interface DropdownItemRadioProps {
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
- * Sets whether the checkbox begins selected.
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
- * __Dropdown menu__
289
- *
290
- * A dropdown menu displays a list of actions or options to a user.
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
- export declare interface DropdownMenuGroupProps extends SectionProps_2 {}
125
+ // @public (undocumented)
126
+ export interface DropdownMenuGroupProps extends SectionProps_2 {}
300
127
 
301
- export declare interface DropdownMenuProps {
302
- /**
303
- * Controls the appearance of the menu.
304
- * Default menu has scroll after its height exceeds the pre-defined amount.
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
- * Controls the initial open state of the dropdown. If provided, the component is considered to be controlled
358
- * which means that the user is responsible for managing the open and close state of the menu.
359
- */
360
- defaultOpen?: boolean;
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
- export declare interface OnOpenChangeArgs {
374
- isOpen: boolean;
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
- declare type Placement =
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
- export {};
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,5 +0,0 @@
1
- /// <reference types="react" />
2
- /**
3
- * Holds the unique identifier for the checkbox group.
4
- */
5
- export declare const CheckboxGroupContext: import("react").Context<string>;
@@ -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,4 +0,0 @@
1
- /// <reference types="react" />
2
- import { FocusableElement } from '../../types';
3
- declare function useRegisterItemWithFocusManager(): import("react").RefObject<FocusableElement>;
4
- export default useRegisterItemWithFocusManager;
@@ -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,2 +0,0 @@
1
- import { FocusableElement } from '../../types';
2
- export default function handleFocus(refs: Array<FocusableElement>): (e: KeyboardEvent) => void;
@@ -1 +0,0 @@
1
- export default function isCheckboxItem(element: HTMLElement): boolean;
@@ -1 +0,0 @@
1
- export default function isCheckboxItem(element: HTMLElement): boolean;
@@ -1,2 +0,0 @@
1
- declare const isVoiceOverSupported: () => boolean;
2
- export default isVoiceOverSupported;