@douyinfe/semi-ui 2.11.1 → 2.12.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 (60) hide show
  1. package/README.md +1 -1
  2. package/button/Button.tsx +1 -1
  3. package/dist/css/semi.css +33 -0
  4. package/dist/css/semi.min.css +1 -1
  5. package/dist/umd/semi-ui.js +2334 -322
  6. package/dist/umd/semi-ui.js.map +1 -1
  7. package/dist/umd/semi-ui.min.js +1 -1
  8. package/dist/umd/semi-ui.min.js.map +1 -1
  9. package/form/_story/FormSubmit/index.tsx +45 -0
  10. package/form/_story/form.stories.js +2 -1
  11. package/lib/cjs/button/Button.d.ts +1 -1
  12. package/lib/cjs/modal/Modal.js +3 -2
  13. package/lib/cjs/modal/ModalContent.d.ts +2 -0
  14. package/lib/cjs/modal/ModalContent.js +17 -9
  15. package/lib/cjs/progress/index.js +1 -1
  16. package/lib/cjs/select/index.js +1 -1
  17. package/lib/cjs/slider/index.js +9 -5
  18. package/lib/cjs/tabs/TabBar.d.ts +1 -0
  19. package/lib/cjs/tabs/TabBar.js +8 -1
  20. package/lib/cjs/tabs/TabPane.js +2 -1
  21. package/lib/cjs/tabs/index.js +2 -1
  22. package/lib/cjs/tabs/interface.d.ts +1 -0
  23. package/lib/cjs/tag/index.d.ts +2 -0
  24. package/lib/cjs/tag/index.js +60 -11
  25. package/lib/cjs/tag/interface.d.ts +1 -0
  26. package/lib/cjs/tagInput/index.js +3 -2
  27. package/lib/cjs/treeSelect/index.js +3 -3
  28. package/lib/es/button/Button.d.ts +1 -1
  29. package/lib/es/modal/Modal.js +3 -2
  30. package/lib/es/modal/ModalContent.d.ts +2 -0
  31. package/lib/es/modal/ModalContent.js +16 -9
  32. package/lib/es/progress/index.js +1 -1
  33. package/lib/es/select/index.js +1 -1
  34. package/lib/es/slider/index.js +9 -5
  35. package/lib/es/tabs/TabBar.d.ts +1 -0
  36. package/lib/es/tabs/TabBar.js +8 -1
  37. package/lib/es/tabs/TabPane.js +2 -1
  38. package/lib/es/tabs/index.js +2 -1
  39. package/lib/es/tabs/interface.d.ts +1 -0
  40. package/lib/es/tag/index.d.ts +2 -0
  41. package/lib/es/tag/index.js +56 -9
  42. package/lib/es/tag/interface.d.ts +1 -0
  43. package/lib/es/tagInput/index.js +3 -2
  44. package/lib/es/treeSelect/index.js +2 -2
  45. package/modal/Modal.tsx +2 -1
  46. package/modal/ModalContent.tsx +14 -8
  47. package/package.json +9 -9
  48. package/progress/index.tsx +1 -1
  49. package/select/index.tsx +1 -2
  50. package/slider/index.tsx +5 -3
  51. package/table/_story/v2/index.js +2 -1
  52. package/table/_story/v2/radioRowSelection.tsx +107 -0
  53. package/tabs/TabBar.tsx +7 -0
  54. package/tabs/TabPane.tsx +1 -0
  55. package/tabs/index.tsx +2 -1
  56. package/tabs/interface.ts +1 -0
  57. package/tag/index.tsx +32 -2
  58. package/tag/interface.ts +1 -0
  59. package/tagInput/index.tsx +1 -0
  60. package/treeSelect/index.tsx +1 -1
package/README.md CHANGED
@@ -33,7 +33,7 @@ And [Semi UI Doc Site](https://semi.design/en-US/) have hundreds editable exampl
33
33
  ## Documentation
34
34
 
35
35
  More to see [Semi Design Site](https://semi.design/en-US/).
36
-
36
+
37
37
  ## License
38
38
 
39
39
  [MIT](LICENSE)
package/button/Button.tsx CHANGED
@@ -14,7 +14,7 @@ export type Size = 'default' | 'small' | 'large';
14
14
  export type Theme = 'solid' | 'borderless' | 'light';
15
15
  export type Type = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
16
16
 
17
- export interface ButtonProps {
17
+ export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,'type'>{
18
18
  id?: string;
19
19
  block?: boolean;
20
20
  circle?: boolean;
package/dist/css/semi.css CHANGED
@@ -17270,6 +17270,10 @@ body[theme-mode=dark], body .semi-always-dark {
17270
17270
  width: 0;
17271
17271
  height: 0;
17272
17272
  }
17273
+ .semi-tabs-bar-collapse .semi-overflow-list .semi-overflow-list-scroll-wrapper:focus-visible {
17274
+ outline: 2px solid var(--semi-color-primary-light-active);
17275
+ outline-offset: -2px;
17276
+ }
17273
17277
  .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start {
17274
17278
  margin-right: 4px;
17275
17279
  }
@@ -17299,6 +17303,10 @@ body[theme-mode=dark], body .semi-always-dark {
17299
17303
  .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:hover {
17300
17304
  border-bottom: 2px solid var(--semi-color-fill-0);
17301
17305
  }
17306
+ .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:focus-visible {
17307
+ outline: 2px solid var(--semi-color-primary-light-active);
17308
+ outline-offset: -1px;
17309
+ }
17302
17310
  .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:active {
17303
17311
  border-bottom: 2px solid var(--semi-color-fill-1);
17304
17312
  }
@@ -17325,6 +17333,10 @@ body[theme-mode=dark], body .semi-always-dark {
17325
17333
  border-left: 2px solid var(--semi-color-fill-0);
17326
17334
  background-color: var(--semi-color-fill-0);
17327
17335
  }
17336
+ .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:focus-visible {
17337
+ outline: 2px solid var(--semi-color-primary-light-active);
17338
+ outline-offset: -2px;
17339
+ }
17328
17340
  .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:active {
17329
17341
  border-left: 2px solid var(--semi-color-fill-1);
17330
17342
  background-color: var(--semi-color-fill-1);
@@ -17410,6 +17422,10 @@ body[theme-mode=dark], body .semi-always-dark {
17410
17422
  .semi-tabs-bar-card .semi-tabs-tab:hover {
17411
17423
  background: var(--semi-color-fill-0);
17412
17424
  }
17425
+ .semi-tabs-bar-card .semi-tabs-tab:focus-visible {
17426
+ outline: 2px solid var(--semi-color-primary-light-active);
17427
+ outline-offset: -2px;
17428
+ }
17413
17429
  .semi-tabs-bar-card .semi-tabs-tab:active {
17414
17430
  background: var(--semi-color-fill-1);
17415
17431
  }
@@ -17432,6 +17448,10 @@ body[theme-mode=dark], body .semi-always-dark {
17432
17448
  border: none;
17433
17449
  background-color: var(--semi-color-fill-0);
17434
17450
  }
17451
+ .semi-tabs-bar-button .semi-tabs-tab:focus-visible {
17452
+ outline: 2px solid var(--semi-color-primary-light-active);
17453
+ outline-offset: -2px;
17454
+ }
17435
17455
  .semi-tabs-bar-button .semi-tabs-tab:active {
17436
17456
  background-color: var(--semi-color-fill-1);
17437
17457
  }
@@ -17452,6 +17472,9 @@ body[theme-mode=dark], body .semi-always-dark {
17452
17472
  width: 100%;
17453
17473
  overflow: hidden;
17454
17474
  }
17475
+ .semi-tabs-pane:focus-visible {
17476
+ outline: 2px solid var(--semi-color-primary-light-active);
17477
+ }
17455
17478
  .semi-tabs-pane-inactive, .semi-tabs-content-no-animated .semi-tabs-pane-inactive {
17456
17479
  display: none;
17457
17480
  }
@@ -17564,6 +17587,9 @@ body[theme-mode=dark], body .semi-always-dark {
17564
17587
  height: 20px;
17565
17588
  padding: 2px 8px;
17566
17589
  }
17590
+ .semi-tag-default:focus-visible, .semi-tag-small:focus-visible {
17591
+ outline: 2px solid var(--semi-color-primary-light-active);
17592
+ }
17567
17593
  .semi-tag-large {
17568
17594
  font-size: 12px;
17569
17595
  line-height: 16px;
@@ -17571,6 +17597,9 @@ body[theme-mode=dark], body .semi-always-dark {
17571
17597
  padding: 4px 8px;
17572
17598
  height: 24px;
17573
17599
  }
17600
+ .semi-tag-large:focus-visible {
17601
+ outline: 2px solid var(--semi-color-primary-light-active);
17602
+ }
17574
17603
  .semi-tag-invisible {
17575
17604
  display: none;
17576
17605
  }
@@ -17937,6 +17966,10 @@ body[theme-mode=dark], body .semi-always-dark {
17937
17966
  color: var(--semi-color-text-0);
17938
17967
  }
17939
17968
 
17969
+ .semi-tag-solid .semi-tag-close {
17970
+ color: var(--semi-color-white);
17971
+ }
17972
+
17940
17973
  .semi-rtl .semi-tag,
17941
17974
  .semi-portal-rtl .semi-tag {
17942
17975
  direction: rtl;