tdesign-react 0.20.2 → 0.21.0

package/dist/tdesign.css

@@ -3916,7 +3916,7 @@
   color:  var(--td-text-color-disabled);
 }
 .t-button--variant-outline:hover {
-  background-color:  var(--td-bg-color-container);
+  background-color:  var(--td-bg-color-specialcomponent);
 }
 .t-button--variant-outline.t-is-disabled {
   background-color:  var(--td-bg-color-component-disabled);
@@ -4138,7 +4138,7 @@
   border: 1px dashed var(--td-brand-color-disabled);
 }
 .t-button--variant-dashed:hover {
-  background-color:  var(--td-bg-color-container);
+  background-color:  var(--td-bg-color-specialcomponent);
 }
 .t-button--variant-dashed.t-is-disabled {
   background-color:  var(--td-bg-color-component-disabled);
@@ -4353,7 +4353,7 @@
   color:  var(--td-text-color-disabled);
 }
 .t-button--variant-text:hover {
-  background-color:  var(--td-bg-color-container-hover);
+  background-color:  var(--td-bg-color-component-hover);
 }
 .t-button--variant-text.t-is-disabled {
   background-color:  transparent;
@@ -7717,58 +7717,58 @@
   display: -ms-flexbox;
   display: flex;
 }
-.t-steps .t-steps-item__inner.t-steps-item-canclick {
+.t-steps .t-steps-item__inner.t-steps-item--clickable {
   cursor: pointer;
 }
-.t-steps .t-steps-item--finish .t-steps-item-icon .t-icon {
+.t-steps .t-steps-item--finish .t-steps-item__icon .t-icon {
   color: var(--td-brand-color);
 }
-.t-steps .t-steps-item--finish .t-steps-item-icon__number {
+.t-steps .t-steps-item--finish .t-steps-item__icon--number {
   border-color: var(--td-brand-color);
 }
-.t-steps .t-steps-item--finish .t-steps-item-title {
+.t-steps .t-steps-item--finish .t-steps-item__title {
   color: var(--td-text-color-primary);
   font-weight: normal;
 }
-.t-steps .t-steps-item--finish .t-steps-item-description {
+.t-steps .t-steps-item--finish .t-steps-item__description {
   color: var(--td-text-color-secondary);
 }
-.t-steps .t-steps-item--process .t-steps-item-icon .t-icon {
+.t-steps .t-steps-item--process .t-steps-item__icon .t-icon {
   color: var(--td-brand-color);
 }
-.t-steps .t-steps-item--process .t-steps-item-icon__number {
+.t-steps .t-steps-item--process .t-steps-item__icon--number {
   border-color: var(--td-brand-color);
   background-color: var(--td-brand-color);
   color: var(--td-text-color-anti);
   font-weight: bold;
 }
-.t-steps .t-steps-item--process .t-steps-item-title {
+.t-steps .t-steps-item--process .t-steps-item__title {
   color: var(--td-brand-color);
   font-weight: bold;
 }
-.t-steps .t-steps-item--process .t-steps-item-description {
+.t-steps .t-steps-item--process .t-steps-item__description {
   color: var(--td-text-color-secondary);
 }
-.t-steps .t-steps-item--error .t-steps-item-icon .t-icon {
+.t-steps .t-steps-item--error .t-steps-item__icon .t-icon {
   color: var(--td-error-color);
 }
-.t-steps .t-steps-item--error .t-steps-item-icon__number {
+.t-steps .t-steps-item--error .t-steps-item__icon--number {
   color: var(--td-error-color);
   border-color: var(--td-error-color);
 }
-.t-steps .t-steps-item--error .t-steps-item-title {
+.t-steps .t-steps-item--error .t-steps-item__title {
   color: var(--td-error-color);
 }
-.t-steps .t-steps-item--error .t-steps-item-description {
+.t-steps .t-steps-item--error .t-steps-item__description {
   color: var(--td-text-color-secondary);
 }
-.t-steps .t-steps-item-icon {
+.t-steps .t-steps-item__icon {
   vertical-align: top;
   font-size: 14px;
   margin-right: 8px;
   color: var(--td-text-color-placeholder);
 }
-.t-steps .t-steps-item-icon__number {
+.t-steps .t-steps-item__icon--number {
   color: var(--td-text-color-placeholder);
   border: 1px solid var(--td-text-color-placeholder);
   display: -webkit-box;
@@ -7787,7 +7787,7 @@
   margin-top: 3px;
   font-size: 16px;
 }
-.t-steps .t-steps-item-icon__finish {
+.t-steps .t-steps-item__icon--finish {
   border: 1px solid var(--td-brand-color);
   display: -webkit-box;
   display: -ms-flexbox;
@@ -7805,7 +7805,7 @@
   margin-top: 3px;
   font-size: 16px;
 }
-.t-steps .t-steps-item-icon__error {
+.t-steps .t-steps-item__icon--error {
   border: 1px solid var(--td-error-color-6);
   color: #000;
   display: -webkit-box;
@@ -7824,40 +7824,40 @@
   margin-top: 3px;
   font-size: 16px;
 }
-.t-steps .t-steps-item-icon > .t-icon {
+.t-steps .t-steps-item__icon > .t-icon {
   font-size: 24px;
 }
-.t-steps .t-steps-item-title {
+.t-steps .t-steps-item__title {
   position: relative;
   padding-right: 8px;
   color: var(--td-text-color-placeholder);
   font-size: 16px;
   line-height: 24px;
 }
-.t-steps .t-steps-item-description {
+.t-steps .t-steps-item__description {
   color: var(--td-text-color-placeholder);
   font-size: 14px;
   margin-bottom: 4px;
   line-height: 22px;
 }
-.t-steps--horizontal.t-steps--default-anchor .t-steps-item-content {
+.t-steps--horizontal.t-steps--default-anchor .t-steps-item__content {
   margin-top: 4px;
 }
-.t-steps--horizontal.t-steps--default-anchor .t-steps-item-title {
+.t-steps--horizontal.t-steps--default-anchor .t-steps-item__title {
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
   margin-bottom: 4px;
 }
-.t-steps--horizontal.t-steps--default-anchor .t-steps-item-icon__number {
+.t-steps--horizontal.t-steps--default-anchor .t-steps-item__icon__number {
   width: steps-circle-width;
   height: 24px;
   margin-top: 3px;
 }
-.t-steps--horizontal.t-steps--default-anchor .t-steps-item-icon > .t-icon {
+.t-steps--horizontal.t-steps--default-anchor .t-steps-item__icon > .t-icon {
   font-size: 35px;
 }
-.t-steps--horizontal.t-steps--default-anchor .t-steps-item:not(:last-child) .t-steps-item-title:after {
+.t-steps--horizontal.t-steps--default-anchor .t-steps-item:not(:last-child) .t-steps-item__title:after {
   content: "";
   display: block;
   width: 9999px;
@@ -7869,25 +7869,25 @@
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
-.t-steps--horizontal.t-steps--default-anchor .t-steps-item--finish:not(:last-child) .t-steps-item-title:after {
+.t-steps--horizontal.t-steps--default-anchor .t-steps-item--finish:not(:last-child) .t-steps-item__title:after {
   background: var(--td-brand-color);
   height: 2px;
 }
 .t-steps--horizontal.t-steps--dot-anchor .t-steps-item {
   overflow: visible;
 }
-.t-steps--horizontal.t-steps--dot-anchor .t-steps-item .t-steps-item-title {
+.t-steps--horizontal.t-steps--dot-anchor .t-steps-item .t-steps-item__title {
   padding-right: 0;
   margin-bottom: 4px;
 }
-.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--finish .t-steps-item-icon {
+.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--finish .t-steps-item__icon {
   border-color: var(--td-brand-color);
 }
-.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--process .t-steps-item-icon {
+.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--process .t-steps-item__icon {
   background: var(--td-brand-color);
   border-color: var(--td-brand-color);
 }
-.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--error .t-steps-item-icon {
+.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--error .t-steps-item__icon {
   background: var(--td-error-color);
   border-color: var(--td-error-color);
 }
@@ -7903,7 +7903,7 @@
       -ms-flex-align: center;
           align-items: center;
 }
-.t-steps--horizontal.t-steps--dot-anchor .t-steps-item-icon {
+.t-steps--horizontal.t-steps--dot-anchor .t-steps-item__icon {
   display: block;
   width: 8px;
   height: 8px;
@@ -7912,7 +7912,7 @@
   margin-bottom: 4px;
   position: relative;
 }
-.t-steps--horizontal.t-steps--dot-anchor .t-steps-item-content {
+.t-steps--horizontal.t-steps--dot-anchor .t-steps-item__content {
   text-align: center;
   width: 140px;
 }
@@ -7954,11 +7954,11 @@
   background: var(--td-brand-color);
   width: 2px;
 }
-.t-steps--vertical.t-steps--default-anchor .t-steps-item-content {
+.t-steps--vertical.t-steps--default-anchor .t-steps-item__content {
   margin-top: 2px;
   margin-left: 0px;
 }
-.t-steps--vertical.t-steps--default-anchor .t-steps-item-title {
+.t-steps--vertical.t-steps--default-anchor .t-steps-item__title {
   margin-bottom: 4px;
 }
 .t-steps--vertical.t-steps--dot-anchor.t-steps--positive .t-steps-item:not(:last-child)::before {
@@ -7978,18 +7978,18 @@
 .t-steps--vertical.t-steps--dot-anchor .t-steps-item {
   margin-bottom: 0;
 }
-.t-steps--vertical.t-steps--dot-anchor .t-steps-item--finish .t-steps-item-icon {
+.t-steps--vertical.t-steps--dot-anchor .t-steps-item--finish .t-steps-item__icon {
   border-color: var(--td-brand-color);
 }
-.t-steps--vertical.t-steps--dot-anchor .t-steps-item--process .t-steps-item-icon {
+.t-steps--vertical.t-steps--dot-anchor .t-steps-item--process .t-steps-item__icon {
   background: var(--td-brand-color);
   border-color: var(--td-brand-color);
 }
-.t-steps--vertical.t-steps--dot-anchor .t-steps-item--error .t-steps-item-icon {
+.t-steps--vertical.t-steps--dot-anchor .t-steps-item--error .t-steps-item__icon {
   background: var(--td-error-color);
   border-color: var(--td-error-color);
 }
-.t-steps--vertical.t-steps--dot-anchor .t-steps-item-icon {
+.t-steps--vertical.t-steps--dot-anchor .t-steps-item__icon {
   display: block;
   width: 8px;
   height: 8px;
@@ -9137,7 +9137,7 @@ a .t-tag:active {
   --td-table-shadow-color: rgba(0, 0, 0, 0.55);
   --td-scrollbar-color: rgba(255, 255, 255, 0.1);
 }
-.t-select-wrap {
+.t-select__wrap {
   width: 100%;
 }
 .t-select {
@@ -9164,24 +9164,24 @@ a .t-tag:active {
   cursor: pointer;
   border-color: var(--td-brand-color);
 }
-.t-select:hover > .t-select-right-icon:not(.t-select-right-icon__clear),
-.t-select :active > .t-select-right-icon:not(.t-select-right-icon__clear) {
+.t-select:hover > .t-select__right-icon:not(.t-select__right-icon-clear),
+.t-select :active > .t-select__right-icon:not(.t-select__right-icon-clear) {
   color: var(--td-brand-color);
   opacity: 1;
 }
 .t-select.t-no-border {
   line-height: 32px;
 }
-.t-select .t-select-placeholder {
+.t-select .t-select__placeholder {
   margin-left: 4px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-.t-select:not(.t-is-disabled) .t-select-placeholder {
+.t-select:not(.t-is-disabled) .t-select__placeholder {
   color: var(--td-text-color-placeholder);
 }
-.t-select .t-select-selectedSingle {
+.t-select .t-select__single {
   margin-left: 4px;
   display: block;
   color: var(--td-text-color-primary);
@@ -9190,7 +9190,7 @@ a .t-tag:active {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.t-select .t-select-right-icon {
+.t-select .t-select__right-icon {
   position: absolute;
   height: 100%;
   margin: 0 8px;
@@ -9200,10 +9200,10 @@ a .t-tag:active {
   -webkit-transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
   transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
 }
-.t-select .t-select-active-icon {
+.t-select .t-select__active-icon {
   color: var(--td-brand-color);
 }
-.t-select .t-select-right-icon.t-is-visible {
+.t-select .t-select__right-icon.t-is-visible {
   -webkit-transform: scaleY(-1);
           transform: scaleY(-1);
   -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.38, 0, 0.24, 1);
@@ -9214,7 +9214,7 @@ a .t-tag:active {
   -webkit-filter: flipv;
           filter: flipv;
 }
-.t-select .t-select-left-icon {
+.t-select .t-select__left-icon {
   position: absolute;
   height: 100%;
   margin: 0 8px;
@@ -9230,27 +9230,27 @@ a .t-tag:active {
       -ms-flex-align: center;
           align-items: center;
 }
-.t-select .t-select-input {
+.t-select .t-select__input {
   margin-left: 4px;
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
 }
-.t-select .t-select-input .t-input__inner {
+.t-select .t-select__input .t-input__inner {
   border: 0;
   padding: 0;
 }
-.t-select .t-select-input .t-input__inner:hover,
-.t-select .t-select-input .t-input__inner:focus {
+.t-select .t-select__input .t-input__inner:hover,
+.t-select .t-select__input .t-input__inner:focus {
   -webkit-box-shadow: none;
           box-shadow: none;
   border-color: transparent;
 }
-.t-select .t-select-input:focus,
-.t-select .t-select-input :hover {
+.t-select .t-select__input:focus,
+.t-select .t-select__input :hover {
   border: 0;
 }
-.t-select .t-select-input input {
+.t-select .t-select__input input {
   height: 30px;
   line-height: 30px;
 }
@@ -9269,7 +9269,7 @@ a .t-tag:active {
   -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus);
           box-shadow: 0 0 0 2px var(--td-brand-color-focus);
 }
-.t-select.t-is-active:not(.t-is-disabled) .t-select-right-icon:not(.t-select-right-icon__clear) {
+.t-select.t-is-active:not(.t-is-disabled) .t-select__right-icon:not(.t-select__right-icon-clear) {
   color: var(--td-brand-color);
   opacity: 1;
 }
@@ -9288,18 +9288,18 @@ a .t-tag:active {
 .t-select.t-no-border:active {
   background-color: var(--td-bg-color-container-active);
 }
-.t-select.t-no-border > .t-select-selectedSingle {
+.t-select.t-no-border > .t-select__single {
   margin-right: 8px;
 }
 .t-select.t-size-l {
   line-height: 38px;
   font-size: 16px;
 }
-.t-select.t-size-l .t-select-input {
+.t-select.t-size-l .t-select__input {
   line-height: 38px;
   height: 38px;
 }
-.t-select.t-size-l .t-select-input .t-input__inner {
+.t-select.t-size-l .t-select__input .t-input__inner {
   height: 38px;
   line-height: 38px;
 }
@@ -9311,11 +9311,11 @@ a .t-tag:active {
   line-height: 22px;
   font-size: 12px;
 }
-.t-select.t-size-s .t-select-input {
+.t-select.t-size-s .t-select__input {
   line-height: 22px;
   height: 22px;
 }
-.t-select.t-size-s .t-select-input .t-input__inner {
+.t-select.t-size-s .t-select__input .t-input__inner {
   height: 22px;
   line-height: 22px;
 }
@@ -9329,19 +9329,19 @@ a .t-tag:active {
   color: var(--td-text-color-disabled);
   border-color: var(--td-border-level-2-color);
 }
-.t-select.t-is-disabled > .t-select-right-icon {
+.t-select.t-is-disabled > .t-select__right-icon {
   color: var(--td-text-color-disabled);
 }
-.t-select.t-is-disabled > .t-select-left-icon {
+.t-select.t-is-disabled > .t-select__left-icon {
   color: var(--td-text-color-disabled);
 }
-.t-select.t-is-disabled > .t-select-selectedSingle {
+.t-select.t-is-disabled > .t-select__single {
   color: var(--td-text-color-disabled);
 }
-.t-select-popup-reference {
+.t-select__popup-reference {
   width: 100%;
 }
-.t-select-dropdown {
+.t-select__dropdown {
   margin: 8px 0;
   padding: 0;
   max-height: 300px;
@@ -9350,42 +9350,43 @@ a .t-tag:active {
           box-shadow: var(--td-shadow-2);
   border-radius: 3px;
 }
-.t-select-dropdown > div {
+.t-select__dropdown > div {
   padding: 8px;
 }
-.t-select-dropdown.t-popup {
+.t-select__dropdown.t-popup {
   padding: 0;
 }
-.t-select-empty.t-size-s {
+.t-select__empty.t-size-s {
   line-height: 24px;
 }
-.t-select-empty {
+.t-select__empty {
   text-align: center;
   color: var(--td-text-color-disabled);
   line-height: 32px;
 }
-.t-select-empty.t-size-l {
+.t-select__empty.t-size-l {
   line-height: 40px;
 }
-.t-select-loading-tips.t-size-s {
+.t-select__loading-tips.t-size-s {
   line-height: 24px;
 }
-.t-select-loading-tips {
+.t-select__loading-tips {
   text-align: center;
   line-height: 32px;
+  color: var(--td-text-color-disabled);
 }
-.t-select-loading-tips.t-size-l {
+.t-select__loading-tips.t-size-l {
   line-height: 40px;
 }
-.t-option-group + .t-option-group {
+.t-select-option-group + .t-select-option-group {
   padding-top: 7px;
   margin-top: 7px;
 }
-.t-option-group__divider + .t-option-group__divider {
+.t-select-option-group__divider + .t-select-option-group__divider {
   border-top: 1px var(--td-border-level-1-color) solid;
 }
-ul.t-option-group-header,
-.t-option-group-header {
+ul.t-select-option-group__header,
+.t-select-option-group__header {
   color: var(--td-text-color-placeholder);
   display: block;
   height: 40px;
@@ -9396,11 +9397,11 @@ ul.t-option-group-header,
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.t-option-group-header.t-size-l {
+.t-select-option-group__header.t-size-l {
   height: 48px;
   padding: 13px 16px;
 }
-.t-option-group-header.t-size-s {
+.t-select-option-group__header.t-size-s {
   height: 32px;
   padding: 5px 8px;
 }
@@ -9476,6 +9477,15 @@ ul.t-option-group-header,
 .t-select-option.t-is-selected:hover {
   background-color: var(--td-brand-color-light);
 }
+.t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected) {
+  background-color: var(--td-bg-color-container-hover);
+}
+.t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected) .t-checkbox__input {
+  border-color: var(--td-brand-color);
+}
+.t-select-option.t-select-option__hover .t-checkbox__label {
+  color: inherit;
+}
 .t-select-option + .t-select-option {
   margin-top: 4px;
 }
@@ -9767,7 +9777,7 @@ ul.t-option-group-header,
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.t-pagination .t-select-wrap {
+.t-pagination .t-select__wrap {
   width: auto;
 }
 .t-pagination__select {
@@ -10578,6 +10588,7 @@ ul.t-option-group-header,
   border-radius: 11px;
 }
 .t-table {
+  width: 100%;
   font-size: 14px;
   color: var(--td-text-color-primary);
   background-color: var(--td-bg-color-container);
@@ -11130,6 +11141,43 @@ ul.t-option-group-header,
 .t-table-expandable-icon-cell + .t-table__cell--selectable[key="row-select"] {
   padding-left: 10px;
 }
+.t-table__filter--bottom-buttons {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+  padding: 16px;
+  border-top: 1px solid var(--td-component-border);
+}
+.t-table__filter--bottom-buttons > .t-button + .t-button {
+  margin-left: 8px;
+}
+.t-table td.t-table__row--full {
+  padding: 0;
+}
+.t-table__row-filter-inner {
+  position: -webkit-sticky;
+  position: sticky;
+  left: 0;
+  padding: 13px 24px 12px 24px;
+  text-align: center;
+}
+.t-table__filter-result {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+.t-table__filter-result > .t-button {
+  margin-left: 8px;
+}
 
 .narrow-scrollbar::-webkit-scrollbar {
   width: 8px;
@@ -22224,6 +22272,7 @@ small.t-upload__tips-error {
   border-radius: 50%;
   background-color: var(--td-brand-color);
   position: relative;
+  z-index: 2;
   left: 17px;
   top: 34px;
 }
@@ -23445,7 +23494,7 @@ small.t-upload__tips-error {
   color: var(--td-text-color-primary);
   max-height: 100%;
 }
-.t-transfer-list {
+.t-transfer__list {
   position: relative;
   display: inline-block;
   min-width: 196px;
@@ -23455,12 +23504,12 @@ small.t-upload__tips-error {
   word-break: break-word;
   vertical-align: middle;
 }
-.t-transfer-list-source,
-.t-transfer-list-target {
+.t-transfer__list-source,
+.t-transfer__list-target {
   border: 1px solid var(--td-border-level-1-color);
   border-radius: 3px;
 }
-.t-transfer-list__header {
+.t-transfer__list-header {
   position: absolute;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -23475,63 +23524,57 @@ small.t-upload__tips-error {
   padding: 0 12px;
   margin: 0 8px;
 }
-.t-transfer-list__header + :not(.t-transfer-list-with-search) {
+.t-transfer__list-header + :not(.t-transfer__list--with-search) {
   border-top: 1px solid var(--td-border-level-1-color);
 }
-.t-transfer-list__header .t-checkbox {
+.t-transfer__list-header .t-checkbox {
   margin-right: 0;
 }
-.t-transfer-list__header .t-checkbox__label {
+.t-transfer__list-header .t-checkbox__label {
   margin: 0;
 }
-.t-transfer-list__header div {
+.t-transfer__list-header div {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
-.t-transfer-list__header div > span {
+.t-transfer__list-header div > span {
   margin-left: 8px;
 }
-.t-transfer-list__header > span {
+.t-transfer__list-header > span {
   color: var(--td-text-color-placeholder);
 }
-.t-transfer-list__body {
+.t-transfer__list-body {
   position: relative;
   height: 100%;
   padding: 8px 0 8px 0;
 }
-.t-transfer-list-with-search {
+.t-transfer__list--with-search {
   padding-top: 40px;
   border-top: 0;
 }
-.t-transfer-list-search-wrapper {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  padding: 0 8px;
-}
-.t-transfer-list__content {
+.t-transfer__list-content {
   height: 100%;
   width: 100%;
   overflow: auto;
 }
-.t-transfer-list__content .t-checkbox-group {
+.t-transfer__list-content .t-checkbox-group {
   width: 100%;
 }
-.t-transfer-list__content .t-checkbox-group .t-checkbox {
+.t-transfer__list-content .t-checkbox-group .t-checkbox {
   margin-right: 8px;
   --ripple-color: var(--td-bg-color-container-active);
 }
-.t-transfer-list__content .t-checkbox-group .t-checkbox + .t-checkbox {
+.t-transfer__list-content .t-checkbox-group .t-checkbox + .t-checkbox {
   margin-left: 8px;
 }
-.t-transfer-list__content .t-checkbox-group .t-checkbox__label {
+.t-transfer__list-content .t-checkbox-group .t-checkbox__label {
   margin: 0;
 }
-.t-transfer-list__content .t-checkbox-group .t-checkbox__label > span {
+.t-transfer__list-content .t-checkbox-group .t-checkbox__label > span {
   margin-left: 8px;
 }
-.t-transfer-list__item {
+.t-transfer__list-item {
   padding: 5px 12px;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -23542,41 +23585,41 @@ small.t-upload__tips-error {
   -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
   transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
 }
-.t-transfer-list__item:first-child {
+.t-transfer__list-item:first-child {
   margin-top: 0;
 }
-.t-transfer-list__item.t-is-disabled:hover {
+.t-transfer__list-item.t-is-disabled:hover {
   background: transparent;
 }
-.t-transfer-list__item:hover {
+.t-transfer__list-item:hover {
   background: var(--td-bg-color-container-hover);
   -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
   transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
 }
-.t-transfer-list__item.t-is-checked {
+.t-transfer__list-item.t-is-checked {
   background: var(--td-brand-color-1);
 }
-.t-transfer-list__wrapper {
+.t-transfer__list-wrapper {
   position: relative;
   height: 100%;
   width: 100%;
   overflow: auto;
   padding: 12px;
 }
-.t-transfer-list__pagination {
+.t-transfer__list-pagination {
   height: 24px;
   vertical-align: middle;
   padding: 0 8px 0 4px;
   line-height: 16px;
 }
-.t-transfer-list__footer {
+.t-transfer__list-footer {
   position: absolute;
   left: 0;
   bottom: 0;
   border-top: 1px solid var(--td-border-level-1-color);
   width: 100%;
 }
-.t-transfer-operations {
+.t-transfer__operations {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -23588,7 +23631,7 @@ small.t-upload__tips-error {
   vertical-align: middle;
   overflow: hidden;
 }
-.t-transfer-operations button {
+.t-transfer__operations button {
   display: block;
   padding: 0 3px 1px;
   height: 24px;
@@ -23596,19 +23639,19 @@ small.t-upload__tips-error {
   -webkit-transition: none;
   transition: none;
 }
-.t-transfer-operations button:first-child {
+.t-transfer__operations button:first-child {
   margin-bottom: 14px;
 }
-.t-transfer-operations .t-icon {
+.t-transfer__operations .t-icon {
   font-size: 16px;
 }
-.t-transfer-operations .t-icon + .t-button__text {
+.t-transfer__operations .t-icon + .t-button__text {
   margin-left: 0;
 }
-.t-transfer-operations .t-button--icon-only {
+.t-transfer__operations .t-button--icon-only {
   width: 24px;
 }
-.t-transfer-empty {
+.t-transfer__empty {
   text-align: center;
   position: absolute;
   color: var(--td-text-color-placeholder);
@@ -23617,37 +23660,43 @@ small.t-upload__tips-error {
   -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
 }
-.t-transfer-search .t-transfer-list {
+.t-transfer__search-wrapper {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  padding: 0 8px;
+}
+.t-transfer__search .t-transfer__list {
   height: 240px;
 }
-.t-transfer-with-tree .t-transfer-list {
+.t-transfer--with-tree .t-transfer__list {
   height: auto;
 }
-.t-transfer-pagination .t-transfer-list {
+.t-transfer__pagination .t-transfer__list {
   height: 240px;
   padding-bottom: 32px;
 }
-.t-transfer-footer .t-transfer-list {
+.t-transfer__footer .t-transfer__list {
   height: 248px;
   padding-bottom: 48px;
 }
-.t-transfer-pagination.t-transfer-footer .t-transfer-list {
+.t-transfer__pagination.t-transfer__footer .t-transfer__list {
   height: 288px;
   padding-bottom: 88px;
 }
-.t-transfer-search.t-transfer-footer .t-transfer-list {
+.t-transfer__search.t-transfer__footer .t-transfer__list {
   height: 288px;
   padding-bottom: 48px;
 }
-.t-transfer-search.t-transfer-pagination .t-transfer-list {
+.t-transfer__search.t-transfer__pagination .t-transfer__list {
   height: 280px;
   padding-bottom: 40px;
 }
-.t-transfer-search.t-transfer-footer.t-transfer-pagination .t-transfer-list {
+.t-transfer__search.t-transfer__footer.t-transfer__pagination .t-transfer__list {
   height: 328px;
   padding-bottom: 88px;
 }
-.t-transfer-wrapper .t-transfer-list {
+.t-transfer__wrapper .t-transfer__list {
   height: 320px;
   width: 206px;
   overflow: scroll;