rsuite 5.48.1 → 5.49.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 (138) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/Cascader/styles/index.less +1 -0
  3. package/DatePicker/styles/index.less +18 -11
  4. package/DateRangeInput/package.json +7 -0
  5. package/DateRangePicker/styles/index.less +10 -0
  6. package/InputGroup/styles/index.less +1 -0
  7. package/Picker/styles/index.less +20 -0
  8. package/README.md +32 -22
  9. package/Sidenav/styles/index.less +2 -0
  10. package/cjs/Calendar/CalendarContainer.d.ts +2 -0
  11. package/cjs/Calendar/CalendarContainer.js +11 -4
  12. package/cjs/Calendar/CalendarHeader.js +2 -0
  13. package/cjs/Calendar/MonthDropdown.js +7 -2
  14. package/cjs/Calendar/MonthDropdownItem.js +2 -2
  15. package/cjs/Calendar/Table.js +6 -1
  16. package/cjs/Calendar/TimeDropdown.js +17 -10
  17. package/cjs/Calendar/types.d.ts +1 -0
  18. package/cjs/CustomProvider/CustomProvider.d.ts +13 -0
  19. package/cjs/CustomProvider/CustomProvider.js +2 -2
  20. package/cjs/DateInput/DateField.d.ts +9 -31
  21. package/cjs/DateInput/DateField.js +61 -12
  22. package/cjs/DateInput/DateInput.d.ts +7 -2
  23. package/cjs/DateInput/DateInput.js +74 -92
  24. package/cjs/DateInput/index.d.ts +4 -0
  25. package/cjs/DateInput/index.js +19 -1
  26. package/cjs/DateInput/useDateInputState.d.ts +7 -31
  27. package/cjs/DateInput/useDateInputState.js +39 -15
  28. package/cjs/DateInput/useIsFocused.d.ts +7 -0
  29. package/cjs/DateInput/useIsFocused.js +28 -0
  30. package/cjs/DateInput/useKeyboardInputEvent.d.ts +10 -0
  31. package/cjs/DateInput/useKeyboardInputEvent.js +44 -0
  32. package/cjs/DateInput/utils.d.ts +23 -1
  33. package/cjs/DateInput/utils.js +155 -51
  34. package/cjs/DatePicker/DatePicker.d.ts +20 -7
  35. package/cjs/DatePicker/DatePicker.js +210 -241
  36. package/cjs/DatePicker/PickerIndicator.d.ts +10 -0
  37. package/cjs/DatePicker/PickerIndicator.js +48 -0
  38. package/cjs/DatePicker/PickerLabel.d.ts +9 -0
  39. package/cjs/DatePicker/PickerLabel.js +23 -0
  40. package/cjs/DatePicker/Toolbar.js +3 -21
  41. package/cjs/DatePicker/utils.d.ts +5 -1
  42. package/cjs/DatePicker/utils.js +17 -1
  43. package/cjs/DateRangeInput/DateRangeInput.d.ts +29 -0
  44. package/cjs/DateRangeInput/DateRangeInput.js +244 -0
  45. package/cjs/DateRangeInput/index.d.ts +3 -0
  46. package/cjs/DateRangeInput/index.js +9 -0
  47. package/cjs/DateRangeInput/utils.d.ts +61 -0
  48. package/cjs/DateRangeInput/utils.js +146 -0
  49. package/cjs/DateRangePicker/DateRangePicker.js +12 -2
  50. package/cjs/Input/Input.d.ts +11 -0
  51. package/cjs/Input/Input.js +11 -8
  52. package/cjs/Overlay/OverlayTrigger.d.ts +3 -0
  53. package/cjs/Overlay/OverlayTrigger.js +5 -0
  54. package/cjs/Picker/usePickerRef.d.ts +17 -0
  55. package/cjs/Picker/usePickerRef.js +82 -0
  56. package/cjs/index.d.ts +2 -0
  57. package/cjs/index.js +3 -1
  58. package/cjs/locales/index.d.ts +2 -2
  59. package/cjs/utils/index.d.ts +2 -0
  60. package/cjs/utils/index.js +8 -2
  61. package/cjs/utils/useCustom.js +1 -1
  62. package/cjs/utils/useIsomorphicLayoutEffect.d.ts +3 -0
  63. package/cjs/utils/useIsomorphicLayoutEffect.js +9 -0
  64. package/dist/rsuite-no-reset-rtl.css +51 -141
  65. package/dist/rsuite-no-reset-rtl.min.css +1 -1
  66. package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
  67. package/dist/rsuite-no-reset.css +51 -141
  68. package/dist/rsuite-no-reset.min.css +1 -1
  69. package/dist/rsuite-no-reset.min.css.map +1 -1
  70. package/dist/rsuite-rtl.css +51 -9
  71. package/dist/rsuite-rtl.min.css +1 -1
  72. package/dist/rsuite-rtl.min.css.map +1 -1
  73. package/dist/rsuite.css +51 -9
  74. package/dist/rsuite.js +4800 -246
  75. package/dist/rsuite.js.map +1 -1
  76. package/dist/rsuite.min.css +1 -1
  77. package/dist/rsuite.min.css.map +1 -1
  78. package/dist/rsuite.min.js +1 -1
  79. package/dist/rsuite.min.js.map +1 -1
  80. package/esm/Calendar/CalendarContainer.d.ts +2 -0
  81. package/esm/Calendar/CalendarContainer.js +12 -5
  82. package/esm/Calendar/CalendarHeader.js +2 -0
  83. package/esm/Calendar/MonthDropdown.js +7 -2
  84. package/esm/Calendar/MonthDropdownItem.js +2 -2
  85. package/esm/Calendar/Table.js +6 -1
  86. package/esm/Calendar/TimeDropdown.js +17 -10
  87. package/esm/Calendar/types.d.ts +1 -0
  88. package/esm/CustomProvider/CustomProvider.d.ts +13 -0
  89. package/esm/CustomProvider/CustomProvider.js +3 -3
  90. package/esm/DateInput/DateField.d.ts +9 -31
  91. package/esm/DateInput/DateField.js +61 -12
  92. package/esm/DateInput/DateInput.d.ts +7 -2
  93. package/esm/DateInput/DateInput.js +77 -95
  94. package/esm/DateInput/index.d.ts +4 -0
  95. package/esm/DateInput/index.js +4 -0
  96. package/esm/DateInput/useDateInputState.d.ts +7 -31
  97. package/esm/DateInput/useDateInputState.js +41 -18
  98. package/esm/DateInput/useIsFocused.d.ts +7 -0
  99. package/esm/DateInput/useIsFocused.js +22 -0
  100. package/esm/DateInput/useKeyboardInputEvent.d.ts +10 -0
  101. package/esm/DateInput/useKeyboardInputEvent.js +38 -0
  102. package/esm/DateInput/utils.d.ts +23 -1
  103. package/esm/DateInput/utils.js +150 -51
  104. package/esm/DatePicker/DatePicker.d.ts +20 -7
  105. package/esm/DatePicker/DatePicker.js +213 -244
  106. package/esm/DatePicker/PickerIndicator.d.ts +10 -0
  107. package/esm/DatePicker/PickerIndicator.js +42 -0
  108. package/esm/DatePicker/PickerLabel.d.ts +9 -0
  109. package/esm/DatePicker/PickerLabel.js +17 -0
  110. package/esm/DatePicker/Toolbar.js +3 -21
  111. package/esm/DatePicker/utils.d.ts +5 -1
  112. package/esm/DatePicker/utils.js +16 -1
  113. package/esm/DateRangeInput/DateRangeInput.d.ts +29 -0
  114. package/esm/DateRangeInput/DateRangeInput.js +237 -0
  115. package/esm/DateRangeInput/index.d.ts +3 -0
  116. package/esm/DateRangeInput/index.js +3 -0
  117. package/esm/DateRangeInput/utils.d.ts +61 -0
  118. package/esm/DateRangeInput/utils.js +137 -0
  119. package/esm/DateRangePicker/DateRangePicker.js +12 -2
  120. package/esm/Input/Input.d.ts +11 -0
  121. package/esm/Input/Input.js +12 -9
  122. package/esm/Overlay/OverlayTrigger.d.ts +3 -0
  123. package/esm/Overlay/OverlayTrigger.js +5 -0
  124. package/esm/Picker/usePickerRef.d.ts +17 -0
  125. package/esm/Picker/usePickerRef.js +77 -0
  126. package/esm/index.d.ts +2 -0
  127. package/esm/index.js +1 -0
  128. package/esm/locales/index.d.ts +2 -2
  129. package/esm/utils/index.d.ts +2 -0
  130. package/esm/utils/index.js +3 -1
  131. package/esm/utils/useCustom.js +2 -2
  132. package/esm/utils/useIsomorphicLayoutEffect.d.ts +3 -0
  133. package/esm/utils/useIsomorphicLayoutEffect.js +4 -0
  134. package/package.json +1 -1
  135. package/styles/color-modes/dark.less +1 -0
  136. package/styles/color-modes/high-contrast.less +1 -0
  137. package/styles/color-modes/light.less +1 -0
  138. package/styles/normalize.less +230 -231
package/dist/rsuite.css CHANGED
@@ -130,6 +130,7 @@
130
130
  --rs-color-focus-ring: rgb(from var(--rs-primary-500) r g b / 25%);
131
131
  --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-primary-500) r g b / 25%);
132
132
  --rs-state-focus-outline: 3px solid rgb(from var(--rs-primary-500) r g b / 25%);
133
+ --rs-state-error-outline: 3px solid rgb(from var(--rs-color-red) r g b / 25%);
133
134
  --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
134
135
  --rs-btn-default-bg: var(--rs-gray-50);
135
136
  --rs-btn-default-text: var(--rs-gray-800);
@@ -475,6 +476,7 @@
475
476
  --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
476
477
  --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
477
478
  --rs-state-focus-outline: 3px solid rgb(from var(--rs-gray-500) r g b / 25%);
479
+ --rs-state-error-outline: 3px solid rgb(from var(--rs-color-red) r g b / 25%);
478
480
  --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
479
481
  --rs-btn-default-bg: var(--rs-gray-600);
480
482
  --rs-btn-default-text: var(--rs-gray-50);
@@ -811,6 +813,7 @@
811
813
  --rs-state-focus-shadow: 0 0 0 3px var(--rs-gray-900), 0 0 0 5px var(--rs-gray-0);
812
814
  --rs-state-focus-shadow-slim: 0 0 0 2px var(--rs-gray-0);
813
815
  --rs-state-focus-outline: 3px solid rgb(from var(--rs-primary-500) r g b / 25%);
816
+ --rs-state-error-outline: 3px solid rgb(from var(--rs-color-red) r g b / 25%);
814
817
  --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
815
818
  --rs-btn-default-bg: transparent;
816
819
  --rs-btn-default-text: var(--rs-primary-500);
@@ -1034,12 +1037,12 @@
1034
1037
  --rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
1035
1038
  }
1036
1039
  /* stylelint-disable */
1037
- * {
1040
+ *[class*='rs-'] {
1038
1041
  -webkit-box-sizing: border-box;
1039
1042
  box-sizing: border-box;
1040
1043
  }
1041
- *::before,
1042
- *::after {
1044
+ *[class*='rs-']::before,
1045
+ *[class*='rs-']::after {
1043
1046
  -webkit-box-sizing: border-box;
1044
1047
  box-sizing: border-box;
1045
1048
  }
@@ -3972,6 +3975,7 @@ tbody.rs-anim-collapse.rs-anim-in {
3972
3975
  margin: 0;
3973
3976
  padding: 0;
3974
3977
  list-style: none;
3978
+ font-size: 14px;
3975
3979
  }
3976
3980
  .rs-picker-cascader-menu-item {
3977
3981
  display: block;
@@ -4500,12 +4504,6 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
4500
4504
  color: #8e8e93;
4501
4505
  color: var(--rs-text-secondary);
4502
4506
  }
4503
- .rs-picker-date.rs-picker-default .rs-picker-toggle-caret,
4504
- .rs-picker-daterange.rs-picker-default .rs-picker-toggle-caret,
4505
- .rs-picker-date.rs-picker-default .rs-picker-toggle-clean,
4506
- .rs-picker-daterange.rs-picker-default .rs-picker-toggle-clean {
4507
- top: 7px;
4508
- }
4509
4507
  .rs-picker-toolbar {
4510
4508
  padding: 12px;
4511
4509
  border-top: 1px solid #e5e5ea;
@@ -4517,6 +4515,19 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
4517
4515
  .rs-picker-date-inline .rs-calendar {
4518
4516
  height: 286px;
4519
4517
  }
4518
+ .rs-picker-date .rs-input-group-addon {
4519
+ color: #8e8e93;
4520
+ color: var(--rs-text-secondary);
4521
+ }
4522
+ .rs-picker-date .rs-input-group-addon .rs-btn-close {
4523
+ padding: 0;
4524
+ }
4525
+ .rs-picker-date.rs-picker-subtle .rs-input-group {
4526
+ border-color: transparent;
4527
+ }
4528
+ .rs-picker-date > .rs-input-group.rs-input-group-inside .rs-input {
4529
+ padding-right: 0;
4530
+ }
4520
4531
  .rs-picker-date-predefined {
4521
4532
  height: 325px;
4522
4533
  border-right: 1px solid #e5e5ea;
@@ -4648,6 +4659,10 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
4648
4659
  height: 214px;
4649
4660
  padding-bottom: 184px;
4650
4661
  }
4662
+ .rs-picker-daterange.rs-picker-default .rs-picker-toggle-caret,
4663
+ .rs-picker-daterange.rs-picker-default .rs-picker-toggle-clean {
4664
+ top: 7px;
4665
+ }
4651
4666
  .rs-picker-daterange-menu .rs-calendar {
4652
4667
  display: inline-block;
4653
4668
  height: 274px;
@@ -8173,6 +8188,7 @@ textarea.rs-input-sm {
8173
8188
  }
8174
8189
  .rs-input-group .rs-input-group {
8175
8190
  outline: none !important;
8191
+ border-color: transparent !important;
8176
8192
  }
8177
8193
  .rs-input-group .rs-input-number,
8178
8194
  .rs-input-group .rs-input-group-addon,
@@ -11078,6 +11094,30 @@ textarea.rs-picker-search-input {
11078
11094
  box-shadow: 0 0 0 3px rgb(from #3498ff r g b / 25%);
11079
11095
  box-shadow: var(--rs-state-focus-shadow);
11080
11096
  }
11097
+ .rs-picker-label.rs-input-group-addon {
11098
+ color: #575757;
11099
+ color: var(--rs-text-primary);
11100
+ padding-right: 4px !important;
11101
+ }
11102
+ .rs-picker-loader {
11103
+ width: 14px;
11104
+ height: 14px;
11105
+ display: -webkit-box;
11106
+ display: -ms-flexbox;
11107
+ display: flex;
11108
+ -webkit-box-align: center;
11109
+ -ms-flex-align: center;
11110
+ align-items: center;
11111
+ }
11112
+ .rs-picker-error > .rs-input-group {
11113
+ border-color: #f44336 !important;
11114
+ border-color: var(--rs-state-error) !important;
11115
+ }
11116
+ .rs-picker-error > .rs-input-group:focus-within {
11117
+ outline: 3px solid rgba(244, 67, 54, 0.25) !important;
11118
+ outline: 3px solid rgb(from #f44336 r g b / 25%) !important;
11119
+ outline: var(--rs-state-error-outline) !important;
11120
+ }
11081
11121
  .rs-picker-toggle {
11082
11122
  display: -webkit-inline-box;
11083
11123
  display: -ms-inline-flexbox;
@@ -13309,6 +13349,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
13309
13349
  background: none;
13310
13350
  padding-right: 40px;
13311
13351
  position: relative;
13352
+ border-width: 0;
13312
13353
  }
13313
13354
  .rs-sidenav-collapse-in .rs-sidenav-nav > .rs-dropdown .rs-dropdown-item-toggle {
13314
13355
  padding-left: 56px;
@@ -13453,6 +13494,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
13453
13494
  display: block;
13454
13495
  outline: 0;
13455
13496
  overflow: hidden;
13497
+ text-decoration: none;
13456
13498
  }
13457
13499
  .rs-sidenav-item:hover,
13458
13500
  .rs-sidenav-item:focus {