rsuite 5.11.0 → 5.13.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.
Files changed (181) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/Nav/styles/index.less +7 -1
  3. package/Navbar/styles/index.less +6 -1
  4. package/Sidenav/styles/index.less +47 -9
  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/Form/Form.js +21 -7
  13. package/cjs/Form/FormContext.d.ts +18 -13
  14. package/cjs/Form/useSchemaModel.d.ts +9 -0
  15. package/cjs/Form/useSchemaModel.js +46 -0
  16. package/cjs/FormControl/FormControl.d.ts +3 -0
  17. package/cjs/FormControl/FormControl.js +9 -2
  18. package/cjs/FormControl/useRegisterModel.d.ts +4 -0
  19. package/cjs/FormControl/useRegisterModel.js +20 -0
  20. package/cjs/Menu/Menu.d.ts +1 -0
  21. package/cjs/Menu/Menu.js +1 -0
  22. package/cjs/Menu/MenuItem.d.ts +1 -0
  23. package/cjs/Menu/MenuItem.js +1 -0
  24. package/cjs/Menu/Menubar.d.ts +3 -0
  25. package/cjs/Menu/Menubar.js +4 -0
  26. package/cjs/Nav/Nav.d.ts +7 -2
  27. package/cjs/Nav/Nav.js +105 -5
  28. package/cjs/Nav/NavContext.d.ts +2 -8
  29. package/cjs/Nav/NavContext.js +1 -7
  30. package/cjs/Nav/NavDropdown.d.ts +71 -0
  31. package/cjs/Nav/NavDropdown.js +193 -0
  32. package/cjs/Nav/NavDropdownItem.d.ts +39 -0
  33. package/cjs/Nav/NavDropdownItem.js +141 -0
  34. package/cjs/Nav/NavDropdownMenu.d.ts +26 -0
  35. package/cjs/Nav/NavDropdownMenu.js +156 -0
  36. package/cjs/Nav/NavDropdownToggle.d.ts +21 -0
  37. package/cjs/Nav/NavDropdownToggle.js +74 -0
  38. package/cjs/Nav/NavItem.d.ts +2 -0
  39. package/cjs/Nav/NavItem.js +13 -26
  40. package/cjs/Nav/NavMenu.d.ts +38 -0
  41. package/cjs/Nav/NavMenu.js +122 -0
  42. package/cjs/Navbar/NavbarDropdown.d.ts +57 -0
  43. package/cjs/Navbar/NavbarDropdown.js +147 -0
  44. package/cjs/Navbar/NavbarDropdownItem.d.ts +41 -0
  45. package/cjs/Navbar/NavbarDropdownItem.js +149 -0
  46. package/cjs/Navbar/NavbarDropdownMenu.d.ts +37 -0
  47. package/cjs/Navbar/NavbarDropdownMenu.js +155 -0
  48. package/cjs/Navbar/NavbarDropdownToggle.d.ts +19 -0
  49. package/cjs/Navbar/NavbarDropdownToggle.js +72 -0
  50. package/cjs/Navbar/NavbarItem.d.ts +5 -2
  51. package/cjs/Navbar/NavbarItem.js +10 -4
  52. package/cjs/Overlay/OverlayTrigger.d.ts +4 -4
  53. package/cjs/Picker/utils.js +22 -15
  54. package/cjs/Sidenav/ExpandedSidenavDropdown.d.ts +43 -0
  55. package/cjs/Sidenav/ExpandedSidenavDropdown.js +166 -0
  56. package/cjs/Sidenav/ExpandedSidenavDropdownItem.d.ts +31 -0
  57. package/cjs/Sidenav/ExpandedSidenavDropdownItem.js +141 -0
  58. package/cjs/Sidenav/ExpandedSidenavDropdownMenu.d.ts +26 -0
  59. package/cjs/Sidenav/ExpandedSidenavDropdownMenu.js +145 -0
  60. package/cjs/Sidenav/Sidenav.d.ts +8 -2
  61. package/cjs/Sidenav/Sidenav.js +1 -2
  62. package/cjs/Sidenav/SidenavDropdown.d.ts +30 -8
  63. package/cjs/Sidenav/SidenavDropdown.js +144 -73
  64. package/cjs/Sidenav/SidenavDropdownItem.d.ts +22 -5
  65. package/cjs/Sidenav/SidenavDropdownItem.js +88 -72
  66. package/cjs/Sidenav/SidenavDropdownMenu.d.ts +26 -16
  67. package/cjs/Sidenav/SidenavDropdownMenu.js +122 -90
  68. package/cjs/Sidenav/SidenavDropdownToggle.d.ts +19 -0
  69. package/cjs/Sidenav/SidenavDropdownToggle.js +72 -0
  70. package/cjs/Sidenav/SidenavItem.d.ts +3 -0
  71. package/cjs/Sidenav/SidenavItem.js +22 -14
  72. package/cjs/Sidenav/SidenavToggle.d.ts +5 -1
  73. package/cjs/Sidenav/SidenavToggle.js +25 -9
  74. package/cjs/Whisper/Whisper.d.ts +3 -5
  75. package/cjs/Whisper/test/Whisper.test.d.ts +1 -0
  76. package/cjs/Whisper/test/Whisper.test.js +23 -0
  77. package/cjs/index.d.ts +1 -1
  78. package/cjs/utils/deprecateComponent.js +4 -6
  79. package/cjs/utils/deprecatePropType.d.ts +1 -5
  80. package/cjs/utils/deprecatePropType.js +7 -14
  81. package/cjs/utils/treeUtils.js +8 -10
  82. package/cjs/utils/useInternalId.d.ts +1 -1
  83. package/cjs/utils/useInternalId.js +2 -2
  84. package/cjs/utils/warnOnce.d.ts +9 -0
  85. package/cjs/utils/warnOnce.js +22 -0
  86. package/dist/rsuite-rtl.css +81 -15
  87. package/dist/rsuite-rtl.min.css +1 -1
  88. package/dist/rsuite-rtl.min.css.map +1 -1
  89. package/dist/rsuite.css +81 -15
  90. package/dist/rsuite.js +303 -28
  91. package/dist/rsuite.js.map +1 -1
  92. package/dist/rsuite.min.css +1 -1
  93. package/dist/rsuite.min.css.map +1 -1
  94. package/dist/rsuite.min.js +1 -1
  95. package/dist/rsuite.min.js.map +1 -1
  96. package/esm/Cascader/DropdownMenu.js +8 -3
  97. package/esm/Disclosure/Disclosure.d.ts +1 -1
  98. package/esm/Disclosure/DisclosureContext.d.ts +1 -1
  99. package/esm/Dropdown/Dropdown.js +25 -105
  100. package/esm/Dropdown/DropdownItem.js +13 -55
  101. package/esm/Dropdown/DropdownMenu.js +31 -76
  102. package/esm/Dropdown/DropdownToggle.js +4 -14
  103. package/esm/Form/Form.js +19 -7
  104. package/esm/Form/FormContext.d.ts +18 -13
  105. package/esm/Form/useSchemaModel.d.ts +9 -0
  106. package/esm/Form/useSchemaModel.js +39 -0
  107. package/esm/FormControl/FormControl.d.ts +3 -0
  108. package/esm/FormControl/FormControl.js +9 -6
  109. package/esm/FormControl/useRegisterModel.d.ts +4 -0
  110. package/esm/FormControl/useRegisterModel.js +14 -0
  111. package/esm/Menu/Menu.d.ts +1 -0
  112. package/esm/Menu/Menu.js +1 -0
  113. package/esm/Menu/MenuItem.d.ts +1 -0
  114. package/esm/Menu/MenuItem.js +1 -0
  115. package/esm/Menu/Menubar.d.ts +3 -0
  116. package/esm/Menu/Menubar.js +4 -0
  117. package/esm/Nav/Nav.d.ts +7 -2
  118. package/esm/Nav/Nav.js +96 -5
  119. package/esm/Nav/NavContext.d.ts +2 -8
  120. package/esm/Nav/NavContext.js +1 -6
  121. package/esm/Nav/NavDropdown.d.ts +71 -0
  122. package/esm/Nav/NavDropdown.js +170 -0
  123. package/esm/Nav/NavDropdownItem.d.ts +39 -0
  124. package/esm/Nav/NavDropdownItem.js +123 -0
  125. package/esm/Nav/NavDropdownMenu.d.ts +26 -0
  126. package/esm/Nav/NavDropdownMenu.js +138 -0
  127. package/esm/Nav/NavDropdownToggle.d.ts +21 -0
  128. package/esm/Nav/NavDropdownToggle.js +57 -0
  129. package/esm/Nav/NavItem.d.ts +2 -0
  130. package/esm/Nav/NavItem.js +13 -21
  131. package/esm/Nav/NavMenu.d.ts +38 -0
  132. package/esm/Nav/NavMenu.js +98 -0
  133. package/esm/Navbar/NavbarDropdown.d.ts +57 -0
  134. package/esm/Navbar/NavbarDropdown.js +124 -0
  135. package/esm/Navbar/NavbarDropdownItem.d.ts +41 -0
  136. package/esm/Navbar/NavbarDropdownItem.js +128 -0
  137. package/esm/Navbar/NavbarDropdownMenu.d.ts +37 -0
  138. package/esm/Navbar/NavbarDropdownMenu.js +135 -0
  139. package/esm/Navbar/NavbarDropdownToggle.d.ts +19 -0
  140. package/esm/Navbar/NavbarDropdownToggle.js +55 -0
  141. package/esm/Navbar/NavbarItem.d.ts +5 -2
  142. package/esm/Navbar/NavbarItem.js +11 -4
  143. package/esm/Overlay/OverlayTrigger.d.ts +4 -4
  144. package/esm/Picker/utils.js +22 -14
  145. package/esm/Sidenav/ExpandedSidenavDropdown.d.ts +43 -0
  146. package/esm/Sidenav/ExpandedSidenavDropdown.js +140 -0
  147. package/esm/Sidenav/ExpandedSidenavDropdownItem.d.ts +31 -0
  148. package/esm/Sidenav/ExpandedSidenavDropdownItem.js +120 -0
  149. package/esm/Sidenav/ExpandedSidenavDropdownMenu.d.ts +26 -0
  150. package/esm/Sidenav/ExpandedSidenavDropdownMenu.js +121 -0
  151. package/esm/Sidenav/Sidenav.d.ts +8 -2
  152. package/esm/Sidenav/Sidenav.js +1 -2
  153. package/esm/Sidenav/SidenavDropdown.d.ts +30 -8
  154. package/esm/Sidenav/SidenavDropdown.js +145 -75
  155. package/esm/Sidenav/SidenavDropdownItem.d.ts +22 -5
  156. package/esm/Sidenav/SidenavDropdownItem.js +87 -71
  157. package/esm/Sidenav/SidenavDropdownMenu.d.ts +26 -16
  158. package/esm/Sidenav/SidenavDropdownMenu.js +122 -86
  159. package/esm/Sidenav/SidenavDropdownToggle.d.ts +19 -0
  160. package/esm/Sidenav/SidenavDropdownToggle.js +55 -0
  161. package/esm/Sidenav/SidenavItem.d.ts +3 -0
  162. package/esm/Sidenav/SidenavItem.js +23 -15
  163. package/esm/Sidenav/SidenavToggle.d.ts +5 -1
  164. package/esm/Sidenav/SidenavToggle.js +22 -9
  165. package/esm/Whisper/Whisper.d.ts +3 -5
  166. package/esm/Whisper/test/Whisper.test.d.ts +1 -0
  167. package/esm/Whisper/test/Whisper.test.js +16 -0
  168. package/esm/index.d.ts +1 -1
  169. package/esm/utils/deprecateComponent.js +3 -4
  170. package/esm/utils/deprecatePropType.d.ts +1 -5
  171. package/esm/utils/deprecatePropType.js +3 -13
  172. package/esm/utils/treeUtils.js +8 -10
  173. package/esm/utils/useInternalId.d.ts +1 -1
  174. package/esm/utils/useInternalId.js +2 -2
  175. package/esm/utils/warnOnce.d.ts +9 -0
  176. package/esm/utils/warnOnce.js +18 -0
  177. package/package.json +1 -1
  178. package/styles/color-modes/dark.less +3 -0
  179. package/styles/color-modes/high-contrast.less +3 -0
  180. package/styles/color-modes/light.less +3 -0
  181. package/styles/variables.less +3 -0
@@ -25,6 +25,9 @@ var _utils = require("../utils");
25
25
 
26
26
  var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
27
27
 
28
+ /**
29
+ * @private
30
+ */
28
31
  var NavbarItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
29
32
  var _props$as = props.as,
30
33
  Component = _props$as === void 0 ? _SafeAnchor.default : _props$as,
@@ -41,9 +44,9 @@ var NavbarItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
41
44
  onSelectProp = props.onSelect,
42
45
  rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "active", "disabled", "eventKey", "className", "classPrefix", "style", "children", "icon", "onClick", "onSelect"]);
43
46
 
44
- var _useContext = (0, _react.useContext)(_NavContext.default),
45
- activeKey = _useContext.activeKey,
46
- onSelectFromNav = _useContext.onSelect;
47
+ var _ref = (0, _react.useContext)(_NavContext.default),
48
+ activeKey = _ref.activeKey,
49
+ onSelectFromNav = _ref.onSelect;
47
50
 
48
51
  var active = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(eventKey, activeKey);
49
52
  var emitSelect = (0, _react.useCallback)(function (event) {
@@ -52,6 +55,7 @@ var NavbarItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
52
55
  }, [eventKey, onSelectProp, onSelectFromNav]);
53
56
 
54
57
  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
58
+ prefix = _useClassNames.prefix,
55
59
  withClassPrefix = _useClassNames.withClassPrefix,
56
60
  merge = _useClassNames.merge;
57
61
 
@@ -72,7 +76,9 @@ var NavbarItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
72
76
  className: classes,
73
77
  onClick: handleClick,
74
78
  style: style
75
- }), icon, children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
79
+ }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
80
+ className: prefix('icon')
81
+ }), children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
76
82
  });
77
83
 
78
84
  NavbarItem.displayName = 'Navbar.Item';
@@ -56,10 +56,10 @@ export interface OverlayTriggerProps extends StandardProps, AnimationEventProps
56
56
  onClose?: () => void;
57
57
  }
58
58
  export interface OverlayTriggerInstance {
59
- root: HTMLElement;
59
+ root: HTMLElement | undefined;
60
60
  updatePosition: () => void;
61
- open: () => void;
62
- close: () => void;
61
+ open: (delay?: number) => void;
62
+ close: (delay?: number) => void;
63
63
  }
64
- declare const OverlayTrigger: React.ForwardRefExoticComponent<OverlayTriggerProps & React.RefAttributes<unknown>>;
64
+ declare const OverlayTrigger: React.ForwardRefExoticComponent<OverlayTriggerProps & React.RefAttributes<OverlayTriggerInstance>>;
65
65
  export default OverlayTrigger;
@@ -21,8 +21,6 @@ var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
21
21
 
22
22
  var _trim = _interopRequireDefault(require("lodash/trim"));
23
23
 
24
- var _isNil = _interopRequireDefault(require("lodash/isNil"));
25
-
26
24
  var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
27
25
 
28
26
  var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
@@ -202,20 +200,29 @@ var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props)
202
200
  return [];
203
201
  }
204
202
 
205
- var menu = (0, _isFunction.default)(target) ? target() : target;
206
203
  var currentKeys = keys;
207
204
 
208
- if (currentKeys.length === 0 && !(0, _isNil.default)(menu)) {
209
- currentKeys = Array.from(menu.querySelectorAll(focusableQueryKey)).map(function (item) {
210
- var _item$dataset;
205
+ if (layer < 1) {
206
+ var popup = (0, _isFunction.default)(target) ? target() : target;
207
+ var rootMenu = popup === null || popup === void 0 ? void 0 : popup.querySelector('[data-layer="0"]');
211
208
 
212
- return (_item$dataset = item.dataset) === null || _item$dataset === void 0 ? void 0 : _item$dataset.key;
213
- });
214
- setKeys(currentKeys);
215
- }
209
+ if (rootMenu) {
210
+ var _rootMenu$querySelect;
216
211
 
217
- if (currentKeys.length === 0) {
218
- return [];
212
+ currentKeys = Array.from((_rootMenu$querySelect = rootMenu.querySelectorAll(focusableQueryKey)) !== null && _rootMenu$querySelect !== void 0 ? _rootMenu$querySelect : []).map(function (item) {
213
+ var _item$dataset;
214
+
215
+ return (_item$dataset = item.dataset) === null || _item$dataset === void 0 ? void 0 : _item$dataset.key;
216
+ });
217
+ } else {
218
+ var _popup$querySelectorA;
219
+
220
+ currentKeys = Array.from((_popup$querySelectorA = popup === null || popup === void 0 ? void 0 : popup.querySelectorAll(focusableQueryKey)) !== null && _popup$querySelectorA !== void 0 ? _popup$querySelectorA : []).map(function (item) {
221
+ var _item$dataset2;
222
+
223
+ return (_item$dataset2 = item.dataset) === null || _item$dataset2 === void 0 ? void 0 : _item$dataset2.key;
224
+ });
225
+ }
219
226
  } // 1. It is necessary to traverse the `keys` instead of `data` here to preserve the order of the array.
220
227
  // 2. The values ​​in `keys` are all string, so the corresponding value of `data` should also be converted to string
221
228
 
@@ -225,7 +232,7 @@ var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props)
225
232
  return "" + i[valueKey] === key;
226
233
  });
227
234
  });
228
- }, [data, focusableQueryKey, keys, target, valueKey]);
235
+ }, [data, focusableQueryKey, keys, target, valueKey, layer]);
229
236
  /**
230
237
  * Get the index of the focus item.
231
238
  */
@@ -274,9 +281,9 @@ var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props)
274
281
  var _Array$from;
275
282
 
276
283
  return (_Array$from = Array.from(subMenu.querySelectorAll(focusableQueryKey))) === null || _Array$from === void 0 ? void 0 : _Array$from.map(function (item) {
277
- var _item$dataset2;
284
+ var _item$dataset3;
278
285
 
279
- return (_item$dataset2 = item.dataset) === null || _item$dataset2 === void 0 ? void 0 : _item$dataset2.key;
286
+ return (_item$dataset3 = item.dataset) === null || _item$dataset3 === void 0 ? void 0 : _item$dataset3.key;
280
287
  });
281
288
  }
282
289
 
@@ -0,0 +1,43 @@
1
+ import React from 'react';
2
+ import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../@types/common';
3
+ import { IconProps } from '@rsuite/icons/lib/Icon';
4
+ export interface SidenavDropdownProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
5
+ /** Define the title as a submenu */
6
+ title?: React.ReactNode;
7
+ /** Set the icon */
8
+ icon?: React.ReactElement<IconProps>;
9
+ /** The placement of Menu */
10
+ placement?: TypeAttributes.Placement8;
11
+ /** Whether or not component is disabled */
12
+ disabled?: boolean;
13
+ /** The style of the menu */
14
+ menuStyle?: React.CSSProperties;
15
+ /** A css class to apply to the Toggle DOM node */
16
+ toggleClassName?: string;
17
+ /** The value of the current option */
18
+ eventKey?: T;
19
+ /** You can use a custom element type for this toggle component */
20
+ toggleAs?: React.ElementType;
21
+ /** No caret variation */
22
+ noCaret?: boolean;
23
+ /**
24
+ * Open the menu and control it
25
+ * @deprecated
26
+ */
27
+ open?: boolean;
28
+ /**
29
+ * Custom title
30
+ * @deprecated Use `renderToggle` instead.
31
+ */
32
+ renderTitle?: (children?: React.ReactNode) => React.ReactNode;
33
+ /** Custom Toggle */
34
+ renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;
35
+ /** The callback function that the menu closes */
36
+ onClose?: () => void;
37
+ /** Menu Pop-up callback function */
38
+ onOpen?: () => void;
39
+ /** Callback function for menu state switching */
40
+ onToggle?: (open: boolean) => void;
41
+ }
42
+ declare const ExpandedSidenavDropdown: RsRefForwardingComponent<'li', SidenavDropdownProps>;
43
+ export default ExpandedSidenavDropdown;
@@ -0,0 +1,166 @@
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
+
5
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
+
7
+ exports.__esModule = true;
8
+ exports.default = void 0;
9
+
10
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
+
12
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
13
+
14
+ var _react = _interopRequireWildcard(require("react"));
15
+
16
+ var _propTypes = _interopRequireDefault(require("prop-types"));
17
+
18
+ var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
19
+
20
+ var _omit = _interopRequireDefault(require("lodash/omit"));
21
+
22
+ var _utils = require("../utils");
23
+
24
+ var _Sidenav = require("./Sidenav");
25
+
26
+ var _deprecatePropType = _interopRequireDefault(require("../utils/deprecatePropType"));
27
+
28
+ var _SidenavDropdownCollapse = _interopRequireDefault(require("./SidenavDropdownCollapse"));
29
+
30
+ var _Disclosure = _interopRequireDefault(require("../Disclosure/Disclosure"));
31
+
32
+ var _useInternalId = _interopRequireDefault(require("../utils/useInternalId"));
33
+
34
+ var _SidenavDropdownToggle = _interopRequireDefault(require("./SidenavDropdownToggle"));
35
+
36
+ var _NavMenu = require("../Nav/NavMenu");
37
+
38
+ var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
39
+
40
+ var ExpandedSidenavDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
41
+ var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
42
+ var nav = (0, _react.useContext)(_NavContext.default);
43
+ var navMenu = (0, _react.useContext)(_NavMenu.NavMenuContext);
44
+
45
+ if (!sidenav || !nav || !navMenu) {
46
+ throw new Error('<SidenavDropdown> component is not supposed to be used standalone. Use <Nav.Menu> inside <Sidenav> instead.');
47
+ }
48
+
49
+ var _props$as = props.as,
50
+ Component = _props$as === void 0 ? 'div' : _props$as,
51
+ title = props.title,
52
+ children = props.children,
53
+ className = props.className,
54
+ menuStyle = props.menuStyle,
55
+ disabled = props.disabled,
56
+ renderTitle = props.renderTitle,
57
+ renderToggle = props.renderToggle,
58
+ _props$classPrefix = props.classPrefix,
59
+ classPrefix = _props$classPrefix === void 0 ? 'dropdown' : _props$classPrefix,
60
+ _props$placement = props.placement,
61
+ placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
62
+ toggleClassName = props.toggleClassName,
63
+ icon = props.icon,
64
+ eventKey = props.eventKey,
65
+ toggleAs = props.toggleAs,
66
+ noCaret = props.noCaret,
67
+ style = props.style,
68
+ onOpen = props.onOpen,
69
+ onClose = props.onClose,
70
+ openProp = props.open,
71
+ onToggle = props.onToggle,
72
+ rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "title", "children", "className", "menuStyle", "disabled", "renderTitle", "renderToggle", "classPrefix", "placement", "toggleClassName", "icon", "eventKey", "toggleAs", "noCaret", "style", "onOpen", "onClose", "open", "onToggle"]);
73
+
74
+ var _useClassNames = (0, _utils.useClassNames)(classPrefix),
75
+ merge = _useClassNames.merge,
76
+ withClassPrefix = _useClassNames.withClassPrefix;
77
+
78
+ var internalId = (0, _useInternalId.default)('SidenavDropdown');
79
+ var uniqueKey = eventKey !== null && eventKey !== void 0 ? eventKey : internalId;
80
+ var _sidenav$openKeys = sidenav.openKeys,
81
+ openKeys = _sidenav$openKeys === void 0 ? [] : _sidenav$openKeys,
82
+ onOpenChange = sidenav.onOpenChange;
83
+ var items = navMenu[0].items;
84
+ var hasSelectedItems = // has items that is active indicated by <Nav activeKey>
85
+ nav.activeKey && items.some(function (item) {
86
+ return item.eventKey === nav.activeKey;
87
+ }) || // has items that is active indicated by <Nav.Item active>
88
+ items.some(function (item) {
89
+ return item.active;
90
+ });
91
+ var handleToggleDisclosure = (0, _react.useCallback)(function (open, event) {
92
+ if (open) {
93
+ onClose === null || onClose === void 0 ? void 0 : onClose();
94
+ } else {
95
+ onOpen === null || onOpen === void 0 ? void 0 : onOpen();
96
+ }
97
+
98
+ onToggle === null || onToggle === void 0 ? void 0 : onToggle(open);
99
+ onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(uniqueKey, event);
100
+ }, [onClose, onOpen, onToggle, uniqueKey, onOpenChange]);
101
+ var open = openProp !== null && openProp !== void 0 ? openProp : openKeys.includes(uniqueKey);
102
+ return /*#__PURE__*/_react.default.createElement(_Disclosure.default, {
103
+ open: open,
104
+ onToggle: handleToggleDisclosure
105
+ }, function (_ref, containerRef) {
106
+ var _withClassPrefix;
107
+
108
+ var open = _ref.open;
109
+ var classes = merge(className, withClassPrefix((_withClassPrefix = {}, _withClassPrefix["placement-" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = placement, _withClassPrefix[open ? 'expand' : 'collapse'] = true, _withClassPrefix.disabled = disabled, _withClassPrefix['selected-within'] = hasSelectedItems, _withClassPrefix['no-caret'] = noCaret, _withClassPrefix)));
110
+ return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
111
+ ref: (0, _utils.mergeRefs)(ref, containerRef),
112
+ style: style,
113
+ className: classes
114
+ }, rest, {
115
+ "data-event-key": eventKey
116
+ }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, null, function (buttonProps, buttonRef) {
117
+ return /*#__PURE__*/_react.default.createElement(_SidenavDropdownToggle.default, (0, _extends2.default)({
118
+ ref: buttonRef,
119
+ as: toggleAs,
120
+ noCaret: noCaret,
121
+ className: toggleClassName,
122
+ renderToggle: renderToggle,
123
+ icon: icon,
124
+ placement: placement
125
+ }, (0, _omit.default)(buttonProps, ['open'])), title);
126
+ }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Content, null, function (_ref2) {
127
+ var open = _ref2.open;
128
+ return /*#__PURE__*/_react.default.createElement(_SidenavDropdownCollapse.default, {
129
+ open: open,
130
+ style: menuStyle
131
+ }, children);
132
+ }));
133
+ });
134
+ });
135
+
136
+ ExpandedSidenavDropdown.displayName = 'Sidenav.Dropdown';
137
+ ExpandedSidenavDropdown.propTypes = {
138
+ activeKey: _propTypes.default.any,
139
+ classPrefix: _propTypes.default.string,
140
+ placement: _propTypes.default.oneOf(_utils.PLACEMENT_8),
141
+ title: _propTypes.default.node,
142
+ disabled: _propTypes.default.bool,
143
+ icon: _propTypes.default.node,
144
+ menuStyle: _propTypes.default.object,
145
+ className: _propTypes.default.string,
146
+ toggleClassName: _propTypes.default.string,
147
+ children: _propTypes.default.node,
148
+ tabIndex: _propTypes.default.number,
149
+ open: (0, _deprecatePropType.default)(_propTypes.default.bool),
150
+ eventKey: _propTypes.default.any,
151
+ as: _propTypes.default.elementType,
152
+ toggleAs: _propTypes.default.elementType,
153
+ noCaret: _propTypes.default.bool,
154
+ style: _propTypes.default.object,
155
+ onClose: _propTypes.default.func,
156
+ onOpen: _propTypes.default.func,
157
+ onToggle: _propTypes.default.func,
158
+ onMouseEnter: _propTypes.default.func,
159
+ onMouseLeave: _propTypes.default.func,
160
+ onContextMenu: _propTypes.default.func,
161
+ onClick: _propTypes.default.func,
162
+ renderTitle: (0, _deprecatePropType.default)(_propTypes.default.func),
163
+ renderToggle: _propTypes.default.func
164
+ };
165
+ var _default = ExpandedSidenavDropdown;
166
+ exports.default = _default;
@@ -0,0 +1,31 @@
1
+ import React from 'react';
2
+ import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
3
+ import { IconProps } from '@rsuite/icons/lib/Icon';
4
+ export interface SidenavDropdownItemProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
5
+ /** Active the current option */
6
+ active?: boolean;
7
+ /** Primary content */
8
+ children?: React.ReactNode;
9
+ /** You can use a custom element for this component */
10
+ as?: React.ElementType;
11
+ /** Whether to display the divider */
12
+ divider?: boolean;
13
+ /** Disable the current option */
14
+ disabled?: boolean;
15
+ /** The value of the current option */
16
+ eventKey?: T;
17
+ /** Displays a custom panel */
18
+ panel?: boolean;
19
+ /** Set the icon */
20
+ icon?: React.ReactElement<IconProps>;
21
+ /** Whether the submenu is expanded, used in Sidenav. */
22
+ expanded?: boolean;
23
+ /** Select the callback function for the current option */
24
+ onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
25
+ }
26
+ /**
27
+ * Tree View Node
28
+ * @see https://www.w3.org/TR/wai-aria-practices-1.2/#TreeView
29
+ */
30
+ declare const ExpandedSidenavDropdownItem: RsRefForwardingComponent<'li', SidenavDropdownItemProps>;
31
+ export default ExpandedSidenavDropdownItem;
@@ -0,0 +1,141 @@
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
+
5
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
+
7
+ exports.__esModule = true;
8
+ exports.default = void 0;
9
+
10
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
+
12
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
13
+
14
+ var _react = _interopRequireWildcard(require("react"));
15
+
16
+ var _isNil = _interopRequireDefault(require("lodash/isNil"));
17
+
18
+ var _utils = require("../utils");
19
+
20
+ var _Sidenav = require("./Sidenav");
21
+
22
+ var _propTypes = _interopRequireDefault(require("prop-types"));
23
+
24
+ var _Ripple = _interopRequireDefault(require("../Ripple"));
25
+
26
+ var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
27
+
28
+ var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
29
+
30
+ var _useRenderDropdownItem = require("../Dropdown/useRenderDropdownItem");
31
+
32
+ /**
33
+ * Tree View Node
34
+ * @see https://www.w3.org/TR/wai-aria-practices-1.2/#TreeView
35
+ */
36
+ var ExpandedSidenavDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
37
+ var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
38
+ var nav = (0, _react.useContext)(_NavContext.default);
39
+
40
+ if (!sidenav || !nav) {
41
+ throw new Error('<SidenavDropdownItem> component is not supposed to be used standalone. Use <Nav.Item> within <Sidenav> instead.');
42
+ }
43
+
44
+ var _props$as = props.as,
45
+ Component = _props$as === void 0 ? 'li' : _props$as,
46
+ activeProp = props.active,
47
+ children = props.children,
48
+ disabled = props.disabled,
49
+ divider = props.divider,
50
+ panel = props.panel,
51
+ className = props.className,
52
+ style = props.style,
53
+ _props$classPrefix = props.classPrefix,
54
+ classPrefix = _props$classPrefix === void 0 ? 'dropdown-item' : _props$classPrefix,
55
+ icon = props.icon,
56
+ eventKey = props.eventKey,
57
+ onClick = props.onClick,
58
+ onSelect = props.onSelect,
59
+ rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "active", "children", "disabled", "divider", "panel", "className", "style", "classPrefix", "icon", "eventKey", "onClick", "onSelect"]);
60
+
61
+ var _useClassNames = (0, _utils.useClassNames)(classPrefix),
62
+ merge = _useClassNames.merge,
63
+ withClassPrefix = _useClassNames.withClassPrefix,
64
+ prefix = _useClassNames.prefix;
65
+
66
+ var selected = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && ((0, _utils.shallowEqual)(eventKey, sidenav.activeKey) || (0, _utils.shallowEqual)(nav.activeKey, eventKey));
67
+ var classes = merge(className, withClassPrefix({
68
+ 'with-icon': icon,
69
+ active: selected,
70
+ disabled: disabled
71
+ }));
72
+ var handleClick = (0, _react.useCallback)(function (event) {
73
+ var _nav$onSelect, _sidenav$onSelect;
74
+
75
+ if (disabled) return;
76
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);
77
+ (_nav$onSelect = nav.onSelect) === null || _nav$onSelect === void 0 ? void 0 : _nav$onSelect.call(nav, eventKey, event);
78
+ (_sidenav$onSelect = sidenav.onSelect) === null || _sidenav$onSelect === void 0 ? void 0 : _sidenav$onSelect.call(sidenav, eventKey, event);
79
+ }, [disabled, onSelect, sidenav, eventKey, nav]);
80
+ var menuitemEventHandlers = {
81
+ onClick: (0, _utils.createChainedFunction)(handleClick, onClick)
82
+ };
83
+ var renderDropdownItem = (0, _useRenderDropdownItem.useRenderDropdownItem)(Component);
84
+
85
+ if (divider) {
86
+ return renderDropdownItem((0, _extends2.default)({
87
+ ref: ref,
88
+ role: 'separator',
89
+ style: style,
90
+ className: merge(prefix('divider'), className)
91
+ }, rest));
92
+ }
93
+
94
+ if (panel) {
95
+ return renderDropdownItem((0, _extends2.default)({
96
+ ref: ref,
97
+ role: 'none presentation',
98
+ style: style,
99
+ className: merge(prefix('panel'), className)
100
+ }, rest, {
101
+ children: children
102
+ }));
103
+ }
104
+
105
+ return renderDropdownItem((0, _extends2.default)({
106
+ ref: ref
107
+ }, rest, {
108
+ style: style,
109
+ className: classes,
110
+ 'aria-current': selected || undefined
111
+ }, menuitemEventHandlers, {
112
+ children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.cloneElement(icon, {
113
+ className: prefix('menu-icon')
114
+ }), children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null))
115
+ }), _SafeAnchor.default);
116
+ });
117
+
118
+ ExpandedSidenavDropdownItem.displayName = 'Sidenav.Dropdown.Item';
119
+ ExpandedSidenavDropdownItem.propTypes = {
120
+ as: _propTypes.default.elementType,
121
+ expanded: _propTypes.default.bool,
122
+ active: _propTypes.default.bool,
123
+ divider: _propTypes.default.bool,
124
+ panel: _propTypes.default.bool,
125
+ disabled: _propTypes.default.bool,
126
+ submenu: _propTypes.default.element,
127
+ onSelect: _propTypes.default.func,
128
+ onClick: _propTypes.default.func,
129
+ icon: _propTypes.default.node,
130
+ eventKey: _propTypes.default.any,
131
+ className: _propTypes.default.string,
132
+ style: _propTypes.default.object,
133
+ children: _propTypes.default.node,
134
+ classPrefix: _propTypes.default.string,
135
+ tabIndex: _propTypes.default.number,
136
+ title: _propTypes.default.node,
137
+ onMouseOver: _propTypes.default.func,
138
+ onMouseOut: _propTypes.default.func
139
+ };
140
+ var _default = ExpandedSidenavDropdownItem;
141
+ exports.default = _default;
@@ -0,0 +1,26 @@
1
+ import React from 'react';
2
+ import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
3
+ import { IconProps } from '@rsuite/icons/lib/Icon';
4
+ export interface SidenavDropdownMenuProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLLIElement>, 'title' | 'onSelect'> {
5
+ /** Primary content */
6
+ children?: React.ReactNode;
7
+ /** You can use a custom element for this component */
8
+ as?: React.ElementType;
9
+ /** Disable the current option */
10
+ disabled?: boolean;
11
+ /** The value of the current option */
12
+ eventKey?: T;
13
+ /** Set the icon */
14
+ icon?: React.ReactElement<IconProps>;
15
+ /** Whether the submenu is expanded, used in Sidenav. */
16
+ expanded?: boolean;
17
+ /** Select the callback function for the current option */
18
+ onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
19
+ title?: React.ReactNode;
20
+ }
21
+ /**
22
+ * Tree View Node
23
+ * @see https://www.w3.org/TR/wai-aria-practices-1.2/#TreeView
24
+ */
25
+ declare const ExpandedSidenavDropdownMenu: RsRefForwardingComponent<'li', SidenavDropdownMenuProps>;
26
+ export default ExpandedSidenavDropdownMenu;