@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.
Files changed (282) hide show
  1. package/Alert.js +3 -3
  2. package/Announcement.js +1 -1
  3. package/Autocomplete.js +216 -243
  4. package/Avatar.js +27 -13
  5. package/BottomNavigation.js +0 -3
  6. package/Checkbox.js +0 -2
  7. package/DatePicker.js +5 -13
  8. package/DateUtilsContext.js +0 -1
  9. package/Dialer.js +2 -50
  10. package/Dialog.js +18 -6
  11. package/Dropdown.js +0 -7
  12. package/FocusTrap.js +0 -32
  13. package/InlineEditable.js +0 -4
  14. package/Link.js +1 -1
  15. package/ListItem.js +1 -1
  16. package/ListNavigation.js +0 -6
  17. package/Menu.js +1 -1
  18. package/MenuDivider.js +2 -2
  19. package/MenuFooter.js +4 -4
  20. package/MenuHeader.js +4 -4
  21. package/MenuItem.js +1 -1
  22. package/MenuItemText.js +1 -1
  23. package/Modal.js +1 -1
  24. package/PageHeader.js +6 -4
  25. package/Popper.js +0 -1
  26. package/Rating.js +0 -5
  27. package/SingleFilter.js +0 -1
  28. package/Slider.js +1 -4
  29. package/Snackbar.js +0 -14
  30. package/SortableListItem.js +0 -1
  31. package/SplitButton.js +1 -3
  32. package/StatusIndicator.js +1 -1
  33. package/StepButton.js +2 -3
  34. package/StepContent.js +3 -8
  35. package/SubMenu.js +0 -4
  36. package/SwipeableDrawer.js +37 -162
  37. package/Switch.js +1 -4
  38. package/Tab.js +7 -8
  39. package/TabContext.js +0 -5
  40. package/TableBody.js +1 -1
  41. package/TableCell.js +0 -6
  42. package/TableRow.js +2 -4
  43. package/Tabs.js +22 -121
  44. package/Text.js +2 -4
  45. package/TimePicker.js +7 -46
  46. package/VirtualizedList.js +6 -39
  47. package/VirtualizedMenu.js +1 -1
  48. package/chunks/Alert.js +8 -7
  49. package/chunks/BottomNavigationItem.js +0 -1
  50. package/chunks/Button.js +0 -1
  51. package/chunks/Chip.js +0 -5
  52. package/chunks/Drawer.js +1 -30
  53. package/chunks/ListItem.js +3 -6
  54. package/chunks/Menu.js +6 -5
  55. package/chunks/MenuDivider.js +2 -3
  56. package/chunks/MenuItemText.js +3 -3
  57. package/chunks/MenuList.js +3 -6
  58. package/chunks/Modal.js +1 -1
  59. package/chunks/PickerTextField.js +0 -1
  60. package/chunks/Popover.js +0 -5
  61. package/chunks/Select.js +2 -39
  62. package/chunks/Squircle.js +0 -7
  63. package/chunks/StatusIndicator.js +1 -0
  64. package/chunks/StepIcon.js +1 -3
  65. package/chunks/StepperContext.js +0 -7
  66. package/chunks/Tooltip.js +0 -36
  67. package/chunks/VirtualizedMenu.js +45 -99
  68. package/chunks/getFade.js +4 -0
  69. package/chunks/useFocusTrapStack.js +0 -8
  70. package/chunks/useHelperTextId.js +0 -24
  71. package/chunks/useListNavigation.js +5 -17
  72. package/chunks/useMenuItemSelect.js +9 -22
  73. package/chunks/useMotionSafeTransition.js +0 -4
  74. package/chunks/useNestedParentMenu.js +5 -18
  75. package/chunks/usePrefersReducedMotion.js +6 -12
  76. package/chunks/useTooltipForceHide.js +0 -4
  77. package/chunks/useTrayNavigate.js +0 -1
  78. package/index.css +434 -135
  79. package/index.js +1 -1
  80. package/package.json +4 -4
  81. package/src/Accordion/Accordion.d.ts +1 -1
  82. package/src/Accordion/Accordion.type.d.ts +0 -21
  83. package/src/AccordionHeader/AccordionHeader.d.ts +1 -1
  84. package/src/AccordionHeader/AccordionHeader.type.d.ts +0 -14
  85. package/src/Alert/Alert.d.ts +1 -1
  86. package/src/Alert/Alert.type.d.ts +0 -32
  87. package/src/Animation/components/ExpandCollapseCaret/ExpandCollapseCaret.d.ts +0 -4
  88. package/src/Animation/components/ShowHideEye/ShowHideEye.d.ts +0 -4
  89. package/src/Animation/hooks/useMotionSafeTransition/useMotionSafeTransition.d.ts +0 -4
  90. package/src/Autocomplete/Autocomplete.d.ts +0 -5
  91. package/src/Autocomplete/Autocomplete.type.d.ts +0 -84
  92. package/src/Autocomplete/SuggestionList/SuggestionList.d.ts +5 -89
  93. package/src/Autocomplete/SuggestionList/SuggestionListItem.d.ts +0 -2
  94. package/src/Autocomplete/SuggestionList/utils/SuggestionListItem.d.ts +1 -13
  95. package/src/Autocomplete/SuggestionList/utils/useDynamicHeight.d.ts +0 -6
  96. package/src/Autocomplete/SuggestionList/utils/useHighlightScroll.d.ts +4 -23
  97. package/src/Autocomplete/SuggestionList/utils/useSuggestionList.d.ts +3 -41
  98. package/src/Autocomplete/SuggestionList/utils/useSuggestionListGroup.d.ts +0 -49
  99. package/src/Autocomplete/useAutocomplete.d.ts +5 -66
  100. package/src/Autocomplete/useAutocompleteTag.d.ts +3 -36
  101. package/src/Avatar/Avatar.type.d.ts +0 -58
  102. package/src/AvatarGroup/AvatarGroup.type.d.ts +0 -3
  103. package/src/Backdrop/Backdrop.type.d.ts +0 -4
  104. package/src/Badge/Badge.type.d.ts +0 -33
  105. package/src/Block/Block.type.d.ts +0 -24
  106. package/src/BlockHeader/BlockHeader.type.d.ts +0 -5
  107. package/src/BottomNavigation/BottomNavigation.type.d.ts +0 -34
  108. package/src/BottomNavigationItem/BottomNavigationItem.type.d.ts +0 -39
  109. package/src/Button/Button.type.d.ts +0 -30
  110. package/src/CallButton/CallButton.type.d.ts +0 -4
  111. package/src/Checkbox/Checkbox.type.d.ts +0 -17
  112. package/src/Chip/Chip.type.d.ts +0 -41
  113. package/src/CircularProgressIndicator/CircularProgressIndicator.d.ts +1 -1
  114. package/src/CircularProgressIndicator/CircularProgressIndicator.type.d.ts +0 -19
  115. package/src/DatePicker/Calendar.d.ts +1 -20
  116. package/src/DatePicker/DatePicker.type.d.ts +0 -18
  117. package/src/DatePicker/DatePickerHeader.d.ts +1 -12
  118. package/src/DatePicker/Day.d.ts +1 -8
  119. package/src/DatePicker/Year.d.ts +1 -7
  120. package/src/DatePicker/Years.d.ts +0 -7
  121. package/src/Dialer/DialDelete/DialDelete.d.ts +0 -3
  122. package/src/Dialer/DialPad/DialPad.d.ts +0 -106
  123. package/src/Dialer/DialPad/utils/types.d.ts +0 -5
  124. package/src/Dialer/DialPad/utils/useDialKeyboard.d.ts +0 -5
  125. package/src/Dialer/DialPad/utils/useKeyAudio.d.ts +0 -9
  126. package/src/Dialer/DialPadButton/DialPadButton.d.ts +0 -14
  127. package/src/Dialer/DialTextField/DialTextField.d.ts +0 -23
  128. package/src/Dialer/DialTextField/utils/getDialPadValueOnlyRegex.d.ts +0 -3
  129. package/src/Dialer/DialTextField/utils/useFixedEndSelection.d.ts +0 -3
  130. package/src/Dialog/Dialog.classes.d.ts +1 -1
  131. package/src/Dialog/Dialog.d.ts +1 -1
  132. package/src/Dialog/Dialog.type.d.ts +3 -11
  133. package/src/Divider/Divider.type.d.ts +0 -17
  134. package/src/DragHandle/DragHandle.type.d.ts +0 -4
  135. package/src/Drawer/Drawer.d.ts +1 -29
  136. package/src/Drawer/Drawer.type.d.ts +0 -84
  137. package/src/Dropdown/Dropdown.type.d.ts +0 -64
  138. package/src/EmptyState/EmptyState.d.ts +1 -1
  139. package/src/EmptyState/EmptyState.type.d.ts +0 -12
  140. package/src/FabButton/FabButton.type.d.ts +0 -5
  141. package/src/FocusTrap/FocusTrap.d.ts +0 -38
  142. package/src/FocusTrap/useFocusTrapStack.d.ts +0 -9
  143. package/src/FormField/FormField.type.d.ts +0 -26
  144. package/src/FormField/useHelperTextId.d.ts +0 -25
  145. package/src/FormLabel/FormLabel.d.ts +1 -1
  146. package/src/FormLabel/FormLabel.type.d.ts +0 -14
  147. package/src/Icon/Icon.d.ts +1 -1
  148. package/src/Icon/Icon.type.d.ts +0 -15
  149. package/src/IconButton/IconButton.type.d.ts +0 -30
  150. package/src/IconButton/IconButtonLabel.d.ts +1 -1
  151. package/src/IconButton/IconButtonLabel.type.d.ts +0 -3
  152. package/src/IconButtonGroup/IconButtonGroup.type.d.ts +0 -8
  153. package/src/InlineEditable/InlineEditable.type.d.ts +0 -75
  154. package/src/LinearProgressIndicator/LinearProgressIndicator.type.d.ts +0 -31
  155. package/src/Link/Link.classes.d.ts +1 -1
  156. package/src/Link/Link.type.d.ts +1 -10
  157. package/src/ListItem/ListItem.type.d.ts +0 -41
  158. package/src/ListItemText/ListItemText.d.ts +1 -1
  159. package/src/ListItemText/ListItemText.type.d.ts +0 -21
  160. package/src/ListNavigation/useListNavigation.d.ts +0 -16
  161. package/src/Menu/Menu.d.ts +1 -1
  162. package/src/Menu/Menu.type.d.ts +0 -10
  163. package/src/MenuFooter/MenuFooter.type.d.ts +0 -4
  164. package/src/MenuHeader/MenuHeader.type.d.ts +0 -10
  165. package/src/MenuItem/MenuItem.d.ts +1 -1
  166. package/src/MenuItem/MenuItem.type.d.ts +0 -19
  167. package/src/MenuItem/MenuItemSelectContext.d.ts +0 -3
  168. package/src/MenuItem/useMenuItemSelect.d.ts +0 -21
  169. package/src/MenuItemText/MenuItemText.d.ts +1 -1
  170. package/src/MenuItemText/MenuItemText.type.d.ts +0 -17
  171. package/src/MenuList/MenuList.type.d.ts +0 -4
  172. package/src/MenuList/MenuListContext.d.ts +0 -6
  173. package/src/Modal/InnerModal.d.ts +2 -2
  174. package/src/Modal/InnerModal.type.d.ts +0 -5
  175. package/src/Modal/Modal.classes.d.ts +1 -1
  176. package/src/Modal/Modal.d.ts +3 -3
  177. package/src/Modal/Modal.type.d.ts +0 -11
  178. package/src/Modal/ModalContext.d.ts +0 -4
  179. package/src/NestedMenuContext/NestedMenuContext.d.ts +1 -1
  180. package/src/Option/Option.d.ts +1 -1
  181. package/src/Option/Option.type.d.ts +0 -3
  182. package/src/Overlap/Overlap.type.d.ts +0 -11
  183. package/src/PageHeader/PageHeader.type.d.ts +0 -4
  184. package/src/PickerTextField/PickerTextField.type.d.ts +0 -10
  185. package/src/Popover/Popover.d.ts +1 -1
  186. package/src/Popover/Popover.type.d.ts +0 -29
  187. package/src/Popper/Popper.d.ts +1 -1
  188. package/src/Popper/Popper.type.d.ts +0 -61
  189. package/src/PopperPaper/PopperPaper.d.ts +1 -1
  190. package/src/Radio/Radio.type.d.ts +0 -5
  191. package/src/RadioGroup/RadioGroup.d.ts +1 -1
  192. package/src/RadioGroup/RadioGroup.type.d.ts +0 -4
  193. package/src/Rating/Rating.d.ts +1 -1
  194. package/src/Rating/Rating.type.d.ts +0 -74
  195. package/src/Rating/RatingItem.d.ts +1 -1
  196. package/src/Select/Select.type.d.ts +0 -84
  197. package/src/SingleFilter/FilterButton/FilterButton.d.ts +1 -1
  198. package/src/SingleFilter/FilterButton/FilterButton.type.d.ts +0 -16
  199. package/src/SingleFilter/SingleFilter.d.ts +1 -1
  200. package/src/SingleFilter/SingleFilter.type.d.ts +0 -26
  201. package/src/Skeleton/Skeleton.type.d.ts +0 -1
  202. package/src/Skeleton/SkeletonContainer/SkeletonContainer.classes.d.ts +1 -1
  203. package/src/Slider/Slider.classes.d.ts +1 -5
  204. package/src/Slider/Slider.d.ts +2 -2
  205. package/src/Slider/Slider.type.d.ts +0 -104
  206. package/src/Snackbar/Snackbar.type.d.ts +0 -18
  207. package/src/SortableListItem/SortableListItemOverlay.d.ts +1 -1
  208. package/src/SplitButton/SplitButton.d.ts +1 -1
  209. package/src/SplitButton/SplitButton.type.d.ts +0 -21
  210. package/src/Squircle/Squircle.type.d.ts +0 -3
  211. package/src/StatusIndicator/StatusIndicator.classes.d.ts +1 -1
  212. package/src/StatusIndicator/StatusIndicator.type.d.ts +1 -9
  213. package/src/Step/Step.type.d.ts +0 -29
  214. package/src/Step/StepContext.d.ts +0 -7
  215. package/src/StepButton/StepButton.type.d.ts +0 -15
  216. package/src/StepContent/StepContent.d.ts +1 -1
  217. package/src/StepContent/StepContent.type.d.ts +0 -7
  218. package/src/StepIcon/StepIcon.type.d.ts +0 -26
  219. package/src/StepLabel/StepLabel.d.ts +1 -1
  220. package/src/StepLabel/StepLabel.type.d.ts +0 -23
  221. package/src/Stepper/Stepper.type.d.ts +0 -27
  222. package/src/SubMenu/PopperMenu.d.ts +1 -1
  223. package/src/SubMenu/SubMenu.d.ts +1 -1
  224. package/src/SwipeableDrawer/SwipeableDrawer.d.ts +1 -27
  225. package/src/SwipeableDrawer/SwipeableDrawer.types.d.ts +0 -67
  226. package/src/SwipeableDrawer/hooks/useDrawerGestures.d.ts +0 -110
  227. package/src/SwipeableDrawer/hooks/useElementSizeObserver.d.ts +0 -5
  228. package/src/SwipeableDrawer/hooks/useSnapPoints.d.ts +0 -60
  229. package/src/Switch/Switch.type.d.ts +0 -9
  230. package/src/Tab/Tab.classes.d.ts +3 -2
  231. package/src/Tab/Tab.d.ts +1 -1
  232. package/src/Tab/Tab.type.d.ts +0 -29
  233. package/src/TabContext/TabContext.d.ts +0 -4
  234. package/src/TabContext/TabContext.type.d.ts +0 -7
  235. package/src/TabPanel/TabPanel.d.ts +1 -1
  236. package/src/TabPanel/TabPanel.type.d.ts +0 -10
  237. package/src/Table/Table.type.d.ts +0 -19
  238. package/src/TableBody/TableBody.type.d.ts +0 -3
  239. package/src/TableCell/TableCell.d.ts +0 -4
  240. package/src/TableCell/TableCell.type.d.ts +0 -35
  241. package/src/TableContainer/TableContainer.type.d.ts +0 -7
  242. package/src/TableFooter/TableFooter.type.d.ts +0 -3
  243. package/src/TableHead/TableHead.type.d.ts +0 -6
  244. package/src/TablePagination/TablePagination.type.d.ts +0 -47
  245. package/src/TableRow/TableRow.type.d.ts +0 -17
  246. package/src/Tabs/TabMoreMenu.d.ts +0 -16
  247. package/src/Tabs/TabScrollButton.d.ts +1 -11
  248. package/src/Tabs/Tabs.classes.d.ts +1 -1
  249. package/src/Tabs/Tabs.d.ts +1 -1
  250. package/src/Tabs/Tabs.type.d.ts +2 -36
  251. package/src/Tabs/TabsContext.d.ts +2 -0
  252. package/src/Tabs/hooks/useTabsScroller.d.ts +0 -30
  253. package/src/Tag/Tag.d.ts +1 -1
  254. package/src/Tag/Tag.type.d.ts +0 -12
  255. package/src/Text/Text.type.d.ts +0 -13
  256. package/src/TextField/TextField.type.d.ts +0 -64
  257. package/src/Textarea/Textarea.d.ts +1 -1
  258. package/src/Textarea/Textarea.type.d.ts +0 -13
  259. package/src/TimePicker/NumberPicker.d.ts +1 -1
  260. package/src/TimePicker/NumberPicker.type.d.ts +0 -12
  261. package/src/TimePicker/SelectionView.d.ts +0 -6
  262. package/src/TimePicker/TimeButton.d.ts +1 -4
  263. package/src/TimePicker/TimePicker.type.d.ts +0 -11
  264. package/src/TimePicker/ToggleText.d.ts +1 -1
  265. package/src/TimePicker/ToggleText.type.d.ts +0 -3
  266. package/src/TimePicker/utils/TimeBoundary.d.ts +0 -3
  267. package/src/TimePicker/utils/TimePickerHelper.d.ts +0 -19
  268. package/src/TimePicker/utils/getNumberPickerBoundary.d.ts +0 -3
  269. package/src/Tooltip/TooltipTrigger.a11y.d.ts +0 -9
  270. package/src/Tooltip/TooltipTrigger.type.d.ts +0 -44
  271. package/src/Tooltip/TooltipView.type.d.ts +0 -25
  272. package/src/Tooltip/useTooltipForceHide.d.ts +0 -4
  273. package/src/Tray/Tray.d.ts +1 -1
  274. package/src/Tray/Tray.type.d.ts +0 -13
  275. package/src/Tray/TrayContext.d.ts +0 -4
  276. package/src/Tray/hooks/useTray.d.ts +0 -16
  277. package/src/Tray/hooks/useTrayPanel.d.ts +0 -3
  278. package/src/TrayMenu/TrayMenu.d.ts +1 -1
  279. package/src/TrayMenu/TrayMenuItem.d.ts +1 -1
  280. package/src/VirtualizedList/VirtualizedList.type.d.ts +0 -27
  281. package/src/VirtualizedMenu/VirtualizedMenu.classes.d.ts +1 -1
  282. 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>>;
@@ -1,4 +1 @@
1
- /**
2
- * return regex with only allow dialPad value `1234567890*+#-`
3
- */
4
1
  export declare function getDialPadValueOnlyRegex(): RegExp;
@@ -1,7 +1,4 @@
1
1
  import { KeyboardEvent } from 'react';
2
- /**
3
- * bind with ref, let input can always focus at end of latest character
4
- */
5
2
  export declare const useFixedEndSelection: () => {
6
3
  ref: import("react").RefObject<HTMLInputElement>;
7
4
  onFocus: () => void;
@@ -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';
@@ -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" | "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}` | "placement" | "open" | "disableRestoreFocus" | "disableAutoFocus" | "disableEnforceFocus" | "hideBackdrop" | "disableBackdropClick" | "onBackdropClick" | "disableEscapeKeyDown" | "onEscapeKeyDown" | "onClose" | "backdropProps" | "blocking" | "motionProps" | "disablePortal" | "onExitComplete" | "disableBackdropAnimation" | "disableScrollLock" | "bodyProps"> & import("react").RefAttributes<HTMLDivElement>>;
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>;
@@ -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 {