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.
Files changed (146) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/Nav/styles/index.less +7 -1
  3. package/Navbar/styles/index.less +6 -1
  4. package/Sidenav/styles/index.less +7 -5
  5. package/cjs/Cascader/DropdownMenu.js +8 -3
  6. package/cjs/Disclosure/Disclosure.d.ts +1 -1
  7. package/cjs/Disclosure/DisclosureContext.d.ts +1 -1
  8. package/cjs/Dropdown/Dropdown.js +26 -110
  9. package/cjs/Dropdown/DropdownItem.js +14 -58
  10. package/cjs/Dropdown/DropdownMenu.js +32 -76
  11. package/cjs/Dropdown/DropdownToggle.js +4 -17
  12. package/cjs/Menu/Menu.d.ts +1 -0
  13. package/cjs/Menu/Menu.js +1 -0
  14. package/cjs/Menu/MenuItem.d.ts +1 -0
  15. package/cjs/Menu/MenuItem.js +1 -0
  16. package/cjs/Menu/Menubar.d.ts +3 -0
  17. package/cjs/Menu/Menubar.js +4 -0
  18. package/cjs/Nav/Nav.d.ts +7 -2
  19. package/cjs/Nav/Nav.js +105 -5
  20. package/cjs/Nav/NavContext.d.ts +2 -8
  21. package/cjs/Nav/NavContext.js +1 -7
  22. package/cjs/Nav/NavDropdown.d.ts +71 -0
  23. package/cjs/Nav/NavDropdown.js +193 -0
  24. package/cjs/Nav/NavDropdownItem.d.ts +39 -0
  25. package/cjs/Nav/NavDropdownItem.js +141 -0
  26. package/cjs/Nav/NavDropdownMenu.d.ts +26 -0
  27. package/cjs/Nav/NavDropdownMenu.js +156 -0
  28. package/cjs/Nav/NavDropdownToggle.d.ts +21 -0
  29. package/cjs/Nav/NavDropdownToggle.js +74 -0
  30. package/cjs/Nav/NavItem.d.ts +2 -0
  31. package/cjs/Nav/NavItem.js +13 -26
  32. package/cjs/Nav/NavMenu.d.ts +38 -0
  33. package/cjs/Nav/NavMenu.js +122 -0
  34. package/cjs/Navbar/NavbarDropdown.d.ts +57 -0
  35. package/cjs/Navbar/NavbarDropdown.js +147 -0
  36. package/cjs/Navbar/NavbarDropdownItem.d.ts +41 -0
  37. package/cjs/Navbar/NavbarDropdownItem.js +149 -0
  38. package/cjs/Navbar/NavbarDropdownMenu.d.ts +37 -0
  39. package/cjs/Navbar/NavbarDropdownMenu.js +155 -0
  40. package/cjs/Navbar/NavbarDropdownToggle.d.ts +19 -0
  41. package/cjs/Navbar/NavbarDropdownToggle.js +72 -0
  42. package/cjs/Navbar/NavbarItem.d.ts +5 -2
  43. package/cjs/Navbar/NavbarItem.js +10 -4
  44. package/cjs/Picker/utils.js +22 -15
  45. package/cjs/Sidenav/ExpandedSidenavDropdown.d.ts +43 -0
  46. package/cjs/Sidenav/ExpandedSidenavDropdown.js +166 -0
  47. package/cjs/Sidenav/ExpandedSidenavDropdownItem.d.ts +31 -0
  48. package/cjs/Sidenav/ExpandedSidenavDropdownItem.js +141 -0
  49. package/cjs/Sidenav/ExpandedSidenavDropdownMenu.d.ts +26 -0
  50. package/cjs/Sidenav/ExpandedSidenavDropdownMenu.js +145 -0
  51. package/cjs/Sidenav/Sidenav.d.ts +8 -2
  52. package/cjs/Sidenav/Sidenav.js +1 -2
  53. package/cjs/Sidenav/SidenavDropdown.d.ts +30 -8
  54. package/cjs/Sidenav/SidenavDropdown.js +144 -73
  55. package/cjs/Sidenav/SidenavDropdownItem.d.ts +22 -5
  56. package/cjs/Sidenav/SidenavDropdownItem.js +88 -72
  57. package/cjs/Sidenav/SidenavDropdownMenu.d.ts +26 -16
  58. package/cjs/Sidenav/SidenavDropdownMenu.js +122 -90
  59. package/cjs/Sidenav/SidenavDropdownToggle.d.ts +19 -0
  60. package/cjs/Sidenav/SidenavDropdownToggle.js +72 -0
  61. package/cjs/Sidenav/SidenavItem.d.ts +3 -0
  62. package/cjs/Sidenav/SidenavItem.js +22 -14
  63. package/cjs/utils/deprecateComponent.js +4 -6
  64. package/cjs/utils/deprecatePropType.d.ts +1 -5
  65. package/cjs/utils/deprecatePropType.js +7 -14
  66. package/cjs/utils/useInternalId.d.ts +1 -1
  67. package/cjs/utils/useInternalId.js +2 -2
  68. package/cjs/utils/warnOnce.d.ts +9 -0
  69. package/cjs/utils/warnOnce.js +22 -0
  70. package/dist/rsuite-rtl.css +18 -9
  71. package/dist/rsuite-rtl.min.css +1 -1
  72. package/dist/rsuite-rtl.min.css.map +1 -1
  73. package/dist/rsuite.css +18 -9
  74. package/dist/rsuite.js +275 -22
  75. package/dist/rsuite.js.map +1 -1
  76. package/dist/rsuite.min.css +1 -1
  77. package/dist/rsuite.min.css.map +1 -1
  78. package/dist/rsuite.min.js +1 -1
  79. package/dist/rsuite.min.js.map +1 -1
  80. package/esm/Cascader/DropdownMenu.js +8 -3
  81. package/esm/Disclosure/Disclosure.d.ts +1 -1
  82. package/esm/Disclosure/DisclosureContext.d.ts +1 -1
  83. package/esm/Dropdown/Dropdown.js +25 -105
  84. package/esm/Dropdown/DropdownItem.js +13 -55
  85. package/esm/Dropdown/DropdownMenu.js +31 -76
  86. package/esm/Dropdown/DropdownToggle.js +4 -14
  87. package/esm/Menu/Menu.d.ts +1 -0
  88. package/esm/Menu/Menu.js +1 -0
  89. package/esm/Menu/MenuItem.d.ts +1 -0
  90. package/esm/Menu/MenuItem.js +1 -0
  91. package/esm/Menu/Menubar.d.ts +3 -0
  92. package/esm/Menu/Menubar.js +4 -0
  93. package/esm/Nav/Nav.d.ts +7 -2
  94. package/esm/Nav/Nav.js +96 -5
  95. package/esm/Nav/NavContext.d.ts +2 -8
  96. package/esm/Nav/NavContext.js +1 -6
  97. package/esm/Nav/NavDropdown.d.ts +71 -0
  98. package/esm/Nav/NavDropdown.js +170 -0
  99. package/esm/Nav/NavDropdownItem.d.ts +39 -0
  100. package/esm/Nav/NavDropdownItem.js +123 -0
  101. package/esm/Nav/NavDropdownMenu.d.ts +26 -0
  102. package/esm/Nav/NavDropdownMenu.js +138 -0
  103. package/esm/Nav/NavDropdownToggle.d.ts +21 -0
  104. package/esm/Nav/NavDropdownToggle.js +57 -0
  105. package/esm/Nav/NavItem.d.ts +2 -0
  106. package/esm/Nav/NavItem.js +13 -21
  107. package/esm/Nav/NavMenu.d.ts +38 -0
  108. package/esm/Nav/NavMenu.js +98 -0
  109. package/esm/Navbar/NavbarDropdown.d.ts +57 -0
  110. package/esm/Navbar/NavbarDropdown.js +124 -0
  111. package/esm/Navbar/NavbarDropdownItem.d.ts +41 -0
  112. package/esm/Navbar/NavbarDropdownItem.js +128 -0
  113. package/esm/Navbar/NavbarDropdownMenu.d.ts +37 -0
  114. package/esm/Navbar/NavbarDropdownMenu.js +135 -0
  115. package/esm/Navbar/NavbarDropdownToggle.d.ts +19 -0
  116. package/esm/Navbar/NavbarDropdownToggle.js +55 -0
  117. package/esm/Navbar/NavbarItem.d.ts +5 -2
  118. package/esm/Navbar/NavbarItem.js +11 -4
  119. package/esm/Picker/utils.js +22 -14
  120. package/esm/Sidenav/ExpandedSidenavDropdown.d.ts +43 -0
  121. package/esm/Sidenav/ExpandedSidenavDropdown.js +140 -0
  122. package/esm/Sidenav/ExpandedSidenavDropdownItem.d.ts +31 -0
  123. package/esm/Sidenav/ExpandedSidenavDropdownItem.js +120 -0
  124. package/esm/Sidenav/ExpandedSidenavDropdownMenu.d.ts +26 -0
  125. package/esm/Sidenav/ExpandedSidenavDropdownMenu.js +121 -0
  126. package/esm/Sidenav/Sidenav.d.ts +8 -2
  127. package/esm/Sidenav/Sidenav.js +1 -2
  128. package/esm/Sidenav/SidenavDropdown.d.ts +30 -8
  129. package/esm/Sidenav/SidenavDropdown.js +145 -75
  130. package/esm/Sidenav/SidenavDropdownItem.d.ts +22 -5
  131. package/esm/Sidenav/SidenavDropdownItem.js +87 -71
  132. package/esm/Sidenav/SidenavDropdownMenu.d.ts +26 -16
  133. package/esm/Sidenav/SidenavDropdownMenu.js +122 -86
  134. package/esm/Sidenav/SidenavDropdownToggle.d.ts +19 -0
  135. package/esm/Sidenav/SidenavDropdownToggle.js +55 -0
  136. package/esm/Sidenav/SidenavItem.d.ts +3 -0
  137. package/esm/Sidenav/SidenavItem.js +23 -15
  138. package/esm/utils/deprecateComponent.js +3 -4
  139. package/esm/utils/deprecatePropType.d.ts +1 -5
  140. package/esm/utils/deprecatePropType.js +3 -13
  141. package/esm/utils/useInternalId.d.ts +1 -1
  142. package/esm/utils/useInternalId.js +2 -2
  143. package/esm/utils/warnOnce.d.ts +9 -0
  144. package/esm/utils/warnOnce.js +18 -0
  145. package/package.json +1 -1
  146. 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 _isNil = _interopRequireDefault(require("lodash/isNil"));
18
+ var _omit2 = _interopRequireDefault(require("lodash/omit"));
19
19
 
20
- var _omit = _interopRequireDefault(require("lodash/omit"));
20
+ var _Menu = _interopRequireDefault(require("../Menu/Menu"));
21
21
 
22
- var _utils = require("../utils");
22
+ var _MenuItem = _interopRequireDefault(require("../Menu/MenuItem"));
23
23
 
24
- var _Sidenav = require("./Sidenav");
24
+ var _utils = require("../utils");
25
25
 
26
- var _useCustom2 = _interopRequireDefault(require("../utils/useCustom"));
26
+ var _propTypes = _interopRequireDefault(require("prop-types"));
27
27
 
28
- var _AngleLeft = _interopRequireDefault(require("@rsuite/icons/legacy/AngleLeft"));
28
+ var _Sidenav = require("./Sidenav");
29
29
 
30
- var _AngleRight = _interopRequireDefault(require("@rsuite/icons/legacy/AngleRight"));
30
+ var _ArrowLeftLine = _interopRequireDefault(require("@rsuite/icons/ArrowLeftLine"));
31
31
 
32
- var _propTypes = _interopRequireDefault(require("prop-types"));
32
+ var _ArrowRightLine = _interopRequireDefault(require("@rsuite/icons/ArrowRightLine"));
33
33
 
34
- var _SidenavDropdownCollapse = _interopRequireDefault(require("./SidenavDropdownCollapse"));
34
+ var _useCustom2 = _interopRequireDefault(require("../utils/useCustom"));
35
35
 
36
- var _Ripple = _interopRequireDefault(require("../Ripple"));
36
+ var _ExpandedSidenavDropdownMenu = _interopRequireDefault(require("./ExpandedSidenavDropdownMenu"));
37
37
 
38
- var _Disclosure = _interopRequireDefault(require("../Disclosure/Disclosure"));
38
+ var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
39
39
 
40
40
  var _templateObject, _templateObject2;
41
41
 
42
42
  /**
43
- * Tree View Node
44
- * @see https://www.w3.org/TR/wai-aria-practices-1.2/#TreeView
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 _props$as = props.as,
48
- Component = _props$as === void 0 ? 'li' : _props$as,
49
- children = props.children,
50
- disabled = props.disabled,
51
- className = props.className,
52
- style = props.style,
53
- _props$classPrefix = props.classPrefix,
54
- classPrefix = _props$classPrefix === void 0 ? 'dropdown-item' : _props$classPrefix,
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
- onClick = props.onClick,
60
- onSelect = props.onSelect,
61
- rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "children", "disabled", "className", "style", "classPrefix", "tabIndex", "icon", "title", "eventKey", "onClick", "onSelect"]);
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 sidenavContext = (0, _react.useContext)(_Sidenav.SidenavContext);
80
+ var _useClassNames2 = (0, _utils.useClassNames)('dropdown-menu'),
81
+ withMenuClassPrefix = _useClassNames2.withClassPrefix,
82
+ mergeMenuClassName = _useClassNames2.merge;
72
83
 
73
- if (!sidenavContext) {
74
- throw new Error('<SidenavDropdownMenu> component is not supposed to be used standalone. Use <Dropdown.Item> inside <Sidenav> instead.');
75
- }
84
+ var _useClassNames3 = (0, _utils.useClassNames)('dropdown-item'),
85
+ mergeItemClassNames = _useClassNames3.merge,
86
+ withItemClassPrefix = _useClassNames3.withClassPrefix,
87
+ prefixItemClassName = _useClassNames3.prefix;
76
88
 
77
- var _sidenavContext$openK = sidenavContext.openKeys,
78
- openKeys = _sidenavContext$openK === void 0 ? [] : _sidenavContext$openK,
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
- }, rest, {
105
- tabIndex: disabled ? -1 : tabIndex,
106
- style: style,
107
- className: classes
108
- }, menuitemEventHandlers), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, null, function (buttonProps) {
109
- return /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
110
- className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["toggle"]))),
111
- onClick: handleClick
112
- }, (0, _omit.default)(buttonProps, ['open'])), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
113
- className: prefix('menu-icon')
114
- }), title, /*#__PURE__*/_react.default.createElement(Icon, {
115
- className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["toggle-icon"])))
116
- }), /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
117
- }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Content, null, function (_ref2) {
118
- var open = _ref2.open;
119
- return /*#__PURE__*/_react.default.createElement(_SidenavDropdownCollapse.default, {
120
- open: open
121
- }, children);
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
- as: _propTypes.default.elementType,
129
- expanded: _propTypes.default.bool,
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
- tabIndex: _propTypes.default.number,
168
+ pullLeft: _propTypes.default.bool,
140
169
  title: _propTypes.default.node,
141
- onMouseOver: _propTypes.default.func,
142
- onMouseOut: _propTypes.default.func
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 _useContext = (0, _react.useContext)(_NavContext.default),
58
- activeKey = _useContext.activeKey,
59
- onSelectFromNav = _useContext.onSelect;
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 (_ref, menuitemRef) {
80
- var selected = _ref.selected,
81
- active = _ref.active,
82
- menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["selected", "active"]);
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, _children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
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, _children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
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 = _interopRequireWildcard(require("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, _react.useEffect)(function () {
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
- declare function deprecatePropType<T extends PropTypes.Validator<any>>(propType: T, explanation?: string): typeof propType;
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
+ }
@@ -1,4 +1,4 @@
1
1
  /**
2
2
  * Used for generating unique ID for DOM elements
3
3
  */
4
- export default function useInternalId(prefix?: string): string;
4
+ export default function useInternalId(namespace?: string): string;
@@ -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(prefix) {
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://" + prefix);
19
+ idRef.current = (0, _uniqueId.default)("internal://" + namespace);
20
20
  }
21
21
 
22
22
  (0, _react.useDebugValue)(idRef.current);
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Logs a warning message
3
+ * but dont warn a same message twice
4
+ */
5
+ declare function warnOnce(message: string): void;
6
+ declare namespace warnOnce {
7
+ var _resetWarned: () => void;
8
+ }
9
+ export default warnOnce;
@@ -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
+ };
@@ -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 > .rs-icon {
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 > .rs-icon {
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-dropdown-toggle-icon {
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-dropdown-toggle-icon,
12963
- .rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle-icon,
12964
- .rs-sidenav-default.rs-sidenav-collapse-out .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle-icon {
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-dropdown-toggle {
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
  }