@douyinfe/semi-ui 2.13.0 → 2.14.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 (209) hide show
  1. package/autoComplete/_story/CustomTrigger/index.jsx +1 -1
  2. package/avatar/_story/avatar.stories.js +62 -5
  3. package/avatar/avatarGroup.tsx +16 -4
  4. package/avatar/index.tsx +88 -17
  5. package/backtop/index.tsx +11 -7
  6. package/badge/index.tsx +1 -1
  7. package/banner/index.tsx +5 -5
  8. package/breadcrumb/index.tsx +5 -3
  9. package/button/Button.tsx +10 -8
  10. package/calendar/_story/calendar.stories.js +125 -1
  11. package/card/index.tsx +43 -41
  12. package/carousel/CarouselArrow.tsx +2 -0
  13. package/carousel/index.tsx +1 -0
  14. package/cascader/_story/cascader.stories.js +21 -0
  15. package/cascader/index.tsx +99 -120
  16. package/cascader/item.tsx +1 -1
  17. package/checkbox/checkbox.tsx +13 -2
  18. package/collapsible/index.tsx +8 -1
  19. package/datePicker/dateInput.tsx +1 -0
  20. package/datePicker/datePicker.tsx +13 -5
  21. package/dist/css/semi.css +51 -35
  22. package/dist/css/semi.min.css +1 -1
  23. package/dist/umd/semi-ui.js +933 -530
  24. package/dist/umd/semi-ui.js.map +1 -1
  25. package/dist/umd/semi-ui.min.js +1 -1
  26. package/dist/umd/semi-ui.min.js.map +1 -1
  27. package/divider/index.tsx +8 -4
  28. package/dropdown/index.tsx +1 -1
  29. package/empty/index.tsx +13 -5
  30. package/form/hoc/withField.tsx +1 -1
  31. package/form/label.tsx +1 -1
  32. package/grid/col.tsx +1 -1
  33. package/grid/row.tsx +1 -1
  34. package/iconButton/index.tsx +2 -1
  35. package/input/_story/input.stories.js +32 -3
  36. package/input/index.tsx +45 -23
  37. package/input/inputGroup.tsx +3 -1
  38. package/input/textarea.tsx +2 -14
  39. package/lib/cjs/_base/base.css +14 -14
  40. package/lib/cjs/avatar/avatarGroup.d.ts +1 -1
  41. package/lib/cjs/avatar/avatarGroup.js +36 -9
  42. package/lib/cjs/avatar/index.d.ts +5 -0
  43. package/lib/cjs/avatar/index.js +121 -41
  44. package/lib/cjs/backtop/index.js +2 -1
  45. package/lib/cjs/badge/index.js +2 -1
  46. package/lib/cjs/banner/index.js +9 -4
  47. package/lib/cjs/breadcrumb/index.js +4 -3
  48. package/lib/cjs/button/Button.js +13 -3
  49. package/lib/cjs/card/index.js +10 -5
  50. package/lib/cjs/carousel/CarouselArrow.js +6 -2
  51. package/lib/cjs/carousel/index.js +2 -1
  52. package/lib/cjs/cascader/index.js +11 -6
  53. package/lib/cjs/cascader/item.js +2 -1
  54. package/lib/cjs/checkbox/checkbox.js +6 -2
  55. package/lib/cjs/collapsible/index.js +2 -1
  56. package/lib/cjs/datePicker/dateInput.js +2 -1
  57. package/lib/cjs/datePicker/datePicker.js +4 -2
  58. package/lib/cjs/divider/index.js +2 -1
  59. package/lib/cjs/dropdown/index.js +2 -1
  60. package/lib/cjs/empty/index.js +8 -4
  61. package/lib/cjs/form/baseForm.d.ts +1 -1
  62. package/lib/cjs/form/field.d.ts +1 -1
  63. package/lib/cjs/form/hoc/withField.js +2 -1
  64. package/lib/cjs/form/label.js +2 -1
  65. package/lib/cjs/grid/col.js +2 -1
  66. package/lib/cjs/grid/row.js +2 -1
  67. package/lib/cjs/iconButton/index.js +3 -1
  68. package/lib/cjs/input/index.d.ts +0 -1
  69. package/lib/cjs/input/index.js +41 -36
  70. package/lib/cjs/input/inputGroup.js +2 -3
  71. package/lib/cjs/input/textarea.js +8 -15
  72. package/lib/cjs/list/index.js +6 -3
  73. package/lib/cjs/modal/ConfirmModal.js +2 -1
  74. package/lib/cjs/modal/Modal.js +6 -2
  75. package/lib/cjs/modal/ModalContent.js +13 -6
  76. package/lib/cjs/notification/notice.js +6 -3
  77. package/lib/cjs/pagination/index.js +4 -2
  78. package/lib/cjs/popconfirm/index.js +6 -3
  79. package/lib/cjs/radio/radio.d.ts +4 -0
  80. package/lib/cjs/radio/radio.js +32 -9
  81. package/lib/cjs/radio/radioInner.d.ts +6 -0
  82. package/lib/cjs/radio/radioInner.js +13 -4
  83. package/lib/cjs/rating/item.js +2 -1
  84. package/lib/cjs/scrollList/index.js +6 -3
  85. package/lib/cjs/select/index.js +10 -4
  86. package/lib/cjs/select/option.js +2 -1
  87. package/lib/cjs/sideSheet/SideSheetContent.js +6 -3
  88. package/lib/cjs/skeleton/index.js +3 -1
  89. package/lib/cjs/space/index.js +2 -1
  90. package/lib/cjs/spin/index.js +7 -3
  91. package/lib/cjs/switch/index.js +6 -4
  92. package/lib/cjs/table/Table.js +6 -3
  93. package/lib/cjs/tabs/TabBar.js +2 -1
  94. package/lib/cjs/tabs/TabPane.js +5 -2
  95. package/lib/cjs/tagInput/index.js +25 -15
  96. package/lib/cjs/timePicker/Combobox.js +3 -1
  97. package/lib/cjs/timePicker/TimePicker.js +2 -0
  98. package/lib/cjs/toast/toast.js +6 -3
  99. package/lib/cjs/tooltip/index.js +6 -1
  100. package/lib/cjs/transfer/index.js +2 -1
  101. package/lib/cjs/tree/treeNode.js +2 -1
  102. package/lib/cjs/treeSelect/index.js +10 -3
  103. package/lib/cjs/typography/base.js +2 -1
  104. package/lib/cjs/typography/title.d.ts +1 -1
  105. package/lib/cjs/upload/index.d.ts +1 -1
  106. package/lib/cjs/upload/index.js +13 -6
  107. package/lib/es/_base/base.css +14 -14
  108. package/lib/es/avatar/avatarGroup.d.ts +1 -1
  109. package/lib/es/avatar/avatarGroup.js +37 -9
  110. package/lib/es/avatar/index.d.ts +5 -0
  111. package/lib/es/avatar/index.js +119 -38
  112. package/lib/es/backtop/index.js +2 -1
  113. package/lib/es/badge/index.js +2 -1
  114. package/lib/es/banner/index.js +9 -4
  115. package/lib/es/breadcrumb/index.js +4 -3
  116. package/lib/es/button/Button.js +11 -3
  117. package/lib/es/card/index.js +10 -5
  118. package/lib/es/carousel/CarouselArrow.js +6 -2
  119. package/lib/es/carousel/index.js +2 -1
  120. package/lib/es/cascader/index.js +11 -6
  121. package/lib/es/cascader/item.js +2 -1
  122. package/lib/es/checkbox/checkbox.js +6 -2
  123. package/lib/es/collapsible/index.js +2 -1
  124. package/lib/es/datePicker/dateInput.js +2 -1
  125. package/lib/es/datePicker/datePicker.js +4 -2
  126. package/lib/es/divider/index.js +2 -1
  127. package/lib/es/dropdown/index.js +2 -1
  128. package/lib/es/empty/index.js +8 -4
  129. package/lib/es/form/baseForm.d.ts +1 -1
  130. package/lib/es/form/field.d.ts +1 -1
  131. package/lib/es/form/hoc/withField.js +2 -1
  132. package/lib/es/form/label.js +2 -1
  133. package/lib/es/grid/col.js +2 -1
  134. package/lib/es/grid/row.js +2 -1
  135. package/lib/es/iconButton/index.js +3 -1
  136. package/lib/es/input/index.d.ts +0 -1
  137. package/lib/es/input/index.js +41 -36
  138. package/lib/es/input/inputGroup.js +2 -3
  139. package/lib/es/input/textarea.js +8 -15
  140. package/lib/es/list/index.js +6 -3
  141. package/lib/es/modal/ConfirmModal.js +2 -1
  142. package/lib/es/modal/Modal.js +6 -2
  143. package/lib/es/modal/ModalContent.js +13 -6
  144. package/lib/es/notification/notice.js +6 -3
  145. package/lib/es/pagination/index.js +4 -2
  146. package/lib/es/popconfirm/index.js +6 -3
  147. package/lib/es/radio/radio.d.ts +4 -0
  148. package/lib/es/radio/radio.js +32 -9
  149. package/lib/es/radio/radioInner.d.ts +6 -0
  150. package/lib/es/radio/radioInner.js +13 -4
  151. package/lib/es/rating/item.js +2 -1
  152. package/lib/es/scrollList/index.js +6 -3
  153. package/lib/es/select/index.js +10 -4
  154. package/lib/es/select/option.js +2 -1
  155. package/lib/es/sideSheet/SideSheetContent.js +6 -3
  156. package/lib/es/skeleton/index.js +3 -1
  157. package/lib/es/space/index.js +2 -1
  158. package/lib/es/spin/index.js +7 -3
  159. package/lib/es/switch/index.js +6 -4
  160. package/lib/es/table/Table.js +6 -3
  161. package/lib/es/tabs/TabBar.js +2 -1
  162. package/lib/es/tabs/TabPane.js +5 -2
  163. package/lib/es/tagInput/index.js +25 -15
  164. package/lib/es/timePicker/Combobox.js +3 -1
  165. package/lib/es/timePicker/TimePicker.js +2 -0
  166. package/lib/es/toast/toast.js +6 -3
  167. package/lib/es/tooltip/index.js +6 -1
  168. package/lib/es/transfer/index.js +2 -1
  169. package/lib/es/tree/treeNode.js +2 -1
  170. package/lib/es/treeSelect/index.js +10 -3
  171. package/lib/es/typography/base.js +2 -1
  172. package/lib/es/typography/title.d.ts +1 -1
  173. package/lib/es/upload/index.d.ts +1 -1
  174. package/lib/es/upload/index.js +13 -6
  175. package/list/index.tsx +16 -4
  176. package/modal/ConfirmModal.tsx +1 -1
  177. package/modal/Modal.tsx +2 -0
  178. package/modal/ModalContent.tsx +27 -14
  179. package/notification/notice.tsx +16 -4
  180. package/package.json +8 -8
  181. package/pagination/index.tsx +16 -2
  182. package/popconfirm/index.tsx +11 -3
  183. package/radio/_story/radio.stories.js +9 -6
  184. package/radio/radio.tsx +37 -7
  185. package/radio/radioInner.tsx +11 -2
  186. package/rating/item.tsx +1 -1
  187. package/scrollList/index.tsx +19 -3
  188. package/select/index.tsx +13 -4
  189. package/select/option.tsx +5 -1
  190. package/sideSheet/SideSheetContent.tsx +3 -3
  191. package/skeleton/index.tsx +1 -1
  192. package/space/index.tsx +1 -1
  193. package/spin/index.tsx +15 -9
  194. package/switch/index.tsx +9 -14
  195. package/table/Table.tsx +5 -3
  196. package/tabs/TabBar.tsx +1 -1
  197. package/tabs/TabPane.tsx +9 -4
  198. package/tagInput/index.tsx +23 -4
  199. package/timePicker/Combobox.tsx +6 -1
  200. package/timePicker/TimePicker.tsx +1 -0
  201. package/toast/toast.tsx +3 -3
  202. package/tooltip/index.tsx +4 -1
  203. package/transfer/index.tsx +1 -0
  204. package/tree/treeNode.tsx +1 -1
  205. package/treeSelect/_story/treeSelect.stories.js +161 -2
  206. package/treeSelect/index.tsx +17 -3
  207. package/typography/base.tsx +1 -1
  208. package/upload/index.tsx +107 -38
  209. package/yarn-error.log +26235 -0
package/dist/css/semi.css CHANGED
@@ -345,13 +345,13 @@ body, body[theme-mode=dark] .semi-always-light {
345
345
  --semi-color-primary-light-default: rgba(var(--semi-blue-0), 1);
346
346
  --semi-color-primary-light-hover: rgba(var(--semi-blue-1), 1);
347
347
  --semi-color-primary-light-active: rgba(var(--semi-blue-2), 1);
348
- --semi-color-secondary: rgba(var(--semi-blue-5), 1);
349
- --semi-color-secondary-hover: rgba(var(--semi-blue-6), 1);
350
- --semi-color-secondary-active: rgba(var(--semi-blue-7), 1);
351
- --semi-color-secondary-disabled: rgba(var(--semi-blue-2), 1);
352
- --semi-color-secondary-light-default: rgba(var(--semi-blue-0), 1);
353
- --semi-color-secondary-light-hover: rgba(var(--semi-blue-1), 1);
354
- --semi-color-secondary-light-active: rgba(var(--semi-blue-2), 1);
348
+ --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
349
+ --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1);
350
+ --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1);
351
+ --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1);
352
+ --semi-color-secondary-light-default: rgba(var(--semi-light-blue-0), 1);
353
+ --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-1), 1);
354
+ --semi-color-secondary-light-active: rgba(var(--semi-light-blue-2), 1);
355
355
  --semi-color-tertiary: rgba(var(--semi-grey-5), 1);
356
356
  --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1);
357
357
  --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1);
@@ -433,13 +433,13 @@ body[theme-mode=dark], body .semi-always-dark {
433
433
  --semi-color-primary-light-default: rgba(var(--semi-blue-5), .2);
434
434
  --semi-color-primary-light-hover: rgba(var(--semi-blue-5), .3);
435
435
  --semi-color-primary-light-active: rgba(var(--semi-blue-5), .4);
436
- --semi-color-secondary: rgba(var(--semi-blue-5), 1);
437
- --semi-color-secondary-hover: rgba(var(--semi-blue-6), 1);
438
- --semi-color-secondary-active: rgba(var(--semi-blue-7), 1);
439
- --semi-color-secondary-disabled: rgba(var(--semi-blue-2), 1);
440
- --semi-color-secondary-light-default: rgba(var(--semi-blue-5), .2);
441
- --semi-color-secondary-light-hover: rgba(var(--semi-blue-5), .3);
442
- --semi-color-secondary-light-active: rgba(var(--semi-blue-5), .4);
436
+ --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
437
+ --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1);
438
+ --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1);
439
+ --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1);
440
+ --semi-color-secondary-light-default: rgba(var(--semi-light-blue-5), .2);
441
+ --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-5), .3);
442
+ --semi-color-secondary-light-active: rgba(var(--semi-light-blue-5), .4);
443
443
  --semi-color-tertiary: rgba(var(--semi-grey-5), 1);
444
444
  --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1);
445
445
  --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1);
@@ -750,6 +750,15 @@ body[theme-mode=dark], body .semi-always-dark {
750
750
  text-align: center;
751
751
  vertical-align: middle;
752
752
  }
753
+ .semi-avatar:focus-visible {
754
+ outline: 2px solid var(--semi-color-primary-light-active);
755
+ }
756
+ .semi-avatar-focus {
757
+ outline: 2px solid var(--semi-color-primary-light-active);
758
+ }
759
+ .semi-avatar-no-focus-visible:focus-visible {
760
+ outline: none;
761
+ }
753
762
  .semi-avatar .semi-avatar-label {
754
763
  display: flex;
755
764
  align-items: center;
@@ -2959,6 +2968,11 @@ body[theme-mode=dark], body .semi-always-dark {
2959
2968
  min-height: 40px;
2960
2969
  line-height: 40px;
2961
2970
  }
2971
+ .semi-cascader-large .semi-cascader-selection {
2972
+ font-size: 16px;
2973
+ line-height: 22px;
2974
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
2975
+ }
2962
2976
  .semi-cascader-focus {
2963
2977
  border: 1px solid var(--semi-color-focus-border);
2964
2978
  outline: 0;
@@ -11825,6 +11839,12 @@ body[theme-mode=dark], body .semi-always-dark {
11825
11839
  .semi-input-wrapper .semi-input-modebtn:hover .semi-icon {
11826
11840
  color: var(--semi-color-primary-hover);
11827
11841
  }
11842
+ .semi-input-wrapper .semi-input-clearbtn:focus-visible,
11843
+ .semi-input-wrapper .semi-input-modebtn:focus-visible {
11844
+ border-radius: var(--semi-border-radius-small);
11845
+ outline: 2px solid var(--semi-color-primary-light-active);
11846
+ outline-offset: -1px;
11847
+ }
11828
11848
  .semi-input-wrapper__with-suffix-icon.semi-input-wrapper-clearable:not(.semi-input-wrapper__with-suffix-hidden) .semi-input-clearbtn {
11829
11849
  min-width: 24px;
11830
11850
  justify-content: flex-end;
@@ -14492,6 +14512,12 @@ body[theme-mode=dark], body .semi-always-dark {
14492
14512
  padding-left: 24px;
14493
14513
  box-sizing: border-box;
14494
14514
  }
14515
+ .semi-radio-focus {
14516
+ outline: 2px solid var(--semi-color-primary-light-active);
14517
+ }
14518
+ .semi-radio-focus-border {
14519
+ border: solid 1px var(--semi-color-focus-border);
14520
+ }
14495
14521
 
14496
14522
  .semi-radioGroup {
14497
14523
  font-size: 14px;
@@ -14964,6 +14990,11 @@ body[theme-mode=dark], body .semi-always-dark {
14964
14990
  min-height: 40px;
14965
14991
  line-height: 40px;
14966
14992
  }
14993
+ .semi-select-large .semi-select-selection {
14994
+ font-size: 16px;
14995
+ line-height: 22px;
14996
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
14997
+ }
14967
14998
  .semi-select-open, .semi-select-focus {
14968
14999
  border: 1px solid var(--semi-color-focus-border);
14969
15000
  outline: 0;
@@ -18185,7 +18216,7 @@ body[theme-mode=dark], body .semi-always-dark {
18185
18216
  color: var(--semi-color-text-2);
18186
18217
  }
18187
18218
  .semi-tagInput-suffix-text {
18188
- color: var(--semi-color-text-1);
18219
+ color: var(--semi-color-text-2);
18189
18220
  }
18190
18221
 
18191
18222
  .semi-rtl .semi-tagInput,
@@ -18949,26 +18980,6 @@ body[theme-mode=dark], body .semi-always-dark {
18949
18980
  padding-right: 12px;
18950
18981
  }
18951
18982
 
18952
- .semi-tree {
18953
- box-sizing: border-box;
18954
- border-radius: var(--semi-border-radius-small);
18955
- border: 1px solid transparent;
18956
- height: 32px;
18957
- line-height: 32px;
18958
- font-weight: 400;
18959
- background-color: var(--semi-color-fill-0);
18960
- display: inline-block;
18961
- vertical-align: middle;
18962
- position: relative;
18963
- cursor: pointer;
18964
- }
18965
- .semi-tree:hover {
18966
- background-color: var(--semi-color-fill-1);
18967
- }
18968
- .semi-tree-focus {
18969
- border: 1px solid var(--semi-color-focus-border);
18970
- outline: 0;
18971
- }
18972
18983
  .semi-tree-search-wrapper {
18973
18984
  padding: 8px 12px;
18974
18985
  }
@@ -19604,6 +19615,11 @@ body[theme-mode=dark], body .semi-always-dark {
19604
19615
  min-height: 40px;
19605
19616
  line-height: 40px;
19606
19617
  }
19618
+ .semi-tree-select-large .semi-tree-select-selection {
19619
+ font-size: 16px;
19620
+ line-height: 22px;
19621
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
19622
+ }
19607
19623
  .semi-tree-select-arrow {
19608
19624
  display: inline-flex;
19609
19625
  align-items: center;