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.
Files changed (129) hide show
  1. package/Button/styles/index.less +1 -5
  2. package/CHANGELOG.md +42 -0
  3. package/CheckTreePicker/styles/index.less +48 -47
  4. package/Drawer/styles/index.less +3 -0
  5. package/Dropdown/styles/index.less +3 -19
  6. package/Dropdown/styles/mixin.less +0 -2
  7. package/Modal/styles/index.less +23 -22
  8. package/Navbar/styles/index.less +20 -8
  9. package/Picker/styles/mixin.less +3 -2
  10. package/README.md +1 -1
  11. package/Sidenav/styles/index.less +58 -57
  12. package/TreePicker/styles/index.less +3 -3
  13. package/cjs/Affix/Affix.js +3 -1
  14. package/cjs/Calendar/useCalendarDate.d.ts +1 -1
  15. package/cjs/Calendar/useCalendarDate.js +1 -1
  16. package/cjs/Carousel/Carousel.js +7 -1
  17. package/cjs/Cascader/Cascader.js +13 -2
  18. package/cjs/CheckPicker/CheckPicker.d.ts +5 -2
  19. package/cjs/CheckPicker/test/CheckPicker.test.js +8 -0
  20. package/cjs/CheckTreePicker/CheckTreePicker.js +1 -1
  21. package/cjs/CheckTreePicker/utils.js +1 -1
  22. package/cjs/CustomProvider/CustomProvider.d.ts +14 -14
  23. package/cjs/CustomProvider/CustomProvider.js +4 -3
  24. package/cjs/DatePicker/DatePicker.d.ts +1 -1
  25. package/cjs/DatePicker/DatePicker.js +2 -4
  26. package/cjs/Disclosure/Disclosure.d.ts +8 -5
  27. package/cjs/Disclosure/Disclosure.js +49 -9
  28. package/cjs/Disclosure/DisclosureButton.d.ts +2 -2
  29. package/cjs/Disclosure/DisclosureContext.d.ts +6 -1
  30. package/cjs/Dropdown/Dropdown.d.ts +5 -0
  31. package/cjs/Dropdown/Dropdown.js +1 -1
  32. package/cjs/Dropdown/DropdownItem.js +9 -10
  33. package/cjs/Dropdown/DropdownMenu.js +69 -20
  34. package/cjs/Dropdown/test/Dropdown.test.d.ts +1 -0
  35. package/cjs/Dropdown/test/Dropdown.test.js +30 -0
  36. package/cjs/InputNumber/InputNumber.d.ts +1 -1
  37. package/cjs/InputNumber/InputNumber.js +36 -6
  38. package/cjs/InputNumber/test/InputNumber.test.d.ts +1 -0
  39. package/cjs/InputNumber/test/InputNumber.test.js +14 -0
  40. package/cjs/Modal/Modal.js +34 -22
  41. package/cjs/Modal/utils.js +16 -8
  42. package/cjs/MultiCascader/MultiCascader.js +7 -3
  43. package/cjs/Nav/NavItem.js +3 -1
  44. package/cjs/Navbar/index.d.ts +1 -0
  45. package/cjs/Navbar/index.js +4 -3
  46. package/cjs/Overlay/Modal.js +10 -27
  47. package/cjs/Picker/DropdownMenu.js +5 -0
  48. package/cjs/Picker/PickerToggle.js +2 -4
  49. package/cjs/RangeSlider/RangeSlider.d.ts +12 -2
  50. package/cjs/RangeSlider/RangeSlider.js +35 -12
  51. package/cjs/SelectPicker/SelectPicker.d.ts +5 -2
  52. package/cjs/SelectPicker/test/SelectPicker.test.js +8 -0
  53. package/cjs/Uploader/UploadFileItem.d.ts +1 -1
  54. package/cjs/Uploader/UploadFileItem.js +1 -1
  55. package/cjs/Uploader/Uploader.js +3 -0
  56. package/cjs/utils/index.d.ts +1 -0
  57. package/cjs/utils/index.js +7 -2
  58. package/cjs/utils/propTypeChecker.d.ts +2 -6
  59. package/cjs/utils/propTypeChecker.js +7 -59
  60. package/cjs/utils/treeUtils.js +4 -3
  61. package/cjs/utils/useClickOutside.js +6 -2
  62. package/cjs/utils/useMount.d.ts +2 -0
  63. package/cjs/utils/useMount.js +19 -0
  64. package/dist/rsuite-rtl.css +416 -264
  65. package/dist/rsuite-rtl.min.css +1 -1
  66. package/dist/rsuite-rtl.min.css.map +1 -1
  67. package/dist/rsuite.css +416 -264
  68. package/dist/rsuite.js +55 -33
  69. package/dist/rsuite.js.map +1 -1
  70. package/dist/rsuite.min.css +1 -1
  71. package/dist/rsuite.min.css.map +1 -1
  72. package/dist/rsuite.min.js +1 -1
  73. package/dist/rsuite.min.js.map +1 -1
  74. package/esm/Affix/Affix.js +4 -2
  75. package/esm/Calendar/useCalendarDate.d.ts +1 -1
  76. package/esm/Calendar/useCalendarDate.js +1 -1
  77. package/esm/Carousel/Carousel.js +9 -3
  78. package/esm/Cascader/Cascader.js +13 -2
  79. package/esm/CheckPicker/CheckPicker.d.ts +5 -2
  80. package/esm/CheckPicker/test/CheckPicker.test.js +7 -0
  81. package/esm/CheckTreePicker/CheckTreePicker.js +1 -1
  82. package/esm/CheckTreePicker/utils.js +1 -1
  83. package/esm/CustomProvider/CustomProvider.d.ts +14 -14
  84. package/esm/CustomProvider/CustomProvider.js +2 -2
  85. package/esm/DatePicker/DatePicker.d.ts +1 -1
  86. package/esm/DatePicker/DatePicker.js +2 -3
  87. package/esm/Disclosure/Disclosure.d.ts +8 -5
  88. package/esm/Disclosure/Disclosure.js +50 -11
  89. package/esm/Disclosure/DisclosureButton.d.ts +2 -2
  90. package/esm/Disclosure/DisclosureContext.d.ts +6 -1
  91. package/esm/Dropdown/Dropdown.d.ts +5 -0
  92. package/esm/Dropdown/Dropdown.js +1 -1
  93. package/esm/Dropdown/DropdownItem.js +9 -9
  94. package/esm/Dropdown/DropdownMenu.js +69 -20
  95. package/esm/Dropdown/test/Dropdown.test.d.ts +1 -0
  96. package/esm/Dropdown/test/Dropdown.test.js +22 -0
  97. package/esm/InputNumber/InputNumber.d.ts +1 -1
  98. package/esm/InputNumber/InputNumber.js +38 -7
  99. package/esm/InputNumber/test/InputNumber.test.d.ts +1 -0
  100. package/esm/InputNumber/test/InputNumber.test.js +7 -0
  101. package/esm/Modal/Modal.js +36 -24
  102. package/esm/Modal/utils.js +16 -8
  103. package/esm/MultiCascader/MultiCascader.js +7 -3
  104. package/esm/Nav/NavItem.js +3 -1
  105. package/esm/Navbar/index.d.ts +1 -0
  106. package/esm/Navbar/index.js +1 -0
  107. package/esm/Overlay/Modal.js +10 -27
  108. package/esm/Picker/DropdownMenu.js +5 -0
  109. package/esm/Picker/PickerToggle.js +2 -4
  110. package/esm/RangeSlider/RangeSlider.d.ts +12 -2
  111. package/esm/RangeSlider/RangeSlider.js +35 -12
  112. package/esm/SelectPicker/SelectPicker.d.ts +5 -2
  113. package/esm/SelectPicker/test/SelectPicker.test.js +7 -0
  114. package/esm/Uploader/UploadFileItem.d.ts +1 -1
  115. package/esm/Uploader/UploadFileItem.js +1 -1
  116. package/esm/Uploader/Uploader.js +4 -1
  117. package/esm/utils/index.d.ts +1 -0
  118. package/esm/utils/index.js +2 -1
  119. package/esm/utils/propTypeChecker.d.ts +2 -6
  120. package/esm/utils/propTypeChecker.js +7 -59
  121. package/esm/utils/treeUtils.js +6 -3
  122. package/esm/utils/useClickOutside.js +6 -2
  123. package/esm/utils/useMount.d.ts +2 -0
  124. package/esm/utils/useMount.js +13 -0
  125. package/package.json +2 -2
  126. package/styles/color-modes/dark.less +1 -0
  127. package/styles/color-modes/high-contrast.less +1 -0
  128. package/styles/color-modes/light.less +1 -0
  129. package/styles/mixins/utilities.less +17 -5
@@ -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
- &:focus {
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/mixin';
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
- &:focus .rs-check-item .rs-checkbox-checker > label {
43
- .picker-item-hover();
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
- .rs-checkbox-wrapper {
72
- left: (@checkbox-sense-width + 10px);
73
- }
51
+ .rs-checkbox-wrapper {
52
+ left: (@checkbox-sense-width + 10px);
53
+ }
54
+ }
55
+ }
74
56
 
75
- // Only has the first level
76
- .without-children & {
77
- padding-left: 34px; //text gap + checkbox space
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
- &::before {
80
- width: 28px;
81
- margin-left: -36px;
82
- }
62
+ &::before {
63
+ width: 28px;
64
+ margin-left: -36px;
65
+ }
66
+ }
83
67
 
84
- .rs-checkbox-wrapper {
85
- left: 0;
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-tree-node-label {
93
- .rs-check-item .rs-checkbox-checker > label {
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
- &::before {
97
- width: 14px;
98
- margin-left: 0;
99
- left: 0;
100
- }
98
+ &::before {
99
+ width: 14px;
100
+ margin-left: 0;
101
+ left: 0;
101
102
  }
102
103
  }
103
104
  }
@@ -6,6 +6,9 @@
6
6
  position: fixed;
7
7
  z-index: @zindex-drawer;
8
8
  top: 0;
9
+ left: 0;
10
+ width: 100%;
11
+ height: 100%;
9
12
  }
10
13
 
11
14
  // Container that the drawer scrolls within
@@ -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
- // Pull Left
240
- .rs-dropdown-item-pull-left ~ .rs-dropdown-menu {
241
- right: 100%;
224
+ .rs-dropdown-menu {
225
+ left: 100%;
242
226
  }
243
227
 
244
228
  // Open
@@ -39,8 +39,6 @@
39
39
  padding-right: @dropdown-toggle-padding-right;
40
40
  // Fixed: Content is not centered when customizing renderTitle.
41
41
  display: inline-block;
42
- // Rest `:focus` blue border.
43
- outline: none;
44
42
  cursor: pointer;
45
43
  }
46
44
 
@@ -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 {
@@ -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
- .focus-ring();
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
- // DropDown
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-item.rs-navbar-item-active {
121
- .high-contrast-mode({
122
- text-decoration: underline;
123
- });
132
+ .rs-navbar .rs-dropdown-item {
133
+ &:hover {
134
+ .menuitem-active();
135
+ }
124
136
  }
125
137
 
126
138
  // Default Navbar
@@ -265,7 +265,8 @@
265
265
  line-height: @line-height;
266
266
  }
267
267
 
268
- .rs-picker-input.rs-picker-tag & ~ .rs-picker-tag-wrapper {
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
- .rs-picker-search-input input {
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
- [![codecov](https://codecov.io/gh/rsuite/rsuite/branch/next/graph/badge.svg?token=HGeKd0BD3t)](https://codecov.io/gh/rsuite/rsuite)
11
+ [![codecov](https://codecov.io/gh/rsuite/rsuite/branch/main/graph/badge.svg?token=HGeKd0BD3t)](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
- .high-contrast-mode({
41
- .rs-dropdown-toggle,
42
- .rs-dropdown-menu {
43
- border: none;
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
- .rs-dropdown-item-toggle {
48
- display: block;
49
- width: 100%;
50
- text-align: start;
51
- background: none;
51
+ .rs-sidenav-collapse-in & {
52
+ padding-left: @sidenav-level2-retract;
53
+ }
52
54
 
53
- &:focus {
54
- outline: 0;
55
- }
55
+ &:focus {
56
+ outline: 0;
57
+ }
56
58
 
57
- &:focus-visible {
58
- .focus-ring(inset);
59
+ &:focus-visible {
60
+ .focus-ring(inset);
59
61
 
60
- .high-contrast-mode({
61
- .focus-ring(slim-inset);
62
- });
62
+ .high-contrast-mode({
63
+ .focus-ring(slim-inset);
64
+ });
63
65
 
64
- z-index: 1;
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
- > .rs-dropdown-menu {
254
+ .rs-dropdown-menu {
230
255
  .reset-sidenav-dropdown-menu();
256
+ }
231
257
 
232
- // Submenu
233
- .rs-dropdown-item-submenu {
234
- padding: 0;
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
- &:hover {
246
- background-color: transparent;
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
- > .rs-tree-node-label {
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
- > .rs-tree-node-label-content {
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
- &&-active > .rs-tree-node-label > .rs-tree-node-label-content {
62
+ &-active &-label-content {
63
63
  .picker-item-active();
64
64
 
65
65
  color: var(--rs-text-link);
@@ -35,7 +35,9 @@ function useOffset(mountRef) {
35
35
  return mountRef.current;
36
36
  }, updateOffset); // Initialize after the first render
37
37
 
38
- (0, _react.useEffect)(updateOffset, [updateOffset]);
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]);
@@ -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')
@@ -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
- addColumn(data, cascadePaths.length);
294
+
295
+ if (targetRef.current) {
296
+ addColumn(data, cascadePaths.length);
297
+ }
287
298
  });
288
299
  } else {
289
300
  node.loading = false;