rsuite 5.58.1 → 5.59.1

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 (105) hide show
  1. package/Avatar/styles/index.css +74 -3
  2. package/Avatar/styles/index.less +25 -1
  3. package/Avatar/styles/mixin.less +8 -0
  4. package/AvatarGroup/styles/index.css +2 -0
  5. package/AvatarGroup/styles/index.less +2 -0
  6. package/CHANGELOG.md +29 -0
  7. package/CheckPicker/styles/index.css +2 -0
  8. package/CheckTree/styles/index.css +2 -0
  9. package/CheckTreePicker/styles/index.css +2 -0
  10. package/Checkbox/styles/index.css +2 -0
  11. package/Checkbox/styles/index.less +2 -0
  12. package/Drawer/styles/index.css +4 -0
  13. package/Drawer/styles/index.less +5 -0
  14. package/MultiCascadeTree/styles/index.css +2 -0
  15. package/MultiCascader/styles/index.css +2 -0
  16. package/Placeholder/styles/index.css +42 -6
  17. package/Placeholder/styles/index.less +18 -9
  18. package/Placeholder/styles/mixin.less +7 -0
  19. package/Sidenav/styles/index.css +3 -0
  20. package/Sidenav/styles/index.less +4 -0
  21. package/TagInput/styles/index.css +2 -0
  22. package/TagPicker/styles/index.css +2 -0
  23. package/cjs/Avatar/Avatar.d.ts +30 -5
  24. package/cjs/Avatar/Avatar.js +56 -22
  25. package/cjs/Avatar/AvatarIcon.d.ts +3 -0
  26. package/cjs/Avatar/AvatarIcon.js +24 -0
  27. package/cjs/Avatar/useImage.d.ts +39 -0
  28. package/cjs/Avatar/useImage.js +74 -0
  29. package/cjs/AvatarGroup/AvatarGroup.d.ts +15 -6
  30. package/cjs/AvatarGroup/AvatarGroup.js +12 -12
  31. package/cjs/Checkbox/Checkbox.js +1 -1
  32. package/cjs/DateInput/DateField.js +5 -0
  33. package/cjs/Form/Form.js +40 -56
  34. package/cjs/Form/FormContext.d.ts +1 -1
  35. package/cjs/Form/{useFormClassNames.d.ts → hooks/useFormClassNames.d.ts} +2 -2
  36. package/cjs/Form/{useFormClassNames.js → hooks/useFormClassNames.js} +2 -2
  37. package/cjs/Form/hooks/useFormError.d.ts +6 -0
  38. package/cjs/Form/hooks/useFormError.js +31 -0
  39. package/cjs/Form/hooks/useFormValue.d.ts +6 -0
  40. package/cjs/Form/hooks/useFormValue.js +31 -0
  41. package/cjs/Form/index.d.ts +1 -1
  42. package/cjs/Form/index.js +3 -9
  43. package/cjs/FormControl/FormControl.js +1 -1
  44. package/cjs/FormControl/useRegisterModel.d.ts +1 -1
  45. package/cjs/Modal/Modal.js +36 -21
  46. package/cjs/Placeholder/PlaceholderGraph.d.ts +13 -1
  47. package/cjs/Placeholder/PlaceholderGrid.d.ts +27 -1
  48. package/cjs/Placeholder/PlaceholderGrid.js +10 -13
  49. package/cjs/Placeholder/PlaceholderParagraph.d.ts +24 -1
  50. package/cjs/Placeholder/PlaceholderParagraph.js +13 -9
  51. package/cjs/internals/Overlay/Modal.js +2 -1
  52. package/dist/rsuite-no-reset-rtl.css +124 -9
  53. package/dist/rsuite-no-reset-rtl.min.css +1 -1
  54. package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
  55. package/dist/rsuite-no-reset.css +124 -9
  56. package/dist/rsuite-no-reset.min.css +1 -1
  57. package/dist/rsuite-no-reset.min.css.map +1 -1
  58. package/dist/rsuite-rtl.css +124 -9
  59. package/dist/rsuite-rtl.min.css +1 -1
  60. package/dist/rsuite-rtl.min.css.map +1 -1
  61. package/dist/rsuite.css +124 -9
  62. package/dist/rsuite.js +122 -36
  63. package/dist/rsuite.js.map +1 -1
  64. package/dist/rsuite.min.css +1 -1
  65. package/dist/rsuite.min.css.map +1 -1
  66. package/dist/rsuite.min.js +1 -1
  67. package/dist/rsuite.min.js.map +1 -1
  68. package/esm/Avatar/Avatar.d.ts +30 -5
  69. package/esm/Avatar/Avatar.js +58 -24
  70. package/esm/Avatar/AvatarIcon.d.ts +3 -0
  71. package/esm/Avatar/AvatarIcon.js +18 -0
  72. package/esm/Avatar/useImage.d.ts +39 -0
  73. package/esm/Avatar/useImage.js +69 -0
  74. package/esm/AvatarGroup/AvatarGroup.d.ts +15 -6
  75. package/esm/AvatarGroup/AvatarGroup.js +12 -12
  76. package/esm/Checkbox/Checkbox.js +1 -1
  77. package/esm/DateInput/DateField.js +5 -0
  78. package/esm/Form/Form.js +40 -56
  79. package/esm/Form/FormContext.d.ts +1 -1
  80. package/esm/Form/{useFormClassNames.d.ts → hooks/useFormClassNames.d.ts} +2 -2
  81. package/esm/Form/{useFormClassNames.js → hooks/useFormClassNames.js} +2 -2
  82. package/esm/Form/hooks/useFormError.d.ts +6 -0
  83. package/esm/Form/hooks/useFormError.js +26 -0
  84. package/esm/Form/hooks/useFormValue.d.ts +6 -0
  85. package/esm/Form/hooks/useFormValue.js +26 -0
  86. package/esm/Form/index.d.ts +1 -1
  87. package/esm/Form/index.js +1 -1
  88. package/esm/FormControl/FormControl.js +1 -1
  89. package/esm/FormControl/useRegisterModel.d.ts +1 -1
  90. package/esm/Modal/Modal.js +36 -21
  91. package/esm/Placeholder/PlaceholderGraph.d.ts +13 -1
  92. package/esm/Placeholder/PlaceholderGrid.d.ts +27 -1
  93. package/esm/Placeholder/PlaceholderGrid.js +10 -13
  94. package/esm/Placeholder/PlaceholderParagraph.d.ts +24 -1
  95. package/esm/Placeholder/PlaceholderParagraph.js +12 -8
  96. package/esm/internals/Overlay/Modal.js +2 -1
  97. package/package.json +2 -2
  98. package/styles/color-modes/dark.less +2 -0
  99. package/styles/color-modes/high-contrast.less +2 -0
  100. package/styles/color-modes/light.less +2 -0
  101. package/styles/variables.less +12 -20
  102. /package/cjs/Form/{useSchemaModel.d.ts → hooks/useSchemaModel.d.ts} +0 -0
  103. /package/cjs/Form/{useSchemaModel.js → hooks/useSchemaModel.js} +0 -0
  104. /package/esm/Form/{useSchemaModel.d.ts → hooks/useSchemaModel.d.ts} +0 -0
  105. /package/esm/Form/{useSchemaModel.js → hooks/useSchemaModel.js} +0 -0
package/dist/rsuite.css CHANGED
@@ -320,6 +320,8 @@
320
320
  --rs-uploader-dnd-hover-border: var(--rs-primary-500);
321
321
  --rs-avatar-bg: var(--rs-gray-300);
322
322
  --rs-avatar-text: var(--rs-gray-0);
323
+ --rs-avatar-offset-color: var(--rs-gray-0);
324
+ --rs-avatar-ring-color: var(--rs-avatar-bg);
323
325
  --rs-badge-bg: var(--rs-color-red);
324
326
  --rs-badge-text: var(--rs-gray-0);
325
327
  --rs-close-button-hover-color: var(--rs-color-red);
@@ -688,6 +690,8 @@
688
690
  --rs-uploader-dnd-hover-border: var(--rs-primary-500);
689
691
  --rs-avatar-bg: var(--rs-gray-400);
690
692
  --rs-avatar-text: var(--rs-gray-0);
693
+ --rs-avatar-offset-color: var(--rs-gray-900);
694
+ --rs-avatar-ring-color: var(--rs-avatar-bg);
691
695
  --rs-badge-bg: var(--rs-color-red);
692
696
  --rs-badge-text: var(--rs-gray-0);
693
697
  --rs-close-button-hover-color: var(--rs-color-red);
@@ -1055,6 +1059,8 @@
1055
1059
  --rs-uploader-dnd-hover-border: var(--rs-primary-500);
1056
1060
  --rs-avatar-bg: var(--rs-gray-400);
1057
1061
  --rs-avatar-text: var(--rs-gray-0);
1062
+ --rs-avatar-offset-color: var(--rs-gray-900);
1063
+ --rs-avatar-ring-color: var(--rs-avatar-bg);
1058
1064
  --rs-badge-bg: var(--rs-red-500);
1059
1065
  --rs-badge-text: var(--rs-gray-0);
1060
1066
  --rs-close-button-hover-color: var(--rs-color-red);
@@ -1818,13 +1824,47 @@ tbody.rs-anim-collapse.rs-anim-in {
1818
1824
  background: var(--rs-avatar-bg);
1819
1825
  text-align: center;
1820
1826
  padding: 0 2px;
1821
- overflow: hidden;
1822
- text-overflow: ellipsis;
1823
- white-space: nowrap;
1827
+ }
1828
+ .rs-avatar-icon {
1829
+ position: absolute;
1830
+ }
1831
+ .rs-avatar-bordered {
1832
+ --rs-ring-offset-shadow: var(--rs-avatar-offset-color) 0 0 0 2px;
1833
+ --rs-ring-shadow: var(--rs-avatar-ring-color) 0 0 0 4px;
1834
+ -webkit-box-shadow: var(--rs-ring-offset-shadow), var(--rs-ring-shadow), 0 0 #0000;
1835
+ box-shadow: var(--rs-ring-offset-shadow), var(--rs-ring-shadow), 0 0 #0000;
1824
1836
  }
1825
1837
  .rs-avatar-circle {
1826
1838
  border-radius: 50%;
1827
1839
  }
1840
+ .rs-avatar-xxl {
1841
+ width: 120px;
1842
+ height: 120px;
1843
+ font-size: 48px;
1844
+ }
1845
+ .rs-avatar-xxl > .rs-icon {
1846
+ font-size: 84px;
1847
+ height: 84px;
1848
+ }
1849
+ .rs-avatar-xxl > .rs-avatar-image {
1850
+ width: 120px;
1851
+ height: 120px;
1852
+ line-height: 120px;
1853
+ }
1854
+ .rs-avatar-xl {
1855
+ width: 90px;
1856
+ height: 90px;
1857
+ font-size: 36px;
1858
+ }
1859
+ .rs-avatar-xl > .rs-icon {
1860
+ font-size: 63px;
1861
+ height: 63px;
1862
+ }
1863
+ .rs-avatar-xl > .rs-avatar-image {
1864
+ width: 90px;
1865
+ height: 90px;
1866
+ line-height: 90px;
1867
+ }
1828
1868
  .rs-avatar-lg {
1829
1869
  width: 60px;
1830
1870
  height: 60px;
@@ -1867,6 +1907,34 @@ tbody.rs-anim-collapse.rs-anim-in {
1867
1907
  height: 20px;
1868
1908
  line-height: 20px;
1869
1909
  }
1910
+ .rs-avatar-red {
1911
+ --rs-avatar-bg: var(--rs-red-500);
1912
+ --rs-avatar-ring-color: var(--rs-red-500);
1913
+ }
1914
+ .rs-avatar-orange {
1915
+ --rs-avatar-bg: var(--rs-orange-500);
1916
+ --rs-avatar-ring-color: var(--rs-orange-500);
1917
+ }
1918
+ .rs-avatar-yellow {
1919
+ --rs-avatar-bg: var(--rs-yellow-500);
1920
+ --rs-avatar-ring-color: var(--rs-yellow-500);
1921
+ }
1922
+ .rs-avatar-green {
1923
+ --rs-avatar-bg: var(--rs-green-500);
1924
+ --rs-avatar-ring-color: var(--rs-green-500);
1925
+ }
1926
+ .rs-avatar-cyan {
1927
+ --rs-avatar-bg: var(--rs-cyan-500);
1928
+ --rs-avatar-ring-color: var(--rs-cyan-500);
1929
+ }
1930
+ .rs-avatar-blue {
1931
+ --rs-avatar-bg: var(--rs-blue-500);
1932
+ --rs-avatar-ring-color: var(--rs-blue-500);
1933
+ }
1934
+ .rs-avatar-violet {
1935
+ --rs-avatar-bg: var(--rs-violet-500);
1936
+ --rs-avatar-ring-color: var(--rs-violet-500);
1937
+ }
1870
1938
  .rs-avatar-group {
1871
1939
  display: -webkit-box;
1872
1940
  display: -ms-flexbox;
@@ -1874,6 +1942,8 @@ tbody.rs-anim-collapse.rs-anim-in {
1874
1942
  -webkit-box-align: end;
1875
1943
  -ms-flex-align: end;
1876
1944
  align-items: flex-end;
1945
+ -ms-flex-wrap: wrap;
1946
+ flex-wrap: wrap;
1877
1947
  }
1878
1948
  .rs-avatar-group-stack .rs-avatar {
1879
1949
  -webkit-box-sizing: content-box;
@@ -4229,6 +4299,8 @@ tbody.rs-anim-collapse.rs-anim-in {
4229
4299
  right: -10px;
4230
4300
  bottom: -10px;
4231
4301
  left: -10px;
4302
+ min-width: 36px;
4303
+ min-height: 36px;
4232
4304
  }
4233
4305
  .rs-checkbox-control::before,
4234
4306
  .rs-checkbox-control .rs-checkbox-inner::before,
@@ -4975,6 +5047,9 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
4975
5047
  width: 100%;
4976
5048
  height: 100%;
4977
5049
  }
5050
+ .rs-drawer-wrapper.rs-drawer-no-backdrop {
5051
+ pointer-events: none;
5052
+ }
4978
5053
  .rs-drawer {
4979
5054
  display: none;
4980
5055
  overflow: hidden;
@@ -4984,6 +5059,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
4984
5059
  -webkit-box-shadow: var(--rs-drawer-shadow);
4985
5060
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
4986
5061
  box-shadow: var(--rs-drawer-shadow);
5062
+ pointer-events: auto;
4987
5063
  outline: 0;
4988
5064
  }
4989
5065
  .rs-drawer-open.rs-drawer-has-backdrop {
@@ -11478,12 +11554,40 @@ textarea.rs-inline-edit-sm .rs-plaintext {
11478
11554
  background: var(--rs-bg-card);
11479
11555
  position: absolute;
11480
11556
  }
11481
- .rs-placeholder-paragraph-rows {
11557
+ .rs-placeholder-paragraph-group {
11558
+ width: 100%;
11559
+ }
11560
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(9) {
11561
+ width: 75%;
11562
+ }
11563
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(8) {
11564
+ width: 60%;
11565
+ }
11566
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(7) {
11567
+ width: 85%;
11568
+ }
11569
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(6) {
11570
+ width: 70%;
11571
+ }
11572
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(5) {
11573
+ width: 90%;
11574
+ }
11575
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(4) {
11576
+ width: 65%;
11577
+ }
11578
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(3) {
11579
+ width: 80%;
11580
+ }
11581
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(2) {
11582
+ width: 50%;
11583
+ }
11584
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(1) {
11482
11585
  width: 100%;
11483
11586
  }
11484
- .rs-placeholder-paragraph-rows > p {
11587
+ .rs-placeholder-row {
11485
11588
  background-color: #f2f2f5;
11486
11589
  background-color: var(--rs-placeholder);
11590
+ width: 100%;
11487
11591
  }
11488
11592
  .rs-placeholder-grid-col {
11489
11593
  -webkit-box-flex: 1;
@@ -11500,15 +11604,23 @@ textarea.rs-inline-edit-sm .rs-plaintext {
11500
11604
  -ms-flex-align: end;
11501
11605
  align-items: flex-end;
11502
11606
  }
11503
- .rs-placeholder-grid-col > p {
11504
- background-color: #f2f2f5;
11505
- background-color: var(--rs-placeholder);
11506
- }
11507
11607
  .rs-placeholder-grid-col:first-child {
11508
11608
  -webkit-box-align: start;
11509
11609
  -ms-flex-align: start;
11510
11610
  align-items: flex-start;
11511
11611
  }
11612
+ .rs-placeholder-grid-col .rs-placeholder-row {
11613
+ width: 30%;
11614
+ }
11615
+ .rs-placeholder-grid-col .rs-placeholder-row:nth-child(3) {
11616
+ width: 35%;
11617
+ }
11618
+ .rs-placeholder-grid-col .rs-placeholder-row:nth-child(2) {
11619
+ width: 25%;
11620
+ }
11621
+ .rs-placeholder-grid-col .rs-placeholder-row:nth-child(1) {
11622
+ width: 50%;
11623
+ }
11512
11624
  .rs-placeholder-graph {
11513
11625
  display: inline-block;
11514
11626
  width: 100%;
@@ -12647,6 +12759,9 @@ textarea.rs-inline-edit-sm .rs-plaintext {
12647
12759
  -webkit-transition: none;
12648
12760
  transition: none;
12649
12761
  }
12762
+ .rs-sidenav-nav .rs-dropdown-item {
12763
+ display: block;
12764
+ }
12650
12765
  .rs-sidenav-nav > .rs-sidenav-item,
12651
12766
  .rs-sidenav-nav > .rs-dropdown {
12652
12767
  margin: 0 !important;