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
@@ -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
  }
@@ -3970,6 +3973,7 @@ tbody.rs-anim-collapse.rs-anim-in {
3970
3973
  margin: 0;
3971
3974
  padding: 0;
3972
3975
  list-style: none;
3976
+ font-size: 14px;
3973
3977
  }
3974
3978
  .rs-picker-cascader-menu-item {
3975
3979
  display: block;
@@ -4494,12 +4498,6 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
4494
4498
  color: #8e8e93;
4495
4499
  color: var(--rs-text-secondary);
4496
4500
  }
4497
- .rs-picker-date.rs-picker-default .rs-picker-toggle-caret,
4498
- .rs-picker-daterange.rs-picker-default .rs-picker-toggle-caret,
4499
- .rs-picker-date.rs-picker-default .rs-picker-toggle-clean,
4500
- .rs-picker-daterange.rs-picker-default .rs-picker-toggle-clean {
4501
- top: 7px;
4502
- }
4503
4501
  .rs-picker-toolbar {
4504
4502
  padding: 12px;
4505
4503
  border-top: 1px solid #e5e5ea;
@@ -4511,6 +4509,19 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
4511
4509
  .rs-picker-date-inline .rs-calendar {
4512
4510
  height: 286px;
4513
4511
  }
4512
+ .rs-picker-date .rs-input-group-addon {
4513
+ color: #8e8e93;
4514
+ color: var(--rs-text-secondary);
4515
+ }
4516
+ .rs-picker-date .rs-input-group-addon .rs-btn-close {
4517
+ padding: 0;
4518
+ }
4519
+ .rs-picker-date.rs-picker-subtle .rs-input-group {
4520
+ border-color: transparent;
4521
+ }
4522
+ .rs-picker-date > .rs-input-group.rs-input-group-inside .rs-input {
4523
+ padding-left: 0;
4524
+ }
4514
4525
  .rs-picker-date-predefined {
4515
4526
  height: 325px;
4516
4527
  border-left: 1px solid #e5e5ea;
@@ -4642,6 +4653,10 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
4642
4653
  height: 214px;
4643
4654
  padding-bottom: 184px;
4644
4655
  }
4656
+ .rs-picker-daterange.rs-picker-default .rs-picker-toggle-caret,
4657
+ .rs-picker-daterange.rs-picker-default .rs-picker-toggle-clean {
4658
+ top: 7px;
4659
+ }
4645
4660
  .rs-picker-daterange-menu .rs-calendar {
4646
4661
  display: inline-block;
4647
4662
  height: 274px;
@@ -8165,6 +8180,7 @@ textarea.rs-input-sm {
8165
8180
  }
8166
8181
  .rs-input-group .rs-input-group {
8167
8182
  outline: none !important;
8183
+ border-color: transparent !important;
8168
8184
  }
8169
8185
  .rs-input-group .rs-input-number,
8170
8186
  .rs-input-group .rs-input-group-addon,
@@ -11066,6 +11082,30 @@ textarea.rs-picker-search-input {
11066
11082
  box-shadow: 0 0 0 3px rgb(from #3498ff r g b / 25%);
11067
11083
  box-shadow: var(--rs-state-focus-shadow);
11068
11084
  }
11085
+ .rs-picker-label.rs-input-group-addon {
11086
+ color: #575757;
11087
+ color: var(--rs-text-primary);
11088
+ padding-left: 4px !important;
11089
+ }
11090
+ .rs-picker-loader {
11091
+ width: 14px;
11092
+ height: 14px;
11093
+ display: -webkit-box;
11094
+ display: -ms-flexbox;
11095
+ display: flex;
11096
+ -webkit-box-align: center;
11097
+ -ms-flex-align: center;
11098
+ align-items: center;
11099
+ }
11100
+ .rs-picker-error > .rs-input-group {
11101
+ border-color: #f44336 !important;
11102
+ border-color: var(--rs-state-error) !important;
11103
+ }
11104
+ .rs-picker-error > .rs-input-group:focus-within {
11105
+ outline: 3px solid rgba(244, 67, 54, 0.25) !important;
11106
+ outline: 3px solid rgb(from #f44336 r g b / 25%) !important;
11107
+ outline: var(--rs-state-error-outline) !important;
11108
+ }
11069
11109
  .rs-picker-toggle {
11070
11110
  display: -webkit-inline-box;
11071
11111
  display: -ms-inline-flexbox;
@@ -13293,6 +13333,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
13293
13333
  background: none;
13294
13334
  padding-left: 40px;
13295
13335
  position: relative;
13336
+ border-width: 0;
13296
13337
  }
13297
13338
  .rs-sidenav-collapse-in .rs-sidenav-nav > .rs-dropdown .rs-dropdown-item-toggle {
13298
13339
  padding-right: 56px;
@@ -13437,6 +13478,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
13437
13478
  display: block;
13438
13479
  outline: 0;
13439
13480
  overflow: hidden;
13481
+ text-decoration: none;
13440
13482
  }
13441
13483
  .rs-sidenav-item:hover,
13442
13484
  .rs-sidenav-item:focus {