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-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;
@@ -1610,6 +1678,8 @@ tbody.rs-anim-collapse.rs-anim-in {
1610
1678
  -webkit-box-align: end;
1611
1679
  -ms-flex-align: end;
1612
1680
  align-items: flex-end;
1681
+ -ms-flex-wrap: wrap;
1682
+ flex-wrap: wrap;
1613
1683
  }
1614
1684
  .rs-avatar-group-stack .rs-avatar {
1615
1685
  -webkit-box-sizing: content-box;
@@ -3965,6 +4035,8 @@ tbody.rs-anim-collapse.rs-anim-in {
3965
4035
  right: -10px;
3966
4036
  bottom: -10px;
3967
4037
  left: -10px;
4038
+ min-width: 36px;
4039
+ min-height: 36px;
3968
4040
  }
3969
4041
  .rs-checkbox-control::before,
3970
4042
  .rs-checkbox-control .rs-checkbox-inner::before,
@@ -4711,6 +4783,9 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
4711
4783
  width: 100%;
4712
4784
  height: 100%;
4713
4785
  }
4786
+ .rs-drawer-wrapper.rs-drawer-no-backdrop {
4787
+ pointer-events: none;
4788
+ }
4714
4789
  .rs-drawer {
4715
4790
  display: none;
4716
4791
  overflow: hidden;
@@ -4720,6 +4795,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
4720
4795
  -webkit-box-shadow: var(--rs-drawer-shadow);
4721
4796
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
4722
4797
  box-shadow: var(--rs-drawer-shadow);
4798
+ pointer-events: auto;
4723
4799
  outline: 0;
4724
4800
  }
4725
4801
  .rs-drawer-open.rs-drawer-has-backdrop {
@@ -11214,12 +11290,40 @@ textarea.rs-inline-edit-sm .rs-plaintext {
11214
11290
  background: var(--rs-bg-card);
11215
11291
  position: absolute;
11216
11292
  }
11217
- .rs-placeholder-paragraph-rows {
11293
+ .rs-placeholder-paragraph-group {
11294
+ width: 100%;
11295
+ }
11296
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(9) {
11297
+ width: 75%;
11298
+ }
11299
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(8) {
11300
+ width: 60%;
11301
+ }
11302
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(7) {
11303
+ width: 85%;
11304
+ }
11305
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(6) {
11306
+ width: 70%;
11307
+ }
11308
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(5) {
11309
+ width: 90%;
11310
+ }
11311
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(4) {
11312
+ width: 65%;
11313
+ }
11314
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(3) {
11315
+ width: 80%;
11316
+ }
11317
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(2) {
11318
+ width: 50%;
11319
+ }
11320
+ .rs-placeholder-paragraph .rs-placeholder-row:nth-child(1) {
11218
11321
  width: 100%;
11219
11322
  }
11220
- .rs-placeholder-paragraph-rows > p {
11323
+ .rs-placeholder-row {
11221
11324
  background-color: #f2f2f5;
11222
11325
  background-color: var(--rs-placeholder);
11326
+ width: 100%;
11223
11327
  }
11224
11328
  .rs-placeholder-grid-col {
11225
11329
  -webkit-box-flex: 1;
@@ -11236,15 +11340,23 @@ textarea.rs-inline-edit-sm .rs-plaintext {
11236
11340
  -ms-flex-align: end;
11237
11341
  align-items: flex-end;
11238
11342
  }
11239
- .rs-placeholder-grid-col > p {
11240
- background-color: #f2f2f5;
11241
- background-color: var(--rs-placeholder);
11242
- }
11243
11343
  .rs-placeholder-grid-col:first-child {
11244
11344
  -webkit-box-align: start;
11245
11345
  -ms-flex-align: start;
11246
11346
  align-items: flex-start;
11247
11347
  }
11348
+ .rs-placeholder-grid-col .rs-placeholder-row {
11349
+ width: 30%;
11350
+ }
11351
+ .rs-placeholder-grid-col .rs-placeholder-row:nth-child(3) {
11352
+ width: 35%;
11353
+ }
11354
+ .rs-placeholder-grid-col .rs-placeholder-row:nth-child(2) {
11355
+ width: 25%;
11356
+ }
11357
+ .rs-placeholder-grid-col .rs-placeholder-row:nth-child(1) {
11358
+ width: 50%;
11359
+ }
11248
11360
  .rs-placeholder-graph {
11249
11361
  display: inline-block;
11250
11362
  width: 100%;
@@ -12383,6 +12495,9 @@ textarea.rs-inline-edit-sm .rs-plaintext {
12383
12495
  -webkit-transition: none;
12384
12496
  transition: none;
12385
12497
  }
12498
+ .rs-sidenav-nav .rs-dropdown-item {
12499
+ display: block;
12500
+ }
12386
12501
  .rs-sidenav-nav > .rs-sidenav-item,
12387
12502
  .rs-sidenav-nav > .rs-dropdown {
12388
12503
  margin: 0 !important;