@douyinfe/semi-ui 2.17.0-alpha.0 → 2.17.0-beta.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 +2 -2
  2. package/avatar/__test__/avatar.test.js +3 -3
  3. package/avatar/interface.ts +1 -1
  4. package/cascader/_story/cascader.stories.js +91 -1
  5. package/cascader/index.tsx +35 -26
  6. package/collapse/__test__/collapse.test.js +22 -2
  7. package/collapse/_story/accordion.stories.js +2 -2
  8. package/collapse/item.tsx +20 -6
  9. package/collapsible/_story/collapsible.stories.js +6 -6
  10. package/configProvider/_story/RTLDirection/RTLForm.jsx +1 -1
  11. package/datePicker/__test__/datePicker.test.js +5 -5
  12. package/datePicker/_story/datePicker.stories.js +138 -22
  13. package/datePicker/datePicker.tsx +42 -7
  14. package/datePicker/monthsGrid.tsx +22 -10
  15. package/datePicker/quickControl.tsx +62 -16
  16. package/datePicker/yearAndMonth.tsx +31 -5
  17. package/dist/css/semi.css +327 -46
  18. package/dist/css/semi.min.css +1 -1
  19. package/dist/umd/semi-ui.js +45912 -45405
  20. package/dist/umd/semi-ui.js.map +1 -1
  21. package/dist/umd/semi-ui.min.js +1 -1
  22. package/dist/umd/semi-ui.min.js.map +1 -1
  23. package/empty/index.tsx +3 -3
  24. package/lib/cjs/avatar/interface.d.ts +1 -1
  25. package/lib/cjs/cascader/index.js +36 -25
  26. package/lib/cjs/collapse/item.d.ts +8 -0
  27. package/lib/cjs/collapse/item.js +19 -8
  28. package/lib/cjs/datePicker/datePicker.d.ts +3 -0
  29. package/lib/cjs/datePicker/datePicker.js +56 -9
  30. package/lib/cjs/datePicker/monthsGrid.d.ts +3 -0
  31. package/lib/cjs/datePicker/monthsGrid.js +14 -3
  32. package/lib/cjs/datePicker/quickControl.d.ts +6 -0
  33. package/lib/cjs/datePicker/quickControl.js +61 -14
  34. package/lib/cjs/datePicker/yearAndMonth.d.ts +3 -0
  35. package/lib/cjs/datePicker/yearAndMonth.js +15 -3
  36. package/lib/cjs/empty/index.js +1 -1
  37. package/lib/cjs/popover/index.d.ts +3 -0
  38. package/lib/cjs/popover/index.js +4 -2
  39. package/lib/cjs/select/index.d.ts +6 -1
  40. package/lib/cjs/select/index.js +130 -72
  41. package/lib/cjs/select/option.js +4 -2
  42. package/lib/cjs/tag/index.js +6 -4
  43. package/lib/cjs/tag/interface.d.ts +1 -0
  44. package/lib/cjs/tagInput/index.d.ts +13 -1
  45. package/lib/cjs/tagInput/index.js +217 -91
  46. package/lib/cjs/timePicker/TimePicker.js +1 -1
  47. package/lib/cjs/tooltip/index.d.ts +4 -0
  48. package/lib/cjs/tooltip/index.js +5 -3
  49. package/lib/cjs/typography/base.js +3 -15
  50. package/lib/cjs/typography/text.js +1 -11
  51. package/lib/es/avatar/interface.d.ts +1 -1
  52. package/lib/es/cascader/index.js +40 -29
  53. package/lib/es/collapse/item.d.ts +8 -0
  54. package/lib/es/collapse/item.js +19 -8
  55. package/lib/es/datePicker/datePicker.d.ts +3 -0
  56. package/lib/es/datePicker/datePicker.js +56 -9
  57. package/lib/es/datePicker/monthsGrid.d.ts +3 -0
  58. package/lib/es/datePicker/monthsGrid.js +14 -3
  59. package/lib/es/datePicker/quickControl.d.ts +6 -0
  60. package/lib/es/datePicker/quickControl.js +61 -15
  61. package/lib/es/datePicker/yearAndMonth.d.ts +3 -0
  62. package/lib/es/datePicker/yearAndMonth.js +14 -3
  63. package/lib/es/empty/index.js +1 -1
  64. package/lib/es/popover/index.d.ts +3 -0
  65. package/lib/es/popover/index.js +4 -2
  66. package/lib/es/select/index.d.ts +6 -1
  67. package/lib/es/select/index.js +129 -71
  68. package/lib/es/select/option.js +4 -2
  69. package/lib/es/tag/index.js +6 -4
  70. package/lib/es/tag/interface.d.ts +1 -0
  71. package/lib/es/tagInput/index.d.ts +13 -1
  72. package/lib/es/tagInput/index.js +217 -93
  73. package/lib/es/timePicker/TimePicker.js +1 -1
  74. package/lib/es/tooltip/index.d.ts +4 -0
  75. package/lib/es/tooltip/index.js +5 -3
  76. package/lib/es/typography/base.js +3 -15
  77. package/lib/es/typography/text.js +1 -10
  78. package/package.json +10 -8
  79. package/popover/index.tsx +4 -1
  80. package/select/__test__/select.test.js +5 -3
  81. package/select/_story/select.stories.js +1 -1
  82. package/select/_story/select.stories.tsx +2 -2
  83. package/select/index.tsx +65 -30
  84. package/select/option.tsx +2 -0
  85. package/table/_story/Perf/Render/complex.jsx +1 -1
  86. package/table/_story/Perf/Render/resizableSelection.jsx +1 -1
  87. package/tag/index.tsx +3 -2
  88. package/tag/interface.ts +1 -0
  89. package/tagInput/_story/tagInput.stories.js +20 -2
  90. package/tagInput/index.tsx +126 -26
  91. package/timePicker/TimePicker.tsx +1 -1
  92. package/tooltip/index.tsx +5 -2
  93. package/typography/_story/typography.stories.js +3 -15
  94. package/typography/base.tsx +4 -9
  95. package/typography/text.tsx +1 -9
  96. package/upload/__test__/upload.test.js +9 -9
  97. package/upload/_story/upload.stories.js +5 -5
package/dist/css/semi.css CHANGED
@@ -3782,6 +3782,12 @@ body[theme-mode=dark], body .semi-always-dark {
3782
3782
  .semi-collapse-header:active {
3783
3783
  background-color: var(--semi-color-fill-1);
3784
3784
  }
3785
+ .semi-collapse-header-disabled {
3786
+ color: var(--semi-color-disabled-text);
3787
+ }
3788
+ .semi-collapse-header-disabled:hover {
3789
+ background-color: transparent;
3790
+ }
3785
3791
  .semi-collapse-content {
3786
3792
  padding: 4px 16px 8px 16px;
3787
3793
  color: var(--semi-color-text-1);
@@ -3840,11 +3846,11 @@ body[theme-mode=dark], body .semi-always-dark {
3840
3846
  }
3841
3847
  .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=year],
3842
3848
  .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=year] {
3843
- min-height: 312px;
3849
+ min-height: 317px;
3844
3850
  }
3845
3851
  .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=time],
3846
3852
  .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=time] {
3847
- min-height: 314px;
3853
+ min-height: 317px;
3848
3854
  }
3849
3855
  .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-navigation {
3850
3856
  padding-top: 8px;
@@ -3856,6 +3862,9 @@ body[theme-mode=dark], body .semi-always-dark {
3856
3862
  .semi-datepicker-month-grid[x-insetinput=true][x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-month-grid[x-insetinput=true][x-type=dateTimeRange] .semi-datepicker-yam {
3857
3863
  height: 100%;
3858
3864
  }
3865
+ .semi-datepicker-month-grid[x-preset-position=left][x-insetinput=false] .semi-datepicker-month, .semi-datepicker-month-grid[x-preset-position=right][x-insetinput=false] .semi-datepicker-month {
3866
+ height: 253px;
3867
+ }
3859
3868
  .semi-datepicker-month-grid .semi-datepicker-yearmonth-header {
3860
3869
  background: var(--semi-color-bg-3);
3861
3870
  padding: 12px 16px;
@@ -3903,7 +3912,7 @@ body[theme-mode=dark], body .semi-always-dark {
3903
3912
  min-height: 216px;
3904
3913
  }
3905
3914
  .semi-datepicker-panel-yam {
3906
- max-width: 284px;
3915
+ max-width: 484px;
3907
3916
  }
3908
3917
  .semi-datepicker-panel-yam .semi-scrolllist {
3909
3918
  box-shadow: none;
@@ -4163,23 +4172,147 @@ body[theme-mode=dark], body .semi-always-dark {
4163
4172
  }
4164
4173
  .semi-datepicker-quick-control {
4165
4174
  box-sizing: border-box;
4166
- border-top: 1px solid var(--semi-color-border);
4167
- display: flex;
4168
- align-items: center;
4169
4175
  background-color: transparent;
4170
- padding: 16px;
4171
- border-radius: 0 0 var(--semi-border-radius-medium) var(--semi-border-radius-medium);
4172
- flex-wrap: wrap;
4173
4176
  }
4174
- .semi-datepicker-quick-control-item {
4175
- margin-right: 8px;
4177
+ .semi-datepicker-quick-control-header {
4178
+ padding: 18px 12px 0;
4179
+ font-weight: 600;
4180
+ }
4181
+ .semi-datepicker-quick-control-left {
4182
+ border-right: 1px solid var(--semi-color-border);
4183
+ }
4184
+ .semi-datepicker-quick-control-right {
4185
+ border-left: 1px solid var(--semi-color-border);
4186
+ }
4187
+ .semi-datepicker-quick-control-top {
4188
+ border-bottom: 1px solid var(--semi-color-border);
4189
+ }
4190
+ .semi-datepicker-quick-control-bottom {
4191
+ border-top: 1px solid var(--semi-color-border);
4192
+ }
4193
+ .semi-datepicker-quick-control-left-content-wrapper, .semi-datepicker-quick-control-right-content-wrapper {
4194
+ max-width: 200px;
4195
+ margin-top: 14px;
4196
+ overflow-y: auto;
4197
+ }
4198
+ .semi-datepicker-quick-control-top-content-wrapper, .semi-datepicker-quick-control-bottom-content-wrapper {
4199
+ overflow-y: auto;
4200
+ max-height: 100px;
4201
+ }
4202
+ .semi-datepicker-quick-control-left-content, .semi-datepicker-quick-control-right-content {
4203
+ box-sizing: border-box;
4204
+ display: grid;
4205
+ align-content: flex-start;
4206
+ grid-gap: 8px;
4207
+ grid-template-columns: repeat(2, minmax(76.5px, 84px));
4208
+ padding: 0 12px 12px;
4209
+ }
4210
+ .semi-datepicker-quick-control-left-content-item, .semi-datepicker-quick-control-right-content-item {
4211
+ max-width: 84px;
4212
+ }
4213
+ .semi-datepicker-quick-control-left-content-item-ellipsis, .semi-datepicker-quick-control-right-content-item-ellipsis {
4214
+ width: 68px;
4215
+ color: var(--semi-color-primary);
4216
+ }
4217
+ .semi-datepicker-quick-control-top-content, .semi-datepicker-quick-control-bottom-content {
4218
+ display: grid;
4219
+ grid-gap: 8px;
4220
+ grid-template-columns: repeat(3, minmax(71px, 76px));
4221
+ align-content: flex-start;
4222
+ padding: 8px 20px;
4223
+ }
4224
+ .semi-datepicker-quick-control-top-content-item, .semi-datepicker-quick-control-bottom-content-item {
4225
+ max-width: 76px;
4226
+ }
4227
+ .semi-datepicker-quick-control-top-content-item-ellipsis, .semi-datepicker-quick-control-bottom-content-item-ellipsis {
4228
+ width: 60px;
4229
+ color: var(--semi-color-primary);
4230
+ }
4231
+ .semi-datepicker-quick-control-top-range-content, .semi-datepicker-quick-control-bottom-range-content {
4232
+ box-sizing: border-box;
4233
+ display: grid;
4234
+ align-content: flex-start;
4235
+ grid-template-columns: repeat(5, minmax(96.2px, 99.2px));
4236
+ grid-gap: 8px;
4237
+ padding: 8px 20px;
4238
+ }
4239
+ .semi-datepicker-quick-control-top-range-content-item, .semi-datepicker-quick-control-bottom-range-content-item {
4240
+ max-width: 99.2px;
4241
+ }
4242
+ .semi-datepicker-quick-control-top-range-content-item-ellipsis, .semi-datepicker-quick-control-bottom-range-content-item-ellipsis {
4243
+ width: 83.2px;
4244
+ color: var(--semi-color-primary);
4176
4245
  }
4177
- .semi-datepicker-quick-control-month, .semi-datepicker-quick-control-date, .semi-datepicker-quick-control-dateTime {
4246
+ .semi-datepicker-quick-control-top-month-content, .semi-datepicker-quick-control-bottom-month-content {
4247
+ box-sizing: border-box;
4248
+ display: grid;
4249
+ grid-template-columns: repeat(2, minmax(65.5px, 73px));
4250
+ grid-gap: 8px;
4251
+ align-content: flex-start;
4252
+ padding: 8px 20px;
4253
+ }
4254
+ .semi-datepicker-quick-control-top-month-content-item, .semi-datepicker-quick-control-bottom-month-content-item {
4255
+ max-width: 73px;
4256
+ }
4257
+ .semi-datepicker-quick-control-top-month-content-item-ellipsis, .semi-datepicker-quick-control-bottom-month-content-item-ellipsis {
4258
+ max-width: 57px;
4259
+ color: var(--semi-color-primary);
4260
+ }
4261
+ .semi-datepicker-quick-control-month {
4262
+ max-width: 284px;
4263
+ }
4264
+ .semi-datepicker-quick-control-month[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
4265
+ .semi-datepicker-quick-control-month[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
4266
+ max-height: 258px;
4267
+ }
4268
+ .semi-datepicker-quick-control-month .semi-datepicker-quick-control-right-content-wrapper,
4269
+ .semi-datepicker-quick-control-month .semi-datepicker-quick-control-left-content-wrapper {
4270
+ max-height: 214px;
4271
+ }
4272
+ .semi-datepicker-quick-control-date {
4273
+ max-width: 284px;
4274
+ }
4275
+ .semi-datepicker-quick-control-date[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
4276
+ .semi-datepicker-quick-control-date[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
4277
+ max-height: 309px;
4278
+ }
4279
+ .semi-datepicker-quick-control-date .semi-datepicker-quick-control-right-content-wrapper,
4280
+ .semi-datepicker-quick-control-date .semi-datepicker-quick-control-left-content-wrapper {
4281
+ max-height: 273px;
4282
+ }
4283
+ .semi-datepicker-quick-control-dateTime {
4178
4284
  max-width: 284px;
4179
4285
  }
4180
- .semi-datepicker-quick-control-dateRange, .semi-datepicker-quick-control-dateTimeRange {
4286
+ .semi-datepicker-quick-control-dateTime[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
4287
+ .semi-datepicker-quick-control-dateTime[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
4288
+ max-height: 309px;
4289
+ }
4290
+ .semi-datepicker-quick-control-dateTime .semi-datepicker-quick-control-right-content-wrapper,
4291
+ .semi-datepicker-quick-control-dateTime .semi-datepicker-quick-control-left-content-wrapper {
4292
+ max-height: 326px;
4293
+ }
4294
+ .semi-datepicker-quick-control-dateRange {
4181
4295
  max-width: 568px;
4182
4296
  }
4297
+ .semi-datepicker-quick-control-dateRange[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
4298
+ .semi-datepicker-quick-control-dateRange[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
4299
+ max-height: 309px;
4300
+ }
4301
+ .semi-datepicker-quick-control-dateRange .semi-datepicker-quick-control-right-content-wrapper,
4302
+ .semi-datepicker-quick-control-dateRange .semi-datepicker-quick-control-left-content-wrapper {
4303
+ max-height: 273px;
4304
+ }
4305
+ .semi-datepicker-quick-control-dateTimeRange {
4306
+ max-width: 568px;
4307
+ }
4308
+ .semi-datepicker-quick-control-dateTimeRange[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
4309
+ .semi-datepicker-quick-control-dateTimeRange[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
4310
+ max-height: 309px;
4311
+ }
4312
+ .semi-datepicker-quick-control-dateTimeRange .semi-datepicker-quick-control-right-content-wrapper,
4313
+ .semi-datepicker-quick-control-dateTimeRange .semi-datepicker-quick-control-left-content-wrapper {
4314
+ max-height: 326px;
4315
+ }
4183
4316
  .semi-datepicker-topSlot {
4184
4317
  border-bottom: 1px solid var(--semi-color-border);
4185
4318
  }
@@ -4390,11 +4523,14 @@ body[theme-mode=dark], body .semi-always-dark {
4390
4523
  border-right: 1px solid var(--semi-color-border);
4391
4524
  }
4392
4525
  .semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yam-showing {
4393
- min-height: 268px;
4526
+ min-height: 288px;
4394
4527
  min-width: 216px;
4395
4528
  }
4396
4529
  .semi-datepicker-compact .semi-datepicker-month-grid[x-type=date] .semi-datepicker-yam-showing {
4397
- min-height: 284px;
4530
+ min-height: 256px;
4531
+ }
4532
+ .semi-datepicker-compact .semi-datepicker-month-grid[x-preset-position=left][x-insetinput=false] .semi-datepicker-month, .semi-datepicker-compact .semi-datepicker-month-grid[x-preset-position=right][x-insetinput=false] .semi-datepicker-month {
4533
+ height: 220px;
4398
4534
  }
4399
4535
  .semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-header {
4400
4536
  box-sizing: border-box;
@@ -4430,14 +4566,14 @@ body[theme-mode=dark], body .semi-always-dark {
4430
4566
  }
4431
4567
  .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=year],
4432
4568
  .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=year] {
4433
- min-height: 236px;
4569
+ min-height: 256px;
4434
4570
  }
4435
4571
  .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=time],
4436
4572
  .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=time] {
4437
- min-height: 236px;
4573
+ min-height: 256px;
4438
4574
  }
4439
4575
  .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-yam-showing {
4440
- min-height: 236px;
4576
+ min-height: 256px;
4441
4577
  }
4442
4578
  .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-tpk {
4443
4579
  min-height: 100%;
@@ -4546,15 +4682,130 @@ body[theme-mode=dark], body .semi-always-dark {
4546
4682
  .semi-datepicker-compact .semi-datepicker-switch-text {
4547
4683
  padding-left: 0;
4548
4684
  }
4549
- .semi-datepicker-compact .semi-datepicker-quick-control {
4550
- padding: 12px;
4685
+ .semi-datepicker-compact .semi-datepicker-quick-control-header {
4686
+ padding: 16px 12px 0;
4687
+ font-weight: 600;
4688
+ }
4689
+ .semi-datepicker-compact .semi-datepicker-quick-control-left-content-wrapper, .semi-datepicker-compact .semi-datepicker-quick-control-right-content-wrapper {
4690
+ margin-top: 12px;
4691
+ }
4692
+ .semi-datepicker-compact .semi-datepicker-quick-control-left-content, .semi-datepicker-compact .semi-datepicker-quick-control-right-content {
4693
+ box-sizing: border-box;
4694
+ display: grid;
4695
+ align-content: flex-start;
4696
+ grid-gap: 8px;
4697
+ grid-template-columns: repeat(2, minmax(76.5px, 84px));
4698
+ padding: 0 12px 12px;
4699
+ }
4700
+ .semi-datepicker-compact .semi-datepicker-quick-control-left-content-item, .semi-datepicker-compact .semi-datepicker-quick-control-right-content-item {
4701
+ max-width: 84px;
4702
+ }
4703
+ .semi-datepicker-compact .semi-datepicker-quick-control-left-content-item-ellipsis, .semi-datepicker-compact .semi-datepicker-quick-control-right-content-item-ellipsis {
4704
+ width: 68px;
4705
+ font-size: 12px;
4706
+ color: var(--semi-color-primary);
4707
+ }
4708
+ .semi-datepicker-compact .semi-datepicker-quick-control-top-content, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-content {
4709
+ box-sizing: border-box;
4710
+ display: grid;
4711
+ grid-gap: 8px;
4712
+ grid-template-columns: repeat(3, minmax(55px, 60px));
4713
+ align-content: flex-start;
4714
+ padding: 8px 10px;
4715
+ }
4716
+ .semi-datepicker-compact .semi-datepicker-quick-control-top-content-item, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-content-item {
4717
+ max-width: 60px;
4718
+ }
4719
+ .semi-datepicker-compact .semi-datepicker-quick-control-top-content-item-ellipsis, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-content-item-ellipsis {
4720
+ width: 44px;
4721
+ font-size: 12px;
4722
+ color: var(--semi-color-primary);
4723
+ }
4724
+ .semi-datepicker-compact .semi-datepicker-quick-control-top-range-content, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-range-content {
4725
+ display: grid;
4726
+ grid-template-columns: repeat(5, minmax(73px, 76px));
4727
+ grid-gap: 8px;
4728
+ align-content: flex-start;
4729
+ padding: 8px 10px;
4551
4730
  }
4552
- .semi-datepicker-compact .semi-datepicker-quick-control-month, .semi-datepicker-compact .semi-datepicker-quick-control-date, .semi-datepicker-compact .semi-datepicker-quick-control-dateTime {
4731
+ .semi-datepicker-compact .semi-datepicker-quick-control-top-range-content-item, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-range-content-item {
4732
+ max-width: 76px;
4733
+ }
4734
+ .semi-datepicker-compact .semi-datepicker-quick-control-top-range-content-item-ellipsis, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-range-content-item-ellipsis {
4735
+ width: 60px;
4736
+ font-size: 12px;
4737
+ color: var(--semi-color-primary);
4738
+ }
4739
+ .semi-datepicker-compact .semi-datepicker-quick-control-top-month-content, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content {
4740
+ display: grid;
4741
+ grid-template-columns: repeat(2, minmax(75.5px, 83px));
4742
+ grid-gap: 8px;
4743
+ align-content: flex-start;
4744
+ padding: 8px 10px;
4745
+ }
4746
+ .semi-datepicker-compact .semi-datepicker-quick-control-top-month-content-item, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content-item {
4747
+ max-width: 83px;
4748
+ }
4749
+ .semi-datepicker-compact .semi-datepicker-quick-control-top-month-content-item-ellipsis, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content-item-ellipsis {
4750
+ max-width: 67px;
4751
+ font-size: 12px;
4752
+ color: var(--semi-color-primary);
4753
+ }
4754
+ .semi-datepicker-compact .semi-datepicker-quick-control-month {
4553
4755
  max-width: 216px;
4554
4756
  }
4555
- .semi-datepicker-compact .semi-datepicker-quick-control-dateRange, .semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange {
4757
+ .semi-datepicker-compact .semi-datepicker-quick-control-month[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
4758
+ .semi-datepicker-compact .semi-datepicker-quick-control-month[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
4759
+ max-height: 254px;
4760
+ }
4761
+ .semi-datepicker-compact .semi-datepicker-quick-control-month .semi-datepicker-quick-control-right-content-wrapper,
4762
+ .semi-datepicker-compact .semi-datepicker-quick-control-month .semi-datepicker-quick-control-left-content-wrapper {
4763
+ max-height: 218px;
4764
+ }
4765
+ .semi-datepicker-compact .semi-datepicker-quick-control-date {
4766
+ max-width: 216px;
4767
+ }
4768
+ .semi-datepicker-compact .semi-datepicker-quick-control-date[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
4769
+ .semi-datepicker-compact .semi-datepicker-quick-control-date[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
4770
+ max-height: 248px;
4771
+ }
4772
+ .semi-datepicker-compact .semi-datepicker-quick-control-date .semi-datepicker-quick-control-right-content-wrapper,
4773
+ .semi-datepicker-compact .semi-datepicker-quick-control-date .semi-datepicker-quick-control-left-content-wrapper {
4774
+ max-height: 208px;
4775
+ }
4776
+ .semi-datepicker-compact .semi-datepicker-quick-control-dateTime {
4777
+ max-width: 216px;
4778
+ }
4779
+ .semi-datepicker-compact .semi-datepicker-quick-control-dateTime[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
4780
+ .semi-datepicker-compact .semi-datepicker-quick-control-dateTime[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
4781
+ max-height: 248px;
4782
+ }
4783
+ .semi-datepicker-compact .semi-datepicker-quick-control-dateTime .semi-datepicker-quick-control-right-content-wrapper,
4784
+ .semi-datepicker-compact .semi-datepicker-quick-control-dateTime .semi-datepicker-quick-control-left-content-wrapper {
4785
+ max-height: 240px;
4786
+ }
4787
+ .semi-datepicker-compact .semi-datepicker-quick-control-dateRange {
4556
4788
  max-width: 432px;
4557
4789
  }
4790
+ .semi-datepicker-compact .semi-datepicker-quick-control-dateRange[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
4791
+ .semi-datepicker-compact .semi-datepicker-quick-control-dateRange[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
4792
+ max-height: 248px;
4793
+ }
4794
+ .semi-datepicker-compact .semi-datepicker-quick-control-dateRange .semi-datepicker-quick-control-right-content-wrapper,
4795
+ .semi-datepicker-compact .semi-datepicker-quick-control-dateRange .semi-datepicker-quick-control-left-content-wrapper {
4796
+ max-height: 208px;
4797
+ }
4798
+ .semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange {
4799
+ max-width: 432px;
4800
+ }
4801
+ .semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
4802
+ .semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
4803
+ max-height: 248px;
4804
+ }
4805
+ .semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange .semi-datepicker-quick-control-right-content-wrapper,
4806
+ .semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange .semi-datepicker-quick-control-left-content-wrapper {
4807
+ max-height: 240px;
4808
+ }
4558
4809
  .semi-datepicker-compact .semi-datepicker-footer {
4559
4810
  padding-top: 10px;
4560
4811
  padding-right: 8px;
@@ -4654,11 +4905,6 @@ body[theme-mode=dark], body .semi-always-dark {
4654
4905
  padding-left: 0;
4655
4906
  padding-right: 8px;
4656
4907
  }
4657
- .semi-rtl .semi-datepicker-quick-control-item,
4658
- .semi-portal-rtl .semi-datepicker-quick-control-item {
4659
- margin-left: 0;
4660
- margin-right: 8px;
4661
- }
4662
4908
  .semi-rtl .semi-datepicker-navigation .semi-icon-chevron_left,
4663
4909
  .semi-rtl .semi-datepicker-navigation .semi-icon-chevron_right,
4664
4910
  .semi-rtl .semi-datepicker-navigation .semi-icon-double_chevron_left,
@@ -11788,7 +12034,7 @@ body[theme-mode=dark], body .semi-always-dark {
11788
12034
  border-color: var(--semi-color-focus-border);
11789
12035
  }
11790
12036
  .semi-input-wrapper-focus:active {
11791
- background-color: var(--semi-color-fill-0);
12037
+ background-color: var(--semi-color-fill-2);
11792
12038
  border-color: var(--semi-color-focus-border);
11793
12039
  }
11794
12040
  .semi-input-wrapper.semi-input-readonly {
@@ -11806,6 +12052,10 @@ body[theme-mode=dark], body .semi-always-dark {
11806
12052
  background-color: var(--semi-color-danger-light-default);
11807
12053
  border-color: var(--semi-color-danger);
11808
12054
  }
12055
+ .semi-input-wrapper-error:active {
12056
+ background-color: var(--semi-color-danger-light-active);
12057
+ border-color: var(--semi-color-danger);
12058
+ }
11809
12059
  .semi-input-wrapper-warning {
11810
12060
  background-color: var(--semi-color-warning-light-default);
11811
12061
  border-color: var(--semi-color-warning-light-default);
@@ -11818,6 +12068,10 @@ body[theme-mode=dark], body .semi-always-dark {
11818
12068
  background-color: var(--semi-color-warning-light-default);
11819
12069
  border-color: var(--semi-color-warning);
11820
12070
  }
12071
+ .semi-input-wrapper-warning:active {
12072
+ background-color: var(--semi-color-warning-light-active);
12073
+ border-color: var(--semi-color-warning);
12074
+ }
11821
12075
  .semi-input-wrapper__with-prefix {
11822
12076
  display: inline-flex;
11823
12077
  align-items: center;
@@ -11938,6 +12192,12 @@ body[theme-mode=dark], body .semi-always-dark {
11938
12192
  .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn:not(:last-child), .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn:not(:last-child) {
11939
12193
  border-radius: 0;
11940
12194
  }
12195
+ .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active {
12196
+ background-color: var(--semi-color-fill-2);
12197
+ }
12198
+ .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active ~ .semi-input-modebtn {
12199
+ background-color: var(--semi-color-fill-2);
12200
+ }
11941
12201
  .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover {
11942
12202
  background-color: var(--semi-color-fill-0);
11943
12203
  }
@@ -11966,6 +12226,13 @@ body[theme-mode=dark], body .semi-always-dark {
11966
12226
  background-color: var(--semi-color-danger-light-default);
11967
12227
  border-color: var(--semi-color-danger);
11968
12228
  }
12229
+ .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active {
12230
+ background-color: var(--semi-color-danger-light-active);
12231
+ }
12232
+ .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active + .semi-input-modebtn {
12233
+ background-color: var(--semi-color-danger-light-active);
12234
+ border-color: var(--semi-color-danger);
12235
+ }
11969
12236
  .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:hover {
11970
12237
  background-color: var(--semi-color-danger-light-default);
11971
12238
  }
@@ -11994,6 +12261,13 @@ body[theme-mode=dark], body .semi-always-dark {
11994
12261
  background-color: var(--semi-color-warning-light-default);
11995
12262
  border-color: var(--semi-color-warning);
11996
12263
  }
12264
+ .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active {
12265
+ background-color: var(--semi-color-warning-light-active);
12266
+ }
12267
+ .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active + .semi-input-modebtn {
12268
+ background-color: var(--semi-color-warning-light-active);
12269
+ border-color: var(--semi-color-warning);
12270
+ }
11997
12271
  .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:hover {
11998
12272
  background-color: var(--semi-color-warning-light-default);
11999
12273
  }
@@ -12027,6 +12301,9 @@ body[theme-mode=dark], body .semi-always-dark {
12027
12301
  background-color: transparent;
12028
12302
  box-sizing: border-box;
12029
12303
  }
12304
+ .semi-input[type=password]::-ms-reveal, .semi-input[type=password]::-ms-clear {
12305
+ display: none;
12306
+ }
12030
12307
  .semi-input::placeholder {
12031
12308
  color: var(--semi-color-text-2);
12032
12309
  }
@@ -15002,10 +15279,6 @@ body[theme-mode=dark], body .semi-always-dark {
15002
15279
  background-color: var(--semi-color-fill-1);
15003
15280
  border: 1px solid transparent;
15004
15281
  }
15005
- .semi-select:active {
15006
- background-color: var(--semi-color-fill-2);
15007
- border: 1px solid var(--semi-color-focus-border);
15008
- }
15009
15282
  .semi-select:focus {
15010
15283
  border: 1px solid var(--semi-color-focus-border);
15011
15284
  outline: 0;
@@ -15031,6 +15304,10 @@ body[theme-mode=dark], body .semi-always-dark {
15031
15304
  background-color: var(--semi-color-fill-0);
15032
15305
  border: 1px solid var(--semi-color-focus-border);
15033
15306
  }
15307
+ .semi-select-open:active, .semi-select-focus:active {
15308
+ background-color: var(--semi-color-fill-2);
15309
+ border: 1px solid var(--semi-color-focus-border);
15310
+ }
15034
15311
  .semi-select-warning {
15035
15312
  background-color: var(--semi-color-warning-light-default);
15036
15313
  border-color: var(--semi-color-warning-light-default);
@@ -15071,7 +15348,7 @@ body[theme-mode=dark], body .semi-always-dark {
15071
15348
  background-color: var(--semi-color-disabled-fill);
15072
15349
  }
15073
15350
  .semi-select-disabled:focus {
15074
- border: 1px solid var(--semi-color-focus-border);
15351
+ border: 1px solid transparent;
15075
15352
  }
15076
15353
  .semi-select-disabled .semi-select-selection,
15077
15354
  .semi-select-disabled .semi-select-selection-placeholder {
@@ -15192,11 +15469,11 @@ body[theme-mode=dark], body .semi-always-dark {
15192
15469
  align-items: center;
15193
15470
  }
15194
15471
  .semi-select-prefix-text, .semi-select-suffix-text {
15195
- margin: 0 12px;
15472
+ margin: 0px 12px;
15196
15473
  }
15197
15474
  .semi-select-prefix-icon, .semi-select-suffix-icon {
15198
15475
  color: var(--semi-color-text-2);
15199
- margin: 0 8px;
15476
+ margin: 0px 8px;
15200
15477
  }
15201
15478
  .semi-select-suffix {
15202
15479
  display: flex;
@@ -16485,8 +16762,8 @@ body[theme-mode=dark], body .semi-always-dark {
16485
16762
  left: 0;
16486
16763
  }
16487
16764
  .semi-switch-native-control[type=checkbox] {
16488
- width: 100%;
16489
- height: 100%;
16765
+ width: inherit;
16766
+ height: inherit;
16490
16767
  }
16491
16768
  .semi-switch-checked-text, .semi-switch-unchecked-text {
16492
16769
  position: absolute;
@@ -18103,6 +18380,14 @@ body[theme-mode=dark], body .semi-always-dark {
18103
18380
  width: 100%;
18104
18381
  box-sizing: border-box;
18105
18382
  }
18383
+ .semi-tagInput-drag-item {
18384
+ display: flex;
18385
+ align-items: center;
18386
+ }
18387
+ .semi-tagInput-drag-handler {
18388
+ margin-right: 4px;
18389
+ cursor: move;
18390
+ }
18106
18391
  .semi-tagInput-hover {
18107
18392
  background-color: var(--semi-color-fill-1);
18108
18393
  border: 1px transparent solid;
@@ -18181,6 +18466,9 @@ body[theme-mode=dark], body .semi-always-dark {
18181
18466
  margin-top: 3px;
18182
18467
  margin-bottom: 3px;
18183
18468
  }
18469
+ .semi-tagInput-wrapper-tag-icon {
18470
+ padding-left: 4px;
18471
+ }
18184
18472
  .semi-tagInput-wrapper-typo {
18185
18473
  font-size: 12px;
18186
18474
  }
@@ -19787,12 +20075,6 @@ body[theme-mode=dark], body .semi-always-dark {
19787
20075
  line-height: 20px;
19788
20076
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
19789
20077
  }
19790
- .semi-typography-text {
19791
- display: inline-block;
19792
- }
19793
- .semi-typography-text-icon {
19794
- display: inline-flex;
19795
- }
19796
20078
  .semi-typography.semi-typography-secondary {
19797
20079
  color: var(--semi-color-text-1);
19798
20080
  }
@@ -19824,7 +20106,6 @@ body[theme-mode=dark], body .semi-always-dark {
19824
20106
  color: var(--semi-color-link);
19825
20107
  }
19826
20108
  .semi-typography-icon {
19827
- display: inline-flex;
19828
20109
  margin-right: 4px;
19829
20110
  vertical-align: middle;
19830
20111
  color: inherit;
@@ -20816,7 +21097,7 @@ p.semi-typography-extended,
20816
21097
  }
20817
21098
  .semi-input-textarea-wrapper-error:active {
20818
21099
  background-color: var(--semi-color-danger-light-active);
20819
- border-color: var(--semi-color-danger-light-active);
21100
+ border-color: var(--semi-color-danger);
20820
21101
  }
20821
21102
  .semi-input-textarea-wrapper-warning {
20822
21103
  background-color: var(--semi-color-warning-light-default);
@@ -20832,7 +21113,7 @@ p.semi-typography-extended,
20832
21113
  }
20833
21114
  .semi-input-textarea-wrapper-warning:active {
20834
21115
  background-color: var(--semi-color-warning-light-active);
20835
- border-color: var(--semi-color-warning-light-active);
21116
+ border-color: var(--semi-color-warning);
20836
21117
  }
20837
21118
 
20838
21119
  .semi-input-textarea {