@ringcentral/spring-ui 1.12.0 → 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 +71 -21
- package/Alert.js +120 -28
- package/Animation.js +2 -46
- package/Announcement.js +46 -35
- package/Autocomplete.js +1011 -583
- 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 +57 -15
- 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 -192
- package/DateUtilsContext.js +43 -25
- package/Dialer.js +564 -253
- package/Dialog.js +99 -45
- package/Divider.js +43 -7
- package/DragHandle.js +32 -6
- package/Drawer.js +117 -19
- package/Dropdown.js +154 -77
- package/EmptyState.js +65 -15
- package/FabButton.js +51 -17
- package/FocusTrap.js +109 -12
- package/FormField.js +108 -12
- 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 -17
- 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 -16
- package/MenuItem.js +402 -35
- package/MenuItemText.js +51 -9
- package/MenuList.js +87 -36
- package/Modal.js +345 -16
- package/NestedMenuContext.js +183 -11
- package/Option.js +32 -36
- package/Overlap.js +54 -7
- package/PageHeader.js +62 -24
- package/PickerTextField.js +156 -35
- package/Popover.js +262 -21
- package/Popper.js +112 -62
- 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 -44
- package/SingleFilter.js +148 -79
- package/Skeleton.js +68 -17
- package/Slider.js +167 -69
- package/Snackbar.js +122 -59
- package/SortableList.js +32 -12
- package/SortableListDndContext.js +69 -22
- package/SortableListItem.js +92 -47
- package/SortableVirtualizedList.js +44 -20
- package/SplitButton.js +124 -89
- 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 +67 -24
- package/StepIcon.js +90 -9
- package/StepLabel.js +90 -14
- package/Stepper.js +65 -23
- package/SubMenu.js +203 -101
- 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 -79
- package/TableRow.js +60 -21
- package/Tabs.js +592 -271
- package/Tag.js +51 -16
- package/Text.js +68 -37
- package/TextField.js +209 -31
- package/Textarea.js +51 -42
- package/TimePicker.js +490 -232
- package/Tooltip.js +48 -23
- package/Tray.js +237 -13
- package/TrayMenu.js +62 -43
- package/VirtualizedList.js +205 -107
- 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 +2436 -2261
- package/index.js +245 -195
- package/internal/utils/setRef.d.ts +2 -1
- package/package.json +4 -4
- package/src/Animation/hooks/useMotionSafeTransition/useMotionSafeTransition.d.ts +2 -0
- package/src/Autocomplete/SuggestionList/SuggestionList.d.ts +1 -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/DatePickerUtils.d.ts +1 -1
- package/src/MenuItem/MenuItem.type.d.ts +1 -0
- package/src/MenuList/MenuListContext.d.ts +2 -3
- package/src/Modal/Modal.type.d.ts +1 -0
- 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/Select/Select.type.d.ts +6 -4
- 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 -33
- 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 -18
- package/chunks/MenuList.js +0 -47
- package/chunks/Modal.js +0 -211
- package/chunks/Overlap.js +0 -25
- package/chunks/PickerTextField.js +0 -85
- package/chunks/Popover.js +0 -61
- package/chunks/PopperPaper.js +0 -15
- package/chunks/Select.js +0 -225
- package/chunks/ShowHideEye.js +0 -56
- package/chunks/SlideIn.js +0 -20
- 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 -162
- package/chunks/VisuallyHidden.js +0 -12
- package/chunks/composeEventHandlers.js +0 -10
- 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 -38
- package/chunks/useHelperTextId.js +0 -24
- package/chunks/useListNavigation.js +0 -199
- package/chunks/useMenuItemSelect.js +0 -282
- 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/CallButton.js
CHANGED
|
@@ -1,39 +1,61 @@
|
|
|
1
|
-
import { jsx } from
|
|
2
|
-
import { forwardRef } from
|
|
3
|
-
import { useClasses } from
|
|
4
|
-
import { CallFilledMd } from
|
|
5
|
-
import { useThemeProps } from
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
import './chunks/PopperPaper.js';
|
|
22
|
-
|
|
23
|
-
var CallButton$1 = {"sui-call-button-end":"sui-call-button-end"};
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import { useClasses } from "@ringcentral/spring-base";
|
|
4
|
+
import { CallFilledMd } from "@ringcentral/spring-icon";
|
|
5
|
+
import { useThemeProps } from "@ringcentral/spring-theme";
|
|
6
|
+
import { IconButton as IconButton_IconButton } from "./IconButton.js";
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
// extracted by css-extract-rspack-plugin
|
|
14
|
+
/* export default */ var CallButton = ({"sui-call-button-end":"sui-call-button-end"});
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
24
21
|
|
|
25
22
|
const IconButtonPropsSizeMap = {
|
|
26
|
-
large: {
|
|
27
|
-
|
|
28
|
-
|
|
23
|
+
large: {
|
|
24
|
+
size: 'xxxlarge',
|
|
25
|
+
iconSize: 'large'
|
|
26
|
+
},
|
|
27
|
+
medium: {
|
|
28
|
+
size: 'xxlarge',
|
|
29
|
+
iconSize: 'medium'
|
|
30
|
+
},
|
|
31
|
+
small: {
|
|
32
|
+
size: 'large',
|
|
33
|
+
iconSize: 'small'
|
|
34
|
+
}
|
|
29
35
|
};
|
|
30
|
-
const
|
|
31
|
-
const props = useThemeProps({
|
|
36
|
+
const CallButton_CallButton = /*#__PURE__*/ forwardRef((inProps, ref)=>{
|
|
37
|
+
const props = useThemeProps({
|
|
38
|
+
props: inProps,
|
|
39
|
+
name: 'CallButton'
|
|
40
|
+
});
|
|
32
41
|
const { variant, className, size = 'medium', classes, ...rest } = props;
|
|
33
42
|
const color = variant === 'end' ? 'danger' : 'success';
|
|
34
43
|
const cls = useClasses('call-button', classes, className);
|
|
35
|
-
return
|
|
44
|
+
return /*#__PURE__*/ jsx(IconButton_IconButton, {
|
|
45
|
+
...rest,
|
|
46
|
+
...IconButtonPropsSizeMap[size],
|
|
47
|
+
ref: ref,
|
|
48
|
+
color: color,
|
|
49
|
+
variant: "contained",
|
|
50
|
+
symbol: CallFilledMd,
|
|
51
|
+
className: cls('root', variant)
|
|
52
|
+
});
|
|
36
53
|
});
|
|
37
|
-
|
|
54
|
+
CallButton_CallButton.displayName = 'SuiCallButton';
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
38
60
|
|
|
39
|
-
export { CallButton,
|
|
61
|
+
export { CallButton as callButtonStyle, CallButton_CallButton as CallButton };
|
package/Checkbox.js
CHANGED
|
@@ -1,53 +1,115 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { forwardRef,
|
|
3
|
-
import { useSwitch } from
|
|
4
|
-
import { useClasses, useForkRef } from
|
|
5
|
-
import {
|
|
6
|
-
import { useThemeProps } from
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useEffect, useLayoutEffect, useRef } from "react";
|
|
3
|
+
import { useSwitch } from "@mui/base";
|
|
4
|
+
import { useClasses, useForkRef } from "@ringcentral/spring-base";
|
|
5
|
+
import { CheckBoldMd, MinusBoldMd } from "@ringcentral/spring-icon";
|
|
6
|
+
import { useThemeProps } from "@ringcentral/spring-theme";
|
|
7
|
+
import { useFormLabel } from "./FormLabel.js";
|
|
8
|
+
import { Icon as Icon_Icon } from "./chunks/8307.js";
|
|
9
|
+
import "./Squircle.js";
|
|
10
|
+
import { Squircle as Squircle_Squircle } from "./chunks/1250.js";
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
// extracted by css-extract-rspack-plugin
|
|
19
|
+
/* export default */ var Checkbox = ({"sui-checkbox-input":"sui-checkbox-input","sui-checkbox-root":"sui-checkbox-root","sui-disabled":"sui-disabled","sui-checkbox-rectangular":"sui-checkbox-rectangular","sui-checkbox-inner":"sui-checkbox-inner","sui-focus-visible":"sui-focus-visible","sui-checkbox-squircle":"sui-checkbox-squircle","sui-checkbox":"sui-checkbox","sui-checked":"sui-checked","sui-checkbox-indeterminate":"sui-checkbox-indeterminate","sui-checkbox-inner-rectangular":"sui-checkbox-inner-rectangular"});
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
const Checkbox_Checkbox = /*#__PURE__*/ forwardRef((inProps, ref)=>{
|
|
31
|
+
const props = useThemeProps({
|
|
32
|
+
props: inProps,
|
|
33
|
+
name: 'Checkbox'
|
|
34
|
+
});
|
|
15
35
|
const { classes, inputRef: inputRefProp, rootProps, inputProps, indeterminate, autoFocus = false, className: rootClass, disabled: disabledProp, shape = 'rectangular', ...rest } = props;
|
|
16
36
|
const cls = useClasses('checkbox', classes, rootClass);
|
|
17
37
|
const inputRef = useRef();
|
|
18
38
|
const forkRef = useForkRef(inputRefProp, inputRef);
|
|
19
39
|
const { disabled, id } = useFormLabel({
|
|
20
40
|
disabled: disabledProp,
|
|
21
|
-
id: inputProps?.id
|
|
41
|
+
id: inputProps?.id
|
|
22
42
|
});
|
|
43
|
+
// TODO: wait useCheckBox ready, see https://github.com/mui/material-ui/issues/27170
|
|
23
44
|
const { getInputProps, checked, focusVisible } = useSwitch({
|
|
24
45
|
...rest,
|
|
25
|
-
disabled
|
|
46
|
+
disabled
|
|
26
47
|
});
|
|
27
48
|
const widgetProps = getInputProps({
|
|
28
49
|
role: undefined,
|
|
29
50
|
...inputProps,
|
|
30
|
-
itemType: 'checkbox'
|
|
51
|
+
itemType: 'checkbox'
|
|
31
52
|
});
|
|
32
|
-
useLayoutEffect(()
|
|
53
|
+
useLayoutEffect(()=>{
|
|
33
54
|
if (autoFocus) {
|
|
34
55
|
inputRef.current?.focus();
|
|
35
56
|
}
|
|
57
|
+
// oxlint-disable-next-line react-hooks/exhaustive-deps
|
|
36
58
|
}, []);
|
|
37
|
-
useEffect(()
|
|
59
|
+
useEffect(()=>{
|
|
38
60
|
if (inputRef.current) {
|
|
39
61
|
inputRef.current.indeterminate = !!indeterminate;
|
|
40
62
|
}
|
|
41
|
-
}, [
|
|
42
|
-
|
|
63
|
+
}, [
|
|
64
|
+
indeterminate
|
|
65
|
+
]);
|
|
66
|
+
const states = {
|
|
67
|
+
checked,
|
|
68
|
+
disabled,
|
|
69
|
+
indeterminate,
|
|
70
|
+
focusVisible
|
|
71
|
+
};
|
|
43
72
|
const symbol = indeterminate ? MinusBoldMd : checked ? CheckBoldMd : null;
|
|
44
73
|
const rootClassName = cls('root', shape, states);
|
|
45
|
-
const checkboxContent =
|
|
74
|
+
const checkboxContent = /*#__PURE__*/ jsxs(Fragment, {
|
|
75
|
+
children: [
|
|
76
|
+
symbol ? /*#__PURE__*/ jsx(Icon_Icon, {
|
|
77
|
+
symbol: symbol,
|
|
78
|
+
size: "xsmall"
|
|
79
|
+
}) : /*#__PURE__*/ jsx("span", {
|
|
80
|
+
className: cls('inner', `inner-${shape}`)
|
|
81
|
+
}),
|
|
82
|
+
/*#__PURE__*/ jsx("input", {
|
|
83
|
+
...widgetProps,
|
|
84
|
+
checked: checked,
|
|
85
|
+
ref: forkRef,
|
|
86
|
+
className: cls('input'),
|
|
87
|
+
id: id
|
|
88
|
+
})
|
|
89
|
+
]
|
|
90
|
+
});
|
|
46
91
|
if (shape === 'squircle') {
|
|
47
|
-
return
|
|
92
|
+
return /*#__PURE__*/ jsx(Squircle_Squircle, {
|
|
93
|
+
...rootProps,
|
|
94
|
+
ref: ref,
|
|
95
|
+
className: rootClassName,
|
|
96
|
+
interactive: !disabled,
|
|
97
|
+
focusVisible: focusVisible,
|
|
98
|
+
children: checkboxContent
|
|
99
|
+
});
|
|
48
100
|
}
|
|
49
|
-
return
|
|
101
|
+
return /*#__PURE__*/ jsx("div", {
|
|
102
|
+
...rootProps,
|
|
103
|
+
ref: ref,
|
|
104
|
+
className: rootClassName,
|
|
105
|
+
children: checkboxContent
|
|
106
|
+
});
|
|
50
107
|
});
|
|
51
|
-
|
|
108
|
+
Checkbox_Checkbox.displayName = 'SuiCheckbox';
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
|
|
52
114
|
|
|
53
|
-
export { Checkbox,
|
|
115
|
+
export { Checkbox as checkboxStyle, Checkbox_Checkbox as Checkbox };
|
package/Chip.js
CHANGED
|
@@ -1,26 +1,126 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import { useButton } from "@mui/base";
|
|
4
|
+
import { getTitle, isDeleteKeyboardEvent, useClasses, useId } from "@ringcentral/spring-base";
|
|
5
|
+
import { Xmd } from "@ringcentral/spring-icon";
|
|
6
|
+
import { useThemeProps } from "@ringcentral/spring-theme";
|
|
7
|
+
import { IconButton as IconButton_IconButton } from "./IconButton.js";
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
// extracted by css-extract-rspack-plugin
|
|
16
|
+
/* export default */ var Chip = ({"sui-chip-root":"sui-chip-root","sui-disabled":"sui-disabled","sui-chip-truncate":"sui-chip-truncate","sui-chip-label":"sui-chip-label","sui-chip-large":"sui-chip-large","sui-chip-medium":"sui-chip-medium","sui-chip-small":"sui-chip-small","sui-chip-delete-icon":"sui-chip-delete-icon","sui-chip-default":"sui-chip-default","sui-chip-error":"sui-chip-error","sui-chip-clickable":"sui-chip-clickable"});
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
const Chip_Chip = /*#__PURE__*/ forwardRef((inProps, ref)=>{
|
|
26
|
+
const props = useThemeProps({
|
|
27
|
+
props: inProps,
|
|
28
|
+
name: 'Chip'
|
|
29
|
+
});
|
|
30
|
+
const { component: ChipRoot = 'div', classes, className, children, label, startSlot, size = 'large', clickable: clickableProp, truncate = true, color = 'default', DeleteIconProps = {}, disabled, onClick, onDelete, onKeyDown, onKeyUp, ...rest } = props;
|
|
31
|
+
const cls = useClasses('chip', classes, className);
|
|
32
|
+
const handleDeleteIconClick = (event)=>{
|
|
33
|
+
// Stop the event from bubbling up to the `Chip`
|
|
34
|
+
event.stopPropagation();
|
|
35
|
+
if (onDelete) {
|
|
36
|
+
onDelete(event);
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
const handleKeyDown = (event)=>{
|
|
40
|
+
// Ignore events from children of `Chip`.
|
|
41
|
+
if (event.currentTarget === event.target && isDeleteKeyboardEvent(event)) {
|
|
42
|
+
// Will be handled in keyUp, otherwise some browsers
|
|
43
|
+
// might init navigation
|
|
44
|
+
event.preventDefault();
|
|
45
|
+
}
|
|
46
|
+
if (onKeyDown) {
|
|
47
|
+
onKeyDown(event);
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
const handleKeyUp = (event)=>{
|
|
51
|
+
// Ignore events from children of `Chip`.
|
|
52
|
+
if (event.currentTarget === event.target && onDelete && isDeleteKeyboardEvent(event)) {
|
|
53
|
+
onDelete(event);
|
|
54
|
+
}
|
|
55
|
+
if (onKeyUp) {
|
|
56
|
+
onKeyUp(event);
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
const clickable = clickableProp !== false && onClick ? true : clickableProp;
|
|
60
|
+
const deleteIconButtonVariant = !clickable && color === 'default' ? 'contained' : 'inverted';
|
|
61
|
+
const deleteIconButtonColor = !clickable && color === 'error' ? 'danger' : 'secondary';
|
|
62
|
+
const deleteIconButtonSize = size === 'small' ? 'xsmall' : 'small';
|
|
63
|
+
const { onDelete: _, ...buttonProps } = props;
|
|
64
|
+
const { getRootProps } = useButton({
|
|
65
|
+
...buttonProps,
|
|
66
|
+
rootRef: ref
|
|
67
|
+
});
|
|
68
|
+
const rootProps = clickable ? {
|
|
69
|
+
className: cls('root', color, size, {
|
|
70
|
+
clickable,
|
|
71
|
+
disabled,
|
|
72
|
+
truncate
|
|
73
|
+
}),
|
|
74
|
+
...rest,
|
|
75
|
+
...getRootProps({
|
|
76
|
+
onKeyDown: handleKeyDown,
|
|
77
|
+
onKeyUp: handleKeyUp
|
|
78
|
+
})
|
|
79
|
+
} : {
|
|
80
|
+
className: cls('root', color, size, {
|
|
81
|
+
disabled,
|
|
82
|
+
truncate
|
|
83
|
+
}),
|
|
84
|
+
...rest,
|
|
85
|
+
ref
|
|
86
|
+
};
|
|
87
|
+
const labelId = useId();
|
|
88
|
+
const nonInteractiveDeleteProps = {
|
|
89
|
+
tabIndex: -1,
|
|
90
|
+
component: 'span',
|
|
91
|
+
role: 'presentation'
|
|
92
|
+
};
|
|
93
|
+
const deleteIcon = onDelete ? /*#__PURE__*/ jsx(IconButton_IconButton, {
|
|
94
|
+
background: false,
|
|
95
|
+
className: cls('delete-icon'),
|
|
96
|
+
variant: deleteIconButtonVariant,
|
|
97
|
+
color: deleteIconButtonColor,
|
|
98
|
+
size: deleteIconButtonSize,
|
|
99
|
+
symbol: Xmd,
|
|
100
|
+
onClick: handleDeleteIconClick,
|
|
101
|
+
"aria-describedby": labelId,
|
|
102
|
+
...clickable ? nonInteractiveDeleteProps : {},
|
|
103
|
+
...DeleteIconProps
|
|
104
|
+
}) : null;
|
|
105
|
+
return /*#__PURE__*/ jsxs(ChipRoot, {
|
|
106
|
+
...rootProps,
|
|
107
|
+
children: [
|
|
108
|
+
startSlot,
|
|
109
|
+
/*#__PURE__*/ jsx("span", {
|
|
110
|
+
id: labelId,
|
|
111
|
+
className: cls('label'),
|
|
112
|
+
title: getTitle(label),
|
|
113
|
+
children: label
|
|
114
|
+
}),
|
|
115
|
+
deleteIcon
|
|
116
|
+
]
|
|
117
|
+
});
|
|
118
|
+
});
|
|
119
|
+
Chip_Chip.displayName = 'SuiChip';
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
export { Chip as chipStyle, Chip_Chip as Chip };
|
|
@@ -1,10 +1,82 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import '@ringcentral/spring-theme';
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import clsx from "clsx";
|
|
4
|
+
import { useClasses } from "@ringcentral/spring-base";
|
|
5
|
+
import { useThemeProps } from "@ringcentral/spring-theme";
|
|
7
6
|
|
|
8
|
-
var CircularProgressIndicator = {"sui-circular-progress-indicator-root":"sui-circular-progress-indicator-root","sui-circular-progress-indicator-xlarge":"sui-circular-progress-indicator-xlarge","sui-circular-progress-indicator-large":"sui-circular-progress-indicator-large","sui-circular-progress-indicator-medium":"sui-circular-progress-indicator-medium","sui-circular-progress-indicator-small":"sui-circular-progress-indicator-small","sui-circular-progress-indicator-xsmall":"sui-circular-progress-indicator-xsmall","sui-circular-progress-indicator-indeterminate":"sui-circular-progress-indicator-indeterminate","sui-circular-progress-indicator-indeterminate-outer-circle":"sui-circular-progress-indicator-indeterminate-outer-circle","sui-circular-progress-indicator-rotate":"sui-circular-progress-indicator-rotate","sui-circular-progress-indicator-indeterminate-inner-circle":"sui-circular-progress-indicator-indeterminate-inner-circle","sui-circular-progress-indicator-pulse":"sui-circular-progress-indicator-pulse","sui-circular-progress-indicator-indeterminate-xlarge":"sui-circular-progress-indicator-indeterminate-xlarge","sui-circular-progress-indicator-indeterminate-large":"sui-circular-progress-indicator-indeterminate-large","sui-circular-progress-indicator-indeterminate-medium":"sui-circular-progress-indicator-indeterminate-medium","sui-circular-progress-indicator-indeterminate-small":"sui-circular-progress-indicator-indeterminate-small","sui-circular-progress-indicator-indeterminate-xsmall":"sui-circular-progress-indicator-indeterminate-xsmall","sui-circular-progress-indicator-indeterminate-primary":"sui-circular-progress-indicator-indeterminate-primary","sui-circular-progress-indicator-indeterminate-neutral":"sui-circular-progress-indicator-indeterminate-neutral","sui-circular-progress-indicator-indeterminate-danger":"sui-circular-progress-indicator-indeterminate-danger","sui-circular-progress-indicator-indeterminate-warning":"sui-circular-progress-indicator-indeterminate-warning","sui-circular-progress-indicator-indeterminate-success":"sui-circular-progress-indicator-indeterminate-success","sui-circular-progress-indicator-determinate-progress-circle":"sui-circular-progress-indicator-determinate-progress-circle","sui-circular-progress-indicator-determinate-primary":"sui-circular-progress-indicator-determinate-primary","sui-circular-progress-indicator-determinate-neutral":"sui-circular-progress-indicator-determinate-neutral","sui-circular-progress-indicator-determinate-danger":"sui-circular-progress-indicator-determinate-danger","sui-circular-progress-indicator-determinate-warning":"sui-circular-progress-indicator-determinate-warning","sui-circular-progress-indicator-determinate-success":"sui-circular-progress-indicator-determinate-success"};
|
|
9
7
|
|
|
10
|
-
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
// extracted by css-extract-rspack-plugin
|
|
13
|
+
/* export default */ var CircularProgressIndicator = ({"sui-circular-progress-indicator-root":"sui-circular-progress-indicator-root","sui-circular-progress-indicator-xlarge":"sui-circular-progress-indicator-xlarge","sui-circular-progress-indicator-large":"sui-circular-progress-indicator-large","sui-circular-progress-indicator-medium":"sui-circular-progress-indicator-medium","sui-circular-progress-indicator-small":"sui-circular-progress-indicator-small","sui-circular-progress-indicator-xsmall":"sui-circular-progress-indicator-xsmall","sui-circular-progress-indicator-indeterminate":"sui-circular-progress-indicator-indeterminate","sui-circular-progress-indicator-indeterminate-outer-circle":"sui-circular-progress-indicator-indeterminate-outer-circle","sui-circular-progress-indicator-rotate":"sui-circular-progress-indicator-rotate","sui-circular-progress-indicator-indeterminate-inner-circle":"sui-circular-progress-indicator-indeterminate-inner-circle","sui-circular-progress-indicator-pulse":"sui-circular-progress-indicator-pulse","sui-circular-progress-indicator-indeterminate-xlarge":"sui-circular-progress-indicator-indeterminate-xlarge","sui-circular-progress-indicator-indeterminate-large":"sui-circular-progress-indicator-indeterminate-large","sui-circular-progress-indicator-indeterminate-medium":"sui-circular-progress-indicator-indeterminate-medium","sui-circular-progress-indicator-indeterminate-small":"sui-circular-progress-indicator-indeterminate-small","sui-circular-progress-indicator-indeterminate-xsmall":"sui-circular-progress-indicator-indeterminate-xsmall","sui-circular-progress-indicator-indeterminate-primary":"sui-circular-progress-indicator-indeterminate-primary","sui-circular-progress-indicator-indeterminate-neutral":"sui-circular-progress-indicator-indeterminate-neutral","sui-circular-progress-indicator-indeterminate-danger":"sui-circular-progress-indicator-indeterminate-danger","sui-circular-progress-indicator-indeterminate-warning":"sui-circular-progress-indicator-indeterminate-warning","sui-circular-progress-indicator-indeterminate-success":"sui-circular-progress-indicator-indeterminate-success","sui-circular-progress-indicator-determinate-progress-circle":"sui-circular-progress-indicator-determinate-progress-circle","sui-circular-progress-indicator-determinate-primary":"sui-circular-progress-indicator-determinate-primary","sui-circular-progress-indicator-determinate-neutral":"sui-circular-progress-indicator-determinate-neutral","sui-circular-progress-indicator-determinate-danger":"sui-circular-progress-indicator-determinate-danger","sui-circular-progress-indicator-determinate-warning":"sui-circular-progress-indicator-determinate-warning","sui-circular-progress-indicator-determinate-success":"sui-circular-progress-indicator-determinate-success"});
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
const CircularProgressIndicator_CircularProgressIndicator = /*#__PURE__*/ forwardRef((inProps, ref)=>{
|
|
21
|
+
const props = useThemeProps({
|
|
22
|
+
props: inProps,
|
|
23
|
+
name: 'CircularProgressIndicator'
|
|
24
|
+
});
|
|
25
|
+
const { classes, className, children, variant = 'indeterminate', size = 'large', color = 'primary', value, progressBarProps: progressBarPropsProp, ...rest } = props;
|
|
26
|
+
const cls = useClasses('circular-progress-indicator', classes, className);
|
|
27
|
+
const progressBarProps = progressBarPropsProp || {};
|
|
28
|
+
let content = null;
|
|
29
|
+
if (variant === 'indeterminate') {
|
|
30
|
+
content = /*#__PURE__*/ jsx("span", {
|
|
31
|
+
className: cls('outer-circle', `${variant}-outer-circle`),
|
|
32
|
+
children: /*#__PURE__*/ jsx("span", {
|
|
33
|
+
className: cls('inner-circle', `${variant}-inner-circle`)
|
|
34
|
+
})
|
|
35
|
+
});
|
|
36
|
+
} else if (variant === 'determinate') {
|
|
37
|
+
if (value === undefined) {
|
|
38
|
+
throw new Error('The value prop is required for a determinate CircularProgressIndicator');
|
|
39
|
+
}
|
|
40
|
+
progressBarProps['aria-valuenow'] = value;
|
|
41
|
+
progressBarProps['aria-valuemin'] = 0;
|
|
42
|
+
progressBarProps['aria-valuemax'] = 100;
|
|
43
|
+
const radius = 28;
|
|
44
|
+
const circumference = 2 * Math.PI * radius;
|
|
45
|
+
const offset = circumference - value / 100 * circumference;
|
|
46
|
+
content = /*#__PURE__*/ jsx("svg", {
|
|
47
|
+
width: '100%',
|
|
48
|
+
height: '100%',
|
|
49
|
+
viewBox: "0 0 56 56",
|
|
50
|
+
fill: "none",
|
|
51
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
52
|
+
children: /*#__PURE__*/ jsx("circle", {
|
|
53
|
+
className: cls('progress-circle', `${variant}-progress-circle`),
|
|
54
|
+
cx: "28",
|
|
55
|
+
cy: "28",
|
|
56
|
+
r: radius,
|
|
57
|
+
fill: "none",
|
|
58
|
+
strokeWidth: 18,
|
|
59
|
+
strokeDasharray: circumference,
|
|
60
|
+
strokeDashoffset: offset,
|
|
61
|
+
transform: "rotate(-90 28 28)"
|
|
62
|
+
})
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
const { className: progressBarClassName, ...restProgressBarProps } = progressBarProps;
|
|
66
|
+
return /*#__PURE__*/ jsx("span", {
|
|
67
|
+
className: clsx(cls('root', variant, size, color, `${variant}-${size}`, `${variant}-${color}`), progressBarClassName),
|
|
68
|
+
...rest,
|
|
69
|
+
...restProgressBarProps,
|
|
70
|
+
role: "progressbar",
|
|
71
|
+
ref: ref,
|
|
72
|
+
children: content
|
|
73
|
+
});
|
|
74
|
+
});
|
|
75
|
+
CircularProgressIndicator_CircularProgressIndicator.displayName = 'SuiProgressIndicator';
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
export { CircularProgressIndicator as circularProgressIndicatorStyle, CircularProgressIndicator_CircularProgressIndicator as CircularProgressIndicator };
|
package/ClickAwayListener.js
CHANGED
package/ComponentsProps.js
CHANGED