@douyinfe/semi-ui 2.1.6-alpha.0 → 2.2.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 (97) hide show
  1. package/_base/_story/a11y.jsx +1302 -0
  2. package/_base/_story/a11y.scss +49 -0
  3. package/_base/_story/index.stories.js +3 -1
  4. package/_utils/index.ts +9 -4
  5. package/cascader/__test__/cascader.test.js +221 -0
  6. package/cascader/_story/cascader.stories.js +138 -0
  7. package/cascader/index.tsx +37 -21
  8. package/cascader/item.tsx +4 -2
  9. package/datePicker/__test__/datePicker.test.js +100 -2
  10. package/datePicker/_story/datePicker.stories.js +90 -1
  11. package/datePicker/_story/v2/YearButton.jsx +17 -0
  12. package/datePicker/_story/v2/index.js +1 -0
  13. package/datePicker/datePicker.tsx +3 -0
  14. package/datePicker/monthsGrid.tsx +12 -1
  15. package/datePicker/navigation.tsx +55 -29
  16. package/descriptions/__test__/descriptions.test.js +27 -1
  17. package/descriptions/_story/descriptions.stories.js +52 -2
  18. package/descriptions/item.tsx +1 -1
  19. package/dist/css/semi.css +72 -28
  20. package/dist/css/semi.min.css +1 -1
  21. package/dist/umd/semi-ui.js +1086 -468
  22. package/dist/umd/semi-ui.js.map +1 -1
  23. package/dist/umd/semi-ui.min.js +1 -1
  24. package/dist/umd/semi-ui.min.js.map +1 -1
  25. package/empty/index.tsx +2 -2
  26. package/gulpfile.js +2 -1
  27. package/lib/cjs/_utils/index.d.ts +1 -0
  28. package/lib/cjs/_utils/index.js +12 -5
  29. package/lib/cjs/cascader/index.d.ts +7 -0
  30. package/lib/cjs/cascader/index.js +35 -22
  31. package/lib/cjs/cascader/item.d.ts +2 -0
  32. package/lib/cjs/cascader/item.js +4 -2
  33. package/lib/cjs/datePicker/datePicker.js +4 -0
  34. package/lib/cjs/datePicker/monthsGrid.d.ts +1 -0
  35. package/lib/cjs/datePicker/monthsGrid.js +6 -0
  36. package/lib/cjs/datePicker/navigation.js +47 -7
  37. package/lib/cjs/descriptions/item.js +1 -1
  38. package/lib/cjs/empty/index.d.ts +2 -2
  39. package/lib/cjs/empty/index.js +19 -18
  40. package/lib/cjs/form/baseForm.d.ts +6 -1
  41. package/lib/cjs/form/field.d.ts +6 -1
  42. package/lib/cjs/locale/source/es.d.ts +7 -0
  43. package/lib/cjs/locale/source/es.js +168 -0
  44. package/lib/cjs/rating/item.js +1 -1
  45. package/lib/cjs/select/index.d.ts +9 -0
  46. package/lib/cjs/select/index.js +10 -8
  47. package/lib/cjs/tabs/index.js +3 -7
  48. package/lib/cjs/timeline/item.d.ts +3 -0
  49. package/lib/cjs/timeline/item.js +10 -4
  50. package/lib/cjs/typography/title.d.ts +1 -1
  51. package/lib/cjs/upload/fileCard.d.ts +2 -0
  52. package/lib/cjs/upload/fileCard.js +70 -45
  53. package/lib/cjs/upload/index.d.ts +23 -2
  54. package/lib/cjs/upload/index.js +133 -25
  55. package/lib/cjs/upload/interface.d.ts +3 -0
  56. package/lib/es/_utils/index.d.ts +1 -0
  57. package/lib/es/_utils/index.js +12 -5
  58. package/lib/es/cascader/index.d.ts +7 -0
  59. package/lib/es/cascader/index.js +34 -25
  60. package/lib/es/cascader/item.d.ts +2 -0
  61. package/lib/es/cascader/item.js +4 -2
  62. package/lib/es/datePicker/datePicker.js +4 -0
  63. package/lib/es/datePicker/monthsGrid.d.ts +1 -0
  64. package/lib/es/datePicker/monthsGrid.js +6 -0
  65. package/lib/es/datePicker/navigation.js +48 -8
  66. package/lib/es/descriptions/item.js +1 -1
  67. package/lib/es/empty/index.d.ts +2 -2
  68. package/lib/es/empty/index.js +19 -18
  69. package/lib/es/form/baseForm.d.ts +6 -1
  70. package/lib/es/form/field.d.ts +6 -1
  71. package/lib/es/locale/source/es.d.ts +7 -0
  72. package/lib/es/locale/source/es.js +157 -0
  73. package/lib/es/rating/item.js +1 -1
  74. package/lib/es/select/index.d.ts +9 -0
  75. package/lib/es/select/index.js +14 -8
  76. package/lib/es/tabs/index.js +1 -5
  77. package/lib/es/timeline/item.d.ts +3 -0
  78. package/lib/es/timeline/item.js +9 -4
  79. package/lib/es/typography/title.d.ts +1 -1
  80. package/lib/es/upload/fileCard.d.ts +2 -0
  81. package/lib/es/upload/fileCard.js +69 -44
  82. package/lib/es/upload/index.d.ts +23 -2
  83. package/lib/es/upload/index.js +133 -24
  84. package/lib/es/upload/interface.d.ts +3 -0
  85. package/locale/source/es.ts +160 -0
  86. package/package.json +9 -9
  87. package/popover/Arrow.tsx +1 -1
  88. package/rating/item.tsx +1 -1
  89. package/select/_story/select.stories.js +25 -0
  90. package/select/index.tsx +17 -6
  91. package/tabs/index.tsx +1 -1
  92. package/timeline/_story/timeline.stories.js +50 -0
  93. package/timeline/item.tsx +7 -2
  94. package/upload/__test__/upload.test.js +50 -1
  95. package/upload/fileCard.tsx +110 -95
  96. package/upload/index.tsx +147 -53
  97. package/upload/interface.ts +3 -0
package/dist/css/semi.css CHANGED
@@ -2685,11 +2685,11 @@ body[theme-mode=dark], body .semi-always-dark {
2685
2685
  .semi-cascader-selection-tag:first-child {
2686
2686
  margin-left: 0;
2687
2687
  }
2688
- .semi-cascader-selection-tag-disabled {
2688
+ .semi-cascader-selection-tag-disabled.semi-tag {
2689
2689
  color: var(--semi-color-disabled-text);
2690
2690
  cursor: not-allowed;
2691
2691
  }
2692
- .semi-cascader-selection-tag-disabled .semi-tag-close {
2692
+ .semi-cascader-selection-tag-disabled.semi-tag .semi-tag-close {
2693
2693
  color: var(--semi-color-disabled-text);
2694
2694
  cursor: not-allowed;
2695
2695
  pointer-events: none;
@@ -3497,6 +3497,9 @@ body[theme-mode=dark], body .semi-always-dark {
3497
3497
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
3498
3498
  min-height: 24px;
3499
3499
  }
3500
+ .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks {
3501
+ min-height: 216px;
3502
+ }
3500
3503
  .semi-datepicker-panel-yam {
3501
3504
  max-width: 284px;
3502
3505
  }
@@ -3521,6 +3524,12 @@ body[theme-mode=dark], body .semi-always-dark {
3521
3524
  text-align: right;
3522
3525
  background-color: var(--semi-color-fill-0);
3523
3526
  }
3527
+ .semi-datepicker-footer .semi-button:first-of-type {
3528
+ margin-right: 12px;
3529
+ }
3530
+ .semi-datepicker-footer .semi-button:nth-of-type(2) {
3531
+ margin-right: 8px;
3532
+ }
3524
3533
  .semi-datepicker-yam {
3525
3534
  position: absolute;
3526
3535
  top: 0;
@@ -3986,6 +3995,9 @@ body[theme-mode=dark], body .semi-always-dark {
3986
3995
  .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel .semi-scrolllist-shade-post {
3987
3996
  margin-top: 17px;
3988
3997
  }
3998
+ .semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks {
3999
+ min-height: 168px;
4000
+ }
3989
4001
  .semi-datepicker-compact.semi-datepicker-panel-yam .semi-scrolllist {
3990
4002
  font-size: 12px;
3991
4003
  line-height: 16px;
@@ -4125,6 +4137,16 @@ body[theme-mode=dark], body .semi-always-dark {
4125
4137
  padding-left: 8px;
4126
4138
  text-align: left;
4127
4139
  }
4140
+ .semi-rtl .semi-datepicker-footer .semi-button:first-of-type,
4141
+ .semi-portal-rtl .semi-datepicker-footer .semi-button:first-of-type {
4142
+ margin-left: 0;
4143
+ margin-right: 0;
4144
+ }
4145
+ .semi-rtl .semi-datepicker-footer .semi-button:nth-of-type(2),
4146
+ .semi-portal-rtl .semi-datepicker-footer .semi-button:nth-of-type(2) {
4147
+ margin-right: 12px;
4148
+ margin-left: 0;
4149
+ }
4128
4150
  .semi-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main,
4129
4151
  .semi-portal-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main {
4130
4152
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
@@ -4160,12 +4182,20 @@ body[theme-mode=dark], body .semi-always-dark {
4160
4182
  margin-right: 8px;
4161
4183
  }
4162
4184
  .semi-rtl .semi-datepicker-navigation .semi-icon-chevron_left,
4163
- .semi-rtl .semi-datepicker-navigation .semi-icon-chevron_right, .semi-rtl .semi-datepicker-yam .semi-icon-chevron_left,
4185
+ .semi-rtl .semi-datepicker-navigation .semi-icon-chevron_right,
4186
+ .semi-rtl .semi-datepicker-navigation .semi-icon-double_chevron_left,
4187
+ .semi-rtl .semi-datepicker-navigation .semi-icon-double_chevron_right, .semi-rtl .semi-datepicker-yam .semi-icon-chevron_left,
4164
4188
  .semi-rtl .semi-datepicker-yam .semi-icon-chevron_right,
4189
+ .semi-rtl .semi-datepicker-yam .semi-icon-double_chevron_left,
4190
+ .semi-rtl .semi-datepicker-yam .semi-icon-double_chevron_right,
4165
4191
  .semi-portal-rtl .semi-datepicker-navigation .semi-icon-chevron_left,
4166
4192
  .semi-portal-rtl .semi-datepicker-navigation .semi-icon-chevron_right,
4193
+ .semi-portal-rtl .semi-datepicker-navigation .semi-icon-double_chevron_left,
4194
+ .semi-portal-rtl .semi-datepicker-navigation .semi-icon-double_chevron_right,
4167
4195
  .semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_left,
4168
- .semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_right {
4196
+ .semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_right,
4197
+ .semi-portal-rtl .semi-datepicker-yam .semi-icon-double_chevron_left,
4198
+ .semi-portal-rtl .semi-datepicker-yam .semi-icon-double_chevron_right {
4169
4199
  transform: scaleX(-1);
4170
4200
  }
4171
4201
  .semi-rtl .semi-datepicker-range-input-prefix,
@@ -13025,19 +13055,23 @@ body[theme-mode=dark], body .semi-always-dark {
13025
13055
  color: var(--semi-color-success);
13026
13056
  }
13027
13057
  .semi-notification-notice-light.semi-notification-notice-warning {
13028
- background-color: var(--semi-color-warning-light-default);
13058
+ background-image: linear-gradient(0deg, var(--semi-color-warning-light-default), var(--semi-color-warning-light-default));
13059
+ background-color: var(--semi-color-bg-0);
13029
13060
  border: 1px solid var(--semi-color-warning);
13030
13061
  }
13031
13062
  .semi-notification-notice-light.semi-notification-notice-success {
13032
- background-color: var(--semi-color-success-light-default);
13063
+ background-image: linear-gradient(0deg, var(--semi-color-success-light-default), var(--semi-color-success-light-default));
13064
+ background-color: var(--semi-color-bg-0);
13033
13065
  border: 1px solid var(--semi-color-success);
13034
13066
  }
13035
13067
  .semi-notification-notice-light.semi-notification-notice-info, .semi-notification-notice-light.semi-notification-notice-default {
13036
- background-color: var(--semi-color-info-light-default);
13068
+ background-image: linear-gradient(0deg, var(--semi-color-info-light-default), var(--semi-color-info-light-default));
13069
+ background-color: var(--semi-color-bg-0);
13037
13070
  border: 1px solid var(--semi-color-info);
13038
13071
  }
13039
13072
  .semi-notification-notice-light.semi-notification-notice-error {
13040
- background-color: var(--semi-color-danger-light-default);
13073
+ background-image: linear-gradient(0deg, var(--semi-color-danger-light-default), var(--semi-color-danger-light-default));
13074
+ background-color: var(--semi-color-bg-0);
13041
13075
  border: 1px solid var(--semi-color-danger);
13042
13076
  }
13043
13077
  .semi-notification-notice-title {
@@ -16094,12 +16128,10 @@ body[theme-mode=dark], body .semi-always-dark {
16094
16128
  color: var(--semi-color-text-0);
16095
16129
  width: 100%;
16096
16130
  }
16097
- .semi-table-middle .semi-table-thead > .semi-table-row > .semi-table-row-head,
16098
16131
  .semi-table-middle .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
16099
16132
  padding-top: 12px;
16100
16133
  padding-bottom: 12px;
16101
16134
  }
16102
- .semi-table-small .semi-table-thead > .semi-table-row > .semi-table-row-head,
16103
16135
  .semi-table-small .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
16104
16136
  padding-top: 8px;
16105
16137
  padding-bottom: 8px;
@@ -19402,6 +19434,8 @@ p.semi-typography-extended,
19402
19434
  display: flex;
19403
19435
  flex-wrap: wrap;
19404
19436
  flex-shrink: 0;
19437
+ gap: 8px;
19438
+ margin-bottom: 8px;
19405
19439
  }
19406
19440
  .semi-upload-file-list-main p {
19407
19441
  display: flex;
@@ -19428,8 +19462,6 @@ p.semi-typography-extended,
19428
19462
  justify-content: space-between;
19429
19463
  height: 52px;
19430
19464
  width: 250px;
19431
- margin-right: 8px;
19432
- margin-bottom: 8px;
19433
19465
  background-color: var(--semi-color-fill-0);
19434
19466
  cursor: pointer;
19435
19467
  }
@@ -19564,16 +19596,16 @@ p.semi-typography-extended,
19564
19596
  flex-direction: column;
19565
19597
  }
19566
19598
  .semi-upload-picture[x-prompt-pos=bottom] .semi-upload-prompt {
19567
- order: 2;
19599
+ order: 1;
19568
19600
  }
19569
19601
  .semi-upload-picture[x-prompt-pos=bottom] .semi-upload-add {
19570
- order: 1;
19602
+ order: 0;
19571
19603
  }
19572
19604
  .semi-upload-picture[x-prompt-pos=right] .semi-upload-prompt {
19573
- order: 2;
19605
+ order: 1;
19574
19606
  }
19575
19607
  .semi-upload-picture[x-prompt-pos=right] .semi-upload-add {
19576
- order: 1;
19608
+ order: 0;
19577
19609
  }
19578
19610
  .semi-upload-picture-add {
19579
19611
  background-color: var(--semi-color-fill-0);
@@ -19610,11 +19642,14 @@ p.semi-typography-extended,
19610
19642
  margin-bottom: 0;
19611
19643
  }
19612
19644
  .semi-upload-picture-file-card {
19645
+ display: flex;
19646
+ align-items: center;
19647
+ justify-content: center;
19613
19648
  height: 96px;
19614
19649
  width: 96px;
19650
+ border-radius: var(--semi-border-radius-small);
19615
19651
  position: relative;
19616
- margin-right: 8px;
19617
- margin-bottom: 8px;
19652
+ overflow: hidden;
19618
19653
  }
19619
19654
  .semi-upload-picture-file-card img {
19620
19655
  height: 96px;
@@ -19679,6 +19714,22 @@ p.semi-typography-extended,
19679
19714
  color: var(--semi-color-white);
19680
19715
  transform: translate3D(-50%, -50%, 0);
19681
19716
  }
19717
+ .semi-upload-picture-file-card-pic-info {
19718
+ display: inline-flex;
19719
+ box-sizing: border-box;
19720
+ justify-content: space-between;
19721
+ align-items: center;
19722
+ position: absolute;
19723
+ width: 100%;
19724
+ height: 24px;
19725
+ padding: 0 10px;
19726
+ bottom: 0;
19727
+ left: 0;
19728
+ color: var(--semi-color-white);
19729
+ font-size: 12px;
19730
+ font-weight: 600;
19731
+ background: linear-gradient(0deg, rgba(22, 22, 26, 0.3) 0%, rgba(22, 22, 26, 0) 77.08%);
19732
+ }
19682
19733
  .semi-upload-picture-file-card-icon-loading, .semi-upload-picture-file-card-icon-error {
19683
19734
  position: absolute;
19684
19735
  bottom: 6px;
@@ -19691,6 +19742,9 @@ p.semi-typography-extended,
19691
19742
  .semi-upload-picture-file-card-show-pointer {
19692
19743
  cursor: pointer;
19693
19744
  }
19745
+ .semi-upload-picture-file-card-error {
19746
+ outline: 1px solid var(--semi-color-danger);
19747
+ }
19694
19748
  .semi-upload-drag-area {
19695
19749
  border-radius: var(--semi-border-radius-small);
19696
19750
  border: 2px dashed var(--semi-color-border);
@@ -19771,11 +19825,6 @@ p.semi-typography-extended,
19771
19825
  .semi-portal-rtl .semi-upload-file-list-title-clear {
19772
19826
  display: inline-block;
19773
19827
  }
19774
- .semi-rtl .semi-upload-file-card,
19775
- .semi-portal-rtl .semi-upload-file-card {
19776
- margin-right: 0;
19777
- margin-left: 8px;
19778
- }
19779
19828
  .semi-rtl .semi-upload-file-card-info-size,
19780
19829
  .semi-portal-rtl .semi-upload-file-card-info-size {
19781
19830
  margin-left: 0;
@@ -19792,11 +19841,6 @@ p.semi-typography-extended,
19792
19841
  margin-right: 0;
19793
19842
  margin-left: 2px;
19794
19843
  }
19795
- .semi-rtl .semi-upload-picture-file-card,
19796
- .semi-portal-rtl .semi-upload-picture-file-card {
19797
- margin-right: 0;
19798
- margin-left: 8px;
19799
- }
19800
19844
  .semi-rtl .semi-upload-picture-file-card-close,
19801
19845
  .semi-portal-rtl .semi-upload-picture-file-card-close {
19802
19846
  right: auto;