rsuite 5.52.0 → 5.53.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AutoComplete/styles/index.css +4 -0
- package/CHANGELOG.md +15 -0
- package/Cascader/styles/index.css +4 -0
- package/CheckPicker/styles/index.css +4 -0
- package/CheckTree/styles/index.css +34 -14
- package/CheckTreePicker/styles/index.css +34 -14
- package/CheckTreePicker/styles/index.less +39 -29
- package/DatePicker/styles/index.css +4 -0
- package/DateRangePicker/styles/index.css +4 -0
- package/InputGroup/styles/index.css +5 -0
- package/InputGroup/styles/index.less +1 -1
- package/InputNumber/styles/index.css +2 -0
- package/InputPicker/styles/index.css +4 -0
- package/Message/styles/index.css +170 -29
- package/Message/styles/index.less +42 -3
- package/Message/styles/mixin.less +18 -3
- package/MultiCascader/styles/index.css +4 -0
- package/Pagination/styles/index.css +4 -0
- package/SelectPicker/styles/index.css +4 -0
- package/Tabs/package.json +7 -0
- package/Tabs/styles/index.css +1816 -0
- package/Tabs/styles/index.less +28 -0
- package/TagInput/styles/index.css +4 -0
- package/TagPicker/styles/index.css +4 -0
- package/Tree/styles/index.css +10 -4
- package/TreePicker/styles/index.css +10 -4
- package/TreePicker/styles/index.less +9 -5
- package/cjs/CheckTreePicker/CheckTreeNode.js +1 -1
- package/cjs/DateRangePicker/DateRangePicker.d.ts +10 -10
- package/cjs/DateRangePicker/index.d.ts +1 -1
- package/cjs/Dropdown/DropdownItem.js +4 -2
- package/cjs/Message/Message.d.ts +28 -6
- package/cjs/Message/Message.js +17 -11
- package/cjs/Nav/Nav.d.ts +2 -0
- package/cjs/Nav/Nav.js +13 -8
- package/cjs/Tabs/Tab.d.ts +25 -0
- package/cjs/Tabs/Tab.js +21 -0
- package/cjs/Tabs/TabPanel.d.ts +10 -0
- package/cjs/Tabs/TabPanel.js +33 -0
- package/cjs/Tabs/Tabs.d.ts +50 -0
- package/cjs/Tabs/Tabs.js +221 -0
- package/cjs/Tabs/index.d.ts +3 -0
- package/cjs/Tabs/index.js +9 -0
- package/cjs/index.d.ts +2 -0
- package/cjs/index.js +3 -1
- package/cjs/internals/Menu/Menu.js +12 -1
- package/cjs/internals/Picker/ListCheckItem.js +7 -2
- package/cjs/internals/Picker/ListItem.js +6 -2
- package/cjs/internals/Picker/TreeView.js +1 -1
- package/cjs/utils/ReactChildren.d.ts +2 -2
- package/cjs/utils/ReactChildren.js +16 -17
- package/cjs/utils/index.d.ts +2 -0
- package/cjs/utils/index.js +8 -2
- package/cjs/utils/statusIcons.js +2 -2
- package/dist/rsuite-no-reset-rtl.css +212 -35
- package/dist/rsuite-no-reset-rtl.min.css +1 -1
- package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
- package/dist/rsuite-no-reset.css +212 -35
- package/dist/rsuite-no-reset.min.css +1 -1
- package/dist/rsuite-no-reset.min.css.map +1 -1
- package/dist/rsuite-rtl.css +212 -35
- package/dist/rsuite-rtl.min.css +1 -1
- package/dist/rsuite-rtl.min.css.map +1 -1
- package/dist/rsuite.css +212 -35
- package/dist/rsuite.js +78 -45
- 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/CheckTreePicker/CheckTreeNode.js +1 -1
- package/esm/DateRangePicker/DateRangePicker.d.ts +10 -10
- package/esm/DateRangePicker/index.d.ts +1 -1
- package/esm/Dropdown/DropdownItem.js +4 -2
- package/esm/Message/Message.d.ts +28 -6
- package/esm/Message/Message.js +19 -13
- package/esm/Nav/Nav.d.ts +2 -0
- package/esm/Nav/Nav.js +12 -7
- package/esm/Tabs/Tab.d.ts +25 -0
- package/esm/Tabs/Tab.js +15 -0
- package/esm/Tabs/TabPanel.d.ts +10 -0
- package/esm/Tabs/TabPanel.js +27 -0
- package/esm/Tabs/Tabs.d.ts +50 -0
- package/esm/Tabs/Tabs.js +215 -0
- package/esm/Tabs/index.d.ts +3 -0
- package/esm/Tabs/index.js +3 -0
- package/esm/index.d.ts +2 -0
- package/esm/index.js +1 -0
- package/esm/internals/Menu/Menu.js +12 -1
- package/esm/internals/Picker/ListCheckItem.js +7 -2
- package/esm/internals/Picker/ListItem.js +6 -2
- package/esm/internals/Picker/TreeView.js +1 -1
- package/esm/utils/ReactChildren.d.ts +2 -2
- package/esm/utils/ReactChildren.js +16 -17
- package/esm/utils/index.d.ts +2 -0
- package/esm/utils/index.js +3 -1
- package/esm/utils/statusIcons.js +2 -2
- package/internals/Picker/styles/index.less +1 -1
- package/package.json +1 -1
- package/styles/color-modes/dark.less +4 -0
- package/styles/color-modes/light.less +18 -4
- package/styles/index.less +1 -0
- package/styles/mixins/listbox.less +2 -7
- package/styles/variables.less +2 -1
package/cjs/Tabs/Tabs.js
ADDED
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
"use strict";
|
|
3
|
+
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
|
+
exports.__esModule = true;
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
8
|
+
var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
|
|
9
|
+
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
|
+
var _utils = require("../utils");
|
|
13
|
+
var _Nav = _interopRequireDefault(require("../Nav"));
|
|
14
|
+
var _Tab = _interopRequireDefault(require("./Tab"));
|
|
15
|
+
var _TabPanel = _interopRequireDefault(require("./TabPanel"));
|
|
16
|
+
var _templateObject;
|
|
17
|
+
function getFocusableTabs(tablist) {
|
|
18
|
+
var tabs = tablist === null || tablist === void 0 ? void 0 : tablist.querySelectorAll('[role=tab]');
|
|
19
|
+
return Array.from(tabs).filter(function (tab) {
|
|
20
|
+
return !(tab.getAttribute('aria-disabled') === 'true');
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
function getFocusedTab(tablist) {
|
|
24
|
+
var tabs = getFocusableTabs(tablist);
|
|
25
|
+
return tabs.find(function (tab) {
|
|
26
|
+
return tab.getAttribute('aria-selected');
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
function nextItem(tablist) {
|
|
30
|
+
if (!tablist) {
|
|
31
|
+
return null;
|
|
32
|
+
}
|
|
33
|
+
var item = getFocusedTab(tablist);
|
|
34
|
+
var items = getFocusableTabs(tablist);
|
|
35
|
+
if (!item) {
|
|
36
|
+
return items[0];
|
|
37
|
+
}
|
|
38
|
+
var nextItem = items[items.indexOf(item) + 1];
|
|
39
|
+
if (!nextItem || nextItem.getAttribute('role') !== 'tab') {
|
|
40
|
+
return items[0];
|
|
41
|
+
}
|
|
42
|
+
return nextItem;
|
|
43
|
+
}
|
|
44
|
+
function previousItem(tablist) {
|
|
45
|
+
if (!tablist) {
|
|
46
|
+
return null;
|
|
47
|
+
}
|
|
48
|
+
var item = getFocusedTab(tablist);
|
|
49
|
+
var items = getFocusableTabs(tablist);
|
|
50
|
+
if (!item) {
|
|
51
|
+
return items[items.length - 1];
|
|
52
|
+
}
|
|
53
|
+
var previousItem = items[items.indexOf(item) - 1];
|
|
54
|
+
if (!previousItem || previousItem.getAttribute('role') !== 'tab') {
|
|
55
|
+
return items[items.length - 1];
|
|
56
|
+
}
|
|
57
|
+
return previousItem;
|
|
58
|
+
}
|
|
59
|
+
var renderPanels = function renderPanels(children, tabProps) {
|
|
60
|
+
var id = tabProps.id,
|
|
61
|
+
activeKey = tabProps.activeKey;
|
|
62
|
+
return _utils.ReactChildren.map(children, function (child) {
|
|
63
|
+
var _child$props = child.props,
|
|
64
|
+
eventKey = _child$props.eventKey,
|
|
65
|
+
children = _child$props.children;
|
|
66
|
+
var selected = eventKey === activeKey;
|
|
67
|
+
return /*#__PURE__*/_react.default.createElement(_TabPanel.default, {
|
|
68
|
+
"aria-labelledby": id + "-" + eventKey,
|
|
69
|
+
"aria-hidden": !selected,
|
|
70
|
+
id: id + "-panel-" + eventKey,
|
|
71
|
+
active: selected
|
|
72
|
+
}, children);
|
|
73
|
+
});
|
|
74
|
+
};
|
|
75
|
+
var renderTabs = function renderTabs(children, tabPanelProps) {
|
|
76
|
+
var id = tabPanelProps.id,
|
|
77
|
+
activeKey = tabPanelProps.activeKey;
|
|
78
|
+
return _utils.ReactChildren.map(children, function (child) {
|
|
79
|
+
var _child$props2 = child.props,
|
|
80
|
+
eventKey = _child$props2.eventKey,
|
|
81
|
+
title = _child$props2.title,
|
|
82
|
+
disabled = _child$props2.disabled,
|
|
83
|
+
icon = _child$props2.icon;
|
|
84
|
+
var selected = eventKey === activeKey;
|
|
85
|
+
return /*#__PURE__*/_react.default.createElement(_Nav.default.Item, {
|
|
86
|
+
role: "tab",
|
|
87
|
+
as: "button",
|
|
88
|
+
type: "button",
|
|
89
|
+
"aria-selected": selected,
|
|
90
|
+
"aria-controls": id + "-panel-" + eventKey,
|
|
91
|
+
"aria-disabled": disabled,
|
|
92
|
+
"data-event-key": eventKey,
|
|
93
|
+
disabled: disabled,
|
|
94
|
+
icon: icon,
|
|
95
|
+
id: id + "-" + eventKey,
|
|
96
|
+
tabIndex: selected ? undefined : -1,
|
|
97
|
+
eventKey: eventKey
|
|
98
|
+
}, title);
|
|
99
|
+
});
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
/**
|
|
103
|
+
* Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.
|
|
104
|
+
*
|
|
105
|
+
* @version 5.53.0
|
|
106
|
+
* @see https://rsuitejs.com/components/tabs
|
|
107
|
+
*/
|
|
108
|
+
var Tabs = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
109
|
+
var _props$as = props.as,
|
|
110
|
+
Component = _props$as === void 0 ? 'div' : _props$as,
|
|
111
|
+
_props$classPrefix = props.classPrefix,
|
|
112
|
+
classPrefix = _props$classPrefix === void 0 ? 'tabs' : _props$classPrefix,
|
|
113
|
+
_props$appearance = props.appearance,
|
|
114
|
+
appearance = _props$appearance === void 0 ? 'tabs' : _props$appearance,
|
|
115
|
+
className = props.className,
|
|
116
|
+
children = props.children,
|
|
117
|
+
activeKeyProp = props.activeKey,
|
|
118
|
+
defaultActiveKey = props.defaultActiveKey,
|
|
119
|
+
idProp = props.id,
|
|
120
|
+
reversed = props.reversed,
|
|
121
|
+
vertical = props.vertical,
|
|
122
|
+
onSelect = props.onSelect,
|
|
123
|
+
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "appearance", "className", "children", "activeKey", "defaultActiveKey", "id", "reversed", "vertical", "onSelect"]);
|
|
124
|
+
var id = (0, _utils.useUniqueId)('tab-', idProp);
|
|
125
|
+
var _useCustom = (0, _utils.useCustom)(),
|
|
126
|
+
rtl = _useCustom.rtl;
|
|
127
|
+
var _useControlled = (0, _utils.useControlled)(activeKeyProp, defaultActiveKey),
|
|
128
|
+
activeKey = _useControlled[0],
|
|
129
|
+
setActiveKey = _useControlled[1];
|
|
130
|
+
var _useClassNames = (0, _utils.useClassNames)(classPrefix),
|
|
131
|
+
withClassPrefix = _useClassNames.withClassPrefix,
|
|
132
|
+
prefix = _useClassNames.prefix,
|
|
133
|
+
merge = _useClassNames.merge;
|
|
134
|
+
var tablistRef = _react.default.useRef(null);
|
|
135
|
+
var handleSelect = (0, _utils.useEventCallback)(function (eventKey, event) {
|
|
136
|
+
setActiveKey(eventKey);
|
|
137
|
+
onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);
|
|
138
|
+
});
|
|
139
|
+
var handleKeyDown = (0, _utils.useEventCallback)(function (event) {
|
|
140
|
+
var _getFocusableTabs;
|
|
141
|
+
var target = event.target;
|
|
142
|
+
if (target.getAttribute('role') !== 'tab') {
|
|
143
|
+
return;
|
|
144
|
+
}
|
|
145
|
+
var previousItemKey = vertical ? 'ArrowUp' : 'ArrowLeft';
|
|
146
|
+
var nextItemKey = vertical ? 'ArrowDown' : 'ArrowRight';
|
|
147
|
+
if (!vertical && rtl) {
|
|
148
|
+
previousItemKey = 'ArrowRight';
|
|
149
|
+
nextItemKey = 'ArrowLeft';
|
|
150
|
+
}
|
|
151
|
+
var item = null;
|
|
152
|
+
switch (event.key) {
|
|
153
|
+
case previousItemKey:
|
|
154
|
+
item = previousItem(tablistRef.current);
|
|
155
|
+
event.preventDefault();
|
|
156
|
+
break;
|
|
157
|
+
case nextItemKey:
|
|
158
|
+
item = nextItem(tablistRef.current);
|
|
159
|
+
event.preventDefault();
|
|
160
|
+
break;
|
|
161
|
+
case 'Home':
|
|
162
|
+
item = (_getFocusableTabs = getFocusableTabs(tablistRef.current)) === null || _getFocusableTabs === void 0 ? void 0 : _getFocusableTabs[0];
|
|
163
|
+
event.preventDefault();
|
|
164
|
+
break;
|
|
165
|
+
case 'End':
|
|
166
|
+
var tabs = getFocusableTabs(tablistRef.current);
|
|
167
|
+
item = tabs[tabs.length - 1];
|
|
168
|
+
event.preventDefault();
|
|
169
|
+
break;
|
|
170
|
+
}
|
|
171
|
+
if (item) {
|
|
172
|
+
var _item;
|
|
173
|
+
var _item$dataset = (_item = item) === null || _item === void 0 ? void 0 : _item.dataset,
|
|
174
|
+
_eventKey = _item$dataset.eventKey;
|
|
175
|
+
handleSelect(_eventKey, event);
|
|
176
|
+
item.focus();
|
|
177
|
+
}
|
|
178
|
+
});
|
|
179
|
+
return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
|
|
180
|
+
className: merge(className, withClassPrefix({
|
|
181
|
+
reversed: reversed,
|
|
182
|
+
vertical: vertical
|
|
183
|
+
}))
|
|
184
|
+
}, rest, {
|
|
185
|
+
ref: ref
|
|
186
|
+
}), /*#__PURE__*/_react.default.createElement(_Nav.default, {
|
|
187
|
+
role: "tablist",
|
|
188
|
+
"aria-orientation": vertical ? 'vertical' : 'horizontal',
|
|
189
|
+
reversed: reversed,
|
|
190
|
+
vertical: vertical,
|
|
191
|
+
appearance: appearance,
|
|
192
|
+
activeKey: activeKey,
|
|
193
|
+
onSelect: handleSelect,
|
|
194
|
+
onKeyDown: handleKeyDown,
|
|
195
|
+
ref: tablistRef
|
|
196
|
+
}, renderTabs(children, {
|
|
197
|
+
id: id,
|
|
198
|
+
activeKey: activeKey
|
|
199
|
+
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
200
|
+
className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["content"])))
|
|
201
|
+
}, renderPanels(children, {
|
|
202
|
+
id: id,
|
|
203
|
+
activeKey: activeKey
|
|
204
|
+
})));
|
|
205
|
+
});
|
|
206
|
+
Tabs.Tab = _Tab.default;
|
|
207
|
+
Tabs.displayName = 'Tabs';
|
|
208
|
+
Tabs.propTypes = {
|
|
209
|
+
appearance: _propTypes.default.oneOf(['tabs', 'subtle']),
|
|
210
|
+
activeKey: _propTypes.default.any,
|
|
211
|
+
defaultActiveKey: _propTypes.default.any,
|
|
212
|
+
reversed: _propTypes.default.bool,
|
|
213
|
+
vertical: _propTypes.default.bool,
|
|
214
|
+
id: _propTypes.default.string,
|
|
215
|
+
className: _propTypes.default.string,
|
|
216
|
+
classPrefix: _propTypes.default.string,
|
|
217
|
+
children: _propTypes.default.node,
|
|
218
|
+
onSelect: _propTypes.default.func
|
|
219
|
+
};
|
|
220
|
+
var _default = Tabs;
|
|
221
|
+
exports.default = _default;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
"use strict";
|
|
3
|
+
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
|
+
exports.__esModule = true;
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _Tabs = _interopRequireDefault(require("./Tabs"));
|
|
8
|
+
var _default = _Tabs.default;
|
|
9
|
+
exports.default = _default;
|
package/cjs/index.d.ts
CHANGED
|
@@ -118,6 +118,8 @@ export { default as Accordion } from './Accordion';
|
|
|
118
118
|
export type { AccordionProps } from './Accordion';
|
|
119
119
|
export { default as PanelGroup } from './PanelGroup';
|
|
120
120
|
export type { PanelGroupProps } from './PanelGroup';
|
|
121
|
+
export { default as Tabs } from './Tabs';
|
|
122
|
+
export type { TabsProps } from './Tabs';
|
|
121
123
|
export { default as Table } from './Table';
|
|
122
124
|
export type { TableProps, ColumnProps, ColumnGroupProps, CellProps, TableLocaleType } from './Table';
|
|
123
125
|
export { default as Progress } from './Progress';
|
package/cjs/index.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
5
5
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
6
|
exports.__esModule = true;
|
|
7
|
-
exports.useFormClassNames = exports.useToaster = exports.VisuallyHidden = exports.useMediaQuery = exports.CustomProvider = exports.Affix = exports.DOMHelper = exports.Animation = exports.Schema = exports.Stack = exports.Divider = exports.Footer = exports.Sidebar = exports.Header = exports.Content = exports.Container = exports.FlexboxGrid = exports.Col = exports.Row = exports.Grid = exports.Carousel = exports.Calendar = exports.List = exports.TagGroup = exports.Tag = exports.Timeline = exports.Progress = exports.Table = exports.PanelGroup = exports.Accordion = exports.Panel = exports.CheckTree = exports.Tree = exports.Rate = exports.RangeSlider = exports.Slider = exports.Uploader = exports.AutoComplete = exports.DateRangePicker = exports.DateRangeInput = exports.DatePicker = exports.DateInput = exports.MultiCascader = exports.Cascader = exports.CheckTreePicker = exports.TreePicker = exports.TagInput = exports.TagPicker = exports.InputPicker = exports.CheckPicker = exports.SelectPicker = exports.RadioTileGroup = exports.RadioTile = exports.RadioGroup = exports.Radio = exports.CheckboxGroup = exports.Checkbox = exports.InputGroup = exports.InputNumber = exports.MaskedInput = exports.Input = exports.Form = exports.Toggle = exports.Steps = exports.Pagination = exports.Breadcrumb = exports.Sidenav = exports.Navbar = exports.Nav = exports.Dropdown = exports.toaster = exports.AvatarGroup = exports.Avatar = exports.Badge = exports.Placeholder = exports.SafeAnchor = exports.Loader = exports.Drawer = exports.Message = exports.Notification = exports.Modal = exports.Popover = exports.Tooltip = exports.Whisper = exports.ButtonGroup = exports.ButtonToolbar = exports.IconButton = exports.Button = void 0;
|
|
7
|
+
exports.useFormClassNames = exports.useToaster = exports.VisuallyHidden = exports.useMediaQuery = exports.CustomProvider = exports.Affix = exports.DOMHelper = exports.Animation = exports.Schema = exports.Stack = exports.Divider = exports.Footer = exports.Sidebar = exports.Header = exports.Content = exports.Container = exports.FlexboxGrid = exports.Col = exports.Row = exports.Grid = exports.Carousel = exports.Calendar = exports.List = exports.TagGroup = exports.Tag = exports.Timeline = exports.Progress = exports.Table = exports.Tabs = exports.PanelGroup = exports.Accordion = exports.Panel = exports.CheckTree = exports.Tree = exports.Rate = exports.RangeSlider = exports.Slider = exports.Uploader = exports.AutoComplete = exports.DateRangePicker = exports.DateRangeInput = exports.DatePicker = exports.DateInput = exports.MultiCascader = exports.Cascader = exports.CheckTreePicker = exports.TreePicker = exports.TagInput = exports.TagPicker = exports.InputPicker = exports.CheckPicker = exports.SelectPicker = exports.RadioTileGroup = exports.RadioTile = exports.RadioGroup = exports.Radio = exports.CheckboxGroup = exports.Checkbox = exports.InputGroup = exports.InputNumber = exports.MaskedInput = exports.Input = exports.Form = exports.Toggle = exports.Steps = exports.Pagination = exports.Breadcrumb = exports.Sidenav = exports.Navbar = exports.Nav = exports.Dropdown = exports.toaster = exports.AvatarGroup = exports.Avatar = exports.Badge = exports.Placeholder = exports.SafeAnchor = exports.Loader = exports.Drawer = exports.Message = exports.Notification = exports.Modal = exports.Popover = exports.Tooltip = exports.Whisper = exports.ButtonGroup = exports.ButtonToolbar = exports.IconButton = exports.Button = void 0;
|
|
8
8
|
var _Button = _interopRequireDefault(require("./Button"));
|
|
9
9
|
exports.Button = _Button.default;
|
|
10
10
|
var _IconButton = _interopRequireDefault(require("./IconButton"));
|
|
@@ -127,6 +127,8 @@ var _Accordion = _interopRequireDefault(require("./Accordion"));
|
|
|
127
127
|
exports.Accordion = _Accordion.default;
|
|
128
128
|
var _PanelGroup = _interopRequireDefault(require("./PanelGroup"));
|
|
129
129
|
exports.PanelGroup = _PanelGroup.default;
|
|
130
|
+
var _Tabs = _interopRequireDefault(require("./Tabs"));
|
|
131
|
+
exports.Tabs = _Tabs.default;
|
|
130
132
|
var _Table = _interopRequireDefault(require("./Table"));
|
|
131
133
|
exports.Table = _Table.default;
|
|
132
134
|
var _Progress = _interopRequireDefault(require("./Progress"));
|
|
@@ -18,6 +18,16 @@ var _useClickOutside = _interopRequireDefault(require("../../utils/useClickOutsi
|
|
|
18
18
|
var _events = require("../../utils/events");
|
|
19
19
|
var _dom = require("../../utils/dom");
|
|
20
20
|
var defaultOpenMenuOn = ['click'];
|
|
21
|
+
function getMenuItemTarget(event) {
|
|
22
|
+
var _event$currentTarget;
|
|
23
|
+
var target = event.target;
|
|
24
|
+
if (target.getAttribute('role') === 'menuitem') {
|
|
25
|
+
return target;
|
|
26
|
+
}
|
|
27
|
+
return Array.from((_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.querySelectorAll('[role="menuitem"]')).find(function (item) {
|
|
28
|
+
return item.contains(target);
|
|
29
|
+
});
|
|
30
|
+
}
|
|
21
31
|
|
|
22
32
|
/**
|
|
23
33
|
* Headless ARIA `menu`
|
|
@@ -292,7 +302,8 @@ function Menu(_ref) {
|
|
|
292
302
|
|
|
293
303
|
// Only used for clicks bubbling from child `menuitem`s.
|
|
294
304
|
var handleMenuClick = (0, _react.useCallback)(function (event) {
|
|
295
|
-
var target = event
|
|
305
|
+
var target = getMenuItemTarget(event);
|
|
306
|
+
if (!target) return;
|
|
296
307
|
|
|
297
308
|
// Only handle clicks on `menuitem`s
|
|
298
309
|
if (target.getAttribute('role') !== 'menuitem') return;
|
|
@@ -5,11 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
exports.__esModule = true;
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
8
|
+
var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
|
|
8
9
|
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
9
10
|
var _react = _interopRequireDefault(require("react"));
|
|
10
11
|
var _utils = require("../../utils");
|
|
11
12
|
var _Checkbox = _interopRequireDefault(require("../../Checkbox"));
|
|
12
13
|
var _useCombobox2 = _interopRequireDefault(require("./hooks/useCombobox"));
|
|
14
|
+
var _templateObject;
|
|
13
15
|
var ListCheckItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
14
16
|
var _props$active = props.active,
|
|
15
17
|
active = _props$active === void 0 ? false : _props$active,
|
|
@@ -49,7 +51,9 @@ var ListCheckItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
49
51
|
var _useCombobox = (0, _useCombobox2.default)(),
|
|
50
52
|
id = _useCombobox.id;
|
|
51
53
|
var _useClassNames = (0, _utils.useClassNames)(classPrefix),
|
|
52
|
-
withClassPrefix = _useClassNames.withClassPrefix
|
|
54
|
+
withClassPrefix = _useClassNames.withClassPrefix,
|
|
55
|
+
merge = _useClassNames.merge,
|
|
56
|
+
rootPrefix = _useClassNames.rootPrefix;
|
|
53
57
|
var checkboxItemClasses = withClassPrefix({
|
|
54
58
|
focus: focus
|
|
55
59
|
});
|
|
@@ -66,6 +70,7 @@ var ListCheckItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
66
70
|
onClick: handleSelectItem,
|
|
67
71
|
onCheckboxClick: handleCheck
|
|
68
72
|
};
|
|
73
|
+
console.log(className, 'className');
|
|
69
74
|
return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
|
|
70
75
|
role: "option",
|
|
71
76
|
"aria-selected": active,
|
|
@@ -74,7 +79,7 @@ var ListCheckItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
74
79
|
"data-key": value
|
|
75
80
|
}, rest, {
|
|
76
81
|
ref: ref,
|
|
77
|
-
className: className,
|
|
82
|
+
className: merge(className, rootPrefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["picker-list-item"])))),
|
|
78
83
|
tabIndex: -1
|
|
79
84
|
}), renderMenuItemCheckbox ? renderMenuItemCheckbox(checkboxProps) : /*#__PURE__*/_react.default.createElement(CheckboxItem, (0, _extends2.default)({
|
|
80
85
|
role: "checkbox"
|
|
@@ -5,10 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
exports.__esModule = true;
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
8
|
+
var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
|
|
8
9
|
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
9
10
|
var _react = _interopRequireDefault(require("react"));
|
|
10
11
|
var _utils = require("../../utils");
|
|
11
12
|
var _useCombobox2 = _interopRequireDefault(require("./hooks/useCombobox"));
|
|
13
|
+
var _templateObject;
|
|
12
14
|
var ListItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
13
15
|
var _props$as = props.as,
|
|
14
16
|
Component = _props$as === void 0 ? 'div' : _props$as,
|
|
@@ -35,7 +37,9 @@ var ListItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
35
37
|
}
|
|
36
38
|
});
|
|
37
39
|
var _useClassNames = (0, _utils.useClassNames)(classPrefix),
|
|
38
|
-
withClassPrefix = _useClassNames.withClassPrefix
|
|
40
|
+
withClassPrefix = _useClassNames.withClassPrefix,
|
|
41
|
+
merge = _useClassNames.merge,
|
|
42
|
+
rootPrefix = _useClassNames.rootPrefix;
|
|
39
43
|
var classes = withClassPrefix({
|
|
40
44
|
active: active,
|
|
41
45
|
focus: focus,
|
|
@@ -49,7 +53,7 @@ var ListItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
49
53
|
"data-key": value
|
|
50
54
|
}, rest, {
|
|
51
55
|
ref: ref,
|
|
52
|
-
className: className,
|
|
56
|
+
className: merge(className, rootPrefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["picker-list-item"])))),
|
|
53
57
|
tabIndex: -1,
|
|
54
58
|
onKeyDown: disabled ? null : onKeyDown,
|
|
55
59
|
onClick: handleClick
|
|
@@ -19,7 +19,7 @@ var TreeView = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
19
19
|
popupType = _useCombobox.popupType;
|
|
20
20
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
|
21
21
|
role: "tree",
|
|
22
|
-
id: id + "-" + popupType,
|
|
22
|
+
id: id ? id + "-" + popupType : undefined,
|
|
23
23
|
"aria-multiselectable": multiselectable,
|
|
24
24
|
"aria-labelledby": labelId,
|
|
25
25
|
ref: ref
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export declare function find(children: React.ReactNode, func: any, context?: any): React.ReactNode;
|
|
3
|
-
export declare function map(children: React.ReactNode, func: any, context?: any): any
|
|
4
|
-
export declare function mapCloneElement(children: React.ReactNode, func: any, context?: any): any
|
|
3
|
+
export declare function map(children: React.ReactNode, func: any, context?: any): any;
|
|
4
|
+
export declare function mapCloneElement(children: React.ReactNode, func: any, context?: any): any;
|
|
5
5
|
export declare function count(children: React.ReactNode): number;
|
|
6
6
|
declare function some(children: React.ReactNode, func: any, context?: any): boolean;
|
|
7
7
|
declare const _default: {
|
|
@@ -10,10 +10,22 @@ exports.count = count;
|
|
|
10
10
|
exports.default = void 0;
|
|
11
11
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
12
12
|
var _react = _interopRequireDefault(require("react"));
|
|
13
|
+
function typeOf(object) {
|
|
14
|
+
if (typeof object === 'object' && object !== null) {
|
|
15
|
+
return object.type || object.$$typeof;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
function isFragment(children) {
|
|
19
|
+
return _react.default.Children.count(children) === 1 && typeOf(children) === Symbol.for('react.fragment');
|
|
20
|
+
}
|
|
21
|
+
function getChildren(children) {
|
|
22
|
+
var _props;
|
|
23
|
+
return isFragment(children) ? (_props = children.props) === null || _props === void 0 ? void 0 : _props.children : children;
|
|
24
|
+
}
|
|
13
25
|
function find(children, func, context) {
|
|
14
26
|
var index = 0;
|
|
15
27
|
var result;
|
|
16
|
-
_react.default.Children.forEach(children, function (child) {
|
|
28
|
+
_react.default.Children.forEach(getChildren(children), function (child) {
|
|
17
29
|
if (result) {
|
|
18
30
|
return;
|
|
19
31
|
}
|
|
@@ -26,7 +38,7 @@ function find(children, func, context) {
|
|
|
26
38
|
}
|
|
27
39
|
function map(children, func, context) {
|
|
28
40
|
var index = 0;
|
|
29
|
-
return _react.default.Children.map(children, function (child) {
|
|
41
|
+
return _react.default.Children.map(getChildren(children), function (child) {
|
|
30
42
|
if (! /*#__PURE__*/_react.default.isValidElement(child)) {
|
|
31
43
|
return child;
|
|
32
44
|
}
|
|
@@ -35,21 +47,8 @@ function map(children, func, context) {
|
|
|
35
47
|
return handle;
|
|
36
48
|
});
|
|
37
49
|
}
|
|
38
|
-
function typeOf(object) {
|
|
39
|
-
if (typeof object === 'object' && object !== null) {
|
|
40
|
-
return object.type || object.$$typeof;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
function isFragment(children) {
|
|
44
|
-
return _react.default.Children.count(children) === 1 && typeOf(children) === Symbol.for('react.fragment');
|
|
45
|
-
}
|
|
46
50
|
function mapCloneElement(children, func, context) {
|
|
47
|
-
|
|
48
|
-
if (isFragment(children)) {
|
|
49
|
-
var _props;
|
|
50
|
-
elements = (_props = children.props) === null || _props === void 0 ? void 0 : _props.children;
|
|
51
|
-
}
|
|
52
|
-
return map(elements, function (child, index) {
|
|
51
|
+
return map(children, function (child, index) {
|
|
53
52
|
return /*#__PURE__*/_react.default.cloneElement(child, (0, _extends2.default)({
|
|
54
53
|
key: index
|
|
55
54
|
}, func(child, index)));
|
|
@@ -63,7 +62,7 @@ function count(children) {
|
|
|
63
62
|
function some(children, func, context) {
|
|
64
63
|
var index = 0;
|
|
65
64
|
var result = false;
|
|
66
|
-
_react.default.Children.forEach(children, function (child) {
|
|
65
|
+
_react.default.Children.forEach(getChildren(children), function (child) {
|
|
67
66
|
if (result) {
|
|
68
67
|
return;
|
|
69
68
|
}
|
package/cjs/utils/index.d.ts
CHANGED
|
@@ -44,3 +44,5 @@ export { default as useIsMounted } from './useIsMounted';
|
|
|
44
44
|
export { default as useMount } from './useMount';
|
|
45
45
|
export { default as useUniqueId } from './useUniqueId';
|
|
46
46
|
export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
|
|
47
|
+
export { default as useInternalId } from './useInternalId';
|
|
48
|
+
export { default as useEnsuredRef } from './useEnsuredRef';
|
package/cjs/utils/index.js
CHANGED
|
@@ -45,12 +45,14 @@ var _exportNames = {
|
|
|
45
45
|
useMount: true,
|
|
46
46
|
useUniqueId: true,
|
|
47
47
|
useIsomorphicLayoutEffect: true,
|
|
48
|
+
useInternalId: true,
|
|
49
|
+
useEnsuredRef: true,
|
|
48
50
|
defaultClassPrefix: true,
|
|
49
51
|
getClassNamePrefix: true,
|
|
50
52
|
globalKey: true,
|
|
51
53
|
DateUtils: true
|
|
52
54
|
};
|
|
53
|
-
exports.DateUtils = exports.globalKey = exports.getClassNamePrefix = exports.defaultClassPrefix = exports.useIsomorphicLayoutEffect = exports.useUniqueId = exports.useMount = exports.useIsMounted = exports.useUpdateEffect = exports.useWillUnmount = exports.useUpdatedRef = exports.useEventCallback = exports.stringToObject = exports.getSafeRegExpString = exports.useRootClose = exports.useControlled = exports.useTimeout = exports.createComponent = exports.usePortal = exports.useCustom = exports.useElementResize = exports.useEventListener = exports.useClassNames = exports.getStringLength = exports.safeSetSelection = exports.render = exports.appendTooltip = exports.scrollTopAnimation = exports.reactToString = exports.composeFunctions = exports.shallowEqualArray = exports.shallowEqual = exports.mergeRefs = exports.getDOMNode = exports.placementPolyfill = exports.clone = exports.previewFile = exports.ajaxUpload = exports.tplTransform = exports.ReactChildren = exports.isOneOf = exports.createChainedFunction = exports.prefix = exports.guid = void 0;
|
|
55
|
+
exports.DateUtils = exports.globalKey = exports.getClassNamePrefix = exports.defaultClassPrefix = exports.useEnsuredRef = exports.useInternalId = exports.useIsomorphicLayoutEffect = exports.useUniqueId = exports.useMount = exports.useIsMounted = exports.useUpdateEffect = exports.useWillUnmount = exports.useUpdatedRef = exports.useEventCallback = exports.stringToObject = exports.getSafeRegExpString = exports.useRootClose = exports.useControlled = exports.useTimeout = exports.createComponent = exports.usePortal = exports.useCustom = exports.useElementResize = exports.useEventListener = exports.useClassNames = exports.getStringLength = exports.safeSetSelection = exports.render = exports.appendTooltip = exports.scrollTopAnimation = exports.reactToString = exports.composeFunctions = exports.shallowEqualArray = exports.shallowEqual = exports.mergeRefs = exports.getDOMNode = exports.placementPolyfill = exports.clone = exports.previewFile = exports.ajaxUpload = exports.tplTransform = exports.ReactChildren = exports.isOneOf = exports.createChainedFunction = exports.prefix = exports.guid = void 0;
|
|
54
56
|
var _BrowserDetection = require("./BrowserDetection");
|
|
55
57
|
Object.keys(_BrowserDetection).forEach(function (key) {
|
|
56
58
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -163,4 +165,8 @@ exports.useMount = _useMount.default;
|
|
|
163
165
|
var _useUniqueId = _interopRequireDefault(require("./useUniqueId"));
|
|
164
166
|
exports.useUniqueId = _useUniqueId.default;
|
|
165
167
|
var _useIsomorphicLayoutEffect = _interopRequireDefault(require("./useIsomorphicLayoutEffect"));
|
|
166
|
-
exports.useIsomorphicLayoutEffect = _useIsomorphicLayoutEffect.default;
|
|
168
|
+
exports.useIsomorphicLayoutEffect = _useIsomorphicLayoutEffect.default;
|
|
169
|
+
var _useInternalId = _interopRequireDefault(require("./useInternalId"));
|
|
170
|
+
exports.useInternalId = _useInternalId.default;
|
|
171
|
+
var _useEnsuredRef = _interopRequireDefault(require("./useEnsuredRef"));
|
|
172
|
+
exports.useEnsuredRef = _useEnsuredRef.default;
|
package/cjs/utils/statusIcons.js
CHANGED
|
@@ -8,14 +8,14 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
8
8
|
var _Info = _interopRequireDefault(require("@rsuite/icons/legacy/Info"));
|
|
9
9
|
var _CheckCircle = _interopRequireDefault(require("@rsuite/icons/legacy/CheckCircle"));
|
|
10
10
|
var _CloseCircle = _interopRequireDefault(require("@rsuite/icons/legacy/CloseCircle"));
|
|
11
|
-
var _Remind = _interopRequireDefault(require("@rsuite/icons/legacy/Remind"));
|
|
12
11
|
var _Check = _interopRequireDefault(require("@rsuite/icons/Check"));
|
|
13
12
|
var _Close = _interopRequireDefault(require("@rsuite/icons/Close"));
|
|
13
|
+
var _RemindRound = _interopRequireDefault(require("@rsuite/icons/RemindRound"));
|
|
14
14
|
var MESSAGE_STATUS_ICONS = {
|
|
15
15
|
info: /*#__PURE__*/_react.default.createElement(_Info.default, null),
|
|
16
16
|
success: /*#__PURE__*/_react.default.createElement(_CheckCircle.default, null),
|
|
17
17
|
error: /*#__PURE__*/_react.default.createElement(_CloseCircle.default, null),
|
|
18
|
-
warning: /*#__PURE__*/_react.default.createElement(
|
|
18
|
+
warning: /*#__PURE__*/_react.default.createElement(_RemindRound.default, null)
|
|
19
19
|
};
|
|
20
20
|
exports.MESSAGE_STATUS_ICONS = MESSAGE_STATUS_ICONS;
|
|
21
21
|
var PROGRESS_STATUS_ICON = {
|