rsuite 5.4.1 → 5.5.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/Button/styles/index.less +1 -5
- package/CHANGELOG.md +42 -0
- package/CheckTreePicker/styles/index.less +48 -47
- package/Drawer/styles/index.less +3 -0
- package/Dropdown/styles/index.less +3 -19
- package/Dropdown/styles/mixin.less +0 -2
- package/Modal/styles/index.less +23 -22
- package/Navbar/styles/index.less +20 -8
- package/Picker/styles/mixin.less +3 -2
- package/README.md +1 -1
- package/Sidenav/styles/index.less +58 -57
- package/TreePicker/styles/index.less +3 -3
- package/cjs/Affix/Affix.js +3 -1
- package/cjs/Calendar/useCalendarDate.d.ts +1 -1
- package/cjs/Calendar/useCalendarDate.js +1 -1
- package/cjs/Carousel/Carousel.js +7 -1
- package/cjs/Cascader/Cascader.js +13 -2
- package/cjs/CheckPicker/CheckPicker.d.ts +5 -2
- package/cjs/CheckPicker/test/CheckPicker.test.js +8 -0
- package/cjs/CheckTreePicker/CheckTreePicker.js +1 -1
- package/cjs/CheckTreePicker/utils.js +1 -1
- package/cjs/CustomProvider/CustomProvider.d.ts +14 -14
- package/cjs/CustomProvider/CustomProvider.js +4 -3
- package/cjs/DatePicker/DatePicker.d.ts +1 -1
- package/cjs/DatePicker/DatePicker.js +2 -4
- package/cjs/Disclosure/Disclosure.d.ts +8 -5
- package/cjs/Disclosure/Disclosure.js +49 -9
- package/cjs/Disclosure/DisclosureButton.d.ts +2 -2
- package/cjs/Disclosure/DisclosureContext.d.ts +6 -1
- package/cjs/Dropdown/Dropdown.d.ts +5 -0
- package/cjs/Dropdown/Dropdown.js +1 -1
- package/cjs/Dropdown/DropdownItem.js +9 -10
- package/cjs/Dropdown/DropdownMenu.js +69 -20
- package/cjs/Dropdown/test/Dropdown.test.d.ts +1 -0
- package/cjs/Dropdown/test/Dropdown.test.js +30 -0
- package/cjs/InputNumber/InputNumber.d.ts +1 -1
- package/cjs/InputNumber/InputNumber.js +36 -6
- package/cjs/InputNumber/test/InputNumber.test.d.ts +1 -0
- package/cjs/InputNumber/test/InputNumber.test.js +14 -0
- package/cjs/Modal/Modal.js +34 -22
- package/cjs/Modal/utils.js +16 -8
- package/cjs/MultiCascader/MultiCascader.js +7 -3
- package/cjs/Nav/NavItem.js +3 -1
- package/cjs/Navbar/index.d.ts +1 -0
- package/cjs/Navbar/index.js +4 -3
- package/cjs/Overlay/Modal.js +10 -27
- package/cjs/Picker/DropdownMenu.js +5 -0
- package/cjs/Picker/PickerToggle.js +2 -4
- package/cjs/RangeSlider/RangeSlider.d.ts +12 -2
- package/cjs/RangeSlider/RangeSlider.js +35 -12
- package/cjs/SelectPicker/SelectPicker.d.ts +5 -2
- package/cjs/SelectPicker/test/SelectPicker.test.js +8 -0
- package/cjs/Uploader/UploadFileItem.d.ts +1 -1
- package/cjs/Uploader/UploadFileItem.js +1 -1
- package/cjs/Uploader/Uploader.js +3 -0
- package/cjs/utils/index.d.ts +1 -0
- package/cjs/utils/index.js +7 -2
- package/cjs/utils/propTypeChecker.d.ts +2 -6
- package/cjs/utils/propTypeChecker.js +7 -59
- package/cjs/utils/treeUtils.js +4 -3
- package/cjs/utils/useClickOutside.js +6 -2
- package/cjs/utils/useMount.d.ts +2 -0
- package/cjs/utils/useMount.js +19 -0
- package/dist/rsuite-rtl.css +416 -264
- package/dist/rsuite-rtl.min.css +1 -1
- package/dist/rsuite-rtl.min.css.map +1 -1
- package/dist/rsuite.css +416 -264
- package/dist/rsuite.js +55 -33
- 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/Affix/Affix.js +4 -2
- package/esm/Calendar/useCalendarDate.d.ts +1 -1
- package/esm/Calendar/useCalendarDate.js +1 -1
- package/esm/Carousel/Carousel.js +9 -3
- package/esm/Cascader/Cascader.js +13 -2
- package/esm/CheckPicker/CheckPicker.d.ts +5 -2
- package/esm/CheckPicker/test/CheckPicker.test.js +7 -0
- package/esm/CheckTreePicker/CheckTreePicker.js +1 -1
- package/esm/CheckTreePicker/utils.js +1 -1
- package/esm/CustomProvider/CustomProvider.d.ts +14 -14
- package/esm/CustomProvider/CustomProvider.js +2 -2
- package/esm/DatePicker/DatePicker.d.ts +1 -1
- package/esm/DatePicker/DatePicker.js +2 -3
- package/esm/Disclosure/Disclosure.d.ts +8 -5
- package/esm/Disclosure/Disclosure.js +50 -11
- package/esm/Disclosure/DisclosureButton.d.ts +2 -2
- package/esm/Disclosure/DisclosureContext.d.ts +6 -1
- package/esm/Dropdown/Dropdown.d.ts +5 -0
- package/esm/Dropdown/Dropdown.js +1 -1
- package/esm/Dropdown/DropdownItem.js +9 -9
- package/esm/Dropdown/DropdownMenu.js +69 -20
- package/esm/Dropdown/test/Dropdown.test.d.ts +1 -0
- package/esm/Dropdown/test/Dropdown.test.js +22 -0
- package/esm/InputNumber/InputNumber.d.ts +1 -1
- package/esm/InputNumber/InputNumber.js +38 -7
- package/esm/InputNumber/test/InputNumber.test.d.ts +1 -0
- package/esm/InputNumber/test/InputNumber.test.js +7 -0
- package/esm/Modal/Modal.js +36 -24
- package/esm/Modal/utils.js +16 -8
- package/esm/MultiCascader/MultiCascader.js +7 -3
- package/esm/Nav/NavItem.js +3 -1
- package/esm/Navbar/index.d.ts +1 -0
- package/esm/Navbar/index.js +1 -0
- package/esm/Overlay/Modal.js +10 -27
- package/esm/Picker/DropdownMenu.js +5 -0
- package/esm/Picker/PickerToggle.js +2 -4
- package/esm/RangeSlider/RangeSlider.d.ts +12 -2
- package/esm/RangeSlider/RangeSlider.js +35 -12
- package/esm/SelectPicker/SelectPicker.d.ts +5 -2
- package/esm/SelectPicker/test/SelectPicker.test.js +7 -0
- package/esm/Uploader/UploadFileItem.d.ts +1 -1
- package/esm/Uploader/UploadFileItem.js +1 -1
- package/esm/Uploader/Uploader.js +4 -1
- package/esm/utils/index.d.ts +1 -0
- package/esm/utils/index.js +2 -1
- package/esm/utils/propTypeChecker.d.ts +2 -6
- package/esm/utils/propTypeChecker.js +7 -59
- package/esm/utils/treeUtils.js +6 -3
- package/esm/utils/useClickOutside.js +6 -2
- package/esm/utils/useMount.d.ts +2 -0
- package/esm/utils/useMount.js +13 -0
- package/package.json +2 -2
- package/styles/color-modes/dark.less +1 -0
- package/styles/color-modes/high-contrast.less +1 -0
- package/styles/color-modes/light.less +1 -0
- package/styles/mixins/utilities.less +17 -5
package/Button/styles/index.less
CHANGED
|
@@ -14,7 +14,6 @@
|
|
|
14
14
|
text-align: center;
|
|
15
15
|
vertical-align: middle;
|
|
16
16
|
cursor: pointer;
|
|
17
|
-
outline: 0 !important;
|
|
18
17
|
white-space: nowrap;
|
|
19
18
|
transition: @btn-transition;
|
|
20
19
|
// Reset border style in all browser
|
|
@@ -31,10 +30,7 @@
|
|
|
31
30
|
|
|
32
31
|
.rs-btn-md();
|
|
33
32
|
|
|
34
|
-
|
|
35
|
-
outline: 0;
|
|
36
|
-
box-shadow: var(--rs-state-focus-shadow);
|
|
37
|
-
}
|
|
33
|
+
.with-focus-ring();
|
|
38
34
|
|
|
39
35
|
.button-activated({
|
|
40
36
|
color: var(--rs-btn-default-hover-text);
|
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,45 @@
|
|
|
1
|
+
# [5.5.0](https://github.com/rsuite/rsuite/compare/v5.4.4...v5.5.0) (2022-01-13)
|
|
2
|
+
|
|
3
|
+
### Bug Fixes
|
|
4
|
+
|
|
5
|
+
- **Dropdown:** infer toggleAs component props ([#2299](https://github.com/rsuite/rsuite/issues/2299)) ([84611cc](https://github.com/rsuite/rsuite/commit/84611cc6f88e1d9cd712bc3f08be559d0a146ba0))
|
|
6
|
+
- **InputNumber:** inherit html input attributes ([#2298](https://github.com/rsuite/rsuite/issues/2298)) ([d7622ee](https://github.com/rsuite/rsuite/commit/d7622eed72b36ed15e91f606027d2e540391bdc7))
|
|
7
|
+
- **MultiCascader:** fix not rendering the count of selected values ([#2289](https://github.com/rsuite/rsuite/issues/2289)) ([324e90c](https://github.com/rsuite/rsuite/commit/324e90c8499adf58cb25083fd5c99fe98eb9ecba))
|
|
8
|
+
- **Tree:** fix dragNode has cyclic object ([#2281](https://github.com/rsuite/rsuite/issues/2281)) ([26cbaf2](https://github.com/rsuite/rsuite/commit/26cbaf2fd92ab562174e19cf55388c01fe22143a)), closes [#2268](https://github.com/rsuite/rsuite/issues/2268)
|
|
9
|
+
|
|
10
|
+
### Features
|
|
11
|
+
|
|
12
|
+
- **InputNumber:** support keyboard interaction ([#2294](https://github.com/rsuite/rsuite/issues/2294)) ([46993e2](https://github.com/rsuite/rsuite/commit/46993e235ca3d3ee8b6faa16a5fa11a8ed544e3b))
|
|
13
|
+
- **RangeSlider:** add `constraint` prop ([#2291](https://github.com/rsuite/rsuite/issues/2291)) ([a2d38a8](https://github.com/rsuite/rsuite/commit/a2d38a8efe4f85c28ce1f4ee79a89eda1e1cf7b0))
|
|
14
|
+
|
|
15
|
+
### Performance Improvements
|
|
16
|
+
|
|
17
|
+
- **styles:** simplify compound selectors over 4 levels ([#2282](https://github.com/rsuite/rsuite/issues/2282)) ([304e8da](https://github.com/rsuite/rsuite/commit/304e8da0c2057d148bbad36674aba33382439949))
|
|
18
|
+
|
|
19
|
+
## [5.4.4](https://github.com/rsuite/rsuite/compare/v5.4.3...v5.4.4) (2022-01-06)
|
|
20
|
+
|
|
21
|
+
### Bug Fixes
|
|
22
|
+
|
|
23
|
+
- **CheckTreePicker:** fix root node style incorrect ([#2279](https://github.com/rsuite/rsuite/issues/2279)) ([c09226e](https://github.com/rsuite/rsuite/commit/c09226e141f7881b11fe5594d802974f49e789a9))
|
|
24
|
+
- **DatePicker:** fix clear button not working ([#2273](https://github.com/rsuite/rsuite/issues/2273)) ([649362a](https://github.com/rsuite/rsuite/commit/649362aa697a292af28c5ec666e4337a7bd449c7))
|
|
25
|
+
- **Dropdown:** wrong submenu placement in RTL direction ([#2280](https://github.com/rsuite/rsuite/issues/2280)) ([c3735c3](https://github.com/rsuite/rsuite/commit/c3735c335d5a8ca6e9954af1e5b77c453b5bd4d2))
|
|
26
|
+
- **Navbar:** fix Whisper on Nav.Item within Navbar wrong positioning ([#2274](https://github.com/rsuite/rsuite/issues/2274)) ([bd0f5e3](https://github.com/rsuite/rsuite/commit/bd0f5e316e6bb910d9a41e43770b4d1a61528d9f)), closes [#2263](https://github.com/rsuite/rsuite/issues/2263)
|
|
27
|
+
|
|
28
|
+
## [5.4.3](https://github.com/rsuite/rsuite/compare/v5.4.2...v5.4.3) (2021-12-30)
|
|
29
|
+
|
|
30
|
+
### Bug Fixes
|
|
31
|
+
|
|
32
|
+
- **Drawer:** fix Drawer cannot be closed when backdrop is clicked ([#2259](https://github.com/rsuite/rsuite/issues/2259)) ([a49ee03](https://github.com/rsuite/rsuite/commit/a49ee03db33c11db30597221ca61ce6daa088c4b))
|
|
33
|
+
- **Picker:** add ref to PickerComponentProps ([#2261](https://github.com/rsuite/rsuite/issues/2261)) ([6e3e6c5](https://github.com/rsuite/rsuite/commit/6e3e6c57932af142dc1a74da6b7fffb57ae628ca))
|
|
34
|
+
|
|
35
|
+
## [5.4.2](https://github.com/rsuite/rsuite/compare/v5.4.1...v5.4.2) (2021-12-24)
|
|
36
|
+
|
|
37
|
+
### Bug Fixes
|
|
38
|
+
|
|
39
|
+
- **Affix:** fix unupdated position after window size change ([#2256](https://github.com/rsuite/rsuite/issues/2256)) ([61c7b27](https://github.com/rsuite/rsuite/commit/61c7b279f136ae44b9470046344cd6e163d02589))
|
|
40
|
+
- **Modal:** improve the mouse scrolling experience on Modal ([#2254](https://github.com/rsuite/rsuite/issues/2254)) ([137d57e](https://github.com/rsuite/rsuite/commit/137d57ef1e79ca0055b3af8d6cd5cff2a9c4ef55))
|
|
41
|
+
- **Navbar:** fix dropdown submenu throwing error ([#2250](https://github.com/rsuite/rsuite/issues/2250)) ([875130d](https://github.com/rsuite/rsuite/commit/875130d342f58e4078babe428913640e0b2faa04))
|
|
42
|
+
|
|
1
43
|
## [5.4.1](https://github.com/rsuite/rsuite/compare/v5.4.0...v5.4.1) (2021-12-23)
|
|
2
44
|
|
|
3
45
|
### Bug Fixes
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@import '../../styles/common';
|
|
2
|
-
@import '../../Picker/styles/
|
|
2
|
+
@import '../../Picker/styles/index';
|
|
3
3
|
@import '../../TreePicker/styles/mixin';
|
|
4
|
+
@import '../../Checkbox/styles/index';
|
|
4
5
|
|
|
5
6
|
// **Check Tree Picker
|
|
6
7
|
// **----------------------
|
|
@@ -23,31 +24,9 @@
|
|
|
23
24
|
}
|
|
24
25
|
}
|
|
25
26
|
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.rs-check-tree-node {
|
|
29
|
-
position: relative;
|
|
30
|
-
font-size: @picker-tree-node-font-size;
|
|
31
|
-
line-height: @picker-tree-node-line-height;
|
|
32
|
-
|
|
33
|
-
&-label {
|
|
34
|
-
.rs-check-item {
|
|
35
|
-
display: inline-block;
|
|
36
|
-
|
|
37
|
-
.rs-picker-menu & {
|
|
38
|
-
display: block;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
27
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.rs-check-item.rs-checkbox-checked .rs-checkbox-checker > label {
|
|
47
|
-
.picker-item-active();
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.rs-check-item .rs-checkbox-checker > label {
|
|
28
|
+
.rs-check-item .rs-checkbox-checker {
|
|
29
|
+
> label {
|
|
51
30
|
text-align: left;
|
|
52
31
|
position: relative;
|
|
53
32
|
margin: 0;
|
|
@@ -67,37 +46,59 @@
|
|
|
67
46
|
top: 0;
|
|
68
47
|
margin-left: -58px; // 10px + 36px + 12px
|
|
69
48
|
}
|
|
49
|
+
}
|
|
70
50
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
51
|
+
.rs-checkbox-wrapper {
|
|
52
|
+
left: (@checkbox-sense-width + 10px);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
74
56
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
57
|
+
// Only has the first level
|
|
58
|
+
.rs-check-tree-without-children .rs-check-item .rs-checkbox-checker {
|
|
59
|
+
> label {
|
|
60
|
+
padding-left: 34px; //text gap + checkbox space
|
|
78
61
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
62
|
+
&::before {
|
|
63
|
+
width: 28px;
|
|
64
|
+
margin-left: -36px;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
83
67
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
68
|
+
.rs-checkbox-wrapper {
|
|
69
|
+
left: 0;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.rs-check-tree-node {
|
|
74
|
+
position: relative;
|
|
75
|
+
font-size: @picker-tree-node-font-size;
|
|
76
|
+
line-height: @picker-tree-node-line-height;
|
|
77
|
+
|
|
78
|
+
.rs-check-item {
|
|
79
|
+
display: inline-block;
|
|
80
|
+
|
|
81
|
+
.rs-picker-menu & {
|
|
82
|
+
display: block;
|
|
88
83
|
}
|
|
89
84
|
}
|
|
90
85
|
|
|
86
|
+
&:focus .rs-check-item .rs-checkbox-checker > label {
|
|
87
|
+
.picker-item-hover();
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.rs-check-item.rs-checkbox-checked .rs-checkbox-checker > label {
|
|
91
|
+
.picker-item-active();
|
|
92
|
+
}
|
|
93
|
+
|
|
91
94
|
// Uncheckable state
|
|
92
|
-
&-all-uncheckable > .rs-check-
|
|
93
|
-
|
|
94
|
-
padding-left: 22px; // 10px + 12px
|
|
95
|
+
&-all-uncheckable > .rs-check-item .rs-checkbox-checker > label {
|
|
96
|
+
padding-left: 22px; // 10px + 12px
|
|
95
97
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
}
|
|
98
|
+
&::before {
|
|
99
|
+
width: 14px;
|
|
100
|
+
margin-left: 0;
|
|
101
|
+
left: 0;
|
|
101
102
|
}
|
|
102
103
|
}
|
|
103
104
|
}
|
package/Drawer/styles/index.less
CHANGED
|
@@ -108,6 +108,7 @@
|
|
|
108
108
|
z-index: @zindex-dropdown + 1;
|
|
109
109
|
float: left;
|
|
110
110
|
box-shadow: var(--rs-dropdown-shadow);
|
|
111
|
+
outline: none;
|
|
111
112
|
|
|
112
113
|
.high-contrast-mode({
|
|
113
114
|
border: 1px solid var(--rs-border-primary);
|
|
@@ -219,26 +220,9 @@
|
|
|
219
220
|
right: @dropdown-caret-icon-padding-horizontal;
|
|
220
221
|
}
|
|
221
222
|
}
|
|
222
|
-
//
|
|
223
|
-
//&.rs-dropdown-menu-pull-left {
|
|
224
|
-
// &.rs-dropdown-item {
|
|
225
|
-
// padding-left: @dropdown-item-padding-x+ @dropdown-item-submenu-icon-angle-spacing +
|
|
226
|
-
// @dropdown-item-submenu-icon-angle-width;
|
|
227
|
-
//
|
|
228
|
-
// > .rs-dropdown-menu-toggle .rs-dropdown-menu-toggle-icon {
|
|
229
|
-
// left: @dropdown-caret-icon-padding-horizontal;
|
|
230
|
-
// }
|
|
231
|
-
// }
|
|
232
|
-
//}
|
|
233
|
-
|
|
234
|
-
// Pull right
|
|
235
|
-
.rs-dropdown-item-pull-right ~ .rs-dropdown-menu {
|
|
236
|
-
left: 100%;
|
|
237
|
-
}
|
|
238
223
|
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
right: 100%;
|
|
224
|
+
.rs-dropdown-menu {
|
|
225
|
+
left: 100%;
|
|
242
226
|
}
|
|
243
227
|
|
|
244
228
|
// Open
|
package/Modal/styles/index.less
CHANGED
|
@@ -5,6 +5,27 @@
|
|
|
5
5
|
// Modals
|
|
6
6
|
// --------------------------------------------------
|
|
7
7
|
|
|
8
|
+
// Modal background
|
|
9
|
+
.rs-modal-backdrop {
|
|
10
|
+
position: fixed;
|
|
11
|
+
top: 0;
|
|
12
|
+
left: 0;
|
|
13
|
+
width: 100vw;
|
|
14
|
+
height: 100vh;
|
|
15
|
+
z-index: @zindex-modal - 1;
|
|
16
|
+
background-color: var(--rs-bg-backdrop);
|
|
17
|
+
|
|
18
|
+
// Fade for backdrop
|
|
19
|
+
&.rs-anim-fade {
|
|
20
|
+
opacity: 0;
|
|
21
|
+
transition: opacity 0.3s ease-in;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&.rs-anim-in {
|
|
25
|
+
opacity: 1;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
8
29
|
// Kill the scroll on the body
|
|
9
30
|
.rs-modal-open {
|
|
10
31
|
overflow: hidden;
|
|
@@ -15,9 +36,9 @@
|
|
|
15
36
|
overflow: auto;
|
|
16
37
|
z-index: @zindex-modal;
|
|
17
38
|
top: 0;
|
|
18
|
-
bottom: 0;
|
|
19
|
-
right: 0;
|
|
20
39
|
left: 0;
|
|
40
|
+
width: 100%;
|
|
41
|
+
height: 100%;
|
|
21
42
|
}
|
|
22
43
|
|
|
23
44
|
// Container that the modal scrolls within
|
|
@@ -71,26 +92,6 @@
|
|
|
71
92
|
padding: @modal-content-padding;
|
|
72
93
|
}
|
|
73
94
|
|
|
74
|
-
// Modal background
|
|
75
|
-
.rs-modal-backdrop {
|
|
76
|
-
position: fixed;
|
|
77
|
-
top: 0;
|
|
78
|
-
right: 0;
|
|
79
|
-
bottom: 0;
|
|
80
|
-
left: 0;
|
|
81
|
-
background-color: var(--rs-bg-backdrop);
|
|
82
|
-
|
|
83
|
-
// Fade for backdrop
|
|
84
|
-
&.rs-anim-fade {
|
|
85
|
-
opacity: 0;
|
|
86
|
-
transition: opacity 0.3s ease-in;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
&.rs-anim-in {
|
|
90
|
-
opacity: 1;
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
|
|
94
95
|
// Modal header
|
|
95
96
|
// Top section of the modal w/ title and dismiss
|
|
96
97
|
.rs-modal-header {
|
package/Navbar/styles/index.less
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@import '../../styles/common';
|
|
2
|
+
@import '../../Dropdown/styles/index';
|
|
2
3
|
|
|
3
4
|
// NavBar
|
|
4
5
|
// --------------------------------------------------
|
|
@@ -72,8 +73,6 @@
|
|
|
72
73
|
.rs-navbar-brand,
|
|
73
74
|
.rs-navbar-item,
|
|
74
75
|
.rs-navbar-nav > .rs-dropdown-item {
|
|
75
|
-
outline: 0;
|
|
76
|
-
|
|
77
76
|
&,
|
|
78
77
|
&:hover,
|
|
79
78
|
&:focus,
|
|
@@ -82,7 +81,9 @@
|
|
|
82
81
|
}
|
|
83
82
|
|
|
84
83
|
&:focus-visible {
|
|
85
|
-
|
|
84
|
+
// Navbar is usually placed by the top edge of the page
|
|
85
|
+
// thus use an inset focus ring to prevent overflow clipping
|
|
86
|
+
.focus-ring(inset);
|
|
86
87
|
|
|
87
88
|
.high-contrast-mode({
|
|
88
89
|
.focus-ring(slim-inset);
|
|
@@ -97,10 +98,21 @@
|
|
|
97
98
|
margin: 0 !important;
|
|
98
99
|
}
|
|
99
100
|
|
|
100
|
-
|
|
101
|
+
.rs-navbar-item.rs-navbar-item-active {
|
|
102
|
+
.high-contrast-mode({
|
|
103
|
+
text-decoration: underline;
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
// Dropdown
|
|
101
108
|
.rs-navbar-nav > .rs-dropdown .rs-dropdown-toggle {
|
|
102
109
|
&:extend(.rs-navbar-item);
|
|
103
110
|
|
|
111
|
+
&:focus,
|
|
112
|
+
&:focus-visible {
|
|
113
|
+
&:extend(.rs-navbar-item:focus-visible);
|
|
114
|
+
}
|
|
115
|
+
|
|
104
116
|
padding-right: @navbar-item-padding-x+ @dropdown-caret-width+ @dropdown-caret-padding;
|
|
105
117
|
|
|
106
118
|
.high-contrast-mode({
|
|
@@ -117,10 +129,10 @@
|
|
|
117
129
|
}
|
|
118
130
|
}
|
|
119
131
|
|
|
120
|
-
.rs-navbar
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
}
|
|
132
|
+
.rs-navbar .rs-dropdown-item {
|
|
133
|
+
&:hover {
|
|
134
|
+
.menuitem-active();
|
|
135
|
+
}
|
|
124
136
|
}
|
|
125
137
|
|
|
126
138
|
// Default Navbar
|
package/Picker/styles/mixin.less
CHANGED
|
@@ -265,7 +265,8 @@
|
|
|
265
265
|
line-height: @line-height;
|
|
266
266
|
}
|
|
267
267
|
|
|
268
|
-
.
|
|
268
|
+
// FIXME Bad design. Should not set search input styles in a mixin that is used in picker buttons.
|
|
269
|
+
.rs-picker-tag & ~ .rs-picker-tag-wrapper {
|
|
269
270
|
padding-bottom: @padding-vertical - 3px;
|
|
270
271
|
|
|
271
272
|
.rs-tag {
|
|
@@ -278,7 +279,7 @@
|
|
|
278
279
|
font-size: @font-size;
|
|
279
280
|
}
|
|
280
281
|
|
|
281
|
-
|
|
282
|
+
input {
|
|
282
283
|
height: @line-height * @font-size - 2px;
|
|
283
284
|
}
|
|
284
285
|
}
|
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@ English | [中文版][readm-cn]
|
|
|
8
8
|
|
|
9
9
|
[![npm][npm-svg]][npm-home]
|
|
10
10
|
[![GitHub Actions][actions-svg]][actions-home]
|
|
11
|
-
[](https://codecov.io/gh/rsuite/rsuite)
|
|
12
12
|
[![Discord][discord-svg]][discord-invite]
|
|
13
13
|
[![Gitter][gitter-svg]][gitter]
|
|
14
14
|
[![Gitter][gitter-cn-svg]][gitter-cn]
|
|
@@ -37,34 +37,59 @@
|
|
|
37
37
|
margin: 0 !important;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
40
|
+
// <Dropdown> within <Sidenav>
|
|
41
|
+
> .rs-dropdown {
|
|
42
|
+
// Submenu toggle
|
|
43
|
+
.rs-dropdown-item-toggle {
|
|
44
|
+
display: block;
|
|
45
|
+
width: 100%;
|
|
46
|
+
text-align: start;
|
|
47
|
+
background: none;
|
|
48
|
+
padding-right: (@sidenav-padding-horizontal + @sidenav-dropdown-toggle-caret-width);
|
|
49
|
+
position: relative;
|
|
46
50
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
text-align: start;
|
|
51
|
-
background: none;
|
|
51
|
+
.rs-sidenav-collapse-in & {
|
|
52
|
+
padding-left: @sidenav-level2-retract;
|
|
53
|
+
}
|
|
52
54
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
55
|
+
&:focus {
|
|
56
|
+
outline: 0;
|
|
57
|
+
}
|
|
56
58
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
+
&:focus-visible {
|
|
60
|
+
.focus-ring(inset);
|
|
59
61
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
62
|
+
.high-contrast-mode({
|
|
63
|
+
.focus-ring(slim-inset);
|
|
64
|
+
});
|
|
63
65
|
|
|
64
|
-
|
|
66
|
+
z-index: 1;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
// Submenu toggle icon
|
|
70
|
+
&-icon {
|
|
71
|
+
position: absolute;
|
|
72
|
+
right: @sidenav-padding-horizontal;
|
|
73
|
+
top: @sidenav-children-padding-vertical;
|
|
74
|
+
width: auto;
|
|
75
|
+
height: @sidenav-dropdown-toggle-caret-width;
|
|
76
|
+
transform: rotate(90deg);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
// Expanded submenu toggle icon
|
|
81
|
+
.rs-dropdown-item-expand .rs-dropdown-item-toggle-icon {
|
|
82
|
+
transform: rotate(270deg);
|
|
65
83
|
}
|
|
66
84
|
}
|
|
67
85
|
|
|
86
|
+
.high-contrast-mode({
|
|
87
|
+
.rs-dropdown-toggle,
|
|
88
|
+
.rs-dropdown-menu {
|
|
89
|
+
border: none;
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
|
|
68
93
|
.rs-sidenav-item:focus-visible {
|
|
69
94
|
.focus-ring(inset);
|
|
70
95
|
|
|
@@ -110,6 +135,12 @@
|
|
|
110
135
|
width: 100%;
|
|
111
136
|
white-space: normal;
|
|
112
137
|
|
|
138
|
+
// Sidenav is usually placed by the left/right edge of the page
|
|
139
|
+
// thus use an inset focus ring to prevent overflow clipping
|
|
140
|
+
&:focus {
|
|
141
|
+
.focus-ring(inset);
|
|
142
|
+
}
|
|
143
|
+
|
|
113
144
|
> .rs-icon:not(.rs-dropdown-toggle-caret) {
|
|
114
145
|
font-size: @sidenav-level1-item-font-size;
|
|
115
146
|
margin-right: @sidenav-icon-spacing;
|
|
@@ -219,32 +250,17 @@
|
|
|
219
250
|
transform: rotate(180deg);
|
|
220
251
|
}
|
|
221
252
|
|
|
222
|
-
.rs-dropdown-item.rs-dropdown-item-expand
|
|
223
|
-
> .rs-dropdown-item-toggle
|
|
224
|
-
> .rs-dropdown-item-toggle-icon {
|
|
225
|
-
transform: rotate(270deg);
|
|
226
|
-
}
|
|
227
|
-
|
|
228
253
|
// Dropdown menu
|
|
229
|
-
|
|
254
|
+
.rs-dropdown-menu {
|
|
230
255
|
.reset-sidenav-dropdown-menu();
|
|
256
|
+
}
|
|
231
257
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
> .rs-dropdown-menu-toggle {
|
|
237
|
-
display: block;
|
|
238
|
-
padding-right: (@sidenav-padding-horizontal + @sidenav-dropdown-toggle-caret-width);
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
> .rs-dropdown-menu {
|
|
242
|
-
.reset-sidenav-dropdown-menu();
|
|
243
|
-
}
|
|
258
|
+
// Submenu
|
|
259
|
+
.rs-dropdown-item-submenu {
|
|
260
|
+
padding: 0;
|
|
244
261
|
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
}
|
|
262
|
+
&:hover {
|
|
263
|
+
background-color: transparent;
|
|
248
264
|
}
|
|
249
265
|
}
|
|
250
266
|
}
|
|
@@ -277,21 +293,6 @@
|
|
|
277
293
|
// @warn Here we can only use absolute positioning because of the limitations of using <Dropdown/> component.
|
|
278
294
|
|
|
279
295
|
.rs-dropdown-item-submenu {
|
|
280
|
-
> .rs-dropdown-item-toggle {
|
|
281
|
-
padding-left: @sidenav-level2-retract;
|
|
282
|
-
padding-right: (@sidenav-padding-horizontal + @sidenav-dropdown-toggle-caret-width);
|
|
283
|
-
position: relative;
|
|
284
|
-
|
|
285
|
-
> .rs-dropdown-item-toggle-icon {
|
|
286
|
-
position: absolute;
|
|
287
|
-
right: @sidenav-padding-horizontal;
|
|
288
|
-
top: @sidenav-children-padding-vertical;
|
|
289
|
-
width: auto;
|
|
290
|
-
height: @sidenav-dropdown-toggle-caret-width;
|
|
291
|
-
transform: rotate(90deg);
|
|
292
|
-
}
|
|
293
|
-
}
|
|
294
|
-
|
|
295
296
|
> .rs-dropdown-item-menu-icon {
|
|
296
297
|
padding-top: @sidenav-children-padding-vertical;
|
|
297
298
|
padding-bottom: @sidenav-children-padding-vertical;
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
text-align: left;
|
|
35
35
|
margin: 0 0 4px 0;
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
&-label {
|
|
38
38
|
position: relative;
|
|
39
39
|
margin: 0;
|
|
40
40
|
//text gap
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
font-size: @picker-tree-node-font-size;
|
|
45
45
|
line-height: @picker-tree-node-line-height;
|
|
46
46
|
|
|
47
|
-
|
|
47
|
+
&-content {
|
|
48
48
|
padding: @custom-picker-tree-node-padding-vertical @picker-tree-node-padding-horizontal
|
|
49
49
|
@custom-picker-tree-node-padding-vertical @picker-tree-arrow-down-gap;
|
|
50
50
|
display: inline-block;
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
-
|
|
62
|
+
&-active &-label-content {
|
|
63
63
|
.picker-item-active();
|
|
64
64
|
|
|
65
65
|
color: var(--rs-text-link);
|
package/cjs/Affix/Affix.js
CHANGED
|
@@ -35,7 +35,9 @@ function useOffset(mountRef) {
|
|
|
35
35
|
return mountRef.current;
|
|
36
36
|
}, updateOffset); // Initialize after the first render
|
|
37
37
|
|
|
38
|
-
(0,
|
|
38
|
+
(0, _utils.useMount)(updateOffset); // Update after window size changes
|
|
39
|
+
|
|
40
|
+
(0, _utils.useEventListener)(window, 'resize', updateOffset, false);
|
|
39
41
|
return offset;
|
|
40
42
|
}
|
|
41
43
|
/**
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const useCalendarDate: (value: Date | undefined, defaultDate: Date | undefined) => {
|
|
1
|
+
declare const useCalendarDate: (value: Date | null | undefined, defaultDate: Date | undefined) => {
|
|
2
2
|
calendarDate: Date;
|
|
3
3
|
setCalendarDate: (date: Date | undefined) => void;
|
|
4
4
|
};
|
|
@@ -25,7 +25,7 @@ var useCalendarDate = function useCalendarDate(value, defaultDate) {
|
|
|
25
25
|
var _valueRef$current;
|
|
26
26
|
|
|
27
27
|
if ((value === null || value === void 0 ? void 0 : value.valueOf()) !== ((_valueRef$current = valueRef.current) === null || _valueRef$current === void 0 ? void 0 : _valueRef$current.valueOf())) {
|
|
28
|
-
setCalendarDate(value);
|
|
28
|
+
setCalendarDate(value !== null && value !== void 0 ? value : new Date());
|
|
29
29
|
valueRef.current = value;
|
|
30
30
|
}
|
|
31
31
|
}, [value]);
|
package/cjs/Carousel/Carousel.js
CHANGED
|
@@ -62,7 +62,13 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
62
62
|
lastIndex = _useState2[0],
|
|
63
63
|
setLastIndex = _useState2[1];
|
|
64
64
|
|
|
65
|
+
var rootRef = (0, _react.useRef)(null);
|
|
66
|
+
|
|
65
67
|
var handleSlide = function handleSlide(nextActiveIndex, event) {
|
|
68
|
+
if (!rootRef.current) {
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
|
|
66
72
|
clear();
|
|
67
73
|
var index = nextActiveIndex !== null && nextActiveIndex !== void 0 ? nextActiveIndex : activeIndex + 1; // When index is greater than count, start from 1 again.
|
|
68
74
|
|
|
@@ -129,7 +135,7 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
129
135
|
var sliderStyles = (_sliderStyles = {}, _sliderStyles[lengthKey] = count * 100 + "%", _sliderStyles.transform = vertical ? "translate3d(0, " + activeRatio + " ,0)" : "translate3d(" + activeRatio + ", 0 ,0)", _sliderStyles);
|
|
130
136
|
var showMask = count > 1 && activeIndex === 0 && activeIndex !== lastIndex;
|
|
131
137
|
return /*#__PURE__*/_react.default.createElement(Component, (0, _extends4.default)({}, rest, {
|
|
132
|
-
ref: ref,
|
|
138
|
+
ref: (0, _utils.mergeRefs)(ref, rootRef),
|
|
133
139
|
className: classes
|
|
134
140
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
135
141
|
className: prefix('content')
|
package/cjs/Cascader/Cascader.js
CHANGED
|
@@ -211,10 +211,18 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
211
211
|
}
|
|
212
212
|
}, [getSearchResult, onSearch, setFocusItemValue, setKeys, setLayer, valueKey]);
|
|
213
213
|
var handleEntered = (0, _react.useCallback)(function () {
|
|
214
|
+
if (!targetRef.current) {
|
|
215
|
+
return;
|
|
216
|
+
}
|
|
217
|
+
|
|
214
218
|
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
215
219
|
setActive(true);
|
|
216
220
|
}, [onOpen]);
|
|
217
221
|
var handleExited = (0, _react.useCallback)(function () {
|
|
222
|
+
if (!targetRef.current) {
|
|
223
|
+
return;
|
|
224
|
+
}
|
|
225
|
+
|
|
218
226
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
219
227
|
setActive(false);
|
|
220
228
|
setSearchKeyword('');
|
|
@@ -225,7 +233,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
225
233
|
(_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.close();
|
|
226
234
|
}, [triggerRef]);
|
|
227
235
|
var handleClean = (0, _react.useCallback)(function (event) {
|
|
228
|
-
if (disabled) {
|
|
236
|
+
if (disabled || !targetRef.current) {
|
|
229
237
|
return;
|
|
230
238
|
}
|
|
231
239
|
|
|
@@ -283,7 +291,10 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
283
291
|
children.then(function (data) {
|
|
284
292
|
node.loading = false;
|
|
285
293
|
node[childrenKey] = data;
|
|
286
|
-
|
|
294
|
+
|
|
295
|
+
if (targetRef.current) {
|
|
296
|
+
addColumn(data, cascadePaths.length);
|
|
297
|
+
}
|
|
287
298
|
});
|
|
288
299
|
} else {
|
|
289
300
|
node.loading = false;
|