@douyinfe/semi-ui 2.22.0-alpha.0 → 2.22.0-beta.1

package/dist/css/semi.css

@@ -2570,7 +2570,7 @@ body {
 }
 .semi-card-shadows {
   cursor: pointer;
-  transition: box-shadow 0.3s;
+  transition: box-shadow 300ms;
 }
 .semi-card-shadows-hover:hover {
   box-shadow: var(--semi-shadow-elevated);
@@ -3893,11 +3893,24 @@ body {
   padding-left: 0;
 }
 
+.semi-collapsible-transition {
+  transition: height 250ms cubic-bezier(0.25, 0.1, 0.25, 1) var(--semi-transition_delay-fastest), opacity 250ms var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+}
+
 .semi-datepicker {
   box-sizing: border-box;
   display: inline-block;
   vertical-align: top;
 }
+.semi-datepicker .semi-scrolllist-body .semi-scrolllist-item {
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
+}
+.semi-datepicker .semi-scrolllist-body .semi-scrolllist-item::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
 .semi-datepicker-month-grid {
   user-select: none;
   display: flex;
@@ -11269,7 +11282,7 @@ body {
 .semi-image-preview-image-img {
   position: absolute;
   transform: scale3d(1, 1, 1) var(--semi-transform-rotate-none);
-  transition: transform 0.3s 0s;
+  transition: transform 300ms 0s;
   z-index: 0;
   user-select: none;
 }
@@ -12041,14 +12054,6 @@ img[src=""], img:not([src]) {
   margin-right: 0;
 }
 
-@keyframes semi-animation-rotate {
-  from {
-    transform: rotate(0);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
 .semi-layout {
   display: flex;
   flex: auto;
@@ -12366,20 +12371,20 @@ img[src=""], img:not([src]) {
   display: none;
 }
 
-.semi-modal-content-animate-hide {
-  animation: 90ms semi-modal-content-keyframe-hide ease forwards;
-}
-
 .semi-modal-content-animate-show {
-  animation: 120ms semi-modal-content-keyframe-show cubic-bezier(0, 0, 0.26, 1.38) forwards;
+  animation: 120ms semi-modal-content-keyframe-show cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
 }
 
-.semi-modal-mask-animate-hide {
-  animation: 90ms semi-modal-mask-keyframe-hide ease forwards;
+.semi-modal-content-animate-hide {
+  animation: 120ms semi-modal-content-keyframe-hide cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
 }
 
 .semi-modal-mask-animate-show {
-  animation: 90ms semi-modal-mask-keyframe-show ease forwards;
+  animation: 90ms semi-modal-mask-keyframe-show cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
+}
+
+.semi-modal-mask-animate-hide {
+  animation: 90ms semi-modal-mask-keyframe-hide cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
 }
 
 @keyframes semi-modal-content-keyframe-show {
@@ -12518,6 +12523,10 @@ img[src=""], img:not([src]) {
 .semi-navigation-sub-wrap .semi-navigation-sub-title-indent, .semi-navigation-item-indent {
   width: 32px;
 }
+.semi-navigation-sub-wrap .semi-navigation-sub-title:focus-visible, .semi-navigation-item:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
+}
 .semi-navigation-header-link, .semi-navigation-item-link {
   display: flex;
   width: 100%;
@@ -12758,6 +12767,14 @@ img[src=""], img:not([src]) {
 .semi-navigation-sub .semi-navigation-sub-wrap {
   height: inherit;
 }
+.semi-navigation-icon-rotate-0 {
+  transition: transform 200ms ease-in-out;
+  transform: rotate(0);
+}
+.semi-navigation-icon-rotate-180 {
+  transition: transform 200ms ease-in-out;
+  transform: rotate(-180deg);
+}
 
 /* Header、Footer-Common */
 .semi-navigation-header {
@@ -13092,6 +13109,10 @@ img[src=""], img:not([src]) {
   min-width: 150px;
 }
 
+.semi-dropdown-menu .semi-navigation-item-sub {
+  padding: 0;
+}
+
 .semi-rtl .semi-navigation,
 .semi-portal-rtl .semi-navigation {
   direction: rtl;
@@ -13341,6 +13362,162 @@ img[src=""], img:not([src]) {
   text-align: center;
   flex-grow: 1;
 }
+@keyframes semi-notification-slideShow_top {
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes semi-notification-slideHide_top {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+}
+@keyframes semi-notification-slideShow_topLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes semi-notification-slideHide_topLeft {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+}
+@keyframes semi-notification-slideShow_topRight {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes semi-notification-slideHide_topRight {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+@keyframes semi-notification-slideShow_bottom {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes semi-notification-slideHide_bottom {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+@keyframes semi-notification-slideShow_bottomLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes semi-notification-slideHide_bottomLeft {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+}
+@keyframes semi-notification-slideShow_bottomRight {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes semi-notification-slideHide_bottomRight {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+.semi-notification-notice-animation-show_top {
+  animation: semi-notification-slideShow_top 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+}
+.semi-notification-notice-animation-hide_top {
+  animation: semi-notification-slideHide_top 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+}
+.semi-notification-notice-animation-show_topLeft {
+  animation: semi-notification-slideShow_topLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+}
+.semi-notification-notice-animation-hide_topLeft {
+  animation: semi-notification-slideHide_topLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+}
+.semi-notification-notice-animation-show_topRight {
+  animation: semi-notification-slideShow_topRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+}
+.semi-notification-notice-animation-hide_topRight {
+  animation: semi-notification-slideHide_topRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+}
+.semi-notification-notice-animation-show_bottom {
+  animation: semi-notification-slideShow_bottom 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+}
+.semi-notification-notice-animation-hide_bottom {
+  animation: semi-notification-slideHide_bottom 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+}
+.semi-notification-notice-animation-show_bottomLeft {
+  animation: semi-notification-slideShow_bottomLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+}
+.semi-notification-notice-animation-hide_bottomLeft {
+  animation: semi-notification-slideHide_bottomLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+}
+.semi-notification-notice-animation-show_bottomRight {
+  animation: semi-notification-slideShow_bottomRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+}
+.semi-notification-notice-animation-hide_bottomRight {
+  animation: semi-notification-slideHide_bottomRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+}
 
 .semi-notification-notice.semi-notification-notice-rtl {
   padding-right: 20px;
@@ -13641,6 +13818,27 @@ img[src=""], img:not([src]) {
   margin-left: 12px;
 }
 
+@keyframes semi-popover-zoomIn {
+  from {
+    opacity: 0;
+    transform: scale(0.8, 0.8);
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes semi-popover-zoomOut {
+  from {
+    opacity: 1;
+  }
+  60% {
+    opacity: 0;
+    transform: scale(0.8, 0.8);
+  }
+  to {
+    opacity: 0;
+  }
+}
 .semi-popover-wrapper {
   position: relative;
   background-color: var(--semi-color-bg-3);
@@ -13671,6 +13869,12 @@ img[src=""], img:not([src]) {
   padding: 12px;
   box-sizing: border-box;
 }
+.semi-popover-animation-show {
+  animation: semi-popover-zoomIn 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.semi-popover-animation-hide {
+  animation: semi-popover-zoomOut 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
 
 .semi-popover-wrapper .semi-popover-icon-arrow {
   height: 8px;
@@ -14434,6 +14638,7 @@ img[src=""], img:not([src]) {
 }
 .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-item-selected {
   font-weight: 600;
+  color: var(--semi-color-primary) !important;
 }
 .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer {
   overflow-x: hidden;
@@ -15049,7 +15254,6 @@ img[src=""], img:not([src]) {
   overflow: auto;
   background-color: var(--semi-color-bg-2);
   border: 0;
-  transition: var(--semi-transition_delay-fastest) var(--semi-transition_function-easeOut) 0ms;
 }
 .semi-sidesheet-header {
   display: flex;
@@ -15077,7 +15281,6 @@ img[src=""], img:not([src]) {
   height: 100%;
   background-color: var(--semi-color-overlay-bg);
   opacity: 1;
-  transition: opacity var(--semi-transition_delay-fastest) var(--semi-transition_function-easeOut) 0ms;
 }
 .semi-sidesheet-mask-hidden {
   opacity: 0;
@@ -15086,6 +15289,116 @@ img[src=""], img:not([src]) {
 .semi-sidesheet-footer {
   padding: 24px;
 }
+@keyframes semi-sidesheet-slideShow_top {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes semi-sidesheet-slideHide_top {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+@keyframes semi-sidesheet-slideShow_bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes semi-sidesheet-slideHide_bottom {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+@keyframes semi-sidesheet-slideShow_left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes semi-sidesheet-slideHide_left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+@keyframes semi-sidesheet-slideShow_right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes semi-sidesheet-slideHide_right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes semi-sidesheet-opacityShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes semi-sidesheet-opacityHide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.semi-sidesheet-animation-content_show_top {
+  animation: semi-sidesheet-slideShow_top 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+}
+.semi-sidesheet-animation-content_hide_top {
+  animation: semi-sidesheet-slideHide_top 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+}
+.semi-sidesheet-animation-content_show_bottom {
+  animation: semi-sidesheet-slideShow_bottom 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+}
+.semi-sidesheet-animation-content_hide_bottom {
+  animation: semi-sidesheet-slideHide_bottom 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+}
+.semi-sidesheet-animation-content_show_left {
+  animation: semi-sidesheet-slideShow_left 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+}
+.semi-sidesheet-animation-content_hide_left {
+  animation: semi-sidesheet-slideHide_left 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+}
+.semi-sidesheet-animation-content_show_right {
+  animation: semi-sidesheet-slideShow_right 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+}
+.semi-sidesheet-animation-content_hide_right {
+  animation: semi-sidesheet-slideHide_right 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+}
+.semi-sidesheet-animation-mask_show {
+  animation: semi-sidesheet-opacityShow 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+}
+.semi-sidesheet-animation-mask_hide {
+  animation: semi-sidesheet-opacityHide 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+}
 
 .semi-sidesheet-fixed .semi-sidesheet-inner {
   box-shadow: var(--semi-shadow-elevated);
@@ -15196,7 +15509,7 @@ img[src=""], img:not([src]) {
 .semi-skeleton-active .semi-skeleton-paragraph li {
   background: linear-gradient(90deg, var(--semi-color-fill-0) 25%, var(--semi-color-fill-1) 44%, var(--semi-color-fill-0) 88%);
   background-size: 400% 100%;
-  animation: skeleton-loading 1.4s ease infinite;
+  animation: 1400ms skeleton-loading ease infinite;
 }
 @keyframes skeleton-loading {
   0% {
@@ -15455,6 +15768,12 @@ img[src=""], img:not([src]) {
   direction: rtl;
 }
 
+.semi-spin {
+  position: relative;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+}
 @keyframes semi-animation-rotate {
   from {
     transform: rotate(0);
@@ -15463,28 +15782,22 @@ img[src=""], img:not([src]) {
     transform: rotate(360deg);
   }
 }
-.semi-spin {
-  position: relative;
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-}
 .semi-spin-wrapper {
   text-align: center;
   position: absolute;
   width: 100%;
-  transform: translate(0, -50%);
+  transform: translateY(-50%);
   top: 50%;
   color: var(--semi-color-primary);
 }
 .semi-spin-wrapper > svg {
-  animation: 0.6s linear infinite semi-animation-rotate;
+  animation: 600ms linear infinite semi-animation-rotate;
   width: 20px;
   height: 20px;
 }
 .semi-spin-animate {
   display: inline-flex;
-  animation: 1.6s linear infinite semi-animation-rotate;
+  animation: 1600ms linear infinite semi-animation-rotate;
 }
 .semi-spin-children {
   opacity: 0.5;
@@ -16747,6 +17060,14 @@ img[src=""], img:not([src]) {
   align-items: center;
   justify-content: center;
 }
+.semi-table-expand-icon .semi-table-expandedIcon-show {
+  transition: transform 150ms cubic-bezier(0.62, 0.05, 0.36, 0.95);
+  transform: rotate(90deg);
+}
+.semi-table-expand-icon .semi-table-expandedIcon-hide {
+  transition: transform 150ms cubic-bezier(0.62, 0.05, 0.36, 0.95);
+  transform: rotate(0deg);
+}
 
 .semi-rtl .semi-table,
 .semi-portal-rtl .semi-table {
@@ -17186,6 +17507,58 @@ img[src=""], img:not([src]) {
 .semi-tabs-pane-inactive, .semi-tabs-content-no-animated .semi-tabs-pane-inactive {
   display: none;
 }
+@keyframes semi-tabs-panel-keyframe-leftShow {
+  0% {
+    transform: translateX(60px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes semi-tabs-panel-keyframe-rightShow {
+  0% {
+    transform: translateX(-60px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes semi-tabs-panel-keyframe-topShow {
+  0% {
+    transform: translateY(60px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes semi-tabs-panel-keyframe-bottomShow {
+  0% {
+    transform: translateY(-60px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.semi-tabs-pane-animate-leftShow {
+  animation: 200ms semi-tabs-panel-keyframe-leftShow ease-in-out 0s;
+}
+.semi-tabs-pane-animate-rightShow {
+  animation: 200ms semi-tabs-panel-keyframe-rightShow ease-in-out 0s;
+}
+.semi-tabs-pane-animate-topShow {
+  animation: 200ms semi-tabs-panel-keyframe-topShow ease-in-out 0s;
+}
+.semi-tabs-pane-animate-bottomShow {
+  animation: 200ms semi-tabs-panel-keyframe-bottomShow ease-in-out 0s;
+}
 
 .semi-rtl .semi-tabs,
 .semi-portal-rtl .semi-tabs {
@@ -17925,6 +18298,23 @@ img[src=""], img:not([src]) {
 .semi-timepicker-panel .semi-scrolllist-body {
   height: 252px;
 }
+.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer-nocycle > ul:before,
+.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item > ul:before {
+  height: 108px;
+}
+.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item > ul,
+.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul {
+  padding-bottom: 108px;
+}
+.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item {
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
+}
+.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
 .semi-timepicker-panel .semi-scrolllist-item,
 .semi-timepicker-panel .semi-scrolllist-item-wheel {
   flex: none;
@@ -18257,6 +18647,30 @@ img[src=""], img:not([src]) {
 .semi-toast .semi-toast-icon-error {
   color: var(--semi-color-danger);
 }
+.semi-toast-animation-show {
+  animation: 300ms semi-toast-keyframe-toast-show cubic-bezier(0.22, 0.57, 0.02, 1.2) 0s;
+}
+.semi-toast-animation-hide {
+  animation: 300ms semi-toast-keyframe-toast-hide cubic-bezier(0.22, 0.57, 0.02, 1.2) 0s;
+}
+@keyframes semi-toast-keyframe-toast-show {
+  0% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes semi-toast-keyframe-toast-hide {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+}
 
 .semi-toast-rtl {
   direction: rtl;
@@ -18335,6 +18749,12 @@ img[src=""], img:not([src]) {
   justify-content: center;
   box-sizing: border-box;
 }
+.semi-tooltip-animation-show {
+  animation: semi-tooltip-zoomIn 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.semi-tooltip-animation-hide {
+  animation: semi-tooltip-zoomOut 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
 
 .semi-tooltip-wrapper .semi-tooltip-icon-arrow {
   height: 7px;
@@ -20241,14 +20661,6 @@ p.semi-typography-extended,
     transform: rotate(360deg);
   }
 }
-@keyframes semi-animation-rotate {
-  from {
-    transform: rotate(0);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
 .semi-button.semi-button-with-icon {
   display: inline-flex;
   align-items: center;