@douyinfe/semi-ui 2.5.1 → 2.7.0-beta.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 (111) hide show
  1. package/button/__test__/button.test.js +7 -0
  2. package/button/buttonGroup.tsx +5 -2
  3. package/calendar/monthCalendar.tsx +14 -13
  4. package/cascader/__test__/cascader.test.js +159 -81
  5. package/cascader/_story/cascader.stories.js +36 -23
  6. package/cascader/index.tsx +47 -8
  7. package/cascader/item.tsx +25 -5
  8. package/datePicker/_story/v2/InsetInput.jsx +104 -0
  9. package/datePicker/_story/v2/InsetInputE2E.jsx +69 -0
  10. package/datePicker/_story/v2/index.js +2 -0
  11. package/datePicker/dateInput.tsx +102 -13
  12. package/datePicker/datePicker.tsx +95 -16
  13. package/datePicker/index.tsx +15 -0
  14. package/datePicker/insetInput.tsx +76 -0
  15. package/datePicker/month.tsx +14 -7
  16. package/datePicker/monthsGrid.tsx +31 -12
  17. package/datePicker/navigation.tsx +8 -4
  18. package/datePicker/quickControl.tsx +1 -0
  19. package/datePicker/yearAndMonth.tsx +1 -1
  20. package/dist/css/semi.css +120 -8
  21. package/dist/css/semi.min.css +1 -1
  22. package/dist/umd/semi-ui.js +1100 -193
  23. package/dist/umd/semi-ui.js.map +1 -1
  24. package/dist/umd/semi-ui.min.js +1 -1
  25. package/dist/umd/semi-ui.min.js.map +1 -1
  26. package/form/hoc/withField.tsx +1 -1
  27. package/input/_story/input.stories.js +13 -0
  28. package/lib/cjs/_base/base.css +5 -5
  29. package/lib/cjs/button/buttonGroup.d.ts +1 -0
  30. package/lib/cjs/button/buttonGroup.js +6 -2
  31. package/lib/cjs/calendar/monthCalendar.js +21 -5
  32. package/lib/cjs/cascader/index.d.ts +10 -2
  33. package/lib/cjs/cascader/index.js +52 -10
  34. package/lib/cjs/cascader/item.d.ts +6 -2
  35. package/lib/cjs/cascader/item.js +33 -4
  36. package/lib/cjs/datePicker/dateInput.d.ts +9 -4
  37. package/lib/cjs/datePicker/dateInput.js +107 -13
  38. package/lib/cjs/datePicker/datePicker.d.ts +7 -2
  39. package/lib/cjs/datePicker/datePicker.js +138 -30
  40. package/lib/cjs/datePicker/index.js +24 -2
  41. package/lib/cjs/datePicker/insetInput.d.ts +21 -0
  42. package/lib/cjs/datePicker/insetInput.js +80 -0
  43. package/lib/cjs/datePicker/month.d.ts +1 -0
  44. package/lib/cjs/datePicker/month.js +18 -2
  45. package/lib/cjs/datePicker/monthsGrid.js +35 -11
  46. package/lib/cjs/datePicker/navigation.js +8 -0
  47. package/lib/cjs/datePicker/quickControl.js +1 -0
  48. package/lib/cjs/datePicker/yearAndMonth.js +1 -0
  49. package/lib/cjs/form/hoc/withField.js +1 -1
  50. package/lib/cjs/navigation/Item.d.ts +2 -2
  51. package/lib/cjs/navigation/Item.js +8 -6
  52. package/lib/cjs/navigation/SubNav.js +2 -2
  53. package/lib/cjs/scrollList/scrollItem.d.ts +2 -1
  54. package/lib/cjs/scrollList/scrollItem.js +13 -3
  55. package/lib/cjs/table/Body/index.d.ts +2 -0
  56. package/lib/cjs/table/Body/index.js +13 -4
  57. package/lib/cjs/tree/index.js +5 -3
  58. package/lib/cjs/tree/interface.d.ts +1 -0
  59. package/lib/cjs/tree/nodeList.js +2 -1
  60. package/lib/cjs/treeSelect/index.js +7 -3
  61. package/lib/es/_base/base.css +5 -5
  62. package/lib/es/button/buttonGroup.d.ts +1 -0
  63. package/lib/es/button/buttonGroup.js +5 -2
  64. package/lib/es/calendar/monthCalendar.js +22 -5
  65. package/lib/es/cascader/index.d.ts +10 -2
  66. package/lib/es/cascader/index.js +49 -7
  67. package/lib/es/cascader/item.d.ts +6 -2
  68. package/lib/es/cascader/item.js +31 -4
  69. package/lib/es/datePicker/dateInput.d.ts +9 -4
  70. package/lib/es/datePicker/dateInput.js +106 -13
  71. package/lib/es/datePicker/datePicker.d.ts +7 -2
  72. package/lib/es/datePicker/datePicker.js +139 -30
  73. package/lib/es/datePicker/index.js +20 -0
  74. package/lib/es/datePicker/insetInput.d.ts +21 -0
  75. package/lib/es/datePicker/insetInput.js +65 -0
  76. package/lib/es/datePicker/month.d.ts +1 -0
  77. package/lib/es/datePicker/month.js +18 -2
  78. package/lib/es/datePicker/monthsGrid.js +35 -11
  79. package/lib/es/datePicker/navigation.js +8 -0
  80. package/lib/es/datePicker/quickControl.js +2 -0
  81. package/lib/es/datePicker/yearAndMonth.js +1 -0
  82. package/lib/es/form/hoc/withField.js +1 -1
  83. package/lib/es/navigation/Item.d.ts +2 -2
  84. package/lib/es/navigation/Item.js +8 -6
  85. package/lib/es/navigation/SubNav.js +2 -2
  86. package/lib/es/scrollList/scrollItem.d.ts +2 -1
  87. package/lib/es/scrollList/scrollItem.js +13 -3
  88. package/lib/es/table/Body/index.d.ts +2 -0
  89. package/lib/es/table/Body/index.js +13 -4
  90. package/lib/es/tree/index.js +5 -3
  91. package/lib/es/tree/interface.d.ts +1 -0
  92. package/lib/es/tree/nodeList.js +2 -1
  93. package/lib/es/treeSelect/index.js +7 -3
  94. package/navigation/Item.tsx +15 -12
  95. package/navigation/SubNav.tsx +4 -4
  96. package/package.json +9 -9
  97. package/scrollList/_story/ScrollList/index.js +3 -0
  98. package/scrollList/_story/WheelList/index.js +3 -0
  99. package/scrollList/scrollItem.tsx +30 -9
  100. package/table/Body/index.tsx +15 -4
  101. package/table/__test__/table.test.js +18 -0
  102. package/table/_story/v2/FixedExpandedRow/index.jsx +95 -0
  103. package/table/_story/v2/index.js +2 -1
  104. package/tree/__test__/tree.test.js +87 -2
  105. package/tree/_story/tree.stories.js +65 -5
  106. package/tree/index.tsx +4 -2
  107. package/tree/interface.ts +1 -0
  108. package/tree/nodeList.tsx +2 -2
  109. package/treeSelect/__test__/treeSelect.test.js +28 -0
  110. package/treeSelect/_story/treeSelect.stories.js +55 -2
  111. package/treeSelect/index.tsx +11 -3
package/dist/css/semi.css CHANGED
@@ -19,7 +19,7 @@ body .semi-always-light {
19
19
  --semi-blue-2: 152,205,253;
20
20
  --semi-blue-3: 101,178,252;
21
21
  --semi-blue-4: 50,149,251;
22
- --semi-blue-5: 0,119,250;
22
+ --semi-blue-5: 0,100,250;
23
23
  --semi-blue-6: 0,98,214;
24
24
  --semi-blue-7: 0,79,179;
25
25
  --semi-blue-8: 0,61,143;
@@ -410,7 +410,7 @@ body, body[theme-mode=dark] .semi-always-light {
410
410
  --semi-color-bg-4: rgba(var(--semi-white), 1);
411
411
  --semi-color-text-0: rgba(var(--semi-grey-9), 1);
412
412
  --semi-color-text-1: rgba(var(--semi-grey-9), .8);
413
- --semi-color-text-2: rgba(var(--semi-grey-9), .6);
413
+ --semi-color-text-2: rgba(var(--semi-grey-9), .62);
414
414
  --semi-color-text-3: rgba(var(--semi-grey-9), .35);
415
415
  --semi-shadow-elevated: 0 0 1px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .1);
416
416
  --semi-border-radius-extra-small: 3px;
@@ -487,9 +487,9 @@ body[theme-mode=dark], body .semi-always-dark {
487
487
  --semi-color-nav-bg: rgba(35, 36, 41, 1);
488
488
  --semi-shadow-elevated: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .25);
489
489
  --semi-color-overlay-bg: rgba(22, 22, 26, .6);
490
- --semi-color-fill-0: rgba(var(--semi-white), .05);
491
- --semi-color-fill-1: rgba(var(--semi-white), .09);
492
- --semi-color-fill-2: rgba(var(--semi-white), .13);
490
+ --semi-color-fill-0: rgba(var(--semi-white), .12);
491
+ --semi-color-fill-1: rgba(var(--semi-white), .16);
492
+ --semi-color-fill-2: rgba(var(--semi-white), .20);
493
493
  --semi-color-border: rgba(var(--semi-white), .08);
494
494
  --semi-color-shadow: rgba(var(--semi-black), .04);
495
495
  --semi-color-bg-0: rgba(22, 22, 26, 1);
@@ -1588,6 +1588,9 @@ body[theme-mode=dark], body .semi-always-dark {
1588
1588
  vertical-align: middle;
1589
1589
  white-space: nowrap;
1590
1590
  }
1591
+ .semi-button:focus {
1592
+ outline: 2px solid var(--semi-color-primary-light-active);
1593
+ }
1591
1594
  .semi-button-danger {
1592
1595
  background-color: var(--semi-color-danger);
1593
1596
  color: white;
@@ -1601,6 +1604,9 @@ body[theme-mode=dark], body .semi-always-dark {
1601
1604
  .semi-button-danger.semi-button-light, .semi-button-danger.semi-button-borderless {
1602
1605
  color: var(--semi-color-danger);
1603
1606
  }
1607
+ .semi-button-danger:not(.semi-button-borderless):not(.semi-button-light):focus {
1608
+ outline-color: var(--semi-color-danger-light-active);
1609
+ }
1604
1610
  .semi-button-warning {
1605
1611
  background-color: var(--semi-color-warning);
1606
1612
  color: white;
@@ -1614,6 +1620,9 @@ body[theme-mode=dark], body .semi-always-dark {
1614
1620
  .semi-button-warning.semi-button-light, .semi-button-warning.semi-button-borderless {
1615
1621
  color: var(--semi-color-warning);
1616
1622
  }
1623
+ .semi-button-warning:not(.semi-button-borderless):not(.semi-button-light):focus {
1624
+ outline-color: var(--semi-color-warning-light-active);
1625
+ }
1617
1626
  .semi-button-tertiary {
1618
1627
  background-color: var(--semi-color-tertiary);
1619
1628
  color: white;
@@ -3438,6 +3447,7 @@ body[theme-mode=dark], body .semi-always-dark {
3438
3447
  .semi-datepicker {
3439
3448
  box-sizing: border-box;
3440
3449
  display: inline-block;
3450
+ vertical-align: top;
3441
3451
  }
3442
3452
  .semi-datepicker-month-grid {
3443
3453
  user-select: none;
@@ -3463,6 +3473,24 @@ body[theme-mode=dark], body .semi-always-dark {
3463
3473
  .semi-datepicker-month-grid[x-type=date] .semi-datepicker-yam-showing {
3464
3474
  min-height: 325px;
3465
3475
  }
3476
+ .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-left[x-open-type=year],
3477
+ .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-right[x-open-type=year] {
3478
+ min-height: 312px;
3479
+ }
3480
+ .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-left[x-open-type=time],
3481
+ .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-right[x-open-type=time] {
3482
+ min-height: 314px;
3483
+ }
3484
+ .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-navigation {
3485
+ padding-top: 8px;
3486
+ padding-bottom: 8px;
3487
+ }
3488
+ .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-tpk {
3489
+ min-height: 100%;
3490
+ }
3491
+ .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 {
3492
+ height: 100%;
3493
+ }
3466
3494
  .semi-datepicker-month-grid .semi-datepicker-yearmonth-header {
3467
3495
  background: var(--semi-color-bg-3);
3468
3496
  padding: 12px 16px;
@@ -3504,6 +3532,7 @@ body[theme-mode=dark], body .semi-always-dark {
3504
3532
  line-height: 20px;
3505
3533
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
3506
3534
  min-height: 24px;
3535
+ line-height: 24px;
3507
3536
  }
3508
3537
  .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 {
3509
3538
  min-height: 216px;
@@ -3804,6 +3833,34 @@ body[theme-mode=dark], body .semi-always-dark {
3804
3833
  .semi-datepicker .semi-datepicker-input-readonly {
3805
3834
  cursor: pointer;
3806
3835
  }
3836
+ .semi-datepicker-inset-input-wrapper {
3837
+ display: flex;
3838
+ flex-wrap: nowrap;
3839
+ justify-content: space-between;
3840
+ box-sizing: border-box;
3841
+ column-gap: 8px;
3842
+ padding: 12px 16px;
3843
+ padding-bottom: 0;
3844
+ width: 284px;
3845
+ }
3846
+ .semi-datepicker-inset-input-wrapper[x-type=dateRange], .semi-datepicker-inset-input-wrapper[x-type=dateTimeRange] {
3847
+ width: 568px;
3848
+ }
3849
+ .semi-datepicker-inset-input-wrapper[x-type=month] {
3850
+ width: 204px;
3851
+ }
3852
+ .semi-datepicker-inset-input-wrapper .semi-input-wrapper {
3853
+ flex: 1;
3854
+ flex-shrink: 0;
3855
+ }
3856
+ .semi-datepicker-inset-input-separator {
3857
+ flex-grow: 0;
3858
+ flex-shrink: 0;
3859
+ height: 32px;
3860
+ line-height: 32px;
3861
+ padding: 0 4px;
3862
+ color: var(--semi-color-text-3);
3863
+ }
3807
3864
  .semi-datepicker-range-input {
3808
3865
  display: flex;
3809
3866
  align-items: center;
@@ -4006,6 +4063,23 @@ body[theme-mode=dark], body .semi-always-dark {
4006
4063
  .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 {
4007
4064
  min-height: 168px;
4008
4065
  }
4066
+ .semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-left[x-open-type=year],
4067
+ .semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-right[x-open-type=year] {
4068
+ min-height: 236px;
4069
+ }
4070
+ .semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-left[x-open-type=time],
4071
+ .semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-right[x-open-type=time] {
4072
+ min-height: 236px;
4073
+ }
4074
+ .semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-yam-showing {
4075
+ min-height: 236px;
4076
+ }
4077
+ .semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-tpk {
4078
+ min-height: 100%;
4079
+ }
4080
+ .semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true][x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true][x-type=dateTimeRange] .semi-datepicker-yam {
4081
+ height: 100%;
4082
+ }
4009
4083
  .semi-datepicker-compact.semi-datepicker-panel-yam .semi-scrolllist {
4010
4084
  font-size: 12px;
4011
4085
  line-height: 16px;
@@ -4121,11 +4195,42 @@ body[theme-mode=dark], body .semi-always-dark {
4121
4195
  padding-right: 8px;
4122
4196
  padding-bottom: 10px;
4123
4197
  }
4198
+ .semi-datepicker-compact .semi-datepicker-inset-input-wrapper {
4199
+ column-gap: 4px;
4200
+ padding: 8px 8px;
4201
+ padding-bottom: 0;
4202
+ width: 216px;
4203
+ }
4204
+ .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateRange], .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateTimeRange] {
4205
+ width: 432px;
4206
+ padding-top: 0;
4207
+ }
4208
+ .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateRange] .semi-input-wrapper, .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateTimeRange] .semi-input-wrapper {
4209
+ margin-top: 8px;
4210
+ }
4211
+ .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=month] {
4212
+ width: 195px;
4213
+ }
4214
+ .semi-datepicker-compact .semi-datepicker-inset-input-wrapper .semi-input-wrapper {
4215
+ height: 28px;
4216
+ box-sizing: border-box;
4217
+ }
4218
+ .semi-datepicker-compact .semi-datepicker-inset-input-wrapper .semi-input-wrapper .semi-input {
4219
+ font-size: 12px;
4220
+ line-height: 26px;
4221
+ height: 26px;
4222
+ vertical-align: top;
4223
+ }
4224
+ .semi-datepicker-compact .semi-datepicker-inset-input-separator {
4225
+ border-left: 1px solid var(--semi-color-border);
4226
+ transform: translateX(50%);
4227
+ height: auto;
4228
+ }
4124
4229
 
4125
- .semi-popover-wrapper[x-placement*=top] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement*=Top] .semi-datepicker .semi-datepicker-weeks {
4230
+ .semi-popover-wrapper[x-placement^=top] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=leftTop] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=rightTop] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement*=BottomOver] .semi-datepicker .semi-datepicker-weeks {
4126
4231
  min-height: 216px;
4127
4232
  }
4128
- .semi-popover-wrapper[x-placement*=top] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement*=Top] .semi-datepicker-compact .semi-datepicker-weeks {
4233
+ .semi-popover-wrapper[x-placement^=top] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=leftTop] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=rightTop] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement*=BottomOver] .semi-datepicker-compact .semi-datepicker-weeks {
4129
4234
  min-height: 168px;
4130
4235
  }
4131
4236
 
@@ -4271,6 +4376,12 @@ body[theme-mode=dark], body .semi-always-dark {
4271
4376
  padding-left: 8px;
4272
4377
  padding-right: auto;
4273
4378
  }
4379
+ .semi-rtl .semi-datepicker-compact .semi-datepicker-inset-input-separator,
4380
+ .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-inset-input-separator {
4381
+ border-right: 1px solid var(--semi-color-border);
4382
+ border-left: 0;
4383
+ transform: translateX(-50%);
4384
+ }
4274
4385
 
4275
4386
  .semi-descriptions {
4276
4387
  line-height: 20px;
@@ -16483,7 +16594,7 @@ body[theme-mode=dark], body .semi-always-dark {
16483
16594
  position: relative;
16484
16595
  z-index: 1;
16485
16596
  padding: 16px 12px;
16486
- color: var(--semi-color-disabled-bg);
16597
+ color: var(--semi-color-text-2);
16487
16598
  font-size: 14px;
16488
16599
  text-align: center;
16489
16600
  background: transparent;
@@ -17046,6 +17157,7 @@ body[theme-mode=dark], body .semi-always-dark {
17046
17157
  user-select: none;
17047
17158
  overflow: hidden;
17048
17159
  white-space: nowrap;
17160
+ vertical-align: bottom;
17049
17161
  }
17050
17162
  .semi-tag-default, .semi-tag-small {
17051
17163
  font-size: 12px;