@douyinfe/semi-ui 2.9.0-beta.1 → 2.10.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 (96) hide show
  1. package/anchor/__test__/anchor.test.js +1 -0
  2. package/anchor/_story/anchor.stories.js +23 -1
  3. package/badge/_story/badge.stories.js +34 -2
  4. package/banner/_story/banner.stories.js +62 -1
  5. package/banner/index.tsx +5 -5
  6. package/carousel/CarouselArrow.tsx +62 -0
  7. package/carousel/CarouselIndicator.tsx +84 -0
  8. package/carousel/__test__/carousel.test.js +159 -0
  9. package/carousel/_story/carousel.stories.js +486 -0
  10. package/carousel/index.tsx +294 -0
  11. package/carousel/interface.ts +64 -0
  12. package/cascader/_story/cascader.stories.js +17 -2
  13. package/cascader/index.tsx +2 -3
  14. package/checkbox/_story/checkbox.stories.js +1 -1
  15. package/collapse/item.tsx +2 -0
  16. package/datePicker/_story/datePicker.stories.js +37 -0
  17. package/dist/css/semi.css +344 -2
  18. package/dist/css/semi.min.css +1 -1
  19. package/dist/umd/semi-ui.js +1068 -330
  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/form/hoc/withField.tsx +8 -5
  24. package/index.ts +2 -0
  25. package/input/__test__/input.test.js +12 -3
  26. package/input/__test__/textArea.test.js +53 -0
  27. package/lib/cjs/banner/index.js +11 -5
  28. package/lib/cjs/carousel/CarouselArrow.d.ts +8 -0
  29. package/lib/cjs/carousel/CarouselArrow.js +91 -0
  30. package/lib/cjs/carousel/CarouselIndicator.d.ts +23 -0
  31. package/lib/cjs/carousel/CarouselIndicator.js +145 -0
  32. package/lib/cjs/carousel/index.d.ts +58 -0
  33. package/lib/cjs/carousel/index.js +345 -0
  34. package/lib/cjs/carousel/interface.d.ts +62 -0
  35. package/lib/cjs/carousel/interface.js +7 -0
  36. package/lib/cjs/cascader/index.js +2 -2
  37. package/lib/cjs/collapse/item.js +4 -2
  38. package/lib/cjs/form/hoc/withField.js +6 -4
  39. package/lib/cjs/index.d.ts +1 -0
  40. package/lib/cjs/index.js +9 -0
  41. package/lib/cjs/modal/Modal.js +3 -0
  42. package/lib/cjs/scrollList/scrollItem.js +5 -1
  43. package/lib/cjs/switch/index.d.ts +3 -0
  44. package/lib/cjs/switch/index.js +26 -6
  45. package/lib/cjs/tabs/TabPane.js +4 -0
  46. package/lib/cjs/tabs/index.js +2 -0
  47. package/lib/cjs/toast/toast.d.ts +1 -1
  48. package/lib/cjs/tooltip/index.js +1 -1
  49. package/lib/cjs/transfer/index.d.ts +1 -0
  50. package/lib/cjs/transfer/index.js +3 -1
  51. package/lib/es/banner/index.js +11 -5
  52. package/lib/es/carousel/CarouselArrow.d.ts +8 -0
  53. package/lib/es/carousel/CarouselArrow.js +72 -0
  54. package/lib/es/carousel/CarouselIndicator.d.ts +23 -0
  55. package/lib/es/carousel/CarouselIndicator.js +125 -0
  56. package/lib/es/carousel/index.d.ts +58 -0
  57. package/lib/es/carousel/index.js +311 -0
  58. package/lib/es/carousel/interface.d.ts +62 -0
  59. package/lib/es/carousel/interface.js +1 -0
  60. package/lib/es/cascader/index.js +2 -2
  61. package/lib/es/collapse/item.js +4 -2
  62. package/lib/es/form/hoc/withField.js +6 -4
  63. package/lib/es/index.d.ts +1 -0
  64. package/lib/es/index.js +1 -0
  65. package/lib/es/modal/Modal.js +3 -0
  66. package/lib/es/scrollList/scrollItem.js +5 -1
  67. package/lib/es/switch/index.d.ts +3 -0
  68. package/lib/es/switch/index.js +26 -6
  69. package/lib/es/tabs/TabPane.js +4 -0
  70. package/lib/es/tabs/index.js +2 -0
  71. package/lib/es/toast/toast.d.ts +1 -1
  72. package/lib/es/tooltip/index.js +1 -1
  73. package/lib/es/transfer/index.d.ts +1 -0
  74. package/lib/es/transfer/index.js +3 -1
  75. package/modal/Modal.tsx +2 -0
  76. package/modal/confirm.tsx +1 -1
  77. package/overflowList/_story/overflowList.stories.js +44 -0
  78. package/package.json +9 -9
  79. package/scrollList/_story/SingleWheelList/index.js +72 -0
  80. package/scrollList/_story/scrolllist.stories.js +7 -0
  81. package/scrollList/scrollItem.tsx +4 -1
  82. package/switch/index.tsx +20 -3
  83. package/table/__test__/table.test.js +1 -0
  84. package/tabs/TabPane.tsx +2 -0
  85. package/tabs/_story/tabs.stories.js +72 -0
  86. package/tabs/index.tsx +1 -0
  87. package/tagInput/__test__/tagInput.test.js +11 -11
  88. package/tagInput/_story/tagInput.stories.js +14 -1
  89. package/timePicker/TimePicker.tsx +1 -1
  90. package/timePicker/_story/timepicker.stories.js +20 -1
  91. package/tooltip/_story/tooltip.stories.js +127 -15
  92. package/tooltip/index.tsx +1 -1
  93. package/transfer/index.tsx +4 -1
  94. package/typography/__test__/typography.test.js +1 -0
  95. package/upload/__test__/upload.test.js +2 -0
  96. package/upload/_story/upload.stories.js +2 -2
package/dist/css/semi.css CHANGED
@@ -2592,6 +2592,345 @@ body[theme-mode=dark], body .semi-always-dark {
2592
2592
  margin-bottom: -1px;
2593
2593
  }
2594
2594
 
2595
+ .semi-carousel {
2596
+ position: relative;
2597
+ overflow: hidden;
2598
+ }
2599
+ .semi-carousel-content {
2600
+ width: 100%;
2601
+ height: 100%;
2602
+ overflow: hidden;
2603
+ position: relative;
2604
+ }
2605
+ .semi-carousel-content-item {
2606
+ position: absolute;
2607
+ left: 0;
2608
+ top: 0;
2609
+ width: 100%;
2610
+ height: 100%;
2611
+ overflow: hidden;
2612
+ }
2613
+ .semi-carousel-content-item-current {
2614
+ z-index: 1;
2615
+ }
2616
+ .semi-carousel-content-fade > * {
2617
+ opacity: 0;
2618
+ }
2619
+ .semi-carousel-content-fade .semi-carousel-content-item-current {
2620
+ opacity: 1;
2621
+ }
2622
+ .semi-carousel-content-slide > *:not(.semi-carousel-content-item-current) {
2623
+ visibility: hidden;
2624
+ }
2625
+ .semi-carousel-content-slide .semi-carousel-content-item-slide-out {
2626
+ display: block;
2627
+ animation: semi-carousel-content-item-keyframe-slide-out;
2628
+ }
2629
+ .semi-carousel-content-slide .semi-carousel-content-item-slide-in {
2630
+ display: block;
2631
+ animation: semi-carousel-content-item-keyframe-slide-in;
2632
+ }
2633
+ .semi-carousel-content-reverse .semi-carousel-content-item-slide-out {
2634
+ animation: semi-carousel-content-item-keyframe-slide-out-reverse;
2635
+ }
2636
+ .semi-carousel-content-reverse .semi-carousel-content-item-slide-in {
2637
+ animation: semi-carousel-content-item-keyframe-slide-in-reverse;
2638
+ }
2639
+ .semi-carousel-indicator {
2640
+ display: flex;
2641
+ align-items: flex-end;
2642
+ z-index: 2;
2643
+ }
2644
+ .semi-carousel-indicator-left {
2645
+ position: absolute;
2646
+ left: 32px;
2647
+ bottom: 32px;
2648
+ }
2649
+ .semi-carousel-indicator-center {
2650
+ position: absolute;
2651
+ left: 50%;
2652
+ bottom: 32px;
2653
+ transform: translate(-50%);
2654
+ }
2655
+ .semi-carousel-indicator-right {
2656
+ position: absolute;
2657
+ right: 32px;
2658
+ bottom: 32px;
2659
+ }
2660
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item {
2661
+ border-radius: 50%;
2662
+ cursor: pointer;
2663
+ }
2664
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item:not(:last-child) {
2665
+ margin-right: 8px;
2666
+ }
2667
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-small {
2668
+ width: 8px;
2669
+ height: 8px;
2670
+ }
2671
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-medium {
2672
+ width: 12px;
2673
+ height: 12px;
2674
+ }
2675
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-primary {
2676
+ background-color: rgba(var(--semi-blue-6), 0.4);
2677
+ }
2678
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-primary.semi-carousel-indicator-item-active {
2679
+ background: rgba(var(--semi-blue-6), 1);
2680
+ }
2681
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-primary:hover {
2682
+ background-color: rgba(var(--semi-blue-6), 0.7);
2683
+ }
2684
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-primary:active {
2685
+ background: rgba(var(--semi-blue-6), 1);
2686
+ }
2687
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-light {
2688
+ background-color: rgba(var(--semi-white), 0.4);
2689
+ }
2690
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-light.semi-carousel-indicator-item-active {
2691
+ background: rgba(var(--semi-white), 1);
2692
+ }
2693
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-light:hover {
2694
+ background-color: rgba(var(--semi-white), 0.7);
2695
+ }
2696
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-light:active {
2697
+ background: rgba(var(--semi-white), 1);
2698
+ }
2699
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-dark {
2700
+ background-color: rgba(var(--semi-black), 0.5);
2701
+ }
2702
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-dark.semi-carousel-indicator-item-active {
2703
+ background-color: rgba(var(--semi-black), 1);
2704
+ }
2705
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-dark:hover {
2706
+ background-color: rgba(var(--semi-black), 0.7);
2707
+ }
2708
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-dark:active {
2709
+ background: rgba(var(--semi-black), 1);
2710
+ }
2711
+ .semi-carousel-indicator-line {
2712
+ width: 240px;
2713
+ }
2714
+ .semi-carousel-indicator-line .semi-carousel-indicator-item {
2715
+ flex: 1;
2716
+ cursor: pointer;
2717
+ }
2718
+ .semi-carousel-indicator-line .semi-carousel-indicator-item:not(:last-child) {
2719
+ margin-right: 4px;
2720
+ }
2721
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-small {
2722
+ height: 4px;
2723
+ }
2724
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-medium {
2725
+ height: 6px;
2726
+ }
2727
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-primary {
2728
+ background-color: rgba(var(--semi-blue-6), 0.4);
2729
+ }
2730
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-primary.semi-carousel-indicator-item-active {
2731
+ background: rgba(var(--semi-blue-6), 1);
2732
+ }
2733
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-primary:hover {
2734
+ background-color: rgba(var(--semi-blue-6), 0.7);
2735
+ }
2736
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-primary:active {
2737
+ background: rgba(var(--semi-blue-6), 1);
2738
+ }
2739
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-light {
2740
+ background-color: rgba(var(--semi-white), 0.4);
2741
+ }
2742
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-light.semi-carousel-indicator-item-active {
2743
+ background: rgba(var(--semi-white), 1);
2744
+ }
2745
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-light:hover {
2746
+ background-color: rgba(var(--semi-white), 0.7);
2747
+ }
2748
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-light:active {
2749
+ background: rgba(var(--semi-white), 1);
2750
+ }
2751
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-dark {
2752
+ background-color: rgba(var(--semi-black), 0.5);
2753
+ }
2754
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-dark.semi-carousel-indicator-item-active {
2755
+ background: rgba(var(--semi-black), 1);
2756
+ }
2757
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-dark:hover {
2758
+ background-color: rgba(var(--semi-black), 0.7);
2759
+ }
2760
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-dark:active {
2761
+ background: rgba(var(--semi-black), 1);
2762
+ }
2763
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item {
2764
+ cursor: pointer;
2765
+ }
2766
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item:not(:last-child) {
2767
+ margin-right: 4px;
2768
+ }
2769
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-small {
2770
+ width: 4px;
2771
+ height: 12px;
2772
+ }
2773
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-small.semi-carousel-indicator-item-active {
2774
+ height: 20px;
2775
+ }
2776
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-medium {
2777
+ width: 6px;
2778
+ height: 20px;
2779
+ }
2780
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-medium.semi-carousel-indicator-item-active {
2781
+ height: 28px;
2782
+ }
2783
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-primary {
2784
+ background-color: rgba(var(--semi-blue-6), 0.4);
2785
+ }
2786
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-primary.semi-carousel-indicator-item-active {
2787
+ background: rgba(var(--semi-blue-6), 1);
2788
+ }
2789
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-primary:hover {
2790
+ background-color: rgba(var(--semi-blue-6), 0.7);
2791
+ }
2792
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-primary:active {
2793
+ background: rgba(var(--semi-blue-6), 1);
2794
+ }
2795
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-light {
2796
+ background-color: rgba(var(--semi-white), 0.4);
2797
+ }
2798
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-light.semi-carousel-indicator-item-active {
2799
+ background: rgba(var(--semi-white), 1);
2800
+ }
2801
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-light:hover {
2802
+ background-color: rgba(var(--semi-white), 0.7);
2803
+ }
2804
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-light:active {
2805
+ background: rgba(var(--semi-white), 1);
2806
+ }
2807
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-dark {
2808
+ background-color: rgba(var(--semi-black), 0.5);
2809
+ }
2810
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-dark.semi-carousel-indicator-item-active {
2811
+ background: rgba(var(--semi-black), 1);
2812
+ }
2813
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-dark:hover {
2814
+ background-color: rgba(var(--semi-black), 0.7);
2815
+ }
2816
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-dark:active {
2817
+ background: rgba(var(--semi-black), 1);
2818
+ }
2819
+ .semi-carousel-arrow {
2820
+ display: flex;
2821
+ font-size: 32px;
2822
+ cursor: pointer;
2823
+ }
2824
+ .semi-carousel-arrow-prev {
2825
+ position: absolute;
2826
+ top: 50%;
2827
+ left: 20px;
2828
+ transform: translateY(-50%);
2829
+ z-index: 2;
2830
+ }
2831
+ .semi-carousel-arrow-next {
2832
+ position: absolute;
2833
+ top: 50%;
2834
+ right: 20px;
2835
+ transform: translateY(-50%);
2836
+ z-index: 2;
2837
+ }
2838
+ .semi-carousel-arrow-light {
2839
+ color: rgba(var(--semi-white), 0.4);
2840
+ }
2841
+ .semi-carousel-arrow-light:hover {
2842
+ color: rgba(var(--semi-white), 1);
2843
+ }
2844
+ .semi-carousel-arrow-primary {
2845
+ color: rgba(var(--semi-blue-6), 0.4);
2846
+ }
2847
+ .semi-carousel-arrow-primary:hover {
2848
+ color: rgba(var(--semi-blue-6), 1);
2849
+ }
2850
+ .semi-carousel-arrow-dark {
2851
+ color: rgba(var(--semi-black), 0.5);
2852
+ }
2853
+ .semi-carousel-arrow-dark:hover {
2854
+ color: rgba(var(--semi-black), 1);
2855
+ }
2856
+ .semi-carousel-arrow-hover div {
2857
+ z-index: 2;
2858
+ opacity: 0;
2859
+ transition: all 0.3s;
2860
+ }
2861
+ .semi-carousel:hover .semi-carousel-arrow-hover div {
2862
+ opacity: 1;
2863
+ }
2864
+
2865
+ @keyframes semi-carousel-content-item-keyframe-slide-in {
2866
+ from {
2867
+ transform: translateX(-100%);
2868
+ }
2869
+ to {
2870
+ transform: translateX(0);
2871
+ }
2872
+ }
2873
+ @keyframes semi-carousel-content-item-keyframe-slide-out {
2874
+ from {
2875
+ transform: translateX(0);
2876
+ }
2877
+ to {
2878
+ transform: translateX(100%);
2879
+ }
2880
+ }
2881
+ @keyframes semi-carousel-content-item-keyframe-slide-in-reverse {
2882
+ from {
2883
+ transform: translateX(100%);
2884
+ }
2885
+ to {
2886
+ transform: translateX(0);
2887
+ }
2888
+ }
2889
+ @keyframes semi-carousel-content-item-keyframe-slide-out-reverse {
2890
+ from {
2891
+ transform: translateX(0);
2892
+ }
2893
+ to {
2894
+ transform: translateX(-100%);
2895
+ }
2896
+ }
2897
+ .semi-rtl .semi-carousel,
2898
+ .semi-portal-rtl .semi-carousel {
2899
+ direction: rtl;
2900
+ }
2901
+ .semi-rtl .semi-carousel-indicator,
2902
+ .semi-portal-rtl .semi-carousel-indicator {
2903
+ display: flex;
2904
+ }
2905
+ .semi-rtl .semi-carousel-indicator-dot .semi-carousel-indicator-item:not(:last-child),
2906
+ .semi-portal-rtl .semi-carousel-indicator-dot .semi-carousel-indicator-item:not(:last-child) {
2907
+ margin-right: 0;
2908
+ margin-left: 8px;
2909
+ }
2910
+ .semi-rtl .semi-carousel-indicator-columnar .semi-carousel-indicator-item:not(:last-child),
2911
+ .semi-portal-rtl .semi-carousel-indicator-columnar .semi-carousel-indicator-item:not(:last-child) {
2912
+ margin-right: 0;
2913
+ margin-left: 4px;
2914
+ }
2915
+ .semi-rtl .semi-carousel-arrow,
2916
+ .semi-portal-rtl .semi-carousel-arrow {
2917
+ flex-direction: row-reverse;
2918
+ }
2919
+ .semi-rtl .semi-carousel-arrow-prev,
2920
+ .semi-portal-rtl .semi-carousel-arrow-prev {
2921
+ left: auto;
2922
+ right: 20px;
2923
+ transform: scaleX(-1) translateY(-50%);
2924
+ z-index: 2;
2925
+ }
2926
+ .semi-rtl .semi-carousel-arrow-next,
2927
+ .semi-portal-rtl .semi-carousel-arrow-next {
2928
+ left: 20px;
2929
+ transform: scaleX(-1) translateY(-50%);
2930
+ right: auto;
2931
+ z-index: 2;
2932
+ }
2933
+
2595
2934
  .semi-cascader {
2596
2935
  box-sizing: border-box;
2597
2936
  border-radius: var(--semi-border-radius-small);
@@ -4834,7 +5173,6 @@ body[theme-mode=dark], body .semi-always-dark {
4834
5173
  line-height: 20px;
4835
5174
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
4836
5175
  flex-shrink: 0;
4837
- user-select: none;
4838
5176
  }
4839
5177
  .semi-form-field-label-disabled {
4840
5178
  color: var(--semi-color-disabled-text);
@@ -14623,6 +14961,7 @@ body[theme-mode=dark], body .semi-always-dark {
14623
14961
  }
14624
14962
  .semi-select-open:hover, .semi-select-focus:hover {
14625
14963
  background-color: var(--semi-color-fill-0);
14964
+ border: 1px solid var(--semi-color-focus-border);
14626
14965
  }
14627
14966
  .semi-select-warning {
14628
14967
  background-color: var(--semi-color-warning-light-default);
@@ -16006,6 +16345,9 @@ body[theme-mode=dark], body .semi-always-dark {
16006
16345
  .semi-switch:active .semi-switch-knob {
16007
16346
  width: 24px;
16008
16347
  }
16348
+ .semi-switch-focus {
16349
+ outline: 2px solid var(--semi-color-primary-light-active);
16350
+ }
16009
16351
  .semi-switch-checked {
16010
16352
  background-color: var(--semi-color-success);
16011
16353
  }
@@ -18462,7 +18804,7 @@ body[theme-mode=dark], body .semi-always-dark {
18462
18804
  .semi-transfer-left-empty {
18463
18805
  height: 36px;
18464
18806
  }
18465
- .semi-transfer-left .semi-spin {
18807
+ .semi-transfer-left > .semi-spin {
18466
18808
  width: 100%;
18467
18809
  flex-grow: 1;
18468
18810
  }