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.
- package/CHANGELOG.md +30 -0
- package/Nav/styles/index.less +7 -1
- package/Navbar/styles/index.less +6 -1
- package/Sidenav/styles/index.less +47 -9
- 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/Form/Form.js +21 -7
- package/cjs/Form/FormContext.d.ts +18 -13
- package/cjs/Form/useSchemaModel.d.ts +9 -0
- package/cjs/Form/useSchemaModel.js +46 -0
- package/cjs/FormControl/FormControl.d.ts +3 -0
- package/cjs/FormControl/FormControl.js +9 -2
- package/cjs/FormControl/useRegisterModel.d.ts +4 -0
- package/cjs/FormControl/useRegisterModel.js +20 -0
- 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/Overlay/OverlayTrigger.d.ts +4 -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/Sidenav/SidenavToggle.d.ts +5 -1
- package/cjs/Sidenav/SidenavToggle.js +25 -9
- package/cjs/Whisper/Whisper.d.ts +3 -5
- package/cjs/Whisper/test/Whisper.test.d.ts +1 -0
- package/cjs/Whisper/test/Whisper.test.js +23 -0
- package/cjs/index.d.ts +1 -1
- 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/treeUtils.js +8 -10
- 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 +81 -15
- package/dist/rsuite-rtl.min.css +1 -1
- package/dist/rsuite-rtl.min.css.map +1 -1
- package/dist/rsuite.css +81 -15
- package/dist/rsuite.js +303 -28
- 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/Form/Form.js +19 -7
- package/esm/Form/FormContext.d.ts +18 -13
- package/esm/Form/useSchemaModel.d.ts +9 -0
- package/esm/Form/useSchemaModel.js +39 -0
- package/esm/FormControl/FormControl.d.ts +3 -0
- package/esm/FormControl/FormControl.js +9 -6
- package/esm/FormControl/useRegisterModel.d.ts +4 -0
- package/esm/FormControl/useRegisterModel.js +14 -0
- 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/Overlay/OverlayTrigger.d.ts +4 -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/Sidenav/SidenavToggle.d.ts +5 -1
- package/esm/Sidenav/SidenavToggle.js +22 -9
- package/esm/Whisper/Whisper.d.ts +3 -5
- package/esm/Whisper/test/Whisper.test.d.ts +1 -0
- package/esm/Whisper/test/Whisper.test.js +16 -0
- package/esm/index.d.ts +1 -1
- 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/treeUtils.js +8 -10
- 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/color-modes/dark.less +3 -0
- package/styles/color-modes/high-contrast.less +3 -0
- package/styles/color-modes/light.less +3 -0
- package/styles/variables.less +3 -0
package/cjs/Navbar/NavbarItem.js
CHANGED
|
@@ -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
|
|
45
|
-
activeKey =
|
|
46
|
-
onSelectFromNav =
|
|
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
|
|
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<
|
|
64
|
+
declare const OverlayTrigger: React.ForwardRefExoticComponent<OverlayTriggerProps & React.RefAttributes<OverlayTriggerInstance>>;
|
|
65
65
|
export default OverlayTrigger;
|
package/cjs/Picker/utils.js
CHANGED
|
@@ -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 (
|
|
209
|
-
|
|
210
|
-
|
|
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
|
-
|
|
213
|
-
|
|
214
|
-
setKeys(currentKeys);
|
|
215
|
-
}
|
|
209
|
+
if (rootMenu) {
|
|
210
|
+
var _rootMenu$querySelect;
|
|
216
211
|
|
|
217
|
-
|
|
218
|
-
|
|
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$
|
|
284
|
+
var _item$dataset3;
|
|
278
285
|
|
|
279
|
-
return (_item$
|
|
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;
|