@ringcentral/spring-ui 1.7.0 → 1.9.0
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/Alert.js +3 -3
- package/Announcement.js +1 -1
- package/Autocomplete.js +216 -243
- package/Avatar.js +27 -13
- package/BottomNavigation.js +0 -3
- package/Checkbox.js +0 -2
- package/DatePicker.js +5 -13
- package/DateUtilsContext.js +0 -1
- package/Dialer.js +2 -50
- package/Dialog.js +18 -6
- package/Dropdown.js +0 -7
- package/FocusTrap.js +0 -32
- package/InlineEditable.js +0 -4
- package/Link.js +1 -1
- package/ListItem.js +1 -1
- package/ListNavigation.js +0 -6
- package/Menu.js +1 -1
- package/MenuDivider.js +2 -2
- package/MenuFooter.js +4 -4
- package/MenuHeader.js +4 -4
- package/MenuItem.js +1 -1
- package/MenuItemText.js +1 -1
- package/Modal.js +1 -1
- package/PageHeader.js +6 -4
- package/Popper.js +0 -1
- package/Rating.js +0 -5
- package/SingleFilter.js +0 -1
- package/Slider.js +1 -4
- package/Snackbar.js +0 -14
- package/SortableListItem.js +0 -1
- package/SplitButton.js +1 -3
- package/StatusIndicator.js +1 -1
- package/StepButton.js +2 -3
- package/StepContent.js +3 -8
- package/SubMenu.js +0 -4
- package/SwipeableDrawer.js +37 -162
- package/Switch.js +1 -4
- package/Tab.js +7 -8
- package/TabContext.js +0 -5
- package/TableBody.js +1 -1
- package/TableCell.js +0 -6
- package/TableRow.js +2 -4
- package/Tabs.js +22 -121
- package/Text.js +2 -4
- package/TimePicker.js +7 -46
- package/VirtualizedList.js +6 -39
- package/VirtualizedMenu.js +1 -1
- package/chunks/Alert.js +8 -7
- package/chunks/BottomNavigationItem.js +0 -1
- package/chunks/Button.js +0 -1
- package/chunks/Chip.js +0 -5
- package/chunks/Drawer.js +1 -30
- package/chunks/ListItem.js +3 -6
- package/chunks/Menu.js +6 -5
- package/chunks/MenuDivider.js +2 -3
- package/chunks/MenuItemText.js +3 -3
- package/chunks/MenuList.js +3 -6
- package/chunks/Modal.js +1 -1
- package/chunks/PickerTextField.js +0 -1
- package/chunks/Popover.js +0 -5
- package/chunks/Select.js +2 -39
- package/chunks/Squircle.js +0 -7
- package/chunks/StatusIndicator.js +1 -0
- package/chunks/StepIcon.js +1 -3
- package/chunks/StepperContext.js +0 -7
- package/chunks/Tooltip.js +0 -36
- package/chunks/VirtualizedMenu.js +45 -99
- package/chunks/getFade.js +4 -0
- package/chunks/useFocusTrapStack.js +0 -8
- package/chunks/useHelperTextId.js +0 -24
- package/chunks/useListNavigation.js +5 -17
- package/chunks/useMenuItemSelect.js +9 -22
- package/chunks/useMotionSafeTransition.js +0 -4
- package/chunks/useNestedParentMenu.js +5 -18
- package/chunks/usePrefersReducedMotion.js +6 -12
- package/chunks/useTooltipForceHide.js +0 -4
- package/chunks/useTrayNavigate.js +0 -1
- package/index.css +434 -135
- package/index.js +1 -1
- package/package.json +4 -4
- package/src/Accordion/Accordion.d.ts +1 -1
- package/src/Accordion/Accordion.type.d.ts +0 -21
- package/src/AccordionHeader/AccordionHeader.d.ts +1 -1
- package/src/AccordionHeader/AccordionHeader.type.d.ts +0 -14
- package/src/Alert/Alert.d.ts +1 -1
- package/src/Alert/Alert.type.d.ts +0 -32
- package/src/Animation/components/ExpandCollapseCaret/ExpandCollapseCaret.d.ts +0 -4
- package/src/Animation/components/ShowHideEye/ShowHideEye.d.ts +0 -4
- package/src/Animation/hooks/useMotionSafeTransition/useMotionSafeTransition.d.ts +0 -4
- package/src/Autocomplete/Autocomplete.d.ts +0 -5
- package/src/Autocomplete/Autocomplete.type.d.ts +0 -84
- package/src/Autocomplete/SuggestionList/SuggestionList.d.ts +5 -89
- package/src/Autocomplete/SuggestionList/SuggestionListItem.d.ts +0 -2
- package/src/Autocomplete/SuggestionList/utils/SuggestionListItem.d.ts +1 -13
- package/src/Autocomplete/SuggestionList/utils/useDynamicHeight.d.ts +0 -6
- package/src/Autocomplete/SuggestionList/utils/useHighlightScroll.d.ts +4 -23
- package/src/Autocomplete/SuggestionList/utils/useSuggestionList.d.ts +3 -41
- package/src/Autocomplete/SuggestionList/utils/useSuggestionListGroup.d.ts +0 -49
- package/src/Autocomplete/useAutocomplete.d.ts +5 -66
- package/src/Autocomplete/useAutocompleteTag.d.ts +3 -36
- package/src/Avatar/Avatar.type.d.ts +0 -58
- package/src/AvatarGroup/AvatarGroup.type.d.ts +0 -3
- package/src/Backdrop/Backdrop.type.d.ts +0 -4
- package/src/Badge/Badge.type.d.ts +0 -33
- package/src/Block/Block.type.d.ts +0 -24
- package/src/BlockHeader/BlockHeader.type.d.ts +0 -5
- package/src/BottomNavigation/BottomNavigation.type.d.ts +0 -34
- package/src/BottomNavigationItem/BottomNavigationItem.type.d.ts +0 -39
- package/src/Button/Button.type.d.ts +0 -30
- package/src/CallButton/CallButton.type.d.ts +0 -4
- package/src/Checkbox/Checkbox.type.d.ts +0 -17
- package/src/Chip/Chip.type.d.ts +0 -41
- package/src/CircularProgressIndicator/CircularProgressIndicator.d.ts +1 -1
- package/src/CircularProgressIndicator/CircularProgressIndicator.type.d.ts +0 -19
- package/src/DatePicker/Calendar.d.ts +1 -20
- package/src/DatePicker/DatePicker.type.d.ts +0 -18
- package/src/DatePicker/DatePickerHeader.d.ts +1 -12
- package/src/DatePicker/Day.d.ts +1 -8
- package/src/DatePicker/Year.d.ts +1 -7
- package/src/DatePicker/Years.d.ts +0 -7
- package/src/Dialer/DialDelete/DialDelete.d.ts +0 -3
- package/src/Dialer/DialPad/DialPad.d.ts +0 -106
- package/src/Dialer/DialPad/utils/types.d.ts +0 -5
- package/src/Dialer/DialPad/utils/useDialKeyboard.d.ts +0 -5
- package/src/Dialer/DialPad/utils/useKeyAudio.d.ts +0 -9
- package/src/Dialer/DialPadButton/DialPadButton.d.ts +0 -14
- package/src/Dialer/DialTextField/DialTextField.d.ts +0 -23
- package/src/Dialer/DialTextField/utils/getDialPadValueOnlyRegex.d.ts +0 -3
- package/src/Dialer/DialTextField/utils/useFixedEndSelection.d.ts +0 -3
- package/src/Dialog/Dialog.classes.d.ts +1 -1
- package/src/Dialog/Dialog.d.ts +1 -1
- package/src/Dialog/Dialog.type.d.ts +3 -11
- package/src/Divider/Divider.type.d.ts +0 -17
- package/src/DragHandle/DragHandle.type.d.ts +0 -4
- package/src/Drawer/Drawer.d.ts +1 -29
- package/src/Drawer/Drawer.type.d.ts +0 -84
- package/src/Dropdown/Dropdown.type.d.ts +0 -64
- package/src/EmptyState/EmptyState.d.ts +1 -1
- package/src/EmptyState/EmptyState.type.d.ts +0 -12
- package/src/FabButton/FabButton.type.d.ts +0 -5
- package/src/FocusTrap/FocusTrap.d.ts +0 -38
- package/src/FocusTrap/useFocusTrapStack.d.ts +0 -9
- package/src/FormField/FormField.type.d.ts +0 -26
- package/src/FormField/useHelperTextId.d.ts +0 -25
- package/src/FormLabel/FormLabel.d.ts +1 -1
- package/src/FormLabel/FormLabel.type.d.ts +0 -14
- package/src/Icon/Icon.d.ts +1 -1
- package/src/Icon/Icon.type.d.ts +0 -15
- package/src/IconButton/IconButton.type.d.ts +0 -30
- package/src/IconButton/IconButtonLabel.d.ts +1 -1
- package/src/IconButton/IconButtonLabel.type.d.ts +0 -3
- package/src/IconButtonGroup/IconButtonGroup.type.d.ts +0 -8
- package/src/InlineEditable/InlineEditable.type.d.ts +0 -75
- package/src/LinearProgressIndicator/LinearProgressIndicator.type.d.ts +0 -31
- package/src/Link/Link.classes.d.ts +1 -1
- package/src/Link/Link.type.d.ts +1 -10
- package/src/ListItem/ListItem.type.d.ts +0 -41
- package/src/ListItemText/ListItemText.d.ts +1 -1
- package/src/ListItemText/ListItemText.type.d.ts +0 -21
- package/src/ListNavigation/useListNavigation.d.ts +0 -16
- package/src/Menu/Menu.d.ts +1 -1
- package/src/Menu/Menu.type.d.ts +0 -10
- package/src/MenuFooter/MenuFooter.type.d.ts +0 -4
- package/src/MenuHeader/MenuHeader.type.d.ts +0 -10
- package/src/MenuItem/MenuItem.d.ts +1 -1
- package/src/MenuItem/MenuItem.type.d.ts +0 -19
- package/src/MenuItem/MenuItemSelectContext.d.ts +0 -3
- package/src/MenuItem/useMenuItemSelect.d.ts +0 -21
- package/src/MenuItemText/MenuItemText.d.ts +1 -1
- package/src/MenuItemText/MenuItemText.type.d.ts +0 -17
- package/src/MenuList/MenuList.type.d.ts +0 -4
- package/src/MenuList/MenuListContext.d.ts +0 -6
- package/src/Modal/InnerModal.d.ts +2 -2
- package/src/Modal/InnerModal.type.d.ts +0 -5
- package/src/Modal/Modal.classes.d.ts +1 -1
- package/src/Modal/Modal.d.ts +3 -3
- package/src/Modal/Modal.type.d.ts +0 -11
- package/src/Modal/ModalContext.d.ts +0 -4
- package/src/NestedMenuContext/NestedMenuContext.d.ts +1 -1
- package/src/Option/Option.d.ts +1 -1
- package/src/Option/Option.type.d.ts +0 -3
- package/src/Overlap/Overlap.type.d.ts +0 -11
- package/src/PageHeader/PageHeader.type.d.ts +0 -4
- package/src/PickerTextField/PickerTextField.type.d.ts +0 -10
- package/src/Popover/Popover.d.ts +1 -1
- package/src/Popover/Popover.type.d.ts +0 -29
- package/src/Popper/Popper.d.ts +1 -1
- package/src/Popper/Popper.type.d.ts +0 -61
- package/src/PopperPaper/PopperPaper.d.ts +1 -1
- package/src/Radio/Radio.type.d.ts +0 -5
- package/src/RadioGroup/RadioGroup.d.ts +1 -1
- package/src/RadioGroup/RadioGroup.type.d.ts +0 -4
- package/src/Rating/Rating.d.ts +1 -1
- package/src/Rating/Rating.type.d.ts +0 -74
- package/src/Rating/RatingItem.d.ts +1 -1
- package/src/Select/Select.type.d.ts +0 -84
- package/src/SingleFilter/FilterButton/FilterButton.d.ts +1 -1
- package/src/SingleFilter/FilterButton/FilterButton.type.d.ts +0 -16
- package/src/SingleFilter/SingleFilter.d.ts +1 -1
- package/src/SingleFilter/SingleFilter.type.d.ts +0 -26
- package/src/Skeleton/Skeleton.type.d.ts +0 -1
- package/src/Skeleton/SkeletonContainer/SkeletonContainer.classes.d.ts +1 -1
- package/src/Slider/Slider.classes.d.ts +1 -5
- package/src/Slider/Slider.d.ts +2 -2
- package/src/Slider/Slider.type.d.ts +0 -104
- package/src/Snackbar/Snackbar.type.d.ts +0 -18
- package/src/SortableListItem/SortableListItemOverlay.d.ts +1 -1
- package/src/SplitButton/SplitButton.d.ts +1 -1
- package/src/SplitButton/SplitButton.type.d.ts +0 -21
- package/src/Squircle/Squircle.type.d.ts +0 -3
- package/src/StatusIndicator/StatusIndicator.classes.d.ts +1 -1
- package/src/StatusIndicator/StatusIndicator.type.d.ts +1 -9
- package/src/Step/Step.type.d.ts +0 -29
- package/src/Step/StepContext.d.ts +0 -7
- package/src/StepButton/StepButton.type.d.ts +0 -15
- package/src/StepContent/StepContent.d.ts +1 -1
- package/src/StepContent/StepContent.type.d.ts +0 -7
- package/src/StepIcon/StepIcon.type.d.ts +0 -26
- package/src/StepLabel/StepLabel.d.ts +1 -1
- package/src/StepLabel/StepLabel.type.d.ts +0 -23
- package/src/Stepper/Stepper.type.d.ts +0 -27
- package/src/SubMenu/PopperMenu.d.ts +1 -1
- package/src/SubMenu/SubMenu.d.ts +1 -1
- package/src/SwipeableDrawer/SwipeableDrawer.d.ts +1 -27
- package/src/SwipeableDrawer/SwipeableDrawer.types.d.ts +0 -67
- package/src/SwipeableDrawer/hooks/useDrawerGestures.d.ts +0 -110
- package/src/SwipeableDrawer/hooks/useElementSizeObserver.d.ts +0 -5
- package/src/SwipeableDrawer/hooks/useSnapPoints.d.ts +0 -60
- package/src/Switch/Switch.type.d.ts +0 -9
- package/src/Tab/Tab.classes.d.ts +3 -2
- package/src/Tab/Tab.d.ts +1 -1
- package/src/Tab/Tab.type.d.ts +0 -29
- package/src/TabContext/TabContext.d.ts +0 -4
- package/src/TabContext/TabContext.type.d.ts +0 -7
- package/src/TabPanel/TabPanel.d.ts +1 -1
- package/src/TabPanel/TabPanel.type.d.ts +0 -10
- package/src/Table/Table.type.d.ts +0 -19
- package/src/TableBody/TableBody.type.d.ts +0 -3
- package/src/TableCell/TableCell.d.ts +0 -4
- package/src/TableCell/TableCell.type.d.ts +0 -35
- package/src/TableContainer/TableContainer.type.d.ts +0 -7
- package/src/TableFooter/TableFooter.type.d.ts +0 -3
- package/src/TableHead/TableHead.type.d.ts +0 -6
- package/src/TablePagination/TablePagination.type.d.ts +0 -47
- package/src/TableRow/TableRow.type.d.ts +0 -17
- package/src/Tabs/TabMoreMenu.d.ts +0 -16
- package/src/Tabs/TabScrollButton.d.ts +1 -11
- package/src/Tabs/Tabs.classes.d.ts +1 -1
- package/src/Tabs/Tabs.d.ts +1 -1
- package/src/Tabs/Tabs.type.d.ts +2 -36
- package/src/Tabs/TabsContext.d.ts +2 -0
- package/src/Tabs/hooks/useTabsScroller.d.ts +0 -30
- package/src/Tag/Tag.d.ts +1 -1
- package/src/Tag/Tag.type.d.ts +0 -12
- package/src/Text/Text.type.d.ts +0 -13
- package/src/TextField/TextField.type.d.ts +0 -64
- package/src/Textarea/Textarea.d.ts +1 -1
- package/src/Textarea/Textarea.type.d.ts +0 -13
- package/src/TimePicker/NumberPicker.d.ts +1 -1
- package/src/TimePicker/NumberPicker.type.d.ts +0 -12
- package/src/TimePicker/SelectionView.d.ts +0 -6
- package/src/TimePicker/TimeButton.d.ts +1 -4
- package/src/TimePicker/TimePicker.type.d.ts +0 -11
- package/src/TimePicker/ToggleText.d.ts +1 -1
- package/src/TimePicker/ToggleText.type.d.ts +0 -3
- package/src/TimePicker/utils/TimeBoundary.d.ts +0 -3
- package/src/TimePicker/utils/TimePickerHelper.d.ts +0 -19
- package/src/TimePicker/utils/getNumberPickerBoundary.d.ts +0 -3
- package/src/Tooltip/TooltipTrigger.a11y.d.ts +0 -9
- package/src/Tooltip/TooltipTrigger.type.d.ts +0 -44
- package/src/Tooltip/TooltipView.type.d.ts +0 -25
- package/src/Tooltip/useTooltipForceHide.d.ts +0 -4
- package/src/Tray/Tray.d.ts +1 -1
- package/src/Tray/Tray.type.d.ts +0 -13
- package/src/Tray/TrayContext.d.ts +0 -4
- package/src/Tray/hooks/useTray.d.ts +0 -16
- package/src/Tray/hooks/useTrayPanel.d.ts +0 -3
- package/src/TrayMenu/TrayMenu.d.ts +1 -1
- package/src/TrayMenu/TrayMenuItem.d.ts +1 -1
- package/src/VirtualizedList/VirtualizedList.type.d.ts +0 -27
- package/src/VirtualizedMenu/VirtualizedMenu.classes.d.ts +1 -1
- package/src/VirtualizedMenu/VirtualizedMenu.type.d.ts +0 -17
|
@@ -6,137 +6,31 @@ import dialPadStyle from './styles/DialPad.css';
|
|
|
6
6
|
import type { DIALER_PAD_ICON_VALUES, DialPadAction, DialPadControl, DialPadSoundMap } from './utils';
|
|
7
7
|
declare type DialPadOnChangeReason = UseLongPressEventReason | 'customKeyboard';
|
|
8
8
|
declare type DialPadProps = {
|
|
9
|
-
/**
|
|
10
|
-
* trigger when value change, `reason` for trigger from what event
|
|
11
|
-
*
|
|
12
|
-
* `reason` will be `customKeyboard` when it trigger by `useDiaKeyboard`.
|
|
13
|
-
*/
|
|
14
9
|
onChange?: (value: string, reason: DialPadOnChangeReason) => void;
|
|
15
|
-
/**
|
|
16
|
-
* keypad sounds
|
|
17
|
-
*
|
|
18
|
-
* By default, we not have any sound for best file size for you can define when and what audio you need
|
|
19
|
-
* should pass sound map when you want play sound.
|
|
20
|
-
*
|
|
21
|
-
* @example
|
|
22
|
-
*
|
|
23
|
-
* ```ts
|
|
24
|
-
* import { DialerPadSoundsMPEG } from '@ringcentral/spring-ui';
|
|
25
|
-
* import { DialerPadSoundsOGG } from '@ringcentral/spring-ui';
|
|
26
|
-
* ```
|
|
27
|
-
*/
|
|
28
10
|
sounds?: DialPadSoundMap;
|
|
29
|
-
/** volume of keypad sound */
|
|
30
11
|
volume?: number;
|
|
31
|
-
/** is keypad sound muted */
|
|
32
12
|
muted?: boolean;
|
|
33
|
-
/**
|
|
34
|
-
* sinkId of keypad sound
|
|
35
|
-
*
|
|
36
|
-
* @important
|
|
37
|
-
* Safari is not supported the `setSinkId` method
|
|
38
|
-
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId#browser_compatibility
|
|
39
|
-
*/
|
|
40
13
|
sinkId?: string;
|
|
41
|
-
/**
|
|
42
|
-
* long press '0' time to typing '+'
|
|
43
|
-
*
|
|
44
|
-
* @default 1000ms
|
|
45
|
-
*/
|
|
46
14
|
longPressDelay?: number;
|
|
47
|
-
/**
|
|
48
|
-
* time of persist button background when manual trigger by 'actionRef'
|
|
49
|
-
* button background will not persist if persistBgTime less than 0
|
|
50
|
-
* @default 200
|
|
51
|
-
* */
|
|
52
15
|
persistBgTime?: number;
|
|
53
|
-
/**
|
|
54
|
-
* make that dialPad size auto fixed container width
|
|
55
|
-
*
|
|
56
|
-
* @default true
|
|
57
|
-
*/
|
|
58
16
|
autoSize?: boolean;
|
|
59
|
-
/** can manual trigger audio by ref */
|
|
60
17
|
action?: Ref<DialPadAction>;
|
|
61
|
-
/**
|
|
62
|
-
* control inner action,
|
|
63
|
-
* ### you should use with `useDialKeyboard`
|
|
64
|
-
*/
|
|
65
18
|
control?: Ref<DialPadControl>;
|
|
66
|
-
/** method to get addition props for below each `DialPadButton` */
|
|
67
19
|
getDialPadButtonProps?: (value: DIALER_PAD_ICON_VALUES) => Omit<IconButtonProps, 'value' | 'onKeyDown' | 'onFocus'> & HTMLDataAttribute;
|
|
68
|
-
/**
|
|
69
|
-
* size of dialPad
|
|
70
|
-
*
|
|
71
|
-
* @default 'large'
|
|
72
|
-
*/
|
|
73
20
|
size?: 'large' | 'medium';
|
|
74
21
|
} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & Pick<DialPadButtonProps, 'classes'>;
|
|
75
22
|
declare const DialPad: import("react").ForwardRefExoticComponent<{
|
|
76
|
-
/**
|
|
77
|
-
* trigger when value change, `reason` for trigger from what event
|
|
78
|
-
*
|
|
79
|
-
* `reason` will be `customKeyboard` when it trigger by `useDiaKeyboard`.
|
|
80
|
-
*/
|
|
81
23
|
onChange?: ((value: string, reason: DialPadOnChangeReason) => void) | undefined;
|
|
82
|
-
/**
|
|
83
|
-
* keypad sounds
|
|
84
|
-
*
|
|
85
|
-
* By default, we not have any sound for best file size for you can define when and what audio you need
|
|
86
|
-
* should pass sound map when you want play sound.
|
|
87
|
-
*
|
|
88
|
-
* @example
|
|
89
|
-
*
|
|
90
|
-
* ```ts
|
|
91
|
-
* import { DialerPadSoundsMPEG } from '@ringcentral/spring-ui';
|
|
92
|
-
* import { DialerPadSoundsOGG } from '@ringcentral/spring-ui';
|
|
93
|
-
* ```
|
|
94
|
-
*/
|
|
95
24
|
sounds?: DialPadSoundMap | undefined;
|
|
96
|
-
/** volume of keypad sound */
|
|
97
25
|
volume?: number | undefined;
|
|
98
|
-
/** is keypad sound muted */
|
|
99
26
|
muted?: boolean | undefined;
|
|
100
|
-
/**
|
|
101
|
-
* sinkId of keypad sound
|
|
102
|
-
*
|
|
103
|
-
* @important
|
|
104
|
-
* Safari is not supported the `setSinkId` method
|
|
105
|
-
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId#browser_compatibility
|
|
106
|
-
*/
|
|
107
27
|
sinkId?: string | undefined;
|
|
108
|
-
/**
|
|
109
|
-
* long press '0' time to typing '+'
|
|
110
|
-
*
|
|
111
|
-
* @default 1000ms
|
|
112
|
-
*/
|
|
113
28
|
longPressDelay?: number | undefined;
|
|
114
|
-
/**
|
|
115
|
-
* time of persist button background when manual trigger by 'actionRef'
|
|
116
|
-
* button background will not persist if persistBgTime less than 0
|
|
117
|
-
* @default 200
|
|
118
|
-
* */
|
|
119
29
|
persistBgTime?: number | undefined;
|
|
120
|
-
/**
|
|
121
|
-
* make that dialPad size auto fixed container width
|
|
122
|
-
*
|
|
123
|
-
* @default true
|
|
124
|
-
*/
|
|
125
30
|
autoSize?: boolean | undefined;
|
|
126
|
-
/** can manual trigger audio by ref */
|
|
127
31
|
action?: Ref<DialPadAction> | undefined;
|
|
128
|
-
/**
|
|
129
|
-
* control inner action,
|
|
130
|
-
* ### you should use with `useDialKeyboard`
|
|
131
|
-
*/
|
|
132
32
|
control?: Ref<DialPadControl> | undefined;
|
|
133
|
-
/** method to get addition props for below each `DialPadButton` */
|
|
134
33
|
getDialPadButtonProps?: ((value: DIALER_PAD_ICON_VALUES) => Omit<IconButtonProps, 'value' | 'onKeyDown' | 'onFocus'> & HTMLDataAttribute) | undefined;
|
|
135
|
-
/**
|
|
136
|
-
* size of dialPad
|
|
137
|
-
*
|
|
138
|
-
* @default 'large'
|
|
139
|
-
*/
|
|
140
34
|
size?: "medium" | "large" | undefined;
|
|
141
35
|
} & Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & Pick<DialPadButtonProps, "classes"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
142
36
|
export type { DialPadAction, DialPadOnChangeReason, DialPadProps };
|
|
@@ -1,11 +1,6 @@
|
|
|
1
1
|
export declare type DialPadAction = {
|
|
2
|
-
/**
|
|
3
|
-
* play key audio
|
|
4
|
-
* @returns return false if key isn't acceptable
|
|
5
|
-
*/
|
|
6
2
|
playAudio: (key: string) => false | Promise<void>;
|
|
7
3
|
};
|
|
8
|
-
/** inner props ref, should prevent import that directly */
|
|
9
4
|
export declare type DialPadControl = {
|
|
10
5
|
handleKeyboardEffect: (value: string, isKeyup: boolean) => void;
|
|
11
6
|
};
|
|
@@ -4,11 +4,6 @@ export declare type UseDialKeyboard<E extends KeyboardEvent | React.KeyboardEven
|
|
|
4
4
|
onKeyDown?: (e: E) => void;
|
|
5
5
|
onKeyUp?: (e: E) => void;
|
|
6
6
|
};
|
|
7
|
-
/**
|
|
8
|
-
* Provide you can get event apply on trigger events area
|
|
9
|
-
* @param options onKeyDown, onKeyUp that you also want apply on target
|
|
10
|
-
* @returns onKeyDown, onKeyUp, control
|
|
11
|
-
*/
|
|
12
7
|
export declare const useDialKeyboard: <E extends KeyboardEvent | import("react").KeyboardEvent<any> = import("react").KeyboardEvent<any>>({ onKeyDown: onKeyDownArg, onKeyUp: onKeyUpArg, }?: UseDialKeyboard<E>) => {
|
|
13
8
|
onKeyDown: (e: E) => void;
|
|
14
9
|
onKeyUp: (e: E) => void;
|
|
@@ -1,15 +1,6 @@
|
|
|
1
1
|
import { DialPadSoundMap } from './DialPadUtils';
|
|
2
2
|
export declare type UseKeyAudioOptions = {
|
|
3
3
|
sounds?: DialPadSoundMap;
|
|
4
|
-
/**
|
|
5
|
-
* custom audio process, you can custom audio process when you want to custom audio process
|
|
6
|
-
*/
|
|
7
4
|
processor?: (audio: HTMLAudioElement) => void;
|
|
8
5
|
};
|
|
9
|
-
/**
|
|
10
|
-
* Custom hook that handles playing audio for key presses in a dial pad.
|
|
11
|
-
*
|
|
12
|
-
* @param audioOption - The audio options for configuring the hook.
|
|
13
|
-
* @returns A function that plays the audio for a given key.
|
|
14
|
-
*/
|
|
15
6
|
export declare const useKeyAudio: ({ sounds, processor }: UseKeyAudioOptions) => (key: string) => false | Promise<void>;
|
|
@@ -3,24 +3,10 @@ import { IconButtonProps } from '../../IconButton';
|
|
|
3
3
|
import { DialPadOnChangeReason } from '../DialPad';
|
|
4
4
|
import dialPadButtonStyle from './styles/DialPadButton.css';
|
|
5
5
|
export declare type DialPadButtonProps = {
|
|
6
|
-
/** output value when press */
|
|
7
6
|
value: string;
|
|
8
|
-
/** output value when long press */
|
|
9
7
|
longPressValue?: string;
|
|
10
|
-
/**
|
|
11
|
-
* time for long press delay trigger
|
|
12
|
-
*
|
|
13
|
-
* @default 1000ms
|
|
14
|
-
*/
|
|
15
8
|
longPressDelay?: number;
|
|
16
|
-
/** emit effect when trigger number enter */
|
|
17
9
|
onKeyEffect?: (value: string, reason: DialPadOnChangeReason) => void;
|
|
18
|
-
/**
|
|
19
|
-
* the inner icon size of the Icon container
|
|
20
|
-
*
|
|
21
|
-
* - medium: `32.25%`;
|
|
22
|
-
* - large: `64.5%`;
|
|
23
|
-
*/
|
|
24
10
|
iconSize?: 'medium' | 'large';
|
|
25
11
|
} & Omit<IconButtonProps, 'color'>;
|
|
26
12
|
declare const DialPadButton: FunctionComponent<DialPadButtonProps>;
|
|
@@ -2,34 +2,11 @@
|
|
|
2
2
|
import { TextFieldProps } from '../../TextField';
|
|
3
3
|
import { DialPadOnChangeReason } from '../DialPad';
|
|
4
4
|
declare type DialTextFieldProps = {
|
|
5
|
-
/** for custom window */
|
|
6
5
|
externalWindow?: Window;
|
|
7
|
-
/** current value */
|
|
8
6
|
value: string;
|
|
9
|
-
/** emit when value change */
|
|
10
7
|
onChange(value: string): unknown;
|
|
11
|
-
/**
|
|
12
|
-
* emit latest trigger value, that will be helpful when you in `keypadMode`, and `onlyAllowKeypadValue`
|
|
13
|
-
* `reason` for trigger from what event
|
|
14
|
-
*/
|
|
15
8
|
onEmit?: (value: string, reason: DialPadOnChangeReason) => void;
|
|
16
|
-
/**
|
|
17
|
-
* only allow keypad value 1234567890*+#
|
|
18
|
-
*
|
|
19
|
-
* will be enable when `keypadMode` is true by default
|
|
20
|
-
*/
|
|
21
9
|
onlyAllowKeypadValue?: boolean;
|
|
22
|
-
/**
|
|
23
|
-
* is that in keypad mode, keypad mode
|
|
24
|
-
*
|
|
25
|
-
* 1. only dialer keypad key can be typing 1234567890*+#
|
|
26
|
-
* 2. can't select text
|
|
27
|
-
* 3. can't delete text
|
|
28
|
-
* 4. can't change cursor position
|
|
29
|
-
* 5. keep focus position in the latest
|
|
30
|
-
* 6. non maxLength
|
|
31
|
-
* 7. when pasting a value into a TextField, the sounds emit one by one at 300ms intervals and trigger `onEmit` when intervals done.
|
|
32
|
-
*/
|
|
33
10
|
keypadMode?: boolean;
|
|
34
11
|
} & Omit<TextFieldProps, 'onChange' | 'value' | 'onClear' | 'clearBtn'>;
|
|
35
12
|
declare const DialTextField: import("react").ForwardRefExoticComponent<Pick<DialTextFieldProps, "error" | "value" | "onKeyDown" | "onKeyUp" | "onClick" | "disabled" | "label" | "classes" | "focused" | "required" | "className" | "id" | "defaultValue" | "placeholder" | "readOnly" | "size" | "type" | "externalWindow" | "onFocus" | "onBlur" | "onChange" | "helperText" | "FormHelperTextProps" | "variant" | "fullWidth" | "autoFocus" | "inputProps" | "inputRef" | "endAdornment" | "startAdornment" | "RootProps" | "useNativeClearBtn" | "clearText" | "showCharacterCount" | "ClearButtonProps" | "inputComponent" | "showMaskValueToggleButton" | "maskValue" | "onMaskValueChange" | "MaskValueButtonProps" | "ShowHideEyeIconProps" | "onEmit" | "onlyAllowKeypadValue" | "keypadMode"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -2,7 +2,7 @@ import type { CamelCase, KebabCase } from 'type-fest';
|
|
|
2
2
|
import type { DialogPlacement, DialogSize } from './Dialog.type';
|
|
3
3
|
export declare type DialogSizeClasses = KebabCase<DialogSize>;
|
|
4
4
|
declare type DialogSlot = 'close-button';
|
|
5
|
-
export declare type BaseDialogClassesKey = 'root' | 'body' | DialogSizeClasses | DialogPlacement | DialogSlot | `${DialogPlacement}-${DialogSlot}`;
|
|
5
|
+
export declare type BaseDialogClassesKey = 'root' | 'body' | 'non-blocking' | DialogSizeClasses | DialogPlacement | DialogSlot | `${DialogPlacement}-${DialogSlot}`;
|
|
6
6
|
export declare type DialogClassesKey = CamelCase<BaseDialogClassesKey>;
|
|
7
7
|
export declare type DialogClasses = {
|
|
8
8
|
name: 'dialog';
|
package/src/Dialog/Dialog.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { DialogProps } from './Dialog.type';
|
|
3
3
|
import dialogStyle from './styles/Dialog.css';
|
|
4
|
-
declare const Dialog: import("react").ForwardRefExoticComponent<Pick<DialogProps, "children" | "onKeyDown" | "onKeyUp" | "onClick" | "aria-hidden" | "dir" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "placeholder" | "size" | "container" | "isEnabled" | "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "
|
|
4
|
+
declare const Dialog: import("react").ForwardRefExoticComponent<Pick<DialogProps, "children" | "onKeyDown" | "onKeyUp" | "onMouseDown" | "onClick" | "aria-hidden" | "dir" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "placeholder" | "size" | "container" | "isEnabled" | "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | `data-${string}` | "placement" | "open" | "blocking" | "disableRestoreFocus" | "disableAutoFocus" | "disableEnforceFocus" | "hideBackdrop" | "disableBackdropClick" | "onBackdropClick" | "disableEscapeKeyDown" | "onEscapeKeyDown" | "onClose" | "backdropProps" | "motionProps" | "disablePortal" | "onExitComplete" | "disableBackdropAnimation" | "disableScrollLock" | "CloseButtonProps" | "bodyProps"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
5
5
|
declare const DialogTitle: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>>;
|
|
6
6
|
declare const DialogContent: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>>;
|
|
7
7
|
declare const DialogActions: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,26 +1,18 @@
|
|
|
1
1
|
import { ComponentPropsWithRef, ReactNode, SyntheticEvent } from 'react';
|
|
2
2
|
import { GroupedMotionProps, HTMLDataAttribute, StandardProps } from '@ringcentral/spring-base';
|
|
3
|
+
import { IconButtonProps } from '../IconButton';
|
|
3
4
|
import { Modal, ModalCloseReason } from '../Modal';
|
|
4
5
|
import { DialogClassesKey } from './Dialog.classes';
|
|
5
6
|
export declare type DialogSize = 'small' | 'medium' | 'large' | 'fullHeight' | 'fullScreen';
|
|
6
7
|
export declare type DialogPlacement = 'left' | 'right';
|
|
7
8
|
export declare type DialogCloseReason = ModalCloseReason | 'closeButtonClick';
|
|
8
9
|
export declare type DialogProps = StandardProps<{
|
|
9
|
-
/**
|
|
10
|
-
* The size of the dialog.
|
|
11
|
-
* @default "medium"
|
|
12
|
-
*/
|
|
13
10
|
size?: DialogSize;
|
|
14
|
-
/**
|
|
15
|
-
* The placement of the dialog. Only applies to size `fullHeight`.
|
|
16
|
-
* @default "right"
|
|
17
|
-
*/
|
|
18
11
|
placement?: DialogPlacement;
|
|
19
|
-
/**
|
|
20
|
-
* The props passed to the body slot of body.
|
|
21
|
-
*/
|
|
22
12
|
bodyProps?: GroupedMotionProps<ComponentPropsWithRef<'div'> & HTMLDataAttribute>;
|
|
13
|
+
blocking?: boolean;
|
|
23
14
|
open: boolean;
|
|
24
15
|
onClose?: (event: SyntheticEvent<HTMLElement | HTMLButtonElement>, reason: DialogCloseReason) => void;
|
|
25
16
|
children?: ReactNode;
|
|
17
|
+
CloseButtonProps?: IconButtonProps;
|
|
26
18
|
}, DialogClassesKey, typeof Modal>;
|
|
@@ -5,26 +5,9 @@ declare type ExtendElementType = 'hr' | 'li' | 'div';
|
|
|
5
5
|
export declare type DividerVariant = 'full' | 'middle';
|
|
6
6
|
export declare type DividerOrientation = 'horizontal' | 'vertical';
|
|
7
7
|
declare type BaseDividerProps = WithClassesProps<{
|
|
8
|
-
/**
|
|
9
|
-
* @default 'full'
|
|
10
|
-
*/
|
|
11
8
|
variant?: DividerVariant;
|
|
12
|
-
/**
|
|
13
|
-
* @default 'horizontal'
|
|
14
|
-
*/
|
|
15
9
|
orientation?: DividerOrientation;
|
|
16
|
-
/**
|
|
17
|
-
* The title of the Divider. Only used for horizontal Dividers.
|
|
18
|
-
* Make sure to pass an `after:bg-color` className.
|
|
19
|
-
*/
|
|
20
10
|
title?: string;
|
|
21
|
-
/**
|
|
22
|
-
* If true, a vertical divider will have the correct height when used in flex container.
|
|
23
|
-
* (By default, a vertical divider will have a calculated height of 0px
|
|
24
|
-
* if it is the child of a flex container.)
|
|
25
|
-
*
|
|
26
|
-
* @default false
|
|
27
|
-
*/
|
|
28
11
|
flexItem?: boolean;
|
|
29
12
|
}, DividerClassesKey>;
|
|
30
13
|
export declare type DividerProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseDividerProps, T>;
|
|
@@ -3,10 +3,6 @@ import { DragHandleClassesKey } from './DragHandle.classes';
|
|
|
3
3
|
declare type DefaultElementType = 'div';
|
|
4
4
|
export declare type DragHandleAnchor = 'top' | 'bottom';
|
|
5
5
|
declare type BaseDragHandleProps = WithClassesProps<{
|
|
6
|
-
/**
|
|
7
|
-
* The anchor position to determine handle orientation
|
|
8
|
-
* @default 'top'
|
|
9
|
-
*/
|
|
10
6
|
anchor?: DragHandleAnchor;
|
|
11
7
|
}, DragHandleClassesKey>;
|
|
12
8
|
export declare type DragHandleProps<T extends DefaultElementType = DefaultElementType> = OverridableProps<BaseDragHandleProps, T>;
|
package/src/Drawer/Drawer.d.ts
CHANGED
|
@@ -1,33 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { DrawerProps } from './Drawer.type';
|
|
3
3
|
import drawerStyles from './styles/Drawer.css';
|
|
4
|
-
|
|
5
|
-
* Drawer Component - Base drawer without gesture support
|
|
6
|
-
*
|
|
7
|
-
* A clean, lightweight drawer component that provides basic modal/slide functionality.
|
|
8
|
-
* For gesture support, use SwipeableDrawer which builds on top of this component.
|
|
9
|
-
*
|
|
10
|
-
* @example
|
|
11
|
-
* ```tsx
|
|
12
|
-
* // Simple navigation drawer
|
|
13
|
-
* <Drawer
|
|
14
|
-
* open={open}
|
|
15
|
-
* onClose={onClose}
|
|
16
|
-
* anchor="left"
|
|
17
|
-
* variant="temporary"
|
|
18
|
-
* >
|
|
19
|
-
* <Navigation />
|
|
20
|
-
* </Drawer>
|
|
21
|
-
*
|
|
22
|
-
* // Bottom sheet without gestures
|
|
23
|
-
* <Drawer
|
|
24
|
-
* open={open}
|
|
25
|
-
* onClose={onClose}
|
|
26
|
-
* anchor="bottom"
|
|
27
|
-
* >
|
|
28
|
-
* <Content />
|
|
29
|
-
* </Drawer>
|
|
30
|
-
* ```
|
|
31
|
-
*/
|
|
32
|
-
declare const Drawer: import("react").ForwardRefExoticComponent<Pick<DrawerProps, "children" | "onKeyDown" | "onKeyUp" | "onClick" | "aria-hidden" | "dir" | "footer" | "header" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "anchor" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "placeholder" | "container" | "isEnabled" | "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | `data-${string}` | "variant" | "open" | "disableRestoreFocus" | "disableAutoFocus" | "disableEnforceFocus" | "hideBackdrop" | "disableBackdropClick" | "onBackdropClick" | "disableEscapeKeyDown" | "onEscapeKeyDown" | "onClose" | "backdropProps" | "blocking" | "motionProps" | "disablePortal" | "onExitComplete" | "disableBackdropAnimation" | "disableScrollLock" | "bodyProps" | "measurementRefs" | "headerProps"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
4
|
+
declare const Drawer: import("react").ForwardRefExoticComponent<Pick<DrawerProps, "children" | "onKeyDown" | "onKeyUp" | "onMouseDown" | "onClick" | "aria-hidden" | "dir" | "footer" | "header" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "anchor" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "placeholder" | "container" | "isEnabled" | "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | `data-${string}` | "variant" | "open" | "blocking" | "disableRestoreFocus" | "disableAutoFocus" | "disableEnforceFocus" | "hideBackdrop" | "disableBackdropClick" | "onBackdropClick" | "disableEscapeKeyDown" | "onEscapeKeyDown" | "onClose" | "backdropProps" | "motionProps" | "disablePortal" | "onExitComplete" | "disableBackdropAnimation" | "disableScrollLock" | "bodyProps" | "measurementRefs" | "headerProps"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
33
5
|
export { Drawer, drawerStyles };
|
|
@@ -2,106 +2,22 @@ import { ComponentPropsWithRef, ReactNode } from 'react';
|
|
|
2
2
|
import { GroupedMotionProps, HTMLDataAttribute, StandardProps } from '@ringcentral/spring-base';
|
|
3
3
|
import { Modal, ModalCloseReason } from '../Modal';
|
|
4
4
|
import { DrawerClassesKey } from './Drawer.classes';
|
|
5
|
-
/**
|
|
6
|
-
* @fileoverview Drawer component types and interfaces
|
|
7
|
-
*
|
|
8
|
-
* **Note**: All types are compatible with both `Drawer` and `SwipeableDrawer` components.
|
|
9
|
-
*/
|
|
10
|
-
/**
|
|
11
|
-
* Side from which the drawer will slide in and anchor to.
|
|
12
|
-
*/
|
|
13
5
|
export declare type DrawerAnchor = 'bottom' | 'left' | 'right' | 'top';
|
|
14
|
-
/**
|
|
15
|
-
* Drawer behavior variant.
|
|
16
|
-
*
|
|
17
|
-
* - **'temporary'**: Drawer overlays content with backdrop, closes on outside click
|
|
18
|
-
*/
|
|
19
6
|
export declare type DrawerVariant = 'temporary';
|
|
20
7
|
export declare type DrawerCloseReason = ModalCloseReason;
|
|
21
8
|
export declare type DrawerProps = StandardProps<{
|
|
22
|
-
/**
|
|
23
|
-
* Side from which the drawer will slide in and anchor to.
|
|
24
|
-
|
|
25
|
-
* @default 'left'
|
|
26
|
-
*/
|
|
27
9
|
anchor?: DrawerAnchor;
|
|
28
|
-
/**
|
|
29
|
-
* Controls whether the drawer is open or closed.
|
|
30
|
-
*/
|
|
31
10
|
open: boolean;
|
|
32
|
-
/**
|
|
33
|
-
* Main content of the drawer. This is the scrollable area between header and footer.
|
|
34
|
-
*/
|
|
35
11
|
children?: ReactNode;
|
|
36
|
-
/**
|
|
37
|
-
* Header content displayed at the top of the drawer.
|
|
38
|
-
*
|
|
39
|
-
* **Important**: With SwipeableDrawer, the header becomes the drag handle.
|
|
40
|
-
*
|
|
41
|
-
* @default undefined
|
|
42
|
-
*/
|
|
43
12
|
header?: ReactNode;
|
|
44
|
-
/**
|
|
45
|
-
* Footer content displayed at the bottom of the drawer.
|
|
46
|
-
*
|
|
47
|
-
* @default undefined
|
|
48
|
-
*/
|
|
49
13
|
footer?: ReactNode;
|
|
50
|
-
/**
|
|
51
|
-
* Props passed to the main drawer body container.
|
|
52
|
-
*/
|
|
53
14
|
bodyProps?: GroupedMotionProps<ComponentPropsWithRef<'div'> & HTMLDataAttribute>;
|
|
54
|
-
/**
|
|
55
|
-
* Drawer behavior variant.
|
|
56
|
-
*
|
|
57
|
-
* - **'temporary'**: Overlays content, closes on backdrop click, traps focus
|
|
58
|
-
*
|
|
59
|
-
* @default 'temporary'
|
|
60
|
-
*/
|
|
61
15
|
variant?: DrawerVariant;
|
|
62
|
-
/**
|
|
63
|
-
* Controls whether the drawer blocks interaction with the rest of the page.
|
|
64
|
-
*
|
|
65
|
-
* **When true (default)**:
|
|
66
|
-
* - Focus is trapped inside drawer
|
|
67
|
-
* - Page scrolling is disabled
|
|
68
|
-
* - Backdrop clicks close drawer
|
|
69
|
-
* - ESC key closes drawer
|
|
70
|
-
* - Screen readers announce modal
|
|
71
|
-
*
|
|
72
|
-
* **When false**:
|
|
73
|
-
* - Users can interact with page content
|
|
74
|
-
* - No focus trapping
|
|
75
|
-
* - No scroll locking
|
|
76
|
-
*
|
|
77
|
-
* @default true
|
|
78
|
-
*/
|
|
79
16
|
blocking?: boolean;
|
|
80
|
-
/**
|
|
81
|
-
* Internal measurement refs used by SwipeableDrawer.
|
|
82
|
-
*
|
|
83
|
-
* @internal
|
|
84
|
-
*/
|
|
85
17
|
measurementRefs?: {
|
|
86
|
-
/**
|
|
87
|
-
* ref for the header element for measurements.
|
|
88
|
-
*/
|
|
89
18
|
header?: React.RefObject<HTMLDivElement>;
|
|
90
|
-
/**
|
|
91
|
-
* ref for the footer element for measurements.
|
|
92
|
-
*/
|
|
93
19
|
footer?: React.RefObject<HTMLDivElement>;
|
|
94
|
-
/**
|
|
95
|
-
* ref for the content element for gesture measurements.
|
|
96
|
-
* Points specifically to the content area for precise content height measurement.
|
|
97
|
-
* The gesture system needs to measure content height separately.
|
|
98
|
-
*/
|
|
99
20
|
content?: React.RefObject<HTMLDivElement>;
|
|
100
21
|
};
|
|
101
|
-
/**
|
|
102
|
-
* Additional props to apply to the header element for gesture binding.
|
|
103
|
-
*
|
|
104
|
-
* @internal
|
|
105
|
-
*/
|
|
106
22
|
headerProps?: React.HTMLAttributes<HTMLDivElement>;
|
|
107
23
|
}, DrawerClassesKey, typeof Modal>;
|
|
@@ -4,90 +4,26 @@ import { VirtualizedMenuProps } from '../VirtualizedMenu';
|
|
|
4
4
|
import { MenuProps } from '../Menu';
|
|
5
5
|
import { DropdownClassesKey } from './Dropdown.classes';
|
|
6
6
|
export declare type DropdownProps<T = string, D = unknown> = StandardProps<{
|
|
7
|
-
/**
|
|
8
|
-
* The default selected value. Use when the component is uncontrolled.
|
|
9
|
-
*/
|
|
10
7
|
defaultValue?: T | null;
|
|
11
|
-
/**
|
|
12
|
-
* The selected value.
|
|
13
|
-
* Set to `null` to deselect all options.
|
|
14
|
-
*/
|
|
15
8
|
value?: T | null;
|
|
16
|
-
/**
|
|
17
|
-
* Callback fired when an option is selected.
|
|
18
|
-
*/
|
|
19
9
|
onChange?: (value: T | null) => void;
|
|
20
|
-
/**
|
|
21
|
-
* Text to show when there is no selected value.
|
|
22
|
-
*/
|
|
23
10
|
placeholder?: ReactNode;
|
|
24
|
-
/**
|
|
25
|
-
* props applied to root
|
|
26
|
-
*/
|
|
27
11
|
rootProps?: Omit<ComponentProps<'div'>, 'className' | 'ref'> & HTMLDataAttribute;
|
|
28
|
-
/**
|
|
29
|
-
* props applied to button
|
|
30
|
-
*/
|
|
31
12
|
buttonProps?: Omit<ComponentPropsWithRef<'button'>, 'className'> & HTMLDataAttribute & Pick<UseFocusVisibleOptions, 'onFocusVisible'>;
|
|
32
|
-
/**
|
|
33
|
-
* props applied to menu
|
|
34
|
-
*/
|
|
35
13
|
MenuProps?: (Omit<VirtualizedMenuProps, 'open' | 'anchorEl' | 'onClose' | 'initialFocus' | 'data' | 'children'> | Omit<MenuProps, 'open' | 'anchorEl' | 'onClose' | 'children'>) & HTMLDataAttribute;
|
|
36
14
|
ref?: Ref<HTMLDivElement>;
|
|
37
15
|
buttonRef?: Ref<HTMLButtonElement>;
|
|
38
|
-
/**
|
|
39
|
-
* When enabled, the menu items will be rendered in a virtualized list.
|
|
40
|
-
* Set this prop to `true` when you have a large number of options to render.
|
|
41
|
-
* Please note that this prop will default to `false` in the next major version.
|
|
42
|
-
* @default true
|
|
43
|
-
*/
|
|
44
16
|
virtualize?: boolean;
|
|
45
|
-
/**
|
|
46
|
-
* Render the selected value.
|
|
47
|
-
*
|
|
48
|
-
* @param value The `value` provided to the component.
|
|
49
|
-
* @returns {ReactNode}
|
|
50
|
-
*/
|
|
51
17
|
renderValue?: (value: T) => React.ReactNode;
|
|
52
|
-
/**
|
|
53
|
-
* If `true`, the select element is focused during the first mount
|
|
54
|
-
* @default false
|
|
55
|
-
*/
|
|
56
18
|
autoFocus?: boolean;
|
|
57
|
-
/**
|
|
58
|
-
* If `true`, the select is disabled.
|
|
59
|
-
* @default false
|
|
60
|
-
*/
|
|
61
19
|
disabled?: boolean;
|
|
62
|
-
/**
|
|
63
|
-
* If `true`, the select will be initially open.
|
|
64
|
-
* @default false
|
|
65
|
-
*/
|
|
66
20
|
defaultOpen?: boolean;
|
|
67
|
-
/**
|
|
68
|
-
* Controls the open state of the select's menu.
|
|
69
|
-
* @default undefined
|
|
70
|
-
*/
|
|
71
21
|
open?: boolean;
|
|
72
|
-
/**
|
|
73
|
-
* Name of the element. For example used by the server to identify the fields in form submits.
|
|
74
|
-
* If the name is provided, the component will render a hidden input element that can be submitted to a server.
|
|
75
|
-
*/
|
|
76
22
|
name?: string;
|
|
77
|
-
/**
|
|
78
|
-
* Callback fired when the component requests to be opened.
|
|
79
|
-
*/
|
|
80
23
|
onOpenChange?: (isOpen: boolean) => void;
|
|
81
|
-
/**
|
|
82
|
-
* label for component
|
|
83
|
-
*/
|
|
84
24
|
label?: string;
|
|
85
25
|
data: D[];
|
|
86
26
|
children: ReactNode | VirtualizedMenuProps['children'];
|
|
87
|
-
/**
|
|
88
|
-
* Get selected item index to focus item when open dropdown.
|
|
89
|
-
* If no provide this handler, will compare value with `data` by default.
|
|
90
|
-
*/
|
|
91
27
|
getSelectedIndex?: (value: T) => number;
|
|
92
28
|
}, DropdownClassesKey>;
|
|
93
29
|
export interface DropdownComponent {
|