rsuite 5.58.1 → 5.59.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 (47) 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/CHANGELOG.md +15 -0
  5. package/Drawer/styles/index.css +4 -0
  6. package/Drawer/styles/index.less +5 -0
  7. package/cjs/Avatar/Avatar.d.ts +30 -5
  8. package/cjs/Avatar/Avatar.js +47 -21
  9. package/cjs/Avatar/AvatarIcon.d.ts +3 -0
  10. package/cjs/Avatar/AvatarIcon.js +24 -0
  11. package/cjs/Avatar/useImage.d.ts +39 -0
  12. package/cjs/Avatar/useImage.js +75 -0
  13. package/cjs/AvatarGroup/AvatarGroup.d.ts +14 -6
  14. package/cjs/DateInput/DateField.js +5 -0
  15. package/cjs/Modal/Modal.js +36 -21
  16. package/cjs/internals/Overlay/Modal.js +2 -1
  17. package/dist/rsuite-no-reset-rtl.css +75 -3
  18. package/dist/rsuite-no-reset-rtl.min.css +1 -1
  19. package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
  20. package/dist/rsuite-no-reset.css +75 -3
  21. package/dist/rsuite-no-reset.min.css +1 -1
  22. package/dist/rsuite-no-reset.min.css.map +1 -1
  23. package/dist/rsuite-rtl.css +75 -3
  24. package/dist/rsuite-rtl.min.css +1 -1
  25. package/dist/rsuite-rtl.min.css.map +1 -1
  26. package/dist/rsuite.css +75 -3
  27. package/dist/rsuite.js +27 -5
  28. package/dist/rsuite.js.map +1 -1
  29. package/dist/rsuite.min.css +1 -1
  30. package/dist/rsuite.min.css.map +1 -1
  31. package/dist/rsuite.min.js +1 -1
  32. package/dist/rsuite.min.js.map +1 -1
  33. package/esm/Avatar/Avatar.d.ts +30 -5
  34. package/esm/Avatar/Avatar.js +48 -22
  35. package/esm/Avatar/AvatarIcon.d.ts +3 -0
  36. package/esm/Avatar/AvatarIcon.js +18 -0
  37. package/esm/Avatar/useImage.d.ts +39 -0
  38. package/esm/Avatar/useImage.js +70 -0
  39. package/esm/AvatarGroup/AvatarGroup.d.ts +14 -6
  40. package/esm/DateInput/DateField.js +5 -0
  41. package/esm/Modal/Modal.js +36 -21
  42. package/esm/internals/Overlay/Modal.js +2 -1
  43. package/package.json +1 -1
  44. package/styles/color-modes/dark.less +2 -0
  45. package/styles/color-modes/high-contrast.less +2 -0
  46. package/styles/color-modes/light.less +2 -0
  47. package/styles/variables.less +12 -20
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;
@@ -4969,6 +5037,9 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
4969
5037
  width: 100%;
4970
5038
  height: 100%;
4971
5039
  }
5040
+ .rs-drawer-wrapper.rs-drawer-no-backdrop {
5041
+ pointer-events: none;
5042
+ }
4972
5043
  .rs-drawer {
4973
5044
  display: none;
4974
5045
  overflow: hidden;
@@ -4978,6 +5049,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
4978
5049
  -webkit-box-shadow: var(--rs-drawer-shadow);
4979
5050
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
4980
5051
  box-shadow: var(--rs-drawer-shadow);
5052
+ pointer-events: auto;
4981
5053
  outline: 0;
4982
5054
  }
4983
5055
  .rs-drawer-open.rs-drawer-has-backdrop {