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;
@@ -3840,6 +3711,7 @@ tbody.rs-anim-collapse.rs-anim-in {
3840
3711
  margin: 0;
3841
3712
  padding: 0;
3842
3713
  list-style: none;
3714
+ font-size: 14px;
3843
3715
  }
3844
3716
  .rs-picker-cascader-menu-item {
3845
3717
  display: block;
@@ -4368,12 +4240,6 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
4368
4240
  color: #8e8e93;
4369
4241
  color: var(--rs-text-secondary);
4370
4242
  }
4371
- .rs-picker-date.rs-picker-default .rs-picker-toggle-caret,
4372
- .rs-picker-daterange.rs-picker-default .rs-picker-toggle-caret,
4373
- .rs-picker-date.rs-picker-default .rs-picker-toggle-clean,
4374
- .rs-picker-daterange.rs-picker-default .rs-picker-toggle-clean {
4375
- top: 7px;
4376
- }
4377
4243
  .rs-picker-toolbar {
4378
4244
  padding: 12px;
4379
4245
  border-top: 1px solid #e5e5ea;
@@ -4385,6 +4251,19 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
4385
4251
  .rs-picker-date-inline .rs-calendar {
4386
4252
  height: 286px;
4387
4253
  }
4254
+ .rs-picker-date .rs-input-group-addon {
4255
+ color: #8e8e93;
4256
+ color: var(--rs-text-secondary);
4257
+ }
4258
+ .rs-picker-date .rs-input-group-addon .rs-btn-close {
4259
+ padding: 0;
4260
+ }
4261
+ .rs-picker-date.rs-picker-subtle .rs-input-group {
4262
+ border-color: transparent;
4263
+ }
4264
+ .rs-picker-date > .rs-input-group.rs-input-group-inside .rs-input {
4265
+ padding-right: 0;
4266
+ }
4388
4267
  .rs-picker-date-predefined {
4389
4268
  height: 325px;
4390
4269
  border-right: 1px solid #e5e5ea;
@@ -4516,6 +4395,10 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
4516
4395
  height: 214px;
4517
4396
  padding-bottom: 184px;
4518
4397
  }
4398
+ .rs-picker-daterange.rs-picker-default .rs-picker-toggle-caret,
4399
+ .rs-picker-daterange.rs-picker-default .rs-picker-toggle-clean {
4400
+ top: 7px;
4401
+ }
4519
4402
  .rs-picker-daterange-menu .rs-calendar {
4520
4403
  display: inline-block;
4521
4404
  height: 274px;
@@ -8041,6 +7924,7 @@ textarea.rs-input-sm {
8041
7924
  }
8042
7925
  .rs-input-group .rs-input-group {
8043
7926
  outline: none !important;
7927
+ border-color: transparent !important;
8044
7928
  }
8045
7929
  .rs-input-group .rs-input-number,
8046
7930
  .rs-input-group .rs-input-group-addon,
@@ -10946,6 +10830,30 @@ textarea.rs-picker-search-input {
10946
10830
  box-shadow: 0 0 0 3px rgb(from #3498ff r g b / 25%);
10947
10831
  box-shadow: var(--rs-state-focus-shadow);
10948
10832
  }
10833
+ .rs-picker-label.rs-input-group-addon {
10834
+ color: #575757;
10835
+ color: var(--rs-text-primary);
10836
+ padding-right: 4px !important;
10837
+ }
10838
+ .rs-picker-loader {
10839
+ width: 14px;
10840
+ height: 14px;
10841
+ display: -webkit-box;
10842
+ display: -ms-flexbox;
10843
+ display: flex;
10844
+ -webkit-box-align: center;
10845
+ -ms-flex-align: center;
10846
+ align-items: center;
10847
+ }
10848
+ .rs-picker-error > .rs-input-group {
10849
+ border-color: #f44336 !important;
10850
+ border-color: var(--rs-state-error) !important;
10851
+ }
10852
+ .rs-picker-error > .rs-input-group:focus-within {
10853
+ outline: 3px solid rgba(244, 67, 54, 0.25) !important;
10854
+ outline: 3px solid rgb(from #f44336 r g b / 25%) !important;
10855
+ outline: var(--rs-state-error-outline) !important;
10856
+ }
10949
10857
  .rs-picker-toggle {
10950
10858
  display: -webkit-inline-box;
10951
10859
  display: -ms-inline-flexbox;
@@ -13177,6 +13085,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
13177
13085
  background: none;
13178
13086
  padding-right: 40px;
13179
13087
  position: relative;
13088
+ border-width: 0;
13180
13089
  }
13181
13090
  .rs-sidenav-collapse-in .rs-sidenav-nav > .rs-dropdown .rs-dropdown-item-toggle {
13182
13091
  padding-left: 56px;
@@ -13321,6 +13230,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
13321
13230
  display: block;
13322
13231
  outline: 0;
13323
13232
  overflow: hidden;
13233
+ text-decoration: none;
13324
13234
  }
13325
13235
  .rs-sidenav-item:hover,
13326
13236
  .rs-sidenav-item:focus {