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-no-reset.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);
@@ -1554,13 +1560,47 @@ tbody.rs-anim-collapse.rs-anim-in {
1554
1560
  background: var(--rs-avatar-bg);
1555
1561
  text-align: center;
1556
1562
  padding: 0 2px;
1557
- overflow: hidden;
1558
- text-overflow: ellipsis;
1559
- white-space: nowrap;
1563
+ }
1564
+ .rs-avatar-icon {
1565
+ position: absolute;
1566
+ }
1567
+ .rs-avatar-bordered {
1568
+ --rs-ring-offset-shadow: var(--rs-avatar-offset-color) 0 0 0 2px;
1569
+ --rs-ring-shadow: var(--rs-avatar-ring-color) 0 0 0 4px;
1570
+ -webkit-box-shadow: var(--rs-ring-offset-shadow), var(--rs-ring-shadow), 0 0 #0000;
1571
+ box-shadow: var(--rs-ring-offset-shadow), var(--rs-ring-shadow), 0 0 #0000;
1560
1572
  }
1561
1573
  .rs-avatar-circle {
1562
1574
  border-radius: 50%;
1563
1575
  }
1576
+ .rs-avatar-xxl {
1577
+ width: 120px;
1578
+ height: 120px;
1579
+ font-size: 48px;
1580
+ }
1581
+ .rs-avatar-xxl > .rs-icon {
1582
+ font-size: 84px;
1583
+ height: 84px;
1584
+ }
1585
+ .rs-avatar-xxl > .rs-avatar-image {
1586
+ width: 120px;
1587
+ height: 120px;
1588
+ line-height: 120px;
1589
+ }
1590
+ .rs-avatar-xl {
1591
+ width: 90px;
1592
+ height: 90px;
1593
+ font-size: 36px;
1594
+ }
1595
+ .rs-avatar-xl > .rs-icon {
1596
+ font-size: 63px;
1597
+ height: 63px;
1598
+ }
1599
+ .rs-avatar-xl > .rs-avatar-image {
1600
+ width: 90px;
1601
+ height: 90px;
1602
+ line-height: 90px;
1603
+ }
1564
1604
  .rs-avatar-lg {
1565
1605
  width: 60px;
1566
1606
  height: 60px;
@@ -1603,6 +1643,34 @@ tbody.rs-anim-collapse.rs-anim-in {
1603
1643
  height: 20px;
1604
1644
  line-height: 20px;
1605
1645
  }
1646
+ .rs-avatar-red {
1647
+ --rs-avatar-bg: var(--rs-red-500);
1648
+ --rs-avatar-ring-color: var(--rs-red-500);
1649
+ }
1650
+ .rs-avatar-orange {
1651
+ --rs-avatar-bg: var(--rs-orange-500);
1652
+ --rs-avatar-ring-color: var(--rs-orange-500);
1653
+ }
1654
+ .rs-avatar-yellow {
1655
+ --rs-avatar-bg: var(--rs-yellow-500);
1656
+ --rs-avatar-ring-color: var(--rs-yellow-500);
1657
+ }
1658
+ .rs-avatar-green {
1659
+ --rs-avatar-bg: var(--rs-green-500);
1660
+ --rs-avatar-ring-color: var(--rs-green-500);
1661
+ }
1662
+ .rs-avatar-cyan {
1663
+ --rs-avatar-bg: var(--rs-cyan-500);
1664
+ --rs-avatar-ring-color: var(--rs-cyan-500);
1665
+ }
1666
+ .rs-avatar-blue {
1667
+ --rs-avatar-bg: var(--rs-blue-500);
1668
+ --rs-avatar-ring-color: var(--rs-blue-500);
1669
+ }
1670
+ .rs-avatar-violet {
1671
+ --rs-avatar-bg: var(--rs-violet-500);
1672
+ --rs-avatar-ring-color: var(--rs-violet-500);
1673
+ }
1606
1674
  .rs-avatar-group {
1607
1675
  display: -webkit-box;
1608
1676
  display: -ms-flexbox;
@@ -4711,6 +4779,9 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
4711
4779
  width: 100%;
4712
4780
  height: 100%;
4713
4781
  }
4782
+ .rs-drawer-wrapper.rs-drawer-no-backdrop {
4783
+ pointer-events: none;
4784
+ }
4714
4785
  .rs-drawer {
4715
4786
  display: none;
4716
4787
  overflow: hidden;
@@ -4720,6 +4791,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
4720
4791
  -webkit-box-shadow: var(--rs-drawer-shadow);
4721
4792
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
4722
4793
  box-shadow: var(--rs-drawer-shadow);
4794
+ pointer-events: auto;
4723
4795
  outline: 0;
4724
4796
  }
4725
4797
  .rs-drawer-open.rs-drawer-has-backdrop {