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-rtl.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;
@@ -4225,6 +4295,8 @@ tbody.rs-anim-collapse.rs-anim-in {
4225
4295
  left: -10px;
4226
4296
  bottom: -10px;
4227
4297
  right: -10px;
4298
+ min-width: 36px;
4299
+ min-height: 36px;
4228
4300
  }
4229
4301
  .rs-checkbox-control::before,
4230
4302
  .rs-checkbox-control .rs-checkbox-inner::before,
@@ -4969,6 +5041,9 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
4969
5041
  width: 100%;
4970
5042
  height: 100%;
4971
5043
  }
5044
+ .rs-drawer-wrapper.rs-drawer-no-backdrop {
5045
+ pointer-events: none;
5046
+ }
4972
5047
  .rs-drawer {
4973
5048
  display: none;
4974
5049
  overflow: hidden;
@@ -4978,6 +5053,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
4978
5053
  -webkit-box-shadow: var(--rs-drawer-shadow);
4979
5054
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
4980
5055
  box-shadow: var(--rs-drawer-shadow);
5056
+ pointer-events: auto;
4981
5057
  outline: 0;
4982
5058
  }
4983
5059
  .rs-drawer-open.rs-drawer-has-backdrop {
@@ -11466,12 +11542,40 @@ textarea.rs-inline-edit-sm .rs-plaintext {
11466
11542
  background: var(--rs-bg-card);
11467
11543
  position: absolute;
11468
11544
  }
11469
- .rs-placeholder-paragraph-rows {
11545
+ .rs-placeholder-paragraph-group {
11546
+ width: 100%;
11547
+ }
11548
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(9) {
11549
+ width: 75%;
11550
+ }
11551
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(8) {
11552
+ width: 60%;
11553
+ }
11554
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(7) {
11555
+ width: 85%;
11556
+ }
11557
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(6) {
11558
+ width: 70%;
11559
+ }
11560
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(5) {
11561
+ width: 90%;
11562
+ }
11563
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(4) {
11564
+ width: 65%;
11565
+ }
11566
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(3) {
11567
+ width: 80%;
11568
+ }
11569
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(2) {
11570
+ width: 50%;
11571
+ }
11572
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(1) {
11470
11573
  width: 100%;
11471
11574
  }
11472
- .rs-placeholder-paragraph-rows > p {
11575
+ .rs-placeholder-row {
11473
11576
  background-color: #f2f2f5;
11474
11577
  background-color: var(--rs-placeholder);
11578
+ width: 100%;
11475
11579
  }
11476
11580
  .rs-placeholder-grid-col {
11477
11581
  -webkit-box-flex: 1;
@@ -11488,15 +11592,23 @@ textarea.rs-inline-edit-sm .rs-plaintext {
11488
11592
  -ms-flex-align: end;
11489
11593
  align-items: flex-end;
11490
11594
  }
11491
- .rs-placeholder-grid-col > p {
11492
- background-color: #f2f2f5;
11493
- background-color: var(--rs-placeholder);
11494
- }
11495
11595
  .rs-placeholder-grid-col:first-child {
11496
11596
  -webkit-box-align: start;
11497
11597
  -ms-flex-align: start;
11498
11598
  align-items: flex-start;
11499
11599
  }
11600
+ .rs-placeholder-grid-col .rs-placeholder-row {
11601
+ width: 30%;
11602
+ }
11603
+ .rs-placeholder-grid-col .rs-placeholder-row:nth-child(3) {
11604
+ width: 35%;
11605
+ }
11606
+ .rs-placeholder-grid-col .rs-placeholder-row:nth-child(2) {
11607
+ width: 25%;
11608
+ }
11609
+ .rs-placeholder-grid-col .rs-placeholder-row:nth-child(1) {
11610
+ width: 50%;
11611
+ }
11500
11612
  .rs-placeholder-graph {
11501
11613
  display: inline-block;
11502
11614
  width: 100%;
@@ -12631,6 +12743,9 @@ textarea.rs-inline-edit-sm .rs-plaintext {
12631
12743
  -webkit-transition: none;
12632
12744
  transition: none;
12633
12745
  }
12746
+ .rs-sidenav-nav .rs-dropdown-item {
12747
+ display: block;
12748
+ }
12634
12749
  .rs-sidenav-nav > .rs-sidenav-item,
12635
12750
  .rs-sidenav-nav > .rs-dropdown {
12636
12751
  margin: 0 !important;