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,147 +1037,15 @@
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
  }
1046
- body {
1047
- margin: 0;
1048
- -webkit-font-smoothing: antialiased;
1049
- -moz-osx-font-smoothing: grayscale;
1050
- }
1051
- [hidden],
1052
- template {
1053
- display: none;
1054
- }
1055
- a {
1056
- background-color: transparent;
1057
- }
1058
- a:active,
1059
- a:hover {
1060
- outline: 0;
1061
- }
1062
- b,
1063
- strong {
1064
- font-weight: bold;
1065
- }
1066
- sub,
1067
- sup {
1068
- font-size: 75%;
1069
- line-height: 0;
1070
- position: relative;
1071
- vertical-align: baseline;
1072
- }
1073
- sup {
1074
- top: -0.5em;
1075
- }
1076
- sub {
1077
- bottom: -0.25em;
1078
- }
1079
- img {
1080
- border: 0;
1081
- }
1082
- svg:not(:root) {
1083
- overflow: hidden;
1084
- }
1085
- hr {
1086
- -webkit-box-sizing: content-box;
1087
- box-sizing: content-box;
1088
- height: 0;
1089
- }
1090
- pre {
1091
- overflow: auto;
1092
- }
1093
- button,
1094
- input,
1095
- optgroup,
1096
- select,
1097
- textarea {
1098
- color: inherit;
1099
- font: inherit;
1100
- margin: 0;
1101
- }
1102
- button {
1103
- overflow: visible;
1104
- }
1105
- button {
1106
- border-radius: 0;
1107
- }
1108
- button,
1109
- select {
1110
- text-transform: none;
1111
- }
1112
- button,
1113
- html input[type='button'],
1114
- input[type='reset'],
1115
- input[type='submit'] {
1116
- -webkit-appearance: button;
1117
- cursor: pointer;
1118
- }
1119
- button[disabled],
1120
- html input[disabled] {
1121
- cursor: not-allowed;
1122
- }
1123
- button::-moz-focus-inner,
1124
- input::-moz-focus-inner {
1125
- border: 0;
1126
- padding: 0;
1127
- }
1128
- input {
1129
- line-height: normal;
1130
- }
1131
- input[type='checkbox'],
1132
- input[type='radio'] {
1133
- -webkit-box-sizing: border-box;
1134
- box-sizing: border-box;
1135
- padding: 0;
1136
- }
1137
- input[type='number']::-webkit-inner-spin-button,
1138
- input[type='number']::-webkit-outer-spin-button {
1139
- height: auto;
1140
- }
1141
- textarea {
1142
- overflow: auto;
1143
- }
1144
- table {
1145
- border-collapse: collapse;
1146
- border-spacing: 0;
1147
- }
1148
- td,
1149
- th {
1150
- padding: 0;
1151
- }
1152
- [tabindex='-1'] {
1153
- outline: none;
1154
- }
1155
- input[type='button'],
1156
- input[type='submit'],
1157
- input[type='reset'],
1158
- button {
1159
- border-width: 0;
1160
- }
1161
- input::-ms-clear {
1162
- display: none;
1163
- }
1164
- input[type='file']::-webkit-file-upload-button,
1165
- input[type='file']::-ms-browse {
1166
- border-width: 0;
1167
- background: transparent;
1168
- color: currentColor;
1169
- }
1170
- input,
1171
- button,
1172
- select,
1173
- textarea {
1174
- font-family: inherit;
1175
- font-size: inherit;
1176
- line-height: inherit;
1177
- }
1178
1049
  @-webkit-keyframes slideInLeft {
1179
1050
  from {
1180
1051
  opacity: 0;
@@ -3838,6 +3709,7 @@ tbody.rs-anim-collapse.rs-anim-in {
3838
3709
  margin: 0;
3839
3710
  padding: 0;
3840
3711
  list-style: none;
3712
+ font-size: 14px;
3841
3713
  }
3842
3714
  .rs-picker-cascader-menu-item {
3843
3715
  display: block;
@@ -4362,12 +4234,6 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
4362
4234
  color: #8e8e93;
4363
4235
  color: var(--rs-text-secondary);
4364
4236
  }
4365
- .rs-picker-date.rs-picker-default .rs-picker-toggle-caret,
4366
- .rs-picker-daterange.rs-picker-default .rs-picker-toggle-caret,
4367
- .rs-picker-date.rs-picker-default .rs-picker-toggle-clean,
4368
- .rs-picker-daterange.rs-picker-default .rs-picker-toggle-clean {
4369
- top: 7px;
4370
- }
4371
4237
  .rs-picker-toolbar {
4372
4238
  padding: 12px;
4373
4239
  border-top: 1px solid #e5e5ea;
@@ -4379,6 +4245,19 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
4379
4245
  .rs-picker-date-inline .rs-calendar {
4380
4246
  height: 286px;
4381
4247
  }
4248
+ .rs-picker-date .rs-input-group-addon {
4249
+ color: #8e8e93;
4250
+ color: var(--rs-text-secondary);
4251
+ }
4252
+ .rs-picker-date .rs-input-group-addon .rs-btn-close {
4253
+ padding: 0;
4254
+ }
4255
+ .rs-picker-date.rs-picker-subtle .rs-input-group {
4256
+ border-color: transparent;
4257
+ }
4258
+ .rs-picker-date > .rs-input-group.rs-input-group-inside .rs-input {
4259
+ padding-left: 0;
4260
+ }
4382
4261
  .rs-picker-date-predefined {
4383
4262
  height: 325px;
4384
4263
  border-left: 1px solid #e5e5ea;
@@ -4510,6 +4389,10 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
4510
4389
  height: 214px;
4511
4390
  padding-bottom: 184px;
4512
4391
  }
4392
+ .rs-picker-daterange.rs-picker-default .rs-picker-toggle-caret,
4393
+ .rs-picker-daterange.rs-picker-default .rs-picker-toggle-clean {
4394
+ top: 7px;
4395
+ }
4513
4396
  .rs-picker-daterange-menu .rs-calendar {
4514
4397
  display: inline-block;
4515
4398
  height: 274px;
@@ -8033,6 +7916,7 @@ textarea.rs-input-sm {
8033
7916
  }
8034
7917
  .rs-input-group .rs-input-group {
8035
7918
  outline: none !important;
7919
+ border-color: transparent !important;
8036
7920
  }
8037
7921
  .rs-input-group .rs-input-number,
8038
7922
  .rs-input-group .rs-input-group-addon,
@@ -10934,6 +10818,30 @@ textarea.rs-picker-search-input {
10934
10818
  box-shadow: 0 0 0 3px rgb(from #3498ff r g b / 25%);
10935
10819
  box-shadow: var(--rs-state-focus-shadow);
10936
10820
  }
10821
+ .rs-picker-label.rs-input-group-addon {
10822
+ color: #575757;
10823
+ color: var(--rs-text-primary);
10824
+ padding-left: 4px !important;
10825
+ }
10826
+ .rs-picker-loader {
10827
+ width: 14px;
10828
+ height: 14px;
10829
+ display: -webkit-box;
10830
+ display: -ms-flexbox;
10831
+ display: flex;
10832
+ -webkit-box-align: center;
10833
+ -ms-flex-align: center;
10834
+ align-items: center;
10835
+ }
10836
+ .rs-picker-error > .rs-input-group {
10837
+ border-color: #f44336 !important;
10838
+ border-color: var(--rs-state-error) !important;
10839
+ }
10840
+ .rs-picker-error > .rs-input-group:focus-within {
10841
+ outline: 3px solid rgba(244, 67, 54, 0.25) !important;
10842
+ outline: 3px solid rgb(from #f44336 r g b / 25%) !important;
10843
+ outline: var(--rs-state-error-outline) !important;
10844
+ }
10937
10845
  .rs-picker-toggle {
10938
10846
  display: -webkit-inline-box;
10939
10847
  display: -ms-inline-flexbox;
@@ -13161,6 +13069,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
13161
13069
  background: none;
13162
13070
  padding-left: 40px;
13163
13071
  position: relative;
13072
+ border-width: 0;
13164
13073
  }
13165
13074
  .rs-sidenav-collapse-in .rs-sidenav-nav > .rs-dropdown .rs-dropdown-item-toggle {
13166
13075
  padding-right: 56px;
@@ -13305,6 +13214,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
13305
13214
  display: block;
13306
13215
  outline: 0;
13307
13216
  overflow: hidden;
13217
+ text-decoration: none;
13308
13218
  }
13309
13219
  .rs-sidenav-item:hover,
13310
13220
  .rs-sidenav-item:focus {