@ringcentral/spring-ui 1.11.2 → 1.13.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 (241) hide show
  1. package/Accordion.js +90 -34
  2. package/AccordionHeader.js +72 -20
  3. package/Alert.js +120 -28
  4. package/Animation.js +2 -45
  5. package/Announcement.js +46 -35
  6. package/Autocomplete.js +1011 -580
  7. package/Avatar.js +134 -73
  8. package/AvatarGroup.js +50 -7
  9. package/Backdrop.js +45 -7
  10. package/Badge.js +77 -15
  11. package/Block.js +34 -12
  12. package/BlockHeader.js +55 -11
  13. package/BottomNavigation.js +181 -65
  14. package/BottomNavigationItem.js +93 -30
  15. package/Button.js +160 -24
  16. package/CallButton.js +53 -31
  17. package/Checkbox.js +88 -26
  18. package/Chip.js +126 -26
  19. package/CircularProgressIndicator.js +80 -8
  20. package/ClickAwayListener.js +4 -1
  21. package/ComponentsProps.js +1 -0
  22. package/DatePicker.js +611 -190
  23. package/DateUtilsContext.js +43 -25
  24. package/Dialer.js +576 -250
  25. package/Dialog.js +100 -45
  26. package/Divider.js +43 -7
  27. package/DragHandle.js +32 -6
  28. package/Drawer.js +117 -19
  29. package/Dropdown.js +154 -74
  30. package/EmptyState.js +63 -11
  31. package/FabButton.js +51 -17
  32. package/FocusTrap.js +109 -12
  33. package/FormField.js +106 -8
  34. package/FormLabel.js +81 -7
  35. package/Icon.js +1 -8
  36. package/IconButton.js +142 -26
  37. package/IconButtonGroup.js +35 -12
  38. package/InlineEditable.js +98 -44
  39. package/LinearProgressIndicator.js +73 -24
  40. package/Link.js +40 -11
  41. package/List.js +54 -9
  42. package/ListItem.js +152 -23
  43. package/ListItemText.js +44 -16
  44. package/ListNavigation.js +272 -20
  45. package/Menu.js +139 -23
  46. package/MenuActions.js +37 -12
  47. package/MenuDivider.js +34 -8
  48. package/MenuFooter.js +36 -12
  49. package/MenuHeader.js +54 -15
  50. package/MenuItem.js +402 -33
  51. package/MenuItemText.js +51 -8
  52. package/MenuList.js +87 -34
  53. package/Modal.js +345 -16
  54. package/NestedMenuContext.js +183 -11
  55. package/Option.js +32 -34
  56. package/Overlap.js +54 -7
  57. package/PageHeader.js +62 -24
  58. package/PickerTextField.js +156 -33
  59. package/Popover.js +262 -21
  60. package/Popper.js +130 -77
  61. package/PopperPaper.js +54 -8
  62. package/Portal.js +6 -1
  63. package/Radio.js +65 -21
  64. package/RadioGroup.js +56 -17
  65. package/Rating.js +223 -87
  66. package/Select.js +387 -41
  67. package/SingleFilter.js +148 -77
  68. package/Skeleton.js +68 -17
  69. package/Slider.js +168 -69
  70. package/Snackbar.js +122 -59
  71. package/SortableList.js +32 -12
  72. package/SortableListDndContext.js +69 -22
  73. package/SortableListItem.js +92 -47
  74. package/SortableVirtualizedList.js +52 -28
  75. package/SplitButton.js +124 -86
  76. package/Squircle.js +4 -7
  77. package/StatusIndicator.js +51 -9
  78. package/Step.js +63 -38
  79. package/StepButton.js +51 -23
  80. package/StepConnector.js +48 -8
  81. package/StepContent.js +68 -25
  82. package/StepIcon.js +90 -9
  83. package/StepLabel.js +90 -14
  84. package/Stepper.js +65 -23
  85. package/SubMenu.js +203 -99
  86. package/SwipeableDrawer.js +439 -194
  87. package/Switch.js +70 -23
  88. package/Tab.js +120 -57
  89. package/TabContext.js +59 -15
  90. package/TabPanel.js +40 -13
  91. package/Table.js +60 -17
  92. package/TableBody.js +42 -12
  93. package/TableCell.js +84 -50
  94. package/TableContainer.js +32 -10
  95. package/TableFooter.js +38 -10
  96. package/TableHead.js +49 -15
  97. package/TablePagination.js +153 -77
  98. package/TableRow.js +60 -21
  99. package/Tabs.js +593 -268
  100. package/Tag.js +51 -16
  101. package/Text.js +68 -37
  102. package/TextField.js +209 -29
  103. package/Textarea.js +51 -40
  104. package/TimePicker.js +490 -230
  105. package/Tooltip.js +48 -23
  106. package/Tray.js +237 -13
  107. package/TrayMenu.js +62 -41
  108. package/VirtualizedList.js +208 -109
  109. package/VirtualizedMenu.js +359 -29
  110. package/VisuallyHidden.js +29 -6
  111. package/chunks/1250.js +98 -0
  112. package/chunks/1294.js +126 -0
  113. package/chunks/2956.js +18 -0
  114. package/chunks/4476.js +460 -0
  115. package/chunks/4491.js +10 -0
  116. package/chunks/4535.js +364 -0
  117. package/chunks/5047.js +3 -0
  118. package/chunks/6335.js +24 -0
  119. package/chunks/7279.js +10 -0
  120. package/chunks/8011.js +8 -0
  121. package/chunks/8307.js +56 -0
  122. package/chunks/8467.js +8 -0
  123. package/chunks/8809.js +8 -0
  124. package/chunks/{RadioGroup.context.js → 9551.js} +12 -6
  125. package/chunks/987.js +8 -0
  126. package/index.css +2624 -2416
  127. package/index.js +245 -193
  128. package/internal/utils/index.d.ts +1 -0
  129. package/internal/utils/setRef.d.ts +2 -0
  130. package/package.json +8 -8
  131. package/src/Alert/Alert.type.d.ts +2 -1
  132. package/src/Animation/components/Fade/Fade.d.ts +4 -2
  133. package/src/Animation/components/Grow/Grow.d.ts +4 -2
  134. package/src/Animation/components/ShowHideEye/ShowHideEye.d.ts +1 -1
  135. package/src/Animation/components/SlideIn/SlideIn.d.ts +4 -2
  136. package/src/Animation/components/SlideIn/getSlideIn.d.ts +1 -1
  137. package/src/Animation/hooks/useMotionSafeTransition/useMotionSafeTransition.d.ts +2 -0
  138. package/src/Autocomplete/SuggestionList/SuggestionList.d.ts +1 -1
  139. package/src/Autocomplete/useAutocomplete.d.ts +18 -18
  140. package/src/Autocomplete/useAutocompleteTag.d.ts +18 -18
  141. package/src/Badge/Badge.d.ts +2 -1
  142. package/src/Button/Button.classes.d.ts +1 -1
  143. package/src/ComponentsProps.d.ts +111 -110
  144. package/src/DatePicker/DatePickerDataAttributes.d.ts +11 -0
  145. package/src/DatePicker/utils/DatePickerAriaLabelUtils.d.ts +2 -1
  146. package/src/DatePicker/utils/DatePickerUtils.d.ts +1 -1
  147. package/src/Dialer/DialDelete/DialDelete.d.ts +2 -2
  148. package/src/Dialer/DialPad/DialPad.d.ts +2 -2
  149. package/src/Dialer/Dialer.d.ts +4 -2
  150. package/src/Dropdown/Dropdown.type.d.ts +2 -2
  151. package/src/InlineEditable/InlineEditable.type.d.ts +2 -1
  152. package/src/ListNavigation/useListNavigation.d.ts +3 -3
  153. package/src/MenuActions/MenuActions.d.ts +2 -2
  154. package/src/MenuItem/MenuItem.type.d.ts +1 -0
  155. package/src/MenuItem/useMenuItem.d.ts +1 -1
  156. package/src/MenuItem/useVirtualizedMenuItem.d.ts +1 -1
  157. package/src/MenuList/MenuList.type.d.ts +1 -1
  158. package/src/MenuList/MenuListContext.d.ts +2 -3
  159. package/src/Modal/Modal.type.d.ts +1 -0
  160. package/src/NestedMenuContext/MenuOverlayGroupContext.d.ts +2 -2
  161. package/src/Popover/Popover.classes.d.ts +1 -1
  162. package/src/Popover/Popover.internal.d.ts +8 -0
  163. package/src/Popover/Popover.type.d.ts +1 -0
  164. package/src/Popper/Popper.type.d.ts +10 -7
  165. package/src/Rating/utils.d.ts +3 -2
  166. package/src/Select/Select.type.d.ts +7 -5
  167. package/src/Slider/Slider.d.ts +2 -2
  168. package/src/Slider/SliderThumb.d.ts +2 -1
  169. package/src/Squircle/Squircle.d.ts +1 -1
  170. package/src/StatusIndicator/StatusIndicator.d.ts +2 -1
  171. package/src/SubMenu/PopperMenu.type.d.ts +4 -1
  172. package/src/Table/Table.type.d.ts +3 -0
  173. package/src/Table/TableContext.d.ts +3 -0
  174. package/src/Table/TableRowContext.d.ts +7 -0
  175. package/src/Table/index.d.ts +1 -0
  176. package/src/TableCell/TableCell.classes.d.ts +1 -1
  177. package/src/TableFooter/TableFooter.classes.d.ts +1 -1
  178. package/src/TableFooter/TableFooter.type.d.ts +1 -0
  179. package/src/TableHead/TableHead.classes.d.ts +1 -1
  180. package/src/TableHead/TableHead.type.d.ts +1 -0
  181. package/src/TableRow/TableRow.type.d.ts +2 -0
  182. package/chunks/AccordionContext.js +0 -6
  183. package/chunks/Alert.js +0 -48
  184. package/chunks/AvatarGroup.js +0 -22
  185. package/chunks/Backdrop.js +0 -18
  186. package/chunks/Badge.js +0 -32
  187. package/chunks/BottomNavigationItem.js +0 -36
  188. package/chunks/Button.js +0 -88
  189. package/chunks/Chip.js +0 -73
  190. package/chunks/CircularProgressIndicator.js +0 -36
  191. package/chunks/Divider.js +0 -19
  192. package/chunks/DragHandle.js +0 -11
  193. package/chunks/Drawer.js +0 -32
  194. package/chunks/ExpandCollapseCaret.js +0 -24
  195. package/chunks/FormLabel.js +0 -27
  196. package/chunks/Icon.js +0 -25
  197. package/chunks/IconButtonLabel.js +0 -68
  198. package/chunks/List.js +0 -22
  199. package/chunks/ListItem.js +0 -83
  200. package/chunks/Menu.js +0 -61
  201. package/chunks/MenuDivider.js +0 -14
  202. package/chunks/MenuItemText.js +0 -17
  203. package/chunks/MenuList.js +0 -46
  204. package/chunks/Modal.js +0 -212
  205. package/chunks/Overlap.js +0 -25
  206. package/chunks/PickerTextField.js +0 -85
  207. package/chunks/Popover.js +0 -53
  208. package/chunks/PopperPaper.js +0 -15
  209. package/chunks/Select.js +0 -220
  210. package/chunks/ShowHideEye.js +0 -56
  211. package/chunks/SlideIn.js +0 -19
  212. package/chunks/SortableArrow.js +0 -73
  213. package/chunks/Squircle.js +0 -31
  214. package/chunks/StatusIndicator.js +0 -20
  215. package/chunks/StepConnector.js +0 -21
  216. package/chunks/StepIcon.js +0 -43
  217. package/chunks/StepLabel.js +0 -29
  218. package/chunks/StepperContext.js +0 -9
  219. package/chunks/TableContext.js +0 -6
  220. package/chunks/Tablelvl2Context.js +0 -6
  221. package/chunks/TabsContext.js +0 -6
  222. package/chunks/TextField.js +0 -110
  223. package/chunks/Tooltip.js +0 -217
  224. package/chunks/VirtualizedMenu.js +0 -164
  225. package/chunks/VisuallyHidden.js +0 -12
  226. package/chunks/getFade.js +0 -27
  227. package/chunks/getGrow.js +0 -70
  228. package/chunks/getSlideIn.js +0 -30
  229. package/chunks/hasContent.js +0 -3
  230. package/chunks/useAnimationFrame.js +0 -15
  231. package/chunks/useFocusTrapStack.js +0 -36
  232. package/chunks/useHelperTextId.js +0 -22
  233. package/chunks/useListNavigation.js +0 -199
  234. package/chunks/useMenuItemSelect.js +0 -273
  235. package/chunks/useMotionSafeTransition.js +0 -9
  236. package/chunks/useNestedMenuItem.js +0 -27
  237. package/chunks/useNestedParentMenu.js +0 -113
  238. package/chunks/usePrefersReducedMotion.js +0 -36
  239. package/chunks/useTooltipForceHide.js +0 -27
  240. package/chunks/useTrayNavigate.js +0 -150
  241. package/chunks/withTooltip.js +0 -15
package/Slider.js CHANGED
@@ -1,55 +1,66 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { forwardRef } from 'react';
3
- import { motion } from 'framer-motion';
4
- import { useSlider } from '@mui/base';
5
- import { useHover, useClasses, combineProps, useEventCallback } from '@ringcentral/spring-base';
6
- import { useThemeProps, motionTransition } from '@ringcentral/spring-theme';
7
- import './chunks/Icon.js';
8
- import { u as useMotionSafeTransition } from './chunks/useMotionSafeTransition.js';
9
- import { T as Tooltip } from './chunks/Tooltip.js';
10
- import './chunks/usePrefersReducedMotion.js';
11
- import 'clsx';
12
- import './chunks/getFade.js';
13
- import './Popper.js';
14
- import '@floating-ui/react-dom';
15
- import './chunks/Modal.js';
16
- import './chunks/useFocusTrapStack.js';
17
- import './chunks/Backdrop.js';
18
- import './chunks/PopperPaper.js';
19
-
20
- const valueToPercent = (value, min, max) => ((value - min) * 100) / (max - min);
21
-
22
- const Identity = (x) => x;
23
- const SliderThumb = (props) => {
24
- const { value, min, max, axis, axisProps, focusVisible, valueLabelDisplay, valueLabelFormat, valueLabelTooltipProps, orientation, scale = Identity, classes, transition, dragging, 'aria-label': ariaLabel, 'aria-valuetext': ariaValuetext, getThumbProps, getAriaValueText, getHiddenInputProps, index, } = props;
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { forwardRef } from "react";
3
+ import { motion } from "framer-motion";
4
+ import { useSlider } from "@mui/base";
5
+ import { combineProps, useClasses, useEventCallback, useHover } from "@ringcentral/spring-base";
6
+ import { motionTransition, useThemeProps } from "@ringcentral/spring-theme";
7
+ import "./Tooltip.js";
8
+ import "./chunks/4476.js";
9
+ import { Tooltip } from "./chunks/4535.js";
10
+ import { useMotionSafeTransition } from "./chunks/1294.js";
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+ const valueToPercent = (value, min, max)=>(value - min) * 100 / (max - min);
22
+
23
+
24
+
25
+
26
+
27
+
28
+ const Identity = (x)=>x;
29
+ const SliderThumb = (props)=>{
30
+ const { value, min, max, axis, axisProps, focusVisible, valueLabelDisplay, valueLabelFormat, valueLabelTooltipProps, orientation, scale = Identity, classes, transition, dragging, 'aria-label': ariaLabel, 'aria-valuetext': ariaValuetext, getThumbProps, getAriaValueText, getHiddenInputProps, index } = props;
25
31
  const { hover, hoverHandlers } = useHover();
26
32
  const thumbProps = getThumbProps(hoverHandlers);
27
33
  const cls = useClasses('slider', classes);
28
34
  const percent = valueToPercent(value, min, max);
29
35
  const style = axisProps[axis].offset(percent);
30
36
  const scaledValue = scale(value);
31
- const valueLabel = typeof valueLabelFormat === 'function'
32
- ? valueLabelFormat(scaledValue)
33
- : typeof valueLabelFormat === 'string'
34
- ? valueLabelFormat
35
- : scaledValue;
36
- const ariaValueText = getAriaValueText
37
- ? getAriaValueText(scaledValue)
38
- : typeof valueLabelFormat === 'function' ||
39
- typeof valueLabelFormat === 'string'
40
- ? String(valueLabel)
41
- : ariaValuetext;
42
- return (jsxs(motion.div, { className: cls('thumb', `thumb-${orientation}`, {
43
- focusVisible,
44
- }), ...thumbProps, initial: false, animate: style, transition: transition, children: [jsx("span", { className: cls('thumb-inner') }), jsx(Tooltip, { open: valueLabelDisplay === 'on' ||
45
- (valueLabelDisplay === 'auto' && (hover || focusVisible || dragging)), title: valueLabel, ...combineProps({
37
+ // Format value label for tooltip display
38
+ const valueLabel = typeof valueLabelFormat === 'function' ? valueLabelFormat(scaledValue) : typeof valueLabelFormat === 'string' ? valueLabelFormat : scaledValue;
39
+ // Calculate aria-valuetext
40
+ const ariaValueText = getAriaValueText ? getAriaValueText(scaledValue) : typeof valueLabelFormat === 'function' || typeof valueLabelFormat === 'string' ? String(valueLabel) : ariaValuetext;
41
+ return /*#__PURE__*/ jsxs(motion.div, {
42
+ className: cls('thumb', `thumb-${orientation}`, {
43
+ focusVisible
44
+ }),
45
+ ...thumbProps,
46
+ initial: false,
47
+ animate: style,
48
+ transition: transition,
49
+ children: [
50
+ /*#__PURE__*/ jsx("span", {
51
+ className: cls('thumb-inner')
52
+ }),
53
+ /*#__PURE__*/ jsx(Tooltip, {
54
+ open: valueLabelDisplay === 'on' || valueLabelDisplay === 'auto' && (hover || focusVisible || dragging),
55
+ title: valueLabel,
56
+ ...combineProps({
46
57
  placement: orientation === 'vertical' ? 'left' : 'top',
47
58
  className: cls('value-label', {
48
- 'show-on-hover-only': valueLabelDisplay === 'auto',
59
+ 'show-on-hover-only': valueLabelDisplay === 'auto'
49
60
  }),
50
61
  classes: {
51
62
  paper: cls('value-label-paper'),
52
- paperContent: 'justify-center',
63
+ paperContent: 'justify-center'
53
64
  },
54
65
  PopperProps: {
55
66
  disablePortal: true,
@@ -57,51 +68,139 @@ const SliderThumb = (props) => {
57
68
  ancestorScroll: true,
58
69
  ancestorResize: true,
59
70
  elementResize: true,
60
- animationFrame: true,
61
- },
62
- },
63
- }, valueLabelTooltipProps), children: jsx("input", { "data-index": index, role: 'slider', "aria-label": ariaLabel, "aria-valuenow": scale(value), "aria-valuetext": ariaValueText, value: value, ...getHiddenInputProps() }) })] }));
71
+ animationFrame: true
72
+ }
73
+ }
74
+ }, valueLabelTooltipProps),
75
+ children: /*#__PURE__*/ jsx("input", {
76
+ "data-index": index,
77
+ role: 'slider',
78
+ "aria-label": ariaLabel,
79
+ "aria-valuenow": scale(value),
80
+ "aria-valuetext": ariaValueText,
81
+ value: value,
82
+ ...getHiddenInputProps()
83
+ })
84
+ })
85
+ ]
86
+ });
64
87
  };
65
88
  SliderThumb.displayName = 'SuiSliderThumb';
66
89
 
67
- var Slider$1 = {"sui-slider-root":"sui-slider-root","sui-disabled":"sui-disabled","sui-slider-thumb":"sui-slider-thumb","sui-slider-mark":"sui-slider-mark","sui-slider-mark-label":"sui-slider-mark-label","sui-slider-value-label-paper":"sui-slider-value-label-paper","sui-slider-show-color-at-rest":"sui-slider-show-color-at-rest","sui-slider-neutral":"sui-slider-neutral","sui-slider-success":"sui-slider-success","sui-slider-danger":"sui-slider-danger","sui-slider-warning":"sui-slider-warning","sui-slider-horizontal":"sui-slider-horizontal","sui-slider-vertical":"sui-slider-vertical","sui-slider-has-marks":"sui-slider-has-marks","sui-slider-rail":"sui-slider-rail","sui-slider-track":"sui-slider-track","sui-slider-rail-horizontal":"sui-slider-rail-horizontal","sui-slider-rail-vertical":"sui-slider-rail-vertical","sui-slider-track-horizontal":"sui-slider-track-horizontal","sui-slider-track-vertical":"sui-slider-track-vertical","sui-focus-visible":"sui-focus-visible","sui-slider-thumb-horizontal":"sui-slider-thumb-horizontal","sui-slider-thumb-vertical":"sui-slider-thumb-vertical","sui-slider-thumb-inner":"sui-slider-thumb-inner","sui-slider-marks":"sui-slider-marks","sui-slider-marks-horizontal":"sui-slider-marks-horizontal","sui-slider-marks-vertical":"sui-slider-marks-vertical","sui-slider-mark-container":"sui-slider-mark-container","sui-slider-mark-container-horizontal":"sui-slider-mark-container-horizontal","sui-slider-mark-container-vertical":"sui-slider-mark-container-vertical","sui-slider-mark-vertical":"sui-slider-mark-vertical","sui-slider-mark-horizontal":"sui-slider-mark-horizontal"};
68
90
 
69
- const InnerSlider = (inProps, ref) => {
70
- const props = useThemeProps({ props: inProps, name: 'Slider' });
91
+ // extracted by css-extract-rspack-plugin
92
+ /* export default */ var Slider = ({"sui-slider-root":"sui-slider-root","sui-disabled":"sui-disabled","sui-slider-thumb":"sui-slider-thumb","sui-slider-mark":"sui-slider-mark","sui-slider-mark-label":"sui-slider-mark-label","sui-slider-value-label-paper":"sui-slider-value-label-paper","sui-slider-show-color-at-rest":"sui-slider-show-color-at-rest","sui-slider-neutral":"sui-slider-neutral","sui-slider-success":"sui-slider-success","sui-slider-danger":"sui-slider-danger","sui-slider-warning":"sui-slider-warning","sui-slider-horizontal":"sui-slider-horizontal","sui-slider-vertical":"sui-slider-vertical","sui-slider-has-marks":"sui-slider-has-marks","sui-slider-rail":"sui-slider-rail","sui-slider-track":"sui-slider-track","sui-slider-rail-horizontal":"sui-slider-rail-horizontal","sui-slider-rail-vertical":"sui-slider-rail-vertical","sui-slider-track-horizontal":"sui-slider-track-horizontal","sui-slider-track-vertical":"sui-slider-track-vertical","sui-focus-visible":"sui-focus-visible","sui-slider-thumb-horizontal":"sui-slider-thumb-horizontal","sui-slider-thumb-vertical":"sui-slider-thumb-vertical","sui-slider-thumb-inner":"sui-slider-thumb-inner","sui-slider-marks":"sui-slider-marks","sui-slider-marks-horizontal":"sui-slider-marks-horizontal","sui-slider-marks-vertical":"sui-slider-marks-vertical","sui-slider-mark-container":"sui-slider-mark-container","sui-slider-mark-container-horizontal":"sui-slider-mark-container-horizontal","sui-slider-mark-container-vertical":"sui-slider-mark-container-vertical","sui-slider-mark-vertical":"sui-slider-mark-vertical","sui-slider-mark-horizontal":"sui-slider-mark-horizontal"});
93
+
94
+
95
+
96
+
97
+
98
+
99
+
100
+
101
+
102
+
103
+ const InnerSlider = (inProps, ref)=>{
104
+ const props = useThemeProps({
105
+ props: inProps,
106
+ name: 'Slider'
107
+ });
71
108
  const { classes, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-valuetext': ariaValuetext, disabled = false, defaultValue, getAriaValueText, max = 100, min = 0, name, disableSwap, color = 'neutral', marks: marksProp = false, onChange, onChangeCommitted, onMouseDown, scale, step, tabIndex, valueLabelDisplay = 'off', valueLabelFormat, valueLabelTooltipProps, value: valueProp, shiftStep, orientation = 'horizontal', showColorAtRest = false, ...rest } = props;
72
- const handleChange = useEventCallback((event, value, activeThumb) => {
109
+ const handleChange = useEventCallback((event, value, activeThumb)=>{
73
110
  onChange?.(event, value, activeThumb);
74
111
  });
75
- const { dragging, axisProps, getRootProps, getHiddenInputProps, getThumbProps, axis = orientation, focusedThumbIndex, values, trackOffset, trackLeap, marks, } = useSlider({
112
+ const { dragging, axisProps, getRootProps, getHiddenInputProps, getThumbProps, axis = orientation, focusedThumbIndex, values, trackOffset, trackLeap, marks } = useSlider({
76
113
  ...props,
77
114
  onChangeCommitted: onChangeCommitted,
78
115
  marks: marksProp,
79
116
  onChange: handleChange,
80
117
  rootRef: ref,
81
- orientation,
118
+ orientation
82
119
  });
83
120
  const cls = useClasses('slider', classes, className);
84
121
  const hasMarks = marks.length > 0;
85
- const isEmpty = values.every((value) => value === min);
86
- const transition = useMotionSafeTransition(dragging ? motionTransition['instant'] : motionTransition['haste-01-fast']);
87
- return (jsxs("span", { className: cls('root', color, orientation, {
122
+ const hasMarkLabels = marks.some((mark)=>Boolean(mark.label));
123
+ const isEmpty = values.every((value)=>value === min);
124
+ const transition = useMotionSafeTransition(dragging ? motionTransition.instant : motionTransition["haste-01-fast"]);
125
+ return /*#__PURE__*/ jsxs("span", {
126
+ className: cls('root', color, orientation, {
88
127
  disabled,
89
128
  empty: isEmpty,
90
- 'has-marks': hasMarks,
91
- 'show-color-at-rest': showColorAtRest,
92
- }), "aria-disabled": disabled, ...rest, ...getRootProps({
93
- onMouseDown,
94
- }), children: [jsx("span", { className: cls('rail', `rail-${orientation}`) }), jsx(motion.span, { className: cls('track', `track-${orientation}`, {
95
- 'track-empty': isEmpty,
96
- }), initial: false, animate: {
129
+ 'has-marks': hasMarkLabels,
130
+ 'show-color-at-rest': showColorAtRest
131
+ }),
132
+ "aria-disabled": disabled,
133
+ ...rest,
134
+ ...getRootProps({
135
+ onMouseDown
136
+ }),
137
+ children: [
138
+ /*#__PURE__*/ jsx("span", {
139
+ className: cls('rail', `rail-${orientation}`)
140
+ }),
141
+ /*#__PURE__*/ jsx(motion.span, {
142
+ className: cls('track', `track-${orientation}`, {
143
+ 'track-empty': isEmpty
144
+ }),
145
+ initial: false,
146
+ animate: {
97
147
  ...axisProps[axis].offset(trackOffset),
98
- ...axisProps[axis].leap(trackLeap),
99
- }, transition: transition }), values.map((value, index) => (jsx(SliderThumb, { value: value, index: index, min: min, max: max, axis: axis, axisProps: axisProps, focusVisible: focusedThumbIndex === index, dragging: dragging, valueLabelDisplay: valueLabelDisplay, valueLabelFormat: valueLabelFormat, valueLabelTooltipProps: valueLabelTooltipProps, orientation: orientation, scale: scale, classes: classes, transition: transition, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, getThumbProps: getThumbProps, getAriaValueText: getAriaValueText, getHiddenInputProps: getHiddenInputProps }, `value-${index}`))), hasMarks && (jsx("span", { className: cls('marks', `marks-${orientation}`), children: marks.map((mark, index) => {
100
- return (jsxs("span", { "data-index": index, className: cls('mark-container', `mark-container-${orientation}`), style: axisProps[axis].offset(valueToPercent(mark.value, min, max)), children: [jsx("span", { className: cls('mark', `mark-${orientation}`) }), mark.label &&
101
- (typeof mark.label === 'string' ? (jsx("span", { className: cls('mark-label'), children: mark.label })) : (mark.label))] }, `${mark.value}`));
102
- }) }))] }));
148
+ ...axisProps[axis].leap(trackLeap)
149
+ },
150
+ transition: transition
151
+ }),
152
+ values.map((value, index)=>/*#__PURE__*/ jsx(SliderThumb, {
153
+ value: value,
154
+ index: index,
155
+ min: min,
156
+ max: max,
157
+ axis: axis,
158
+ axisProps: axisProps,
159
+ focusVisible: focusedThumbIndex === index,
160
+ dragging: dragging,
161
+ valueLabelDisplay: valueLabelDisplay,
162
+ valueLabelFormat: valueLabelFormat,
163
+ valueLabelTooltipProps: valueLabelTooltipProps,
164
+ orientation: orientation,
165
+ scale: scale,
166
+ classes: classes,
167
+ transition: transition,
168
+ "aria-label": ariaLabel,
169
+ "aria-labelledby": ariaLabelledBy,
170
+ "aria-valuetext": ariaValuetext,
171
+ getThumbProps: getThumbProps,
172
+ getAriaValueText: getAriaValueText,
173
+ getHiddenInputProps: getHiddenInputProps
174
+ }, `value-${index}`)),
175
+ hasMarks && /*#__PURE__*/ jsx("span", {
176
+ className: cls('marks', `marks-${orientation}`),
177
+ children: marks.map((mark, index)=>{
178
+ return /*#__PURE__*/ jsxs("span", {
179
+ "data-index": index,
180
+ className: cls('mark-container', `mark-container-${orientation}`),
181
+ style: axisProps[axis].offset(valueToPercent(mark.value, min, max)),
182
+ children: [
183
+ /*#__PURE__*/ jsx("span", {
184
+ className: cls('mark', `mark-${orientation}`)
185
+ }),
186
+ mark.label && (typeof mark.label === 'string' ? /*#__PURE__*/ jsx("span", {
187
+ className: cls('mark-label'),
188
+ children: mark.label
189
+ }) : mark.label)
190
+ ]
191
+ }, `${mark.value}`);
192
+ })
193
+ })
194
+ ]
195
+ });
103
196
  };
104
- const Slider = forwardRef(InnerSlider);
105
- Slider.displayName = 'SuiSlider';
197
+ // forwardRef doesn't handle generic types well, so we need to cast through an intermediate variable
198
+ const Slider_Slider = /*#__PURE__*/ forwardRef(InnerSlider);
199
+ Slider_Slider.displayName = 'SuiSlider';
200
+
201
+
202
+
203
+
204
+
106
205
 
107
- export { Slider, Slider$1 as sliderStyle };
206
+ export { Slider as sliderStyle, Slider_Slider as Slider };
package/Snackbar.js CHANGED
@@ -1,43 +1,44 @@
1
- import { useWindowContext, useClasses, useTimeout } from '@ringcentral/spring-base';
2
- import { useTheme, useThemeProps } from '@ringcentral/spring-theme';
3
- import { useMemo, forwardRef, isValidElement, cloneElement } from 'react';
4
- import { jsx } from 'react/jsx-runtime';
5
- import { Portal } from '@mui/base';
6
- import { a as Alert } from './chunks/Alert.js';
7
- import '@ringcentral/spring-icon';
8
- import 'clsx';
9
- import './chunks/Icon.js';
10
- import './chunks/IconButtonLabel.js';
11
- import './chunks/Squircle.js';
12
- import './chunks/withTooltip.js';
13
- import './chunks/Tooltip.js';
14
- import 'framer-motion';
15
- import './chunks/usePrefersReducedMotion.js';
16
- import './chunks/getFade.js';
17
- import './Popper.js';
18
- import '@floating-ui/react-dom';
19
- import './chunks/Modal.js';
20
- import './chunks/useFocusTrapStack.js';
21
- import './chunks/Backdrop.js';
22
- import './chunks/PopperPaper.js';
1
+ import { useClasses, useTimeout, useWindowContext } from "@ringcentral/spring-base";
2
+ import { useTheme, useThemeProps } from "@ringcentral/spring-theme";
3
+ import { cloneElement, forwardRef, isValidElement, useMemo } from "react";
4
+ import { jsx } from "react/jsx-runtime";
5
+ import { Alert as Alert_Alert } from "./Alert.js";
6
+ import { Portal } from "./Portal.js";
7
+
8
+
9
+
10
+
11
+
12
+
23
13
 
24
14
  const WRAPPER_ID = 'sui-snackbar-wrapper';
25
- const useSnackbarWrapper = (className) => {
15
+ const useSnackbarWrapper = (className)=>{
26
16
  const { document } = useWindowContext();
27
17
  const { scopeProps } = useTheme();
28
- return useMemo(() => {
18
+ /**
19
+ * We must memoize the container otherwise other components that
20
+ * are a child of the wrapper which are conditionally rendered
21
+ * can throw a "Cannot update a component while rendering a different component" error.
22
+ */ return useMemo(()=>{
29
23
  const container = document?.getElementById(WRAPPER_ID) ?? document?.createElement('div');
30
24
  if (container) {
31
25
  Object.entries({
32
26
  class: className,
33
- id: WRAPPER_ID,
34
- }).forEach(([key, value]) => container.setAttribute(key, value));
27
+ id: WRAPPER_ID
28
+ }).forEach(([key, value])=>container.setAttribute(key, value));
29
+ // create one more div wrapper to wrap the container
35
30
  if (document) {
36
31
  const wrapper = document.createElement('div');
32
+ // Apply the scope props directly to the wrapper
37
33
  Object.entries({
38
- ...scopeProps,
39
- }).forEach(([key, value]) => {
40
- let attribute = key;
34
+ ...scopeProps
35
+ }).forEach(([key, value])=>{
36
+ /**
37
+ * Map the key to an attribute. scopeProps is set on a ReactElement so
38
+ * setting a key like className will automatically be set to class,
39
+ * but as we're mutating the DOM element directly we need to manually
40
+ * map the key name to the DOM attribute name.
41
+ */ let attribute = key;
41
42
  if (attribute === 'className') {
42
43
  attribute = 'class';
43
44
  }
@@ -48,59 +49,121 @@ const useSnackbarWrapper = (className) => {
48
49
  }
49
50
  }
50
51
  return container;
51
- }, [className, scopeProps]);
52
+ // oxlint-disable-next-line react-hooks/exhaustive-deps
53
+ }, [
54
+ className,
55
+ scopeProps
56
+ ]);
52
57
  };
53
58
 
54
- var SnackbarContent$1 = {"sui-snackbar-content-root":"sui-snackbar-content-root","sui-snackbar-content-icon":"sui-snackbar-content-icon","sui-snackbar-content-close":"sui-snackbar-content-close","sui-snackbar-content-action":"sui-snackbar-content-action","sui-snackbar-content-body":"sui-snackbar-content-body","sui-snackbar-content-info":"sui-snackbar-content-info","sui-snackbar-content-error":"sui-snackbar-content-error","sui-snackbar-content-warning":"sui-snackbar-content-warning","sui-snackbar-content-success":"sui-snackbar-content-success","sui-snackbar-content-neutral":"sui-snackbar-content-neutral"};
55
59
 
56
- const SnackbarContent = forwardRef((inProps, ref) => {
57
- const props = useThemeProps({ props: inProps, name: 'Snackbar' });
60
+
61
+
62
+
63
+
64
+
65
+
66
+
67
+ // extracted by css-extract-rspack-plugin
68
+ /* export default */ var SnackbarContent = ({"sui-snackbar-content-root":"sui-snackbar-content-root","sui-snackbar-content-icon":"sui-snackbar-content-icon","sui-snackbar-content-close":"sui-snackbar-content-close","sui-snackbar-content-action":"sui-snackbar-content-action","sui-snackbar-content-body":"sui-snackbar-content-body","sui-snackbar-content-info":"sui-snackbar-content-info","sui-snackbar-content-error":"sui-snackbar-content-error","sui-snackbar-content-warning":"sui-snackbar-content-warning","sui-snackbar-content-success":"sui-snackbar-content-success","sui-snackbar-content-neutral":"sui-snackbar-content-neutral"});
69
+
70
+
71
+
72
+
73
+
74
+
75
+ const SnackbarContent_SnackbarContent = /*#__PURE__*/ forwardRef((inProps, ref)=>{
76
+ const props = useThemeProps({
77
+ props: inProps,
78
+ name: 'Snackbar'
79
+ });
58
80
  const { classes, className, severity = 'neutral', ...rest } = props;
59
81
  const cls = useClasses('snackbar-content', classes, className);
60
- return (jsx(Alert, { ref: ref, ...rest, severity: severity, className: cls('root'), classes: {
82
+ return /*#__PURE__*/ jsx(Alert_Alert, {
83
+ ref: ref,
84
+ ...rest,
85
+ severity: severity,
86
+ className: cls('root'),
87
+ classes: {
61
88
  body: cls('body'),
62
89
  icon: cls('icon'),
63
90
  close: cls('close'),
64
91
  action: cls('action'),
65
- [severity]: cls(severity),
66
- } }));
92
+ [severity]: cls(severity)
93
+ }
94
+ });
67
95
  });
68
- SnackbarContent.displayName = 'SuiSnackbarContent';
96
+ SnackbarContent_SnackbarContent.displayName = 'SuiSnackbarContent';
69
97
 
70
- var Snackbar$1 = {"sui-snackbar-root":"sui-snackbar-root"};
71
98
 
72
- const Snackbar = forwardRef((inProps, ref) => {
73
- const props = useThemeProps({ props: inProps, name: 'Snackbar' });
99
+
100
+
101
+
102
+
103
+ // extracted by css-extract-rspack-plugin
104
+ /* export default */ var Snackbar = ({"sui-snackbar-root":"sui-snackbar-root"});
105
+
106
+
107
+
108
+
109
+
110
+
111
+
112
+
113
+ const Snackbar_Snackbar = /*#__PURE__*/ forwardRef((inProps, ref)=>{
114
+ const props = useThemeProps({
115
+ props: inProps,
116
+ name: 'Snackbar'
117
+ });
74
118
  const { onClose, classes, className, open = true, autoHideDuration = 5000, disablePortal, closeButton, children, ...rest } = props;
75
119
  const cls = useClasses('snackbar', classes, className);
76
120
  const wrapper = useSnackbarWrapper(cls('root'));
77
- useTimeout(() => onClose?.(), open ? autoHideDuration : null);
78
- const content = useMemo(() => {
79
- if (!children)
80
- return null;
81
- const isSnackbarContent = isValidElement(children) &&
82
- children.type === SnackbarContent;
121
+ useTimeout(()=>onClose?.(), open ? autoHideDuration : null);
122
+ const content = useMemo(()=>{
123
+ if (!children) return null;
124
+ const isSnackbarContent = /*#__PURE__*/ isValidElement(children) && children.type === SnackbarContent_SnackbarContent;
83
125
  if (!isSnackbarContent) {
84
- return (jsx(SnackbarContent, { ...rest, classes: classes, className: className, ref: ref, onClose: closeButton ? onClose : undefined, children: children }));
126
+ return /*#__PURE__*/ jsx(SnackbarContent_SnackbarContent, {
127
+ ...rest,
128
+ classes: classes,
129
+ className: className,
130
+ ref: ref,
131
+ onClose: closeButton ? onClose : undefined,
132
+ children: children
133
+ });
85
134
  }
86
135
  const childProps = children.props;
87
- return cloneElement(children, {
136
+ return /*#__PURE__*/ cloneElement(children, {
88
137
  ...rest,
89
138
  classes,
90
139
  className,
91
140
  ...childProps,
92
141
  ref,
93
- onClose: 'onClose' in childProps
94
- ? childProps.onClose
95
- : closeButton
96
- ? onClose
97
- : undefined,
142
+ onClose: 'onClose' in childProps ? childProps.onClose : closeButton ? onClose : undefined
98
143
  });
99
- }, [children, rest, classes, className, ref, onClose, closeButton]);
100
- if (!open)
101
- return null;
102
- return (jsx(Portal, { container: wrapper, disablePortal: disablePortal, children: content }));
144
+ }, [
145
+ children,
146
+ rest,
147
+ classes,
148
+ className,
149
+ ref,
150
+ onClose,
151
+ closeButton
152
+ ]);
153
+ if (!open) return null;
154
+ return /*#__PURE__*/ jsx(Portal, {
155
+ container: wrapper,
156
+ disablePortal: disablePortal,
157
+ children: content
158
+ });
103
159
  });
104
- Snackbar.displayName = 'SuiSnackbar';
160
+ Snackbar_Snackbar.displayName = 'SuiSnackbar';
161
+
162
+
163
+
164
+
165
+
166
+
167
+
105
168
 
106
- export { Snackbar, SnackbarContent, SnackbarContent$1 as snackbarContentStyles, Snackbar$1 as snackbarStyle, useSnackbarWrapper };
169
+ export { Snackbar as snackbarStyle, SnackbarContent as snackbarContentStyles, SnackbarContent_SnackbarContent as SnackbarContent, Snackbar_Snackbar as Snackbar, useSnackbarWrapper };
package/SortableList.js CHANGED
@@ -1,17 +1,37 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { SortableContext } from '@dnd-kit/sortable';
3
- import { useThemeProps } from '@ringcentral/spring-theme';
4
- import { forwardRef } from 'react';
5
- import { L as List } from './chunks/List.js';
6
- import '@ringcentral/spring-base';
7
- import './chunks/useListNavigation.js';
8
- import 'tabbable';
9
-
10
- const SortableList = forwardRef((inProps, ref) => {
11
- const props = useThemeProps({ props: inProps, name: 'SortableList' });
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { SortableContext } from "@dnd-kit/sortable";
3
+ import { useThemeProps } from "@ringcentral/spring-theme";
4
+ import { forwardRef } from "react";
5
+ import { List as List_List } from "./List.js";
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+ const SortableList = /*#__PURE__*/ forwardRef((inProps, ref)=>{
17
+ const props = useThemeProps({
18
+ props: inProps,
19
+ name: 'SortableList'
20
+ });
12
21
  const { children, data, ...rest } = props;
13
- return (jsx(SortableContext, { items: data, children: jsx(List, { ...rest, ref: ref, children: data.map((itemData, index) => children(itemData, index)) }) }));
22
+ return /*#__PURE__*/ jsx(SortableContext, {
23
+ items: data,
24
+ children: /*#__PURE__*/ jsx(List_List, {
25
+ ...rest,
26
+ ref: ref,
27
+ children: data.map((itemData, index)=>children(itemData, index))
28
+ })
29
+ });
14
30
  });
15
31
  SortableList.displayName = 'SuiSortableList';
16
32
 
33
+
34
+
35
+
36
+
17
37
  export { SortableList };