@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.
- package/Accordion.js +90 -34
- package/AccordionHeader.js +72 -20
- package/Alert.js +120 -28
- package/Animation.js +2 -45
- package/Announcement.js +46 -35
- package/Autocomplete.js +1011 -580
- package/Avatar.js +134 -73
- package/AvatarGroup.js +50 -7
- package/Backdrop.js +45 -7
- package/Badge.js +77 -15
- package/Block.js +34 -12
- package/BlockHeader.js +55 -11
- package/BottomNavigation.js +181 -65
- package/BottomNavigationItem.js +93 -30
- package/Button.js +160 -24
- package/CallButton.js +53 -31
- package/Checkbox.js +88 -26
- package/Chip.js +126 -26
- package/CircularProgressIndicator.js +80 -8
- package/ClickAwayListener.js +4 -1
- package/ComponentsProps.js +1 -0
- package/DatePicker.js +611 -190
- package/DateUtilsContext.js +43 -25
- package/Dialer.js +576 -250
- package/Dialog.js +100 -45
- package/Divider.js +43 -7
- package/DragHandle.js +32 -6
- package/Drawer.js +117 -19
- package/Dropdown.js +154 -74
- package/EmptyState.js +63 -11
- package/FabButton.js +51 -17
- package/FocusTrap.js +109 -12
- package/FormField.js +106 -8
- package/FormLabel.js +81 -7
- package/Icon.js +1 -8
- package/IconButton.js +142 -26
- package/IconButtonGroup.js +35 -12
- package/InlineEditable.js +98 -44
- package/LinearProgressIndicator.js +73 -24
- package/Link.js +40 -11
- package/List.js +54 -9
- package/ListItem.js +152 -23
- package/ListItemText.js +44 -16
- package/ListNavigation.js +272 -20
- package/Menu.js +139 -23
- package/MenuActions.js +37 -12
- package/MenuDivider.js +34 -8
- package/MenuFooter.js +36 -12
- package/MenuHeader.js +54 -15
- package/MenuItem.js +402 -33
- package/MenuItemText.js +51 -8
- package/MenuList.js +87 -34
- package/Modal.js +345 -16
- package/NestedMenuContext.js +183 -11
- package/Option.js +32 -34
- package/Overlap.js +54 -7
- package/PageHeader.js +62 -24
- package/PickerTextField.js +156 -33
- package/Popover.js +262 -21
- package/Popper.js +130 -77
- package/PopperPaper.js +54 -8
- package/Portal.js +6 -1
- package/Radio.js +65 -21
- package/RadioGroup.js +56 -17
- package/Rating.js +223 -87
- package/Select.js +387 -41
- package/SingleFilter.js +148 -77
- package/Skeleton.js +68 -17
- package/Slider.js +168 -69
- package/Snackbar.js +122 -59
- package/SortableList.js +32 -12
- package/SortableListDndContext.js +69 -22
- package/SortableListItem.js +92 -47
- package/SortableVirtualizedList.js +52 -28
- package/SplitButton.js +124 -86
- package/Squircle.js +4 -7
- package/StatusIndicator.js +51 -9
- package/Step.js +63 -38
- package/StepButton.js +51 -23
- package/StepConnector.js +48 -8
- package/StepContent.js +68 -25
- package/StepIcon.js +90 -9
- package/StepLabel.js +90 -14
- package/Stepper.js +65 -23
- package/SubMenu.js +203 -99
- package/SwipeableDrawer.js +439 -194
- package/Switch.js +70 -23
- package/Tab.js +120 -57
- package/TabContext.js +59 -15
- package/TabPanel.js +40 -13
- package/Table.js +60 -17
- package/TableBody.js +42 -12
- package/TableCell.js +84 -50
- package/TableContainer.js +32 -10
- package/TableFooter.js +38 -10
- package/TableHead.js +49 -15
- package/TablePagination.js +153 -77
- package/TableRow.js +60 -21
- package/Tabs.js +593 -268
- package/Tag.js +51 -16
- package/Text.js +68 -37
- package/TextField.js +209 -29
- package/Textarea.js +51 -40
- package/TimePicker.js +490 -230
- package/Tooltip.js +48 -23
- package/Tray.js +237 -13
- package/TrayMenu.js +62 -41
- package/VirtualizedList.js +208 -109
- package/VirtualizedMenu.js +359 -29
- package/VisuallyHidden.js +29 -6
- package/chunks/1250.js +98 -0
- package/chunks/1294.js +126 -0
- package/chunks/2956.js +18 -0
- package/chunks/4476.js +460 -0
- package/chunks/4491.js +10 -0
- package/chunks/4535.js +364 -0
- package/chunks/5047.js +3 -0
- package/chunks/6335.js +24 -0
- package/chunks/7279.js +10 -0
- package/chunks/8011.js +8 -0
- package/chunks/8307.js +56 -0
- package/chunks/8467.js +8 -0
- package/chunks/8809.js +8 -0
- package/chunks/{RadioGroup.context.js → 9551.js} +12 -6
- package/chunks/987.js +8 -0
- package/index.css +2624 -2416
- package/index.js +245 -193
- package/internal/utils/index.d.ts +1 -0
- package/internal/utils/setRef.d.ts +2 -0
- package/package.json +8 -8
- package/src/Alert/Alert.type.d.ts +2 -1
- package/src/Animation/components/Fade/Fade.d.ts +4 -2
- package/src/Animation/components/Grow/Grow.d.ts +4 -2
- package/src/Animation/components/ShowHideEye/ShowHideEye.d.ts +1 -1
- package/src/Animation/components/SlideIn/SlideIn.d.ts +4 -2
- package/src/Animation/components/SlideIn/getSlideIn.d.ts +1 -1
- package/src/Animation/hooks/useMotionSafeTransition/useMotionSafeTransition.d.ts +2 -0
- package/src/Autocomplete/SuggestionList/SuggestionList.d.ts +1 -1
- package/src/Autocomplete/useAutocomplete.d.ts +18 -18
- package/src/Autocomplete/useAutocompleteTag.d.ts +18 -18
- package/src/Badge/Badge.d.ts +2 -1
- package/src/Button/Button.classes.d.ts +1 -1
- package/src/ComponentsProps.d.ts +111 -110
- package/src/DatePicker/DatePickerDataAttributes.d.ts +11 -0
- package/src/DatePicker/utils/DatePickerAriaLabelUtils.d.ts +2 -1
- package/src/DatePicker/utils/DatePickerUtils.d.ts +1 -1
- package/src/Dialer/DialDelete/DialDelete.d.ts +2 -2
- package/src/Dialer/DialPad/DialPad.d.ts +2 -2
- package/src/Dialer/Dialer.d.ts +4 -2
- package/src/Dropdown/Dropdown.type.d.ts +2 -2
- package/src/InlineEditable/InlineEditable.type.d.ts +2 -1
- package/src/ListNavigation/useListNavigation.d.ts +3 -3
- package/src/MenuActions/MenuActions.d.ts +2 -2
- package/src/MenuItem/MenuItem.type.d.ts +1 -0
- package/src/MenuItem/useMenuItem.d.ts +1 -1
- package/src/MenuItem/useVirtualizedMenuItem.d.ts +1 -1
- package/src/MenuList/MenuList.type.d.ts +1 -1
- package/src/MenuList/MenuListContext.d.ts +2 -3
- package/src/Modal/Modal.type.d.ts +1 -0
- package/src/NestedMenuContext/MenuOverlayGroupContext.d.ts +2 -2
- package/src/Popover/Popover.classes.d.ts +1 -1
- package/src/Popover/Popover.internal.d.ts +8 -0
- package/src/Popover/Popover.type.d.ts +1 -0
- package/src/Popper/Popper.type.d.ts +10 -7
- package/src/Rating/utils.d.ts +3 -2
- package/src/Select/Select.type.d.ts +7 -5
- package/src/Slider/Slider.d.ts +2 -2
- package/src/Slider/SliderThumb.d.ts +2 -1
- package/src/Squircle/Squircle.d.ts +1 -1
- package/src/StatusIndicator/StatusIndicator.d.ts +2 -1
- package/src/SubMenu/PopperMenu.type.d.ts +4 -1
- package/src/Table/Table.type.d.ts +3 -0
- package/src/Table/TableContext.d.ts +3 -0
- package/src/Table/TableRowContext.d.ts +7 -0
- package/src/Table/index.d.ts +1 -0
- package/src/TableCell/TableCell.classes.d.ts +1 -1
- package/src/TableFooter/TableFooter.classes.d.ts +1 -1
- package/src/TableFooter/TableFooter.type.d.ts +1 -0
- package/src/TableHead/TableHead.classes.d.ts +1 -1
- package/src/TableHead/TableHead.type.d.ts +1 -0
- package/src/TableRow/TableRow.type.d.ts +2 -0
- package/chunks/AccordionContext.js +0 -6
- package/chunks/Alert.js +0 -48
- package/chunks/AvatarGroup.js +0 -22
- package/chunks/Backdrop.js +0 -18
- package/chunks/Badge.js +0 -32
- package/chunks/BottomNavigationItem.js +0 -36
- package/chunks/Button.js +0 -88
- package/chunks/Chip.js +0 -73
- package/chunks/CircularProgressIndicator.js +0 -36
- package/chunks/Divider.js +0 -19
- package/chunks/DragHandle.js +0 -11
- package/chunks/Drawer.js +0 -32
- package/chunks/ExpandCollapseCaret.js +0 -24
- package/chunks/FormLabel.js +0 -27
- package/chunks/Icon.js +0 -25
- package/chunks/IconButtonLabel.js +0 -68
- package/chunks/List.js +0 -22
- package/chunks/ListItem.js +0 -83
- package/chunks/Menu.js +0 -61
- package/chunks/MenuDivider.js +0 -14
- package/chunks/MenuItemText.js +0 -17
- package/chunks/MenuList.js +0 -46
- package/chunks/Modal.js +0 -212
- package/chunks/Overlap.js +0 -25
- package/chunks/PickerTextField.js +0 -85
- package/chunks/Popover.js +0 -53
- package/chunks/PopperPaper.js +0 -15
- package/chunks/Select.js +0 -220
- package/chunks/ShowHideEye.js +0 -56
- package/chunks/SlideIn.js +0 -19
- package/chunks/SortableArrow.js +0 -73
- package/chunks/Squircle.js +0 -31
- package/chunks/StatusIndicator.js +0 -20
- package/chunks/StepConnector.js +0 -21
- package/chunks/StepIcon.js +0 -43
- package/chunks/StepLabel.js +0 -29
- package/chunks/StepperContext.js +0 -9
- package/chunks/TableContext.js +0 -6
- package/chunks/Tablelvl2Context.js +0 -6
- package/chunks/TabsContext.js +0 -6
- package/chunks/TextField.js +0 -110
- package/chunks/Tooltip.js +0 -217
- package/chunks/VirtualizedMenu.js +0 -164
- package/chunks/VisuallyHidden.js +0 -12
- package/chunks/getFade.js +0 -27
- package/chunks/getGrow.js +0 -70
- package/chunks/getSlideIn.js +0 -30
- package/chunks/hasContent.js +0 -3
- package/chunks/useAnimationFrame.js +0 -15
- package/chunks/useFocusTrapStack.js +0 -36
- package/chunks/useHelperTextId.js +0 -22
- package/chunks/useListNavigation.js +0 -199
- package/chunks/useMenuItemSelect.js +0 -273
- package/chunks/useMotionSafeTransition.js +0 -9
- package/chunks/useNestedMenuItem.js +0 -27
- package/chunks/useNestedParentMenu.js +0 -113
- package/chunks/usePrefersReducedMotion.js +0 -36
- package/chunks/useTooltipForceHide.js +0 -27
- package/chunks/useTrayNavigate.js +0 -150
- package/chunks/withTooltip.js +0 -15
package/Slider.js
CHANGED
|
@@ -1,55 +1,66 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { forwardRef } from
|
|
3
|
-
import { motion } from
|
|
4
|
-
import { useSlider } from
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import {
|
|
10
|
-
import
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
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
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
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),
|
|
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
|
-
|
|
70
|
-
|
|
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
|
|
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
|
|
86
|
-
const
|
|
87
|
-
|
|
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':
|
|
91
|
-
'show-color-at-rest': showColorAtRest
|
|
92
|
-
}),
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
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
|
-
},
|
|
100
|
-
|
|
101
|
-
|
|
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
|
-
|
|
105
|
-
|
|
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,
|
|
206
|
+
export { Slider as sliderStyle, Slider_Slider as Slider };
|
package/Snackbar.js
CHANGED
|
@@ -1,43 +1,44 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useTheme, useThemeProps } from
|
|
3
|
-
import {
|
|
4
|
-
import { jsx } from
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
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
|
-
|
|
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])
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
57
|
-
|
|
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
|
|
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
|
-
|
|
96
|
+
SnackbarContent_SnackbarContent.displayName = 'SuiSnackbarContent';
|
|
69
97
|
|
|
70
|
-
var Snackbar$1 = {"sui-snackbar-root":"sui-snackbar-root"};
|
|
71
98
|
|
|
72
|
-
|
|
73
|
-
|
|
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(()
|
|
78
|
-
const content = useMemo(()
|
|
79
|
-
if (!children)
|
|
80
|
-
|
|
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
|
|
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
|
-
}, [
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
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
|
-
|
|
160
|
+
Snackbar_Snackbar.displayName = 'SuiSnackbar';
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
|
|
105
168
|
|
|
106
|
-
export { Snackbar
|
|
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
|
|
2
|
-
import { SortableContext } from
|
|
3
|
-
import { useThemeProps } from
|
|
4
|
-
import { forwardRef } from
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
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
|
|
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 };
|