rsuite 5.12.0 → 5.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/CHANGELOG.md +10 -0
- package/Nav/styles/index.less +7 -1
- package/Navbar/styles/index.less +6 -1
- package/Sidenav/styles/index.less +7 -5
- package/cjs/Cascader/DropdownMenu.js +8 -3
- package/cjs/Disclosure/Disclosure.d.ts +1 -1
- package/cjs/Disclosure/DisclosureContext.d.ts +1 -1
- package/cjs/Dropdown/Dropdown.js +26 -110
- package/cjs/Dropdown/DropdownItem.js +14 -58
- package/cjs/Dropdown/DropdownMenu.js +32 -76
- package/cjs/Dropdown/DropdownToggle.js +4 -17
- package/cjs/Menu/Menu.d.ts +1 -0
- package/cjs/Menu/Menu.js +1 -0
- package/cjs/Menu/MenuItem.d.ts +1 -0
- package/cjs/Menu/MenuItem.js +1 -0
- package/cjs/Menu/Menubar.d.ts +3 -0
- package/cjs/Menu/Menubar.js +4 -0
- package/cjs/Nav/Nav.d.ts +7 -2
- package/cjs/Nav/Nav.js +105 -5
- package/cjs/Nav/NavContext.d.ts +2 -8
- package/cjs/Nav/NavContext.js +1 -7
- package/cjs/Nav/NavDropdown.d.ts +71 -0
- package/cjs/Nav/NavDropdown.js +193 -0
- package/cjs/Nav/NavDropdownItem.d.ts +39 -0
- package/cjs/Nav/NavDropdownItem.js +141 -0
- package/cjs/Nav/NavDropdownMenu.d.ts +26 -0
- package/cjs/Nav/NavDropdownMenu.js +156 -0
- package/cjs/Nav/NavDropdownToggle.d.ts +21 -0
- package/cjs/Nav/NavDropdownToggle.js +74 -0
- package/cjs/Nav/NavItem.d.ts +2 -0
- package/cjs/Nav/NavItem.js +13 -26
- package/cjs/Nav/NavMenu.d.ts +38 -0
- package/cjs/Nav/NavMenu.js +122 -0
- package/cjs/Navbar/NavbarDropdown.d.ts +57 -0
- package/cjs/Navbar/NavbarDropdown.js +147 -0
- package/cjs/Navbar/NavbarDropdownItem.d.ts +41 -0
- package/cjs/Navbar/NavbarDropdownItem.js +149 -0
- package/cjs/Navbar/NavbarDropdownMenu.d.ts +37 -0
- package/cjs/Navbar/NavbarDropdownMenu.js +155 -0
- package/cjs/Navbar/NavbarDropdownToggle.d.ts +19 -0
- package/cjs/Navbar/NavbarDropdownToggle.js +72 -0
- package/cjs/Navbar/NavbarItem.d.ts +5 -2
- package/cjs/Navbar/NavbarItem.js +10 -4
- package/cjs/Picker/utils.js +22 -15
- package/cjs/Sidenav/ExpandedSidenavDropdown.d.ts +43 -0
- package/cjs/Sidenav/ExpandedSidenavDropdown.js +166 -0
- package/cjs/Sidenav/ExpandedSidenavDropdownItem.d.ts +31 -0
- package/cjs/Sidenav/ExpandedSidenavDropdownItem.js +141 -0
- package/cjs/Sidenav/ExpandedSidenavDropdownMenu.d.ts +26 -0
- package/cjs/Sidenav/ExpandedSidenavDropdownMenu.js +145 -0
- package/cjs/Sidenav/Sidenav.d.ts +8 -2
- package/cjs/Sidenav/Sidenav.js +1 -2
- package/cjs/Sidenav/SidenavDropdown.d.ts +30 -8
- package/cjs/Sidenav/SidenavDropdown.js +144 -73
- package/cjs/Sidenav/SidenavDropdownItem.d.ts +22 -5
- package/cjs/Sidenav/SidenavDropdownItem.js +88 -72
- package/cjs/Sidenav/SidenavDropdownMenu.d.ts +26 -16
- package/cjs/Sidenav/SidenavDropdownMenu.js +122 -90
- package/cjs/Sidenav/SidenavDropdownToggle.d.ts +19 -0
- package/cjs/Sidenav/SidenavDropdownToggle.js +72 -0
- package/cjs/Sidenav/SidenavItem.d.ts +3 -0
- package/cjs/Sidenav/SidenavItem.js +22 -14
- package/cjs/utils/deprecateComponent.js +4 -6
- package/cjs/utils/deprecatePropType.d.ts +1 -5
- package/cjs/utils/deprecatePropType.js +7 -14
- package/cjs/utils/useInternalId.d.ts +1 -1
- package/cjs/utils/useInternalId.js +2 -2
- package/cjs/utils/warnOnce.d.ts +9 -0
- package/cjs/utils/warnOnce.js +22 -0
- package/dist/rsuite-rtl.css +18 -9
- package/dist/rsuite-rtl.min.css +1 -1
- package/dist/rsuite-rtl.min.css.map +1 -1
- package/dist/rsuite.css +18 -9
- package/dist/rsuite.js +275 -22
- 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/DropdownMenu.js +8 -3
- package/esm/Disclosure/Disclosure.d.ts +1 -1
- package/esm/Disclosure/DisclosureContext.d.ts +1 -1
- package/esm/Dropdown/Dropdown.js +25 -105
- package/esm/Dropdown/DropdownItem.js +13 -55
- package/esm/Dropdown/DropdownMenu.js +31 -76
- package/esm/Dropdown/DropdownToggle.js +4 -14
- package/esm/Menu/Menu.d.ts +1 -0
- package/esm/Menu/Menu.js +1 -0
- package/esm/Menu/MenuItem.d.ts +1 -0
- package/esm/Menu/MenuItem.js +1 -0
- package/esm/Menu/Menubar.d.ts +3 -0
- package/esm/Menu/Menubar.js +4 -0
- package/esm/Nav/Nav.d.ts +7 -2
- package/esm/Nav/Nav.js +96 -5
- package/esm/Nav/NavContext.d.ts +2 -8
- package/esm/Nav/NavContext.js +1 -6
- package/esm/Nav/NavDropdown.d.ts +71 -0
- package/esm/Nav/NavDropdown.js +170 -0
- package/esm/Nav/NavDropdownItem.d.ts +39 -0
- package/esm/Nav/NavDropdownItem.js +123 -0
- package/esm/Nav/NavDropdownMenu.d.ts +26 -0
- package/esm/Nav/NavDropdownMenu.js +138 -0
- package/esm/Nav/NavDropdownToggle.d.ts +21 -0
- package/esm/Nav/NavDropdownToggle.js +57 -0
- package/esm/Nav/NavItem.d.ts +2 -0
- package/esm/Nav/NavItem.js +13 -21
- package/esm/Nav/NavMenu.d.ts +38 -0
- package/esm/Nav/NavMenu.js +98 -0
- package/esm/Navbar/NavbarDropdown.d.ts +57 -0
- package/esm/Navbar/NavbarDropdown.js +124 -0
- package/esm/Navbar/NavbarDropdownItem.d.ts +41 -0
- package/esm/Navbar/NavbarDropdownItem.js +128 -0
- package/esm/Navbar/NavbarDropdownMenu.d.ts +37 -0
- package/esm/Navbar/NavbarDropdownMenu.js +135 -0
- package/esm/Navbar/NavbarDropdownToggle.d.ts +19 -0
- package/esm/Navbar/NavbarDropdownToggle.js +55 -0
- package/esm/Navbar/NavbarItem.d.ts +5 -2
- package/esm/Navbar/NavbarItem.js +11 -4
- package/esm/Picker/utils.js +22 -14
- package/esm/Sidenav/ExpandedSidenavDropdown.d.ts +43 -0
- package/esm/Sidenav/ExpandedSidenavDropdown.js +140 -0
- package/esm/Sidenav/ExpandedSidenavDropdownItem.d.ts +31 -0
- package/esm/Sidenav/ExpandedSidenavDropdownItem.js +120 -0
- package/esm/Sidenav/ExpandedSidenavDropdownMenu.d.ts +26 -0
- package/esm/Sidenav/ExpandedSidenavDropdownMenu.js +121 -0
- package/esm/Sidenav/Sidenav.d.ts +8 -2
- package/esm/Sidenav/Sidenav.js +1 -2
- package/esm/Sidenav/SidenavDropdown.d.ts +30 -8
- package/esm/Sidenav/SidenavDropdown.js +145 -75
- package/esm/Sidenav/SidenavDropdownItem.d.ts +22 -5
- package/esm/Sidenav/SidenavDropdownItem.js +87 -71
- package/esm/Sidenav/SidenavDropdownMenu.d.ts +26 -16
- package/esm/Sidenav/SidenavDropdownMenu.js +122 -86
- package/esm/Sidenav/SidenavDropdownToggle.d.ts +19 -0
- package/esm/Sidenav/SidenavDropdownToggle.js +55 -0
- package/esm/Sidenav/SidenavItem.d.ts +3 -0
- package/esm/Sidenav/SidenavItem.js +23 -15
- package/esm/utils/deprecateComponent.js +3 -4
- package/esm/utils/deprecatePropType.d.ts +1 -5
- package/esm/utils/deprecatePropType.js +3 -13
- package/esm/utils/useInternalId.d.ts +1 -1
- package/esm/utils/useInternalId.js +2 -2
- package/esm/utils/warnOnce.d.ts +9 -0
- package/esm/utils/warnOnce.js +18 -0
- package/package.json +1 -1
- package/styles/variables.less +1 -0
|
@@ -7,139 +7,171 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
|
|
|
7
7
|
exports.__esModule = true;
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
|
|
10
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
-
|
|
12
10
|
var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
|
|
13
11
|
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
14
14
|
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
15
15
|
|
|
16
16
|
var _react = _interopRequireWildcard(require("react"));
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var _omit2 = _interopRequireDefault(require("lodash/omit"));
|
|
19
19
|
|
|
20
|
-
var
|
|
20
|
+
var _Menu = _interopRequireDefault(require("../Menu/Menu"));
|
|
21
21
|
|
|
22
|
-
var
|
|
22
|
+
var _MenuItem = _interopRequireDefault(require("../Menu/MenuItem"));
|
|
23
23
|
|
|
24
|
-
var
|
|
24
|
+
var _utils = require("../utils");
|
|
25
25
|
|
|
26
|
-
var
|
|
26
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
27
27
|
|
|
28
|
-
var
|
|
28
|
+
var _Sidenav = require("./Sidenav");
|
|
29
29
|
|
|
30
|
-
var
|
|
30
|
+
var _ArrowLeftLine = _interopRequireDefault(require("@rsuite/icons/ArrowLeftLine"));
|
|
31
31
|
|
|
32
|
-
var
|
|
32
|
+
var _ArrowRightLine = _interopRequireDefault(require("@rsuite/icons/ArrowRightLine"));
|
|
33
33
|
|
|
34
|
-
var
|
|
34
|
+
var _useCustom2 = _interopRequireDefault(require("../utils/useCustom"));
|
|
35
35
|
|
|
36
|
-
var
|
|
36
|
+
var _ExpandedSidenavDropdownMenu = _interopRequireDefault(require("./ExpandedSidenavDropdownMenu"));
|
|
37
37
|
|
|
38
|
-
var
|
|
38
|
+
var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
|
|
39
39
|
|
|
40
40
|
var _templateObject, _templateObject2;
|
|
41
41
|
|
|
42
42
|
/**
|
|
43
|
-
*
|
|
44
|
-
*
|
|
43
|
+
* @private this component is not supposed to be used directly
|
|
44
|
+
* Instead it's rendered by a <Nav.Menu> within a <Sidenav>
|
|
45
|
+
*
|
|
46
|
+
* <Sidenav>
|
|
47
|
+
* <Nav>
|
|
48
|
+
* <Nav.Menu>
|
|
49
|
+
* <Nav.Menu></Nav.Menu> -> This submenu will render <SidenavDropdownMenu> component
|
|
50
|
+
* </Nav.Menu>
|
|
51
|
+
* </Nav>
|
|
52
|
+
* </Sidenav>
|
|
45
53
|
*/
|
|
46
54
|
var SidenavDropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
47
|
-
var
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
tabIndex = props.tabIndex,
|
|
56
|
-
icon = props.icon,
|
|
57
|
-
title = props.title,
|
|
55
|
+
var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
|
|
56
|
+
var nav = (0, _react.useContext)(_NavContext.default);
|
|
57
|
+
|
|
58
|
+
if (!sidenav || !nav) {
|
|
59
|
+
throw new Error('<Sidenav.Dropdown.Menu> must be rendered within a <Nav> within a <Sidenav> component.');
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
var onToggle = props.onToggle,
|
|
58
63
|
eventKey = props.eventKey,
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
64
|
+
title = props.title,
|
|
65
|
+
_props$classPrefix = props.classPrefix,
|
|
66
|
+
classPrefix = _props$classPrefix === void 0 ? 'dropdown-menu' : _props$classPrefix,
|
|
67
|
+
children = props.children,
|
|
68
|
+
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["onToggle", "eventKey", "title", "classPrefix", "children"]);
|
|
62
69
|
|
|
63
70
|
var _useCustom = (0, _useCustom2.default)('DropdownMenu'),
|
|
64
71
|
rtl = _useCustom.rtl;
|
|
65
72
|
|
|
73
|
+
var handleToggleSubmenu = (0, _react.useCallback)(function (open, event) {
|
|
74
|
+
onToggle === null || onToggle === void 0 ? void 0 : onToggle(open, eventKey, event);
|
|
75
|
+
}, [eventKey, onToggle]);
|
|
76
|
+
|
|
66
77
|
var _useClassNames = (0, _utils.useClassNames)(classPrefix),
|
|
67
|
-
merge = _useClassNames.merge,
|
|
68
|
-
withClassPrefix = _useClassNames.withClassPrefix,
|
|
69
78
|
prefix = _useClassNames.prefix;
|
|
70
79
|
|
|
71
|
-
var
|
|
80
|
+
var _useClassNames2 = (0, _utils.useClassNames)('dropdown-menu'),
|
|
81
|
+
withMenuClassPrefix = _useClassNames2.withClassPrefix,
|
|
82
|
+
mergeMenuClassName = _useClassNames2.merge;
|
|
72
83
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
84
|
+
var _useClassNames3 = (0, _utils.useClassNames)('dropdown-item'),
|
|
85
|
+
mergeItemClassNames = _useClassNames3.merge,
|
|
86
|
+
withItemClassPrefix = _useClassNames3.withClassPrefix,
|
|
87
|
+
prefixItemClassName = _useClassNames3.prefix;
|
|
76
88
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
onOpenChange = sidenavContext.onOpenChange,
|
|
80
|
-
onSidenavSelect = sidenavContext.onSelect;
|
|
81
|
-
var handleClick = (0, _react.useCallback)(function (event) {
|
|
82
|
-
if (disabled) return;
|
|
83
|
-
onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);
|
|
84
|
-
onSidenavSelect === null || onSidenavSelect === void 0 ? void 0 : onSidenavSelect(eventKey, event);
|
|
85
|
-
}, [disabled, onSelect, onSidenavSelect, eventKey]);
|
|
86
|
-
var menuitemEventHandlers = {
|
|
87
|
-
onClick: (0, _utils.createChainedFunction)(handleClick, onClick)
|
|
88
|
-
};
|
|
89
|
-
var Icon = rtl ? _AngleLeft.default : _AngleRight.default;
|
|
90
|
-
return /*#__PURE__*/_react.default.createElement(_Disclosure.default, {
|
|
91
|
-
open: !(0, _isNil.default)(eventKey) && openKeys.includes(eventKey),
|
|
92
|
-
onToggle: function onToggle(_, event) {
|
|
93
|
-
return onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(eventKey, event);
|
|
94
|
-
}
|
|
95
|
-
}, function (_ref) {
|
|
96
|
-
var open = _ref.open;
|
|
97
|
-
var classes = merge(className, prefix('submenu'), prefix("pull-" + (rtl ? 'left' : 'right')), prefix(open ? 'expand' : 'collapse'), withClassPrefix({
|
|
98
|
-
'with-icon': icon,
|
|
99
|
-
// open,
|
|
100
|
-
disabled: disabled
|
|
101
|
-
}));
|
|
102
|
-
return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
|
|
89
|
+
if (sidenav.expanded) {
|
|
90
|
+
return /*#__PURE__*/_react.default.createElement(_ExpandedSidenavDropdownMenu.default, (0, _extends2.default)({
|
|
103
91
|
ref: ref
|
|
104
|
-
},
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
92
|
+
}, (0, _omit2.default)(props, 'classPrefix')));
|
|
93
|
+
} // Parent menu exists. This is a submenu.
|
|
94
|
+
// Should render a `menuitem` that controls this submenu.
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
var _omit = (0, _omit2.default)(rest, ['trigger']),
|
|
98
|
+
icon = _omit.icon,
|
|
99
|
+
className = _omit.className,
|
|
100
|
+
disabled = _omit.disabled,
|
|
101
|
+
menuProps = (0, _objectWithoutPropertiesLoose2.default)(_omit, ["icon", "className", "disabled"]);
|
|
102
|
+
|
|
103
|
+
var Icon = rtl ? _ArrowLeftLine.default : _ArrowRightLine.default;
|
|
104
|
+
return /*#__PURE__*/_react.default.createElement(_Menu.default, {
|
|
105
|
+
openMenuOn: ['mouseover', 'click'],
|
|
106
|
+
renderMenuButton: function renderMenuButton(_ref, buttonRef) {
|
|
107
|
+
var open = _ref.open,
|
|
108
|
+
menuButtonProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["open"]);
|
|
109
|
+
return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
|
|
110
|
+
disabled: disabled
|
|
111
|
+
}, function (_ref2, menuitemRef) {
|
|
112
|
+
var selected = _ref2.selected,
|
|
113
|
+
active = _ref2.active,
|
|
114
|
+
menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["selected", "active"]);
|
|
115
|
+
var classes = mergeItemClassNames(className, prefixItemClassName(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["toggle"]))), withItemClassPrefix({
|
|
116
|
+
'with-icon': icon,
|
|
117
|
+
open: open,
|
|
118
|
+
active: selected,
|
|
119
|
+
disabled: disabled,
|
|
120
|
+
focus: active
|
|
121
|
+
}));
|
|
122
|
+
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
|
123
|
+
ref: (0, _utils.mergeRefs)(buttonRef, menuitemRef),
|
|
124
|
+
className: classes,
|
|
125
|
+
"data-event-key": eventKey,
|
|
126
|
+
"data-event-key-type": typeof eventKey
|
|
127
|
+
}, menuitem, (0, _omit2.default)(menuButtonProps, ['role'])), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
|
|
128
|
+
className: prefix('menu-icon')
|
|
129
|
+
}), title, /*#__PURE__*/_react.default.createElement(Icon, {
|
|
130
|
+
className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["toggle-icon"])))
|
|
131
|
+
}));
|
|
132
|
+
});
|
|
133
|
+
},
|
|
134
|
+
renderMenuPopup: function renderMenuPopup(_ref3, popupRef) {
|
|
135
|
+
var open = _ref3.open,
|
|
136
|
+
popupProps = (0, _objectWithoutPropertiesLoose2.default)(_ref3, ["open"]);
|
|
137
|
+
var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());
|
|
138
|
+
return /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({
|
|
139
|
+
ref: popupRef,
|
|
140
|
+
className: menuClassName,
|
|
141
|
+
hidden: !open
|
|
142
|
+
}, popupProps, menuProps), children);
|
|
143
|
+
},
|
|
144
|
+
onToggleMenu: handleToggleSubmenu
|
|
145
|
+
}, function (_ref4, menuContainerRef) {
|
|
146
|
+
var open = _ref4.open,
|
|
147
|
+
menuContainer = (0, _objectWithoutPropertiesLoose2.default)(_ref4, ["open"]);
|
|
148
|
+
var classes = mergeItemClassNames(className, withItemClassPrefix({
|
|
149
|
+
disabled: disabled,
|
|
150
|
+
open: open,
|
|
151
|
+
submenu: true
|
|
122
152
|
}));
|
|
153
|
+
return /*#__PURE__*/_react.default.createElement("li", (0, _extends2.default)({
|
|
154
|
+
ref: (0, _utils.mergeRefs)(ref, menuContainerRef),
|
|
155
|
+
className: classes
|
|
156
|
+
}, menuContainer));
|
|
123
157
|
});
|
|
124
158
|
});
|
|
125
159
|
|
|
126
160
|
SidenavDropdownMenu.displayName = 'Sidenav.Dropdown.Menu';
|
|
127
161
|
SidenavDropdownMenu.propTypes = {
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
disabled: _propTypes.default.bool,
|
|
131
|
-
onSelect: _propTypes.default.func,
|
|
132
|
-
onClick: _propTypes.default.func,
|
|
133
|
-
icon: _propTypes.default.node,
|
|
134
|
-
eventKey: _propTypes.default.any,
|
|
162
|
+
active: _propTypes.default.bool,
|
|
163
|
+
activeKey: _propTypes.default.any,
|
|
135
164
|
className: _propTypes.default.string,
|
|
136
|
-
style: _propTypes.default.object,
|
|
137
165
|
children: _propTypes.default.node,
|
|
166
|
+
icon: _propTypes.default.any,
|
|
138
167
|
classPrefix: _propTypes.default.string,
|
|
139
|
-
|
|
168
|
+
pullLeft: _propTypes.default.bool,
|
|
140
169
|
title: _propTypes.default.node,
|
|
141
|
-
|
|
142
|
-
|
|
170
|
+
open: _propTypes.default.bool,
|
|
171
|
+
eventKey: _propTypes.default.any,
|
|
172
|
+
expanded: _propTypes.default.bool,
|
|
173
|
+
collapsible: _propTypes.default.bool,
|
|
174
|
+
onToggle: _propTypes.default.func
|
|
143
175
|
};
|
|
144
176
|
var _default = SidenavDropdownMenu;
|
|
145
177
|
exports.default = _default;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Button from '../Button';
|
|
3
|
+
import { WithAsProps, RsRefForwardingComponent, TypeAttributes } from '../@types/common';
|
|
4
|
+
export interface SidenavDropdownToggleProps extends WithAsProps {
|
|
5
|
+
noCaret?: boolean;
|
|
6
|
+
renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;
|
|
7
|
+
placement?: TypeAttributes.Placement8;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* @private this component is not supposed to be used directly
|
|
11
|
+
* Instead it's rendered by a <Nav.Menu> call
|
|
12
|
+
*
|
|
13
|
+
* <Nav>
|
|
14
|
+
* <Nav.Menu> -> This will render <NavDropdown> component that renders a <NavDropdownToggle>
|
|
15
|
+
* </Nav.Menu>
|
|
16
|
+
* </Nav>
|
|
17
|
+
*/
|
|
18
|
+
declare const SidenavDropdownToggle: RsRefForwardingComponent<typeof Button, SidenavDropdownToggleProps>;
|
|
19
|
+
export default SidenavDropdownToggle;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
exports.__esModule = true;
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
|
|
10
|
+
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
11
|
+
|
|
12
|
+
var _react = _interopRequireDefault(require("react"));
|
|
13
|
+
|
|
14
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
|
+
|
|
16
|
+
var _ArrowDownLine = _interopRequireDefault(require("@rsuite/icons/ArrowDownLine"));
|
|
17
|
+
|
|
18
|
+
var _utils = require("../utils");
|
|
19
|
+
|
|
20
|
+
var _SidenavItem = _interopRequireDefault(require("./SidenavItem"));
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* @private this component is not supposed to be used directly
|
|
24
|
+
* Instead it's rendered by a <Nav.Menu> call
|
|
25
|
+
*
|
|
26
|
+
* <Nav>
|
|
27
|
+
* <Nav.Menu> -> This will render <NavDropdown> component that renders a <NavDropdownToggle>
|
|
28
|
+
* </Nav.Menu>
|
|
29
|
+
* </Nav>
|
|
30
|
+
*/
|
|
31
|
+
var SidenavDropdownToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
32
|
+
var _props$as = props.as,
|
|
33
|
+
Component = _props$as === void 0 ? _SidenavItem.default : _props$as,
|
|
34
|
+
className = props.className,
|
|
35
|
+
_props$classPrefix = props.classPrefix,
|
|
36
|
+
classPrefix = _props$classPrefix === void 0 ? 'dropdown-toggle' : _props$classPrefix,
|
|
37
|
+
renderToggle = props.renderToggle,
|
|
38
|
+
children = props.children,
|
|
39
|
+
noCaret = props.noCaret,
|
|
40
|
+
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "renderToggle", "children", "noCaret"]);
|
|
41
|
+
|
|
42
|
+
var _useClassNames = (0, _utils.useClassNames)(classPrefix),
|
|
43
|
+
prefix = _useClassNames.prefix,
|
|
44
|
+
withClassPrefix = _useClassNames.withClassPrefix,
|
|
45
|
+
merge = _useClassNames.merge;
|
|
46
|
+
|
|
47
|
+
var classes = merge(className, withClassPrefix({
|
|
48
|
+
'no-caret': noCaret
|
|
49
|
+
}));
|
|
50
|
+
|
|
51
|
+
var toggle = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
|
|
52
|
+
ref: ref,
|
|
53
|
+
className: classes
|
|
54
|
+
}), children, !noCaret && /*#__PURE__*/_react.default.createElement(_ArrowDownLine.default, {
|
|
55
|
+
className: prefix('caret')
|
|
56
|
+
}));
|
|
57
|
+
|
|
58
|
+
return renderToggle ? renderToggle(rest, ref) : toggle;
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
SidenavDropdownToggle.displayName = 'Sidenav.Dropdown.Toggle';
|
|
62
|
+
SidenavDropdownToggle.propTypes = {
|
|
63
|
+
className: _propTypes.default.string,
|
|
64
|
+
children: _propTypes.default.node,
|
|
65
|
+
classPrefix: _propTypes.default.string,
|
|
66
|
+
noCaret: _propTypes.default.bool,
|
|
67
|
+
as: _propTypes.default.elementType,
|
|
68
|
+
renderToggle: _propTypes.default.func,
|
|
69
|
+
placement: _propTypes.default.oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd'])
|
|
70
|
+
};
|
|
71
|
+
var _default = SidenavDropdownToggle;
|
|
72
|
+
exports.default = _default;
|
|
@@ -15,5 +15,8 @@ export interface SidenavItemProps<T = any> extends WithAsProps, Omit<React.HTMLA
|
|
|
15
15
|
divider?: boolean;
|
|
16
16
|
panel?: boolean;
|
|
17
17
|
}
|
|
18
|
+
/**
|
|
19
|
+
* @private
|
|
20
|
+
*/
|
|
18
21
|
declare const SidenavItem: RsRefForwardingComponent<'li', SidenavItemProps>;
|
|
19
22
|
export default SidenavItem;
|
|
@@ -31,7 +31,16 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
|
|
|
31
31
|
|
|
32
32
|
var _Sidenav = require("./Sidenav");
|
|
33
33
|
|
|
34
|
+
/**
|
|
35
|
+
* @private
|
|
36
|
+
*/
|
|
34
37
|
var SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
38
|
+
var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
|
|
39
|
+
|
|
40
|
+
if (!sidenav) {
|
|
41
|
+
throw new Error('<SidenavItem> component is not supposed to be used standalone. Use <Nav.Item> inside <Sidenav> instead.');
|
|
42
|
+
}
|
|
43
|
+
|
|
35
44
|
var _props$as = props.as,
|
|
36
45
|
Component = _props$as === void 0 ? _SafeAnchor.default : _props$as,
|
|
37
46
|
activeProp = props.active,
|
|
@@ -48,15 +57,10 @@ var SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
48
57
|
divider = props.divider,
|
|
49
58
|
panel = props.panel,
|
|
50
59
|
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "active", "children", "className", "disabled", "classPrefix", "icon", "eventKey", "style", "onClick", "onSelect", "divider", "panel"]);
|
|
51
|
-
var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
|
|
52
|
-
|
|
53
|
-
if (!sidenav) {
|
|
54
|
-
throw new Error('<SidenavItem> component is not supposed to be used standalone. Use <Nav.Item> inside <Sidenav> instead.');
|
|
55
|
-
}
|
|
56
60
|
|
|
57
|
-
var
|
|
58
|
-
activeKey =
|
|
59
|
-
onSelectFromNav =
|
|
61
|
+
var _ref = (0, _react.useContext)(_NavContext.default),
|
|
62
|
+
activeKey = _ref.activeKey,
|
|
63
|
+
onSelectFromNav = _ref.onSelect;
|
|
60
64
|
|
|
61
65
|
var _useClassNames = (0, _utils.useClassNames)(classPrefix),
|
|
62
66
|
merge = _useClassNames.merge,
|
|
@@ -76,10 +80,10 @@ var SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
76
80
|
selected: selected,
|
|
77
81
|
disabled: disabled,
|
|
78
82
|
onActivate: handleClick
|
|
79
|
-
}, function (
|
|
80
|
-
var selected =
|
|
81
|
-
active =
|
|
82
|
-
menuitem = (0, _objectWithoutPropertiesLoose2.default)(
|
|
83
|
+
}, function (_ref2, menuitemRef) {
|
|
84
|
+
var selected = _ref2.selected,
|
|
85
|
+
active = _ref2.active,
|
|
86
|
+
menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["selected", "active"]);
|
|
83
87
|
var classes = merge(className, withClassPrefix({
|
|
84
88
|
focus: active,
|
|
85
89
|
active: selected,
|
|
@@ -93,7 +97,9 @@ var SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
93
97
|
disabled: Component === _SafeAnchor.default ? disabled : undefined,
|
|
94
98
|
className: classes,
|
|
95
99
|
"data-event-key": eventKey
|
|
96
|
-
}, (0, _omit.default)(rest, ['divider', 'panel']), triggerProps, menuitem), icon
|
|
100
|
+
}, (0, _omit.default)(rest, ['divider', 'panel']), triggerProps, menuitem), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
|
|
101
|
+
className: prefix('icon')
|
|
102
|
+
}), _children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
|
|
97
103
|
},
|
|
98
104
|
message: _children,
|
|
99
105
|
placement: 'right'
|
|
@@ -129,7 +135,9 @@ var SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
129
135
|
style: style,
|
|
130
136
|
"aria-selected": selected || undefined,
|
|
131
137
|
"data-event-key": eventKey
|
|
132
|
-
}, rest), icon
|
|
138
|
+
}, rest), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
|
|
139
|
+
className: prefix('icon')
|
|
140
|
+
}), _children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
|
|
133
141
|
});
|
|
134
142
|
|
|
135
143
|
SidenavItem.displayName = 'Sidenav.Item';
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
-
|
|
5
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
4
|
|
|
7
5
|
exports.__esModule = true;
|
|
@@ -9,7 +7,9 @@ exports.default = deprecateComponent;
|
|
|
9
7
|
|
|
10
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
9
|
|
|
12
|
-
var _react =
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
12
|
+
var _warnOnce = _interopRequireDefault(require("./warnOnce"));
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
15
|
* HOC for display a deprecation message from a deprecated component
|
|
@@ -21,9 +21,7 @@ function deprecateComponent(Component, message) {
|
|
|
21
21
|
var componentDisplayName = (_Component$displayNam = Component.displayName) !== null && _Component$displayNam !== void 0 ? _Component$displayNam : Component.name;
|
|
22
22
|
|
|
23
23
|
var Deprecated = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
24
|
-
(0,
|
|
25
|
-
console.warn(message);
|
|
26
|
-
}, []);
|
|
24
|
+
(0, _warnOnce.default)(message);
|
|
27
25
|
return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
|
|
28
26
|
ref: ref
|
|
29
27
|
}, props));
|
|
@@ -1,6 +1,2 @@
|
|
|
1
1
|
import * as PropTypes from 'prop-types';
|
|
2
|
-
|
|
3
|
-
declare namespace deprecatePropType {
|
|
4
|
-
var _resetWarned: () => void;
|
|
5
|
-
}
|
|
6
|
-
export default deprecatePropType;
|
|
2
|
+
export default function deprecatePropType<T extends PropTypes.Validator<any>>(propType: T, explanation?: string): typeof propType;
|
|
@@ -1,20 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
3
5
|
exports.__esModule = true;
|
|
4
6
|
exports.default = deprecatePropType;
|
|
5
|
-
// Ref: https://github.com/thefrontside/deprecated-prop-type/blob/master/deprecated.js
|
|
6
|
-
var warned = {};
|
|
7
7
|
|
|
8
|
+
var _warnOnce = _interopRequireDefault(require("./warnOnce"));
|
|
9
|
+
|
|
10
|
+
// Ref: https://github.com/thefrontside/deprecated-prop-type/blob/master/deprecated.js
|
|
8
11
|
function deprecatePropType(propType, explanation) {
|
|
9
12
|
return function validate(props, propName, componentName) {
|
|
10
13
|
// Note ...rest here
|
|
11
14
|
if (props[propName] != null) {
|
|
12
15
|
var message = "\"" + propName + "\" property of \"" + componentName + "\" has been deprecated.\n" + explanation;
|
|
13
|
-
|
|
14
|
-
if (!warned[message]) {
|
|
15
|
-
console.warn(message);
|
|
16
|
-
warned[message] = true;
|
|
17
|
-
}
|
|
16
|
+
(0, _warnOnce.default)(message);
|
|
18
17
|
}
|
|
19
18
|
|
|
20
19
|
for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
|
|
@@ -23,10 +22,4 @@ function deprecatePropType(propType, explanation) {
|
|
|
23
22
|
|
|
24
23
|
return propType.apply(void 0, [props, propName, componentName].concat(rest)); // and here
|
|
25
24
|
};
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
function _resetWarned() {
|
|
29
|
-
warned = {};
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
deprecatePropType._resetWarned = _resetWarned;
|
|
25
|
+
}
|
|
@@ -12,11 +12,11 @@ var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
|
|
|
12
12
|
/**
|
|
13
13
|
* Used for generating unique ID for DOM elements
|
|
14
14
|
*/
|
|
15
|
-
function useInternalId(
|
|
15
|
+
function useInternalId(namespace) {
|
|
16
16
|
var idRef = (0, _react.useRef)();
|
|
17
17
|
|
|
18
18
|
if (!idRef.current) {
|
|
19
|
-
idRef.current = (0, _uniqueId.default)("internal://" +
|
|
19
|
+
idRef.current = (0, _uniqueId.default)("internal://" + namespace);
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
(0, _react.useDebugValue)(idRef.current);
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = warnOnce;
|
|
5
|
+
var warned = {};
|
|
6
|
+
/**
|
|
7
|
+
* Logs a warning message
|
|
8
|
+
* but dont warn a same message twice
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
function warnOnce(message) {
|
|
12
|
+
if (!warned[message]) {
|
|
13
|
+
console.warn(message);
|
|
14
|
+
warned[message] = true;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
warnOnce._resetWarned = function () {
|
|
19
|
+
for (var _message in warned) {
|
|
20
|
+
delete warned[_message];
|
|
21
|
+
}
|
|
22
|
+
};
|
package/dist/rsuite-rtl.css
CHANGED
|
@@ -8972,9 +8972,14 @@ textarea.rs-picker-search-input {
|
|
|
8972
8972
|
.rs-theme-high-contrast .rs-nav-item.rs-nav-item-active {
|
|
8973
8973
|
text-decoration: underline;
|
|
8974
8974
|
}
|
|
8975
|
-
.rs-nav-item
|
|
8975
|
+
.rs-nav-item-icon {
|
|
8976
8976
|
margin-left: 6px;
|
|
8977
8977
|
}
|
|
8978
|
+
.rs-nav-item-caret {
|
|
8979
|
+
font-size: 16px;
|
|
8980
|
+
vertical-align: text-bottom;
|
|
8981
|
+
margin-right: 6px;
|
|
8982
|
+
}
|
|
8978
8983
|
.rs-nav-horizontal {
|
|
8979
8984
|
white-space: nowrap;
|
|
8980
8985
|
}
|
|
@@ -9206,10 +9211,14 @@ textarea.rs-picker-search-input {
|
|
|
9206
9211
|
-ms-flex-align: center;
|
|
9207
9212
|
align-items: center;
|
|
9208
9213
|
}
|
|
9209
|
-
.rs-navbar-item
|
|
9214
|
+
.rs-navbar-item-icon {
|
|
9210
9215
|
font-size: 16px;
|
|
9211
9216
|
margin-left: 5px;
|
|
9212
9217
|
}
|
|
9218
|
+
.rs-navbar-item-caret {
|
|
9219
|
+
font-size: 16px;
|
|
9220
|
+
margin-right: 6px;
|
|
9221
|
+
}
|
|
9213
9222
|
.rs-navbar-brand,
|
|
9214
9223
|
.rs-navbar-item,
|
|
9215
9224
|
.rs-navbar-nav > .rs-dropdown-item,
|
|
@@ -12538,11 +12547,10 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
|
|
|
12538
12547
|
outline-offset: 2px;
|
|
12539
12548
|
}
|
|
12540
12549
|
.rs-sidenav-nav > .rs-dropdown .rs-dropdown-item-toggle-icon {
|
|
12550
|
+
font-size: 16px;
|
|
12541
12551
|
position: absolute;
|
|
12542
12552
|
left: 20px;
|
|
12543
12553
|
top: 11px;
|
|
12544
|
-
width: auto;
|
|
12545
|
-
height: 20px;
|
|
12546
12554
|
-webkit-transform: rotate(-90deg);
|
|
12547
12555
|
transform: rotate(-90deg);
|
|
12548
12556
|
}
|
|
@@ -12586,6 +12594,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
|
|
|
12586
12594
|
padding-left: 40px;
|
|
12587
12595
|
}
|
|
12588
12596
|
.rs-sidenav-nav > .rs-dropdown .rs-dropdown-toggle .rs-dropdown-toggle-caret {
|
|
12597
|
+
font-size: 16px;
|
|
12589
12598
|
left: 20px;
|
|
12590
12599
|
top: 15px;
|
|
12591
12600
|
}
|
|
@@ -12907,7 +12916,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
|
|
|
12907
12916
|
}
|
|
12908
12917
|
.rs-sidenav-default .rs-sidenav-item.rs-sidenav-item-active,
|
|
12909
12918
|
.rs-sidenav-default .rs-dropdown-item.rs-dropdown-item-active,
|
|
12910
|
-
.rs-sidenav-default .rs-dropdown.rs-dropdown-selected-within .rs-
|
|
12919
|
+
.rs-sidenav-default .rs-dropdown.rs-dropdown-selected-within .rs-sidenav-item-icon {
|
|
12911
12920
|
color: #1675e0;
|
|
12912
12921
|
color: var(--rs-sidenav-default-selected-text);
|
|
12913
12922
|
}
|
|
@@ -12959,9 +12968,9 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
|
|
|
12959
12968
|
.rs-theme-high-contrast .rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active {
|
|
12960
12969
|
text-decoration: underline;
|
|
12961
12970
|
}
|
|
12962
|
-
.rs-sidenav-default.rs-sidenav-collapse-in .rs-dropdown.rs-dropdown-selected-within .rs-
|
|
12963
|
-
.rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown.rs-dropdown-selected-within .rs-
|
|
12964
|
-
.rs-sidenav-default.rs-sidenav-collapse-out .rs-dropdown.rs-dropdown-selected-within .rs-
|
|
12971
|
+
.rs-sidenav-default.rs-sidenav-collapse-in .rs-dropdown.rs-dropdown-selected-within .rs-sidenav-item-icon,
|
|
12972
|
+
.rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown.rs-dropdown-selected-within .rs-sidenav-item-icon,
|
|
12973
|
+
.rs-sidenav-default.rs-sidenav-collapse-out .rs-dropdown.rs-dropdown-selected-within .rs-sidenav-item-icon {
|
|
12965
12974
|
color: #1675e0;
|
|
12966
12975
|
color: var(--rs-sidenav-default-selected-text);
|
|
12967
12976
|
}
|
|
@@ -13052,7 +13061,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
|
|
|
13052
13061
|
}
|
|
13053
13062
|
.rs-sidenav-subtle .rs-sidenav-item.rs-sidenav-item-active,
|
|
13054
13063
|
.rs-sidenav-subtle .rs-dropdown-item.rs-dropdown-item-active,
|
|
13055
|
-
.rs-sidenav-subtle .rs-dropdown.rs-dropdown-selected-within .rs-
|
|
13064
|
+
.rs-sidenav-subtle .rs-dropdown.rs-dropdown-selected-within .rs-sidenav-item-icon {
|
|
13056
13065
|
color: #1675e0;
|
|
13057
13066
|
color: var(--rs-sidenav-subtle-selected-text);
|
|
13058
13067
|
}
|