rsuite 5.57.0 → 5.58.1
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/styles/index.css +30 -0
- package/AutoComplete/styles/index.css +0 -137
- package/CHANGELOG.md +25 -0
- package/Cascader/styles/index.css +0 -137
- package/CheckPicker/styles/index.css +0 -137
- package/CheckTree/styles/index.css +0 -137
- package/CheckTreePicker/styles/index.css +0 -137
- package/DatePicker/styles/index.css +0 -137
- package/DateRangePicker/styles/index.css +0 -137
- package/Dropdown/styles/index.css +35 -8
- package/Dropdown/styles/index.less +24 -13
- package/Heading/package.json +7 -0
- package/Heading/styles/index.css +42 -0
- package/Heading/styles/index.less +41 -0
- package/HeadingGroup/package.json +7 -0
- package/HeadingGroup/styles/index.css +5 -0
- package/HeadingGroup/styles/index.less +3 -0
- package/InputPicker/styles/index.css +29 -146
- package/InputPicker/styles/index.less +28 -12
- package/InputPicker/styles/mixin.less +7 -0
- package/MultiCascadeTree/styles/index.css +0 -137
- package/MultiCascader/styles/index.css +0 -137
- package/Nav/styles/index.css +35 -8
- package/Navbar/styles/index.css +35 -8
- package/Pagination/styles/index.css +0 -137
- package/Panel/styles/index.css +30 -0
- package/Panel/styles/index.less +1 -0
- package/Popover/styles/index.css +30 -0
- package/Popover/styles/index.less +3 -2
- package/SelectPicker/styles/index.css +0 -137
- package/Tabs/styles/index.css +35 -8
- package/TagInput/styles/index.css +132 -150
- package/TagPicker/styles/index.css +132 -150
- package/TagPicker/styles/index.less +57 -5
- package/TagPicker/styles/mixin.less +21 -0
- package/Text/package.json +7 -0
- package/Text/styles/index.css +192 -0
- package/Text/styles/index.less +117 -0
- package/cjs/Cascader/Cascader.js +1 -5
- package/cjs/CheckPicker/CheckPicker.js +2 -9
- package/cjs/CheckTreePicker/CheckTreePicker.js +2 -10
- package/cjs/DatePicker/DatePicker.js +5 -5
- package/cjs/DateRangePicker/DateRangePicker.js +3 -5
- package/cjs/Dropdown/DropdownItem.d.ts +10 -2
- package/cjs/Dropdown/DropdownItem.js +12 -3
- package/cjs/Heading/Heading.d.ts +16 -0
- package/cjs/Heading/Heading.js +44 -0
- package/cjs/Heading/index.d.ts +3 -0
- package/cjs/Heading/index.js +9 -0
- package/cjs/HeadingGroup/HeadingGroup.d.ts +8 -0
- package/cjs/HeadingGroup/HeadingGroup.js +17 -0
- package/cjs/HeadingGroup/index.d.ts +3 -0
- package/cjs/HeadingGroup/index.js +9 -0
- package/cjs/InputPicker/InputPicker.js +7 -8
- package/cjs/MultiCascader/MultiCascader.js +1 -5
- package/cjs/Panel/Panel.js +3 -1
- package/cjs/Popover/Popover.js +3 -1
- package/cjs/SelectPicker/SelectPicker.js +3 -9
- package/cjs/Text/Text.d.ts +47 -0
- package/cjs/Text/Text.js +72 -0
- package/cjs/Text/index.d.ts +3 -0
- package/cjs/Text/index.js +9 -0
- package/cjs/TreePicker/TreePicker.js +3 -10
- package/cjs/index.d.ts +23 -17
- package/cjs/index.js +26 -20
- package/cjs/internals/Overlay/OverlayTrigger.js +24 -17
- package/cjs/internals/Picker/PickerToggleTrigger.d.ts +1 -1
- package/cjs/internals/Picker/PickerToggleTrigger.js +1 -1
- package/cjs/internals/Picker/hooks/useToggleKeyDownEvent.d.ts +0 -2
- package/cjs/internals/Picker/hooks/useToggleKeyDownEvent.js +0 -4
- package/dist/rsuite-no-reset-rtl.css +329 -158
- package/dist/rsuite-no-reset-rtl.min.css +1 -1
- package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
- package/dist/rsuite-no-reset.css +329 -158
- package/dist/rsuite-no-reset.min.css +1 -1
- package/dist/rsuite-no-reset.min.css.map +1 -1
- package/dist/rsuite-rtl.css +329 -158
- package/dist/rsuite-rtl.min.css +1 -1
- package/dist/rsuite-rtl.min.css.map +1 -1
- package/dist/rsuite.css +329 -158
- package/dist/rsuite.js +82 -16
- package/dist/rsuite.js.map +1 -1
- package/dist/rsuite.min.css +1 -1
- package/dist/rsuite.min.css.map +1 -1
- package/dist/rsuite.min.js +1 -1
- package/dist/rsuite.min.js.map +1 -1
- package/esm/Cascader/Cascader.js +1 -5
- package/esm/CheckPicker/CheckPicker.js +2 -9
- package/esm/CheckTreePicker/CheckTreePicker.js +2 -10
- package/esm/DatePicker/DatePicker.js +6 -6
- package/esm/DateRangePicker/DateRangePicker.js +3 -5
- package/esm/Dropdown/DropdownItem.d.ts +10 -2
- package/esm/Dropdown/DropdownItem.js +12 -3
- package/esm/Heading/Heading.d.ts +16 -0
- package/esm/Heading/Heading.js +38 -0
- package/esm/Heading/index.d.ts +3 -0
- package/esm/Heading/index.js +3 -0
- package/esm/HeadingGroup/HeadingGroup.d.ts +8 -0
- package/esm/HeadingGroup/HeadingGroup.js +11 -0
- package/esm/HeadingGroup/index.d.ts +3 -0
- package/esm/HeadingGroup/index.js +3 -0
- package/esm/InputPicker/InputPicker.js +7 -8
- package/esm/MultiCascader/MultiCascader.js +1 -5
- package/esm/Panel/Panel.js +3 -1
- package/esm/Popover/Popover.js +3 -1
- package/esm/SelectPicker/SelectPicker.js +3 -9
- package/esm/Text/Text.d.ts +47 -0
- package/esm/Text/Text.js +66 -0
- package/esm/Text/index.d.ts +3 -0
- package/esm/Text/index.js +3 -0
- package/esm/TreePicker/TreePicker.js +3 -10
- package/esm/index.d.ts +23 -17
- package/esm/index.js +36 -17
- package/esm/internals/Overlay/OverlayTrigger.js +24 -17
- package/esm/internals/Picker/PickerToggleTrigger.d.ts +1 -1
- package/esm/internals/Picker/PickerToggleTrigger.js +1 -1
- package/esm/internals/Picker/hooks/useToggleKeyDownEvent.d.ts +0 -2
- package/esm/internals/Picker/hooks/useToggleKeyDownEvent.js +0 -4
- package/internals/Picker/styles/index.less +0 -5
- package/internals/Picker/styles/mixin.less +0 -73
- package/package.json +1 -1
- package/styles/color-modes/light.less +7 -0
- package/styles/index.less +3 -0
package/esm/Text/Text.js
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import PropTypes from 'prop-types';
|
|
6
|
+
import { useClassNames } from '../utils';
|
|
7
|
+
import { oneOf } from '../internals/propTypes';
|
|
8
|
+
var fontSizeMap = {
|
|
9
|
+
sm: 12,
|
|
10
|
+
md: 14,
|
|
11
|
+
lg: 16,
|
|
12
|
+
xl: 18,
|
|
13
|
+
xxl: 20
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
*
|
|
17
|
+
* The `Text` component is used to display text.
|
|
18
|
+
*
|
|
19
|
+
* @see https://rsuitejs.com/components/text
|
|
20
|
+
*/
|
|
21
|
+
var Text = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
22
|
+
var _props$as = props.as,
|
|
23
|
+
Component = _props$as === void 0 ? 'p' : _props$as,
|
|
24
|
+
align = props.align,
|
|
25
|
+
_props$classPrefix = props.classPrefix,
|
|
26
|
+
classPrefix = _props$classPrefix === void 0 ? 'text' : _props$classPrefix,
|
|
27
|
+
color = props.color,
|
|
28
|
+
className = props.className,
|
|
29
|
+
maxLines = props.maxLines,
|
|
30
|
+
weight = props.weight,
|
|
31
|
+
muted = props.muted,
|
|
32
|
+
transform = props.transform,
|
|
33
|
+
size = props.size,
|
|
34
|
+
style = props.style,
|
|
35
|
+
rest = _objectWithoutPropertiesLoose(props, ["as", "align", "classPrefix", "color", "className", "maxLines", "weight", "muted", "transform", "size", "style"]);
|
|
36
|
+
var _useClassNames = useClassNames(classPrefix),
|
|
37
|
+
withClassPrefix = _useClassNames.withClassPrefix,
|
|
38
|
+
merge = _useClassNames.merge;
|
|
39
|
+
var classes = merge(className, withClassPrefix(color, align, weight, transform, {
|
|
40
|
+
muted: muted,
|
|
41
|
+
ellipsis: maxLines
|
|
42
|
+
}));
|
|
43
|
+
var styles = _extends({
|
|
44
|
+
fontSize: fontSizeMap[size] || size
|
|
45
|
+
}, maxLines ? {
|
|
46
|
+
WebkitLineClamp: maxLines
|
|
47
|
+
} : null, style);
|
|
48
|
+
return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
|
|
49
|
+
ref: ref,
|
|
50
|
+
className: classes,
|
|
51
|
+
style: styles
|
|
52
|
+
}));
|
|
53
|
+
});
|
|
54
|
+
Text.displayName = 'Text';
|
|
55
|
+
Text.propTypes = {
|
|
56
|
+
className: PropTypes.string,
|
|
57
|
+
classPrefix: PropTypes.string,
|
|
58
|
+
as: PropTypes.elementType,
|
|
59
|
+
size: PropTypes.oneOfType([PropTypes.number, oneOf(['sm', 'md', 'lg', 'xl', 'xxl'])]),
|
|
60
|
+
muted: PropTypes.bool,
|
|
61
|
+
transform: oneOf(['uppercase', 'lowercase', 'capitalize']),
|
|
62
|
+
align: oneOf(['left', 'center', 'right', 'justify']),
|
|
63
|
+
weight: oneOf(['thin', 'light', 'regular', 'medium', 'semibold', 'bold', 'extrabold']),
|
|
64
|
+
maxLines: PropTypes.number
|
|
65
|
+
};
|
|
66
|
+
export default Text;
|
|
@@ -85,13 +85,11 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
85
85
|
onExit = props.onExit,
|
|
86
86
|
onExited = props.onExited,
|
|
87
87
|
onClean = props.onClean,
|
|
88
|
-
onOpen = props.onOpen,
|
|
89
88
|
onSearch = props.onSearch,
|
|
90
89
|
onSelect = props.onSelect,
|
|
91
90
|
onSelectItem = props.onSelectItem,
|
|
92
91
|
onChange = props.onChange,
|
|
93
92
|
onEntered = props.onEntered,
|
|
94
|
-
onClose = props.onClose,
|
|
95
93
|
onDragEnd = props.onDragEnd,
|
|
96
94
|
onDragStart = props.onDragStart,
|
|
97
95
|
onDragEnter = props.onDragEnter,
|
|
@@ -102,7 +100,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
102
100
|
renderExtraFooter = props.renderExtraFooter,
|
|
103
101
|
renderMenu = props.renderMenu,
|
|
104
102
|
renderValue = props.renderValue,
|
|
105
|
-
rest = _objectWithoutPropertiesLoose(props, ["as", "data", "appearance", "style", "showIndentLine", "value", "locale", "height", "menuMaxHeight", "menuStyle", "className", "disabled", "placement", "cleanable", "searchable", "virtualized", "classPrefix", "defaultValue", "placeholder", "searchKeyword", "menuClassName", "menuAutoWidth", "searchBy", "toggleAs", "labelKey", "valueKey", "childrenKey", "draggable", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "id", "listProps", "getChildren", "renderTreeIcon", "renderTreeNode", "onExit", "onExited", "onClean", "
|
|
103
|
+
rest = _objectWithoutPropertiesLoose(props, ["as", "data", "appearance", "style", "showIndentLine", "value", "locale", "height", "menuMaxHeight", "menuStyle", "className", "disabled", "placement", "cleanable", "searchable", "virtualized", "classPrefix", "defaultValue", "placeholder", "searchKeyword", "menuClassName", "menuAutoWidth", "searchBy", "toggleAs", "labelKey", "valueKey", "childrenKey", "draggable", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "id", "listProps", "getChildren", "renderTreeIcon", "renderTreeNode", "onExit", "onExited", "onClean", "onSearch", "onSelect", "onSelectItem", "onChange", "onEntered", "onDragEnd", "onDragStart", "onDragEnter", "onDragLeave", "onDragOver", "onDrop", "onExpand", "renderExtraFooter", "renderMenu", "renderValue"]);
|
|
106
104
|
var _useCustom = useCustom('Picker', overrideLocale),
|
|
107
105
|
rtl = _useCustom.rtl,
|
|
108
106
|
locale = _useCustom.locale;
|
|
@@ -390,15 +388,11 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
390
388
|
setDragOverNodeKey(null);
|
|
391
389
|
});
|
|
392
390
|
var handleOpen = useEventCallback(function () {
|
|
393
|
-
var _trigger$current2, _trigger$current2$ope;
|
|
394
|
-
(_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : (_trigger$current2$ope = _trigger$current2.open) === null || _trigger$current2$ope === void 0 ? void 0 : _trigger$current2$ope.call(_trigger$current2);
|
|
395
391
|
focusActiveNode();
|
|
396
|
-
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
397
392
|
setActive(true);
|
|
398
393
|
});
|
|
399
394
|
var handleClose = useEventCallback(function () {
|
|
400
|
-
var
|
|
401
|
-
(_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : (_trigger$current3$clo = _trigger$current3.close) === null || _trigger$current3$clo === void 0 ? void 0 : _trigger$current3$clo.call(_trigger$current3);
|
|
395
|
+
var _target$current2;
|
|
402
396
|
setSearchKeyword('');
|
|
403
397
|
setActive(false);
|
|
404
398
|
setFocusItemValue(activeNode === null || activeNode === void 0 ? void 0 : activeNode[valueKey]);
|
|
@@ -486,7 +480,6 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
486
480
|
searchInput: searchInput,
|
|
487
481
|
active: active,
|
|
488
482
|
onExit: handleClean,
|
|
489
|
-
onClose: handleClose,
|
|
490
483
|
onMenuKeyDown: function onMenuKeyDown(event) {
|
|
491
484
|
_onMenuKeyDown(event, {
|
|
492
485
|
down: function down() {
|
|
@@ -681,7 +674,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
681
674
|
placement: placement,
|
|
682
675
|
onEnter: handleOpen,
|
|
683
676
|
onEntered: onEntered,
|
|
684
|
-
onExit:
|
|
677
|
+
onExit: onExit,
|
|
685
678
|
onExited: createChainedFunction(handleClose, onExited),
|
|
686
679
|
speaker: renderTreeView
|
|
687
680
|
}, /*#__PURE__*/React.createElement(Component, {
|
package/esm/index.d.ts
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
export { default as Text } from './Text';
|
|
2
|
+
export type { TextProps } from './Text';
|
|
3
|
+
export { default as Heading } from './Heading';
|
|
4
|
+
export type { HeadingProps } from './Heading';
|
|
5
|
+
export { default as HeadingGroup } from './HeadingGroup';
|
|
6
|
+
export type { HeadingGroupProps } from './HeadingGroup';
|
|
7
|
+
export { default as SafeAnchor } from './SafeAnchor';
|
|
8
|
+
export type { SafeAnchorProps } from './SafeAnchor';
|
|
1
9
|
export { default as Button } from './Button';
|
|
2
10
|
export type { ButtonProps } from './Button';
|
|
3
11
|
export { default as IconButton } from './IconButton';
|
|
@@ -14,29 +22,29 @@ export { default as Popover } from './Popover';
|
|
|
14
22
|
export type { PopoverProps } from './Popover';
|
|
15
23
|
export { default as Modal } from './Modal';
|
|
16
24
|
export type { ModalProps, ModalBodyProps, ModalDialogProps, ModalFooterProps, ModalHeaderProps, ModalTitleProps } from './Modal';
|
|
25
|
+
export { default as Drawer } from './Drawer';
|
|
26
|
+
export type { DrawerProps } from './Drawer';
|
|
27
|
+
export { default as Dropdown } from './Dropdown';
|
|
28
|
+
export type { DropdownProps, DropdownMenuItemProps, DropdownMenuProps } from './Dropdown';
|
|
17
29
|
export { default as Notification } from './Notification';
|
|
18
30
|
export type { NotificationProps } from './Notification';
|
|
19
31
|
export { default as Message } from './Message';
|
|
20
32
|
export type { MessageProps } from './Message';
|
|
21
|
-
export { default as Drawer } from './Drawer';
|
|
22
|
-
export type { DrawerProps } from './Drawer';
|
|
23
33
|
export { default as Loader } from './Loader';
|
|
24
34
|
export type { LoaderProps } from './Loader';
|
|
25
|
-
export { default as SafeAnchor } from './SafeAnchor';
|
|
26
|
-
export type { SafeAnchorProps } from './SafeAnchor';
|
|
27
35
|
export { default as Placeholder } from './Placeholder';
|
|
28
36
|
export type { PlaceholderGraphProps, PlaceholderGridProps, PlaceholderParagraphProps } from './Placeholder';
|
|
29
37
|
export { default as Badge } from './Badge';
|
|
30
38
|
export type { BadgeProps } from './Badge';
|
|
39
|
+
export { default as toaster } from './toaster';
|
|
40
|
+
export type { Toaster } from './toaster';
|
|
41
|
+
export { default as useToaster } from './useToaster';
|
|
42
|
+
export { default as Progress } from './Progress';
|
|
43
|
+
export type { ProgressLineProps, ProgressCircleProps } from './Progress';
|
|
31
44
|
export { default as Avatar } from './Avatar';
|
|
32
45
|
export type { AvatarProps } from './Avatar';
|
|
33
46
|
export { default as AvatarGroup } from './AvatarGroup';
|
|
34
47
|
export type { AvatarGroupProps } from './AvatarGroup';
|
|
35
|
-
export { default as toaster } from './toaster';
|
|
36
|
-
export type { Toaster } from './toaster';
|
|
37
|
-
export { default as useToaster } from './useToaster';
|
|
38
|
-
export { default as Dropdown } from './Dropdown';
|
|
39
|
-
export type { DropdownProps, DropdownMenuItemProps, DropdownMenuProps } from './Dropdown';
|
|
40
48
|
export { default as Nav } from './Nav';
|
|
41
49
|
export type { NavProps, NavItemProps } from './Nav';
|
|
42
50
|
export { default as Navbar } from './Navbar';
|
|
@@ -49,10 +57,10 @@ export { default as Pagination } from './Pagination';
|
|
|
49
57
|
export type { PaginationProps, PaginationButtonProps, BasePaginationProps } from './Pagination';
|
|
50
58
|
export { default as Steps } from './Steps';
|
|
51
59
|
export type { StepsProps, StepItemProps } from './Steps';
|
|
52
|
-
export { default as Toggle } from './Toggle';
|
|
53
|
-
export type { ToggleProps } from './Toggle';
|
|
54
60
|
export { default as Form, useFormClassNames } from './Form';
|
|
55
61
|
export type { FormProps, FormInstance, FormGroupProps, FormErrorMessageProps, FormControlLabelProps, FormHelpTextProps, FormControlProps } from './Form';
|
|
62
|
+
export { default as Toggle } from './Toggle';
|
|
63
|
+
export type { ToggleProps } from './Toggle';
|
|
56
64
|
export { default as Input } from './Input';
|
|
57
65
|
export type { InputProps } from './Input';
|
|
58
66
|
export { default as MaskedInput } from './MaskedInput';
|
|
@@ -121,16 +129,10 @@ export { default as MultiCascadeTree } from './MultiCascadeTree';
|
|
|
121
129
|
export type { MultiCascadeTreeProps } from './MultiCascadeTree';
|
|
122
130
|
export { default as Panel } from './Panel';
|
|
123
131
|
export type { PanelProps } from './Panel';
|
|
124
|
-
export { default as Accordion } from './Accordion';
|
|
125
|
-
export type { AccordionProps } from './Accordion';
|
|
126
132
|
export { default as PanelGroup } from './PanelGroup';
|
|
127
133
|
export type { PanelGroupProps } from './PanelGroup';
|
|
128
|
-
export { default as Tabs } from './Tabs';
|
|
129
|
-
export type { TabsProps } from './Tabs';
|
|
130
134
|
export { default as Table } from './Table';
|
|
131
135
|
export type { TableProps, ColumnProps, ColumnGroupProps, CellProps, TableLocaleType } from './Table';
|
|
132
|
-
export { default as Progress } from './Progress';
|
|
133
|
-
export type { ProgressLineProps, ProgressCircleProps } from './Progress';
|
|
134
136
|
export { default as Timeline } from './Timeline';
|
|
135
137
|
export type { TimelineProps, TimelineItemProps } from './Timeline';
|
|
136
138
|
export { default as Tag } from './Tag';
|
|
@@ -178,3 +180,7 @@ export type { PickerHandle } from './internals/Picker';
|
|
|
178
180
|
export { default as useMediaQuery } from './useMediaQuery';
|
|
179
181
|
export { default as VisuallyHidden } from './VisuallyHidden';
|
|
180
182
|
export type { VisuallyHiddenProps } from './VisuallyHidden';
|
|
183
|
+
export { default as Tabs } from './Tabs';
|
|
184
|
+
export type { TabsProps } from './Tabs';
|
|
185
|
+
export { default as Accordion } from './Accordion';
|
|
186
|
+
export type { AccordionProps } from './Accordion';
|
package/esm/index.js
CHANGED
|
@@ -1,36 +1,52 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
//
|
|
2
|
+
// Typography
|
|
3
|
+
// --------------------------------------------------------
|
|
4
|
+
export { default as Text } from './Text';
|
|
5
|
+
export { default as Heading } from './Heading';
|
|
6
|
+
export { default as HeadingGroup } from './HeadingGroup';
|
|
7
|
+
export { default as SafeAnchor } from './SafeAnchor';
|
|
8
|
+
// Buttons
|
|
9
|
+
// --------------------------------------------------------
|
|
3
10
|
export { default as Button } from './Button';
|
|
4
11
|
export { default as IconButton } from './IconButton';
|
|
5
12
|
export { default as ButtonToolbar } from './ButtonToolbar';
|
|
6
13
|
export { default as ButtonGroup } from './ButtonGroup';
|
|
14
|
+
// Overlays
|
|
15
|
+
// --------------------------------------------------------
|
|
7
16
|
export { default as Whisper } from './Whisper';
|
|
8
17
|
export { default as Tooltip } from './Tooltip';
|
|
9
18
|
export { default as Popover } from './Popover';
|
|
10
19
|
export { default as Modal } from './Modal';
|
|
20
|
+
export { default as Drawer } from './Drawer';
|
|
21
|
+
export { default as Dropdown } from './Dropdown';
|
|
22
|
+
// Status
|
|
23
|
+
// --------------------------------------------------------
|
|
11
24
|
export { default as Notification } from './Notification';
|
|
12
25
|
export { default as Message } from './Message';
|
|
13
|
-
export { default as Drawer } from './Drawer';
|
|
14
26
|
export { default as Loader } from './Loader';
|
|
15
|
-
export { default as SafeAnchor } from './SafeAnchor';
|
|
16
27
|
export { default as Placeholder } from './Placeholder';
|
|
17
28
|
export { default as Badge } from './Badge';
|
|
18
|
-
export { default as Avatar } from './Avatar';
|
|
19
|
-
export { default as AvatarGroup } from './AvatarGroup';
|
|
20
29
|
export { default as toaster } from './toaster';
|
|
21
30
|
export { default as useToaster } from './useToaster';
|
|
22
|
-
|
|
31
|
+
export { default as Progress } from './Progress';
|
|
32
|
+
// Media
|
|
33
|
+
// --------------------------------------------------------
|
|
34
|
+
export { default as Avatar } from './Avatar';
|
|
35
|
+
export { default as AvatarGroup } from './AvatarGroup';
|
|
23
36
|
// Nav
|
|
24
|
-
|
|
37
|
+
// --------------------------------------------------------
|
|
25
38
|
export { default as Nav } from './Nav';
|
|
26
39
|
export { default as Navbar } from './Navbar';
|
|
27
40
|
export { default as Sidenav } from './Sidenav';
|
|
28
41
|
export { default as Breadcrumb } from './Breadcrumb';
|
|
29
42
|
export { default as Pagination } from './Pagination';
|
|
30
43
|
export { default as Steps } from './Steps';
|
|
31
|
-
//
|
|
32
|
-
|
|
44
|
+
// Form
|
|
45
|
+
// --------------------------------------------------------
|
|
33
46
|
export { default as Form, useFormClassNames } from './Form';
|
|
47
|
+
// Data Entry
|
|
48
|
+
// --------------------------------------------------------
|
|
49
|
+
export { default as Toggle } from './Toggle';
|
|
34
50
|
export { default as Input } from './Input';
|
|
35
51
|
export { default as MaskedInput } from './MaskedInput';
|
|
36
52
|
export { default as InputNumber } from './InputNumber';
|
|
@@ -60,17 +76,15 @@ export { default as Slider } from './Slider';
|
|
|
60
76
|
export { default as RangeSlider } from './RangeSlider';
|
|
61
77
|
export { default as Rate } from './Rate';
|
|
62
78
|
export { default as InlineEdit } from './InlineEdit';
|
|
63
|
-
// Data
|
|
79
|
+
// Data Display
|
|
80
|
+
// --------------------------------------------------------
|
|
64
81
|
export { default as Tree } from './Tree';
|
|
65
82
|
export { default as CheckTree } from './CheckTree';
|
|
66
83
|
export { default as CascadeTree } from './CascadeTree';
|
|
67
84
|
export { default as MultiCascadeTree } from './MultiCascadeTree';
|
|
68
85
|
export { default as Panel } from './Panel';
|
|
69
|
-
export { default as Accordion } from './Accordion';
|
|
70
86
|
export { default as PanelGroup } from './PanelGroup';
|
|
71
|
-
export { default as Tabs } from './Tabs';
|
|
72
87
|
export { default as Table } from './Table';
|
|
73
|
-
export { default as Progress } from './Progress';
|
|
74
88
|
export { default as Timeline } from './Timeline';
|
|
75
89
|
export { default as Tag } from './Tag';
|
|
76
90
|
export { default as TagGroup } from './TagGroup';
|
|
@@ -78,7 +92,7 @@ export { default as List } from './List';
|
|
|
78
92
|
export { default as Calendar } from './Calendar';
|
|
79
93
|
export { default as Carousel } from './Carousel';
|
|
80
94
|
// Layout
|
|
81
|
-
|
|
95
|
+
// --------------------------------------------------------
|
|
82
96
|
export { default as Grid } from './Grid';
|
|
83
97
|
export { default as Row } from './Row';
|
|
84
98
|
export { default as Col } from './Col';
|
|
@@ -90,12 +104,17 @@ export { default as Sidebar } from './Sidebar';
|
|
|
90
104
|
export { default as Footer } from './Footer';
|
|
91
105
|
export { default as Divider } from './Divider';
|
|
92
106
|
export { default as Stack } from './Stack';
|
|
93
|
-
// Utils
|
|
94
|
-
|
|
107
|
+
// Utils and Hooks
|
|
108
|
+
// --------------------------------------------------------
|
|
95
109
|
export { default as Schema } from './Schema';
|
|
96
110
|
export { default as Animation } from './Animation';
|
|
97
111
|
export { default as DOMHelper } from './DOMHelper';
|
|
98
112
|
export { default as Affix } from './Affix';
|
|
99
113
|
export { default as CustomProvider } from './CustomProvider';
|
|
100
114
|
export { default as useMediaQuery } from './useMediaQuery';
|
|
101
|
-
|
|
115
|
+
|
|
116
|
+
// Disclosure
|
|
117
|
+
// --------------------------------------------------------
|
|
118
|
+
export { default as VisuallyHidden } from './VisuallyHidden';
|
|
119
|
+
export { default as Tabs } from './Tabs';
|
|
120
|
+
export { default as Accordion } from './Accordion';
|
|
@@ -88,9 +88,10 @@ var OverlayTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
88
88
|
onContextMenu = props.onContextMenu,
|
|
89
89
|
onFocus = props.onFocus,
|
|
90
90
|
onBlur = props.onBlur,
|
|
91
|
+
onOpen = props.onOpen,
|
|
91
92
|
onClose = props.onClose,
|
|
92
93
|
onExited = props.onExited,
|
|
93
|
-
rest = _objectWithoutPropertiesLoose(props, ["children", "container", "controlId", "defaultOpen", "trigger", "disabled", "followCursor", "readOnly", "plaintext", "open", "delay", "delayOpen", "delayClose", "enterable", "placement", "speaker", "rootClose", "onClick", "onMouseOver", "onMouseMove", "onMouseOut", "onContextMenu", "onFocus", "onBlur", "onClose", "onExited"]);
|
|
94
|
+
rest = _objectWithoutPropertiesLoose(props, ["children", "container", "controlId", "defaultOpen", "trigger", "disabled", "followCursor", "readOnly", "plaintext", "open", "delay", "delayOpen", "delayClose", "enterable", "placement", "speaker", "rootClose", "onClick", "onMouseOver", "onMouseMove", "onMouseOut", "onContextMenu", "onFocus", "onBlur", "onOpen", "onClose", "onExited"]);
|
|
94
95
|
var _usePortal = usePortal({
|
|
95
96
|
container: container
|
|
96
97
|
}),
|
|
@@ -129,30 +130,38 @@ var OverlayTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
129
130
|
|
|
130
131
|
// Whether the cursor is on the overlay
|
|
131
132
|
var mouseEnter = useRef(false);
|
|
133
|
+
var handleOpenChange = useCallback(function (nextOpen, closeCause) {
|
|
134
|
+
// if the overlay open state is not changed, do not fire the event
|
|
135
|
+
if (nextOpen === open) return;
|
|
136
|
+
if (nextOpen) {
|
|
137
|
+
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
138
|
+
} else {
|
|
139
|
+
onClose === null || onClose === void 0 ? void 0 : onClose(closeCause);
|
|
140
|
+
}
|
|
141
|
+
setOpen(nextOpen);
|
|
142
|
+
}, [open, onOpen, onClose, setOpen]);
|
|
132
143
|
var handleOpen = useCallback(function (delay) {
|
|
133
144
|
var ms = _isUndefined(delay) ? delayOpen : delay;
|
|
134
145
|
if (ms && typeof ms === 'number') {
|
|
135
146
|
return delayOpenTimer.current = setTimeout(function () {
|
|
136
147
|
delayOpenTimer.current = null;
|
|
137
148
|
if (mouseEnter.current) {
|
|
138
|
-
|
|
149
|
+
handleOpenChange(true);
|
|
139
150
|
}
|
|
140
151
|
}, ms);
|
|
141
152
|
}
|
|
142
|
-
|
|
143
|
-
}, [delayOpen,
|
|
144
|
-
var handleClose = useCallback(function (delay,
|
|
153
|
+
handleOpenChange(true);
|
|
154
|
+
}, [delayOpen, handleOpenChange]);
|
|
155
|
+
var handleClose = useCallback(function (delay, closeCause) {
|
|
145
156
|
var ms = _isUndefined(delay) ? delayClose : delay;
|
|
146
157
|
if (ms && typeof ms === 'number') {
|
|
147
158
|
return delayCloseTimer.current = setTimeout(function () {
|
|
148
159
|
delayCloseTimer.current = null;
|
|
149
|
-
|
|
150
|
-
callback === null || callback === void 0 ? void 0 : callback();
|
|
160
|
+
handleOpenChange(false, closeCause);
|
|
151
161
|
}, ms);
|
|
152
162
|
}
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
}, [delayClose, setOpen]);
|
|
163
|
+
handleOpenChange(false, closeCause);
|
|
164
|
+
}, [delayClose, handleOpenChange]);
|
|
156
165
|
var handleExited = useCallback(function () {
|
|
157
166
|
setCursorPosition(null);
|
|
158
167
|
}, []);
|
|
@@ -172,9 +181,7 @@ var OverlayTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
172
181
|
},
|
|
173
182
|
open: handleOpen,
|
|
174
183
|
close: function close(delay) {
|
|
175
|
-
return handleClose(delay,
|
|
176
|
-
return onClose === null || onClose === void 0 ? void 0 : onClose(OverlayCloseCause.ImperativeHandle);
|
|
177
|
-
});
|
|
184
|
+
return handleClose(delay, OverlayCloseCause.ImperativeHandle);
|
|
178
185
|
},
|
|
179
186
|
updatePosition: function updatePosition() {
|
|
180
187
|
var _overlayRef$current2, _overlayRef$current2$;
|
|
@@ -189,7 +196,7 @@ var OverlayTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
189
196
|
var handleCloseWhenLeave = useCallback(function () {
|
|
190
197
|
// When the cursor is not on the overlay and not on the trigger, it is closed.
|
|
191
198
|
if (!isOnOverlay.current && !isOnTrigger.current) {
|
|
192
|
-
handleClose();
|
|
199
|
+
handleClose(undefined, OverlayCloseCause.ClickOutside);
|
|
193
200
|
}
|
|
194
201
|
}, [handleClose]);
|
|
195
202
|
var handleDelayedOpen = useCallback(function () {
|
|
@@ -321,9 +328,9 @@ var OverlayTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
321
328
|
var overlayProps = _extends({}, rest, {
|
|
322
329
|
rootClose: rootClose,
|
|
323
330
|
triggerTarget: triggerRef,
|
|
324
|
-
onClose: trigger !== 'none' ?
|
|
325
|
-
return
|
|
326
|
-
}
|
|
331
|
+
onClose: trigger !== 'none' ? function () {
|
|
332
|
+
return handleClose(undefined, OverlayCloseCause.ClickOutside);
|
|
333
|
+
} : undefined,
|
|
327
334
|
onExited: createChainedFunction(followCursor ? handleExited : undefined, onExited),
|
|
328
335
|
placement: placement,
|
|
329
336
|
container: containerElement,
|
|
@@ -3,7 +3,7 @@ import { OverlayTriggerHandle, OverlayTriggerProps, OverlayTriggerType } from '.
|
|
|
3
3
|
import { PositionChildProps } from '../../internals/Overlay/Position';
|
|
4
4
|
import { TypeAttributes, AnimationEventProps } from '../../@types/common';
|
|
5
5
|
export type { OverlayTriggerHandle, PositionChildProps };
|
|
6
|
-
export interface PickerToggleTriggerProps extends Omit<AnimationEventProps, 'onEntering' | 'onExiting'>, Pick<OverlayTriggerProps, 'speaker' | 'onClose'> {
|
|
6
|
+
export interface PickerToggleTriggerProps extends Omit<AnimationEventProps, 'onEntering' | 'onExiting'>, Pick<OverlayTriggerProps, 'speaker' | 'onOpen' | 'onClose'> {
|
|
7
7
|
id?: string;
|
|
8
8
|
/**
|
|
9
9
|
* Identifies the combobox has having a popout, and indicates the type.
|
|
@@ -5,7 +5,7 @@ import React from 'react';
|
|
|
5
5
|
import pick from 'lodash/pick';
|
|
6
6
|
import OverlayTrigger from '../../internals/Overlay/OverlayTrigger';
|
|
7
7
|
import { placementPolyfill, useCustom, useUniqueId } from '../../utils';
|
|
8
|
-
export var omitTriggerPropKeys = ['onEntered', 'onExited', 'onEnter', 'onEntering', 'onExit', 'onExiting', 'open', 'defaultOpen', 'container', 'containerPadding', 'preventOverflow'];
|
|
8
|
+
export var omitTriggerPropKeys = ['onEntered', 'onExited', 'onEnter', 'onEntering', 'onExit', 'onExiting', 'open', 'onOpen', 'defaultOpen', 'onClose', 'container', 'containerPadding', 'preventOverflow'];
|
|
9
9
|
export var pickTriggerPropKeys = [].concat(omitTriggerPropKeys, ['disabled', 'plaintext', 'readOnly', 'loading', 'label']);
|
|
10
10
|
export var ComboboxContextContext = /*#__PURE__*/React.createContext({
|
|
11
11
|
popupType: 'listbox'
|
|
@@ -11,8 +11,6 @@ interface ToggleKeyDownEventProps {
|
|
|
11
11
|
loading?: boolean;
|
|
12
12
|
onExit?: (event: any) => void;
|
|
13
13
|
onKeyDown?: (event: any) => void;
|
|
14
|
-
onOpen?: () => void;
|
|
15
|
-
onClose?: () => void;
|
|
16
14
|
onMenuKeyDown?: (event: any) => void;
|
|
17
15
|
onMenuPressEnter?: (event: any) => void;
|
|
18
16
|
onMenuPressBackspace?: (event: any) => void;
|
|
@@ -16,8 +16,6 @@ var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
|
|
|
16
16
|
disabled = props.disabled,
|
|
17
17
|
loading = props.loading,
|
|
18
18
|
onExit = props.onExit,
|
|
19
|
-
onOpen = props.onOpen,
|
|
20
|
-
onClose = props.onClose,
|
|
21
19
|
onKeyDown = props.onKeyDown,
|
|
22
20
|
onMenuKeyDown = props.onMenuKeyDown,
|
|
23
21
|
onMenuPressEnter = props.onMenuPressEnter,
|
|
@@ -28,12 +26,10 @@ var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
|
|
|
28
26
|
|
|
29
27
|
// The focus is on the trigger button after closing
|
|
30
28
|
(_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : (_trigger$current2$foc = _trigger$current2.focus) === null || _trigger$current2$foc === void 0 ? void 0 : _trigger$current2$foc.call(_trigger$current2);
|
|
31
|
-
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
32
29
|
});
|
|
33
30
|
var handleOpen = useEventCallback(function () {
|
|
34
31
|
var _trigger$current3, _trigger$current3$ope;
|
|
35
32
|
(_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : (_trigger$current3$ope = _trigger$current3.open) === null || _trigger$current3$ope === void 0 ? void 0 : _trigger$current3$ope.call(_trigger$current3);
|
|
36
|
-
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
37
33
|
});
|
|
38
34
|
var handleToggleDropdown = useEventCallback(function () {
|
|
39
35
|
if (active) {
|
|
@@ -182,14 +182,12 @@
|
|
|
182
182
|
/* stylelint-disable-next-line */ // Custom button sizes
|
|
183
183
|
.rs-picker-toggle.rs-btn {
|
|
184
184
|
.picker-button-caret-md();
|
|
185
|
-
.tag-picker-search-input-md();
|
|
186
185
|
.date-picker-button-caret-md();
|
|
187
186
|
.date-picker-button-size(base);
|
|
188
187
|
|
|
189
188
|
&-lg {
|
|
190
189
|
.picker-button-caret-lg();
|
|
191
190
|
.picker-default-button-reset-padding-left(large);
|
|
192
|
-
.tag-picker-search-input-lg();
|
|
193
191
|
.date-picker-button-caret-lg();
|
|
194
192
|
.date-picker-button-size(large);
|
|
195
193
|
|
|
@@ -203,7 +201,6 @@
|
|
|
203
201
|
&-md {
|
|
204
202
|
.picker-button-caret-md();
|
|
205
203
|
.picker-default-button-reset-padding-left(base);
|
|
206
|
-
.tag-picker-search-input-md();
|
|
207
204
|
.date-picker-button-caret-md();
|
|
208
205
|
.date-picker-button-size(base);
|
|
209
206
|
}
|
|
@@ -213,7 +210,6 @@
|
|
|
213
210
|
|
|
214
211
|
.picker-button-caret-sm();
|
|
215
212
|
.picker-default-button-reset-padding-left(small);
|
|
216
|
-
.tag-picker-search-input-sm();
|
|
217
213
|
.date-picker-button-caret-sm();
|
|
218
214
|
.date-picker-button-size(small);
|
|
219
215
|
}
|
|
@@ -223,7 +219,6 @@
|
|
|
223
219
|
|
|
224
220
|
.picker-button-caret-xs();
|
|
225
221
|
.picker-default-button-reset-padding-left(extra-small);
|
|
226
|
-
.tag-picker-search-input-xs();
|
|
227
222
|
.date-picker-button-caret-xs();
|
|
228
223
|
.date-picker-button-size(extra-small);
|
|
229
224
|
}
|
|
@@ -220,79 +220,6 @@
|
|
|
220
220
|
}
|
|
221
221
|
}
|
|
222
222
|
|
|
223
|
-
.tag-picker-search-input-size(@padding-vertical; @padding-horizontal; @font-size; @line-height;) {
|
|
224
|
-
.rs-picker-input:not(.rs-picker-tag) & ~ .rs-picker-textbox .rs-picker-search-input {
|
|
225
|
-
padding: (@padding-vertical - 1px) @padding-horizontal;
|
|
226
|
-
font-size: @font-size;
|
|
227
|
-
line-height: @line-height;
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
// FIXME Bad design. Should not set search input styles in a mixin that is used in picker buttons.
|
|
231
|
-
.rs-picker-tag & ~ .rs-picker-textbox {
|
|
232
|
-
padding-bottom: @padding-vertical - 3px;
|
|
233
|
-
|
|
234
|
-
.rs-tag {
|
|
235
|
-
margin-top: @padding-vertical - 3px;
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
.rs-picker-search-input {
|
|
239
|
-
padding-left: @padding-horizontal;
|
|
240
|
-
margin-top: @padding-vertical - 3px;
|
|
241
|
-
font-size: @font-size;
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
input {
|
|
245
|
-
height: @line-height * @font-size - 2px;
|
|
246
|
-
}
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
.rs-picker-input.rs-picker-tag & {
|
|
250
|
-
padding-top: @padding-vertical - 1px;
|
|
251
|
-
padding-bottom: @padding-vertical - 1px;
|
|
252
|
-
box-shadow: none;
|
|
253
|
-
}
|
|
254
|
-
}
|
|
255
|
-
|
|
256
|
-
.tag-picker-search-input-lg() {
|
|
257
|
-
.tag-picker-search-input-size(
|
|
258
|
-
@padding-y-lg - 1; @padding-x-lg; @font-size-large; @line-height-large
|
|
259
|
-
);
|
|
260
|
-
}
|
|
261
|
-
|
|
262
|
-
.tag-picker-search-input-md() {
|
|
263
|
-
.tag-picker-search-input-size(
|
|
264
|
-
@padding-y; @padding-x; @font-size-base; @line-height-base
|
|
265
|
-
);
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
.tag-picker-search-input-sm() {
|
|
269
|
-
.tag-picker-search-input-size(
|
|
270
|
-
@padding-y-sm; @padding-x-sm; @font-size-base; @line-height-base
|
|
271
|
-
);
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
.tag-picker-search-input-xs() {
|
|
275
|
-
/* stylelint-disable */ //Formatted by prettier
|
|
276
|
-
.tag-picker-search-input-size(
|
|
277
|
-
@padding-y-xs; @padding-x-xs; @font-size-extra-small;
|
|
278
|
-
@line-height-extra-small
|
|
279
|
-
);
|
|
280
|
-
/* stylelint-enable */
|
|
281
|
-
|
|
282
|
-
.rs-picker-input.rs-picker-tag & ~ .rs-picker-textbox {
|
|
283
|
-
padding-bottom: @padding-y-xs - 1px;
|
|
284
|
-
|
|
285
|
-
.rs-tag {
|
|
286
|
-
margin-top: 1px;
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
// Adjust search-input size the same with button
|
|
290
|
-
.rs-picker-search-input {
|
|
291
|
-
.padding-vertical(1px);
|
|
292
|
-
}
|
|
293
|
-
}
|
|
294
|
-
}
|
|
295
|
-
|
|
296
223
|
.input-picker-input-sizes() {
|
|
297
224
|
@border-width: 2 * @picker-default-toggle-border-width;
|
|
298
225
|
|
package/package.json
CHANGED
|
@@ -75,6 +75,13 @@
|
|
|
75
75
|
--rs-text-active: var(--rs-primary-700);
|
|
76
76
|
--rs-text-disabled: var(--rs-gray-400);
|
|
77
77
|
--rs-text-error: var(--rs-color-red);
|
|
78
|
+
--rs-text-weight-thin: 100;
|
|
79
|
+
--rs-text-weight-light: 300;
|
|
80
|
+
--rs-text-weight-regular: 400;
|
|
81
|
+
--rs-text-weight-medium: 500;
|
|
82
|
+
--rs-text-weight-semibold: 600;
|
|
83
|
+
--rs-text-weight-bold: 700;
|
|
84
|
+
--rs-text-weight-extrabold: 800;
|
|
78
85
|
--rs-border-primary: var(--rs-gray-200);
|
|
79
86
|
--rs-border-secondary: var(--rs-gray-100);
|
|
80
87
|
--rs-bg-card: var(--rs-gray-0);
|
package/styles/index.less
CHANGED
|
@@ -81,6 +81,9 @@
|
|
|
81
81
|
@import '../toaster/styles/index';
|
|
82
82
|
@import '../Stack/styles/index';
|
|
83
83
|
@import '../VisuallyHidden/styles/index';
|
|
84
|
+
@import '../Text/styles/index';
|
|
85
|
+
@import '../Heading/styles/index';
|
|
86
|
+
@import '../HeadingGroup/styles/index';
|
|
84
87
|
|
|
85
88
|
// Internal Components
|
|
86
89
|
@import '../internals/Ripple/styles/index';
|