@douyinfe/semi-ui 2.15.0 → 2.16.0-beta.0

package/dist/umd/semi-ui.js

@@ -26052,11 +26052,11 @@ function getAncestorNodeByRole(curElement, role) {
   }
 
   return curElement.parentElement;
-} // According to the Id, find the corresponding data-popupId element
+} // According to the Id, find the corresponding data-popupid element
 
 function getMenuButton(focusableEle, Id) {
   for (let i = 0; i < focusableEle.length; i++) {
-    const curAriDescribedby = focusableEle[i].attributes['data-popupId'];
+    const curAriDescribedby = focusableEle[i].attributes['data-popupid'];
 
     if (curAriDescribedby && curAriDescribedby.value === Id) {
       return focusableEle[i];
@@ -29936,7 +29936,7 @@ class tooltip_Tooltip extends baseComponent_BaseComponent {
         }
       },
       tabIndex: 0,
-      'data-popupId': id
+      'data-popupid': id
     })); // If you do not add a layer of div, in order to bind the events and className in the tooltip, you need to cloneElement children, but this time it may overwrite the children's original ref reference
     // So if the user adds ref to the content, you need to use callback ref: https://github.com/facebook/react/issues/8873
 
@@ -33480,12 +33480,18 @@ const wrapperDecorations = (props, content) => {
     underline,
     strong,
     link,
-    disabled
+    disabled,
+    icon
   } = props;
   let wrapped = content;
 
   const wrap = (isNeeded, tag) => {
-    let wrapProps = {};
+    let wrapProps = icon ? {
+      style: {
+        display: 'inline-flex',
+        alignItems: 'center'
+      }
+    } : {};
 
     if (!isNeeded) {
       return;
@@ -33503,7 +33509,13 @@ const wrapperDecorations = (props, content) => {
   wrap(underline && !link, 'u');
   wrap(strong, 'strong');
   wrap(props.delete, 'del');
-  wrap(link, disabled ? 'span' : 'a');
+  wrap(link, disabled ? 'span' : 'a'); // When the content is not wrapped, and there is more than one element in the content (one of which is an icon), 
+  // use span to wrap the content, so that the content in the span is vertically aligned
+
+  if (wrapped === content && icon) {
+    wrap(true, 'span');
+  }
+
   return wrapped;
 };
 
@@ -34135,11 +34147,20 @@ base_Base.defaultProps = {
 
 
 
+
+
+const text_prefixCls = constants_cssClasses.PREFIX;
 class text_Text extends external_root_React_commonjs2_react_commonjs_react_amd_react_["PureComponent"] {
   render() {
+    const className = classnames_default()(this.props.className, {
+      ["".concat(text_prefixCls, "-text")]: true,
+      ["".concat(text_prefixCls, "-text-icon")]: this.props.icon
+    });
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(base_Base, assign_default()({
       component: 'span'
-    }, this.props));
+    }, this.props, {
+      className: className
+    }));
   }
 
 }
@@ -38889,6 +38910,9 @@ class iconButton_IconButton extends external_root_React_commonjs2_react_commonjs
     } else if (noHorizontalPadding === true) {
       style.paddingLeft = 0;
       style.paddingRight = 0;
+    } else if (typeof noHorizontalPadding === 'string') {
+      noHorizontalPadding === 'left' && (style.paddingLeft = 0);
+      noHorizontalPadding === 'right' && (style.paddingRight = 0);
     }
 
     let finalChildren = null;
@@ -40088,9 +40112,10 @@ buttonGroup_ButtonGroup.propTypes = {
   'aria-label': prop_types_default.a.string
 };
 buttonGroup_ButtonGroup.defaultProps = {
-  size: 'default',
-  type: 'primary',
-  theme: 'light'
+  // There are default values ​​for type and theme in Button. 
+  // In order to allow users to individually customize the type and theme of the Button through the parameters of the Button in the ButtonGroup,
+  // the default value of type and theme is not given in the ButtonGroup。
+  size: 'default'
 };
 // EXTERNAL MODULE: /home/runner/work/semi-design/semi-design/node_modules/@babel/runtime-corejs3/core-js-stable/instance/keys.js
 var instance_keys = __webpack_require__("BoX2");
@@ -52588,7 +52613,8 @@ class cascader_Cascader extends baseComponent_BaseComponent {
       autoAdjustOverflow,
       stopPropagation,
       mouseLeaveDelay,
-      mouseEnterDelay
+      mouseEnterDelay,
+      position
     } = this.props;
     const {
       isOpen,
@@ -52599,7 +52625,7 @@ class cascader_Cascader extends baseComponent_BaseComponent {
     } = this.context;
     const content = this.renderContent();
     const selection = this.renderSelection();
-    const pos = direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
+    const pos = position !== null && position !== void 0 ? position : direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
     const mergedMotion = this.foundation.getMergedMotion();
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(popover_0, {
       getPopupContainer: getPopupContainer,
@@ -52693,7 +52719,8 @@ cascader_Cascader.propTypes = {
   disableStrictly: prop_types_default.a.bool,
   leafOnly: prop_types_default.a.bool,
   enableLeafClick: prop_types_default.a.bool,
-  preventScroll: prop_types_default.a.bool
+  preventScroll: prop_types_default.a.bool,
+  position: prop_types_default.a.string
 };
 cascader_Cascader.defaultProps = {
   leafOnly: false,
@@ -68152,7 +68179,7 @@ class foundation_DropdownFoundation extends foundation {
   getMenuItemNodes(target) {
     var _context;
 
-    const id = target.attributes['data-popupId'].value;
+    const id = target.attributes['data-popupid'].value;
     const menuWrapper = document.getElementById(id); // if has dropdown item, the item must wrapped by li
 
     return menuWrapper ? filter_default()(_context = from_default()(menuWrapper.getElementsByTagName('li'))).call(_context, item => item.ariaDisabled === "false") : null;
@@ -68223,7 +68250,7 @@ class menuFoundation_DropdownMenuFoundation extends foundation {
     const trigger = this._adapter.getContext('trigger');
 
     if (trigger === 'custom') {
-      const menuButton = menu && getMenuButton(document.querySelectorAll("[data-popupId]"), menu.id);
+      const menuButton = menu && getMenuButton(document.querySelectorAll("[data-popupid]"), menu.id);
       menuButton.focus();
     }
   }
@@ -85101,6 +85128,7 @@ const touchEventPolyfill = (touch, touchEvent) => {
 
 
 
+
 /* eslint-disable no-param-reassign */
 
 /* eslint-disable max-len */
@@ -85108,6 +85136,8 @@ const touchEventPolyfill = (touch, touchEvent) => {
 /* eslint-disable no-nested-ternary */
 
 
+
+
 class foundation_SliderFoundation extends foundation {
   constructor(adapter) {
     var _this;
@@ -85632,8 +85662,7 @@ class foundation_SliderFoundation extends foundation {
       const handleMaxDom = this._adapter.getMaxHandleEl().current;
 
       if (e.target === handleMinDom || e.target === handleMaxDom) {
-        e.preventDefault();
-        e.stopPropagation();
+        handlePrevent(e);
         const touch = touchPolyfill(e.touches[0], e);
         this.onHandleDown(touch, handler);
       }
@@ -85697,18 +85726,203 @@ class foundation_SliderFoundation extends foundation {
         this._adapter.setDragging([dragging[0], false]);
       }
 
-      this._adapter.setStateVal('isDrag', false); // this._adapter.setStateVal('chooseMovePos', '');
-
+      this._adapter.setStateVal('isDrag', false);
 
       this._adapter.onHandleLeave();
 
       this._adapter.onHandleUpAfter();
 
       return true;
+    };
+
+    this._handleValueDecreaseWithKeyBoard = (step, handler) => {
+      const {
+        min,
+        currentValue
+      } = this.getStates();
+      const {
+        range
+      } = this.getProps();
+
+      if (handler === 'min') {
+        if (range) {
+          let newMinValue = currentValue[0] - step;
+          newMinValue = newMinValue < min ? min : newMinValue;
+          return [newMinValue, currentValue[1]];
+        } else {
+          let newMinValue = currentValue - step;
+          newMinValue = newMinValue < min ? min : newMinValue;
+          return newMinValue;
+        }
+      } else {
+        let newMaxValue = currentValue[1] - step;
+        newMaxValue = newMaxValue < currentValue[0] ? currentValue[0] : newMaxValue;
+        return [currentValue[0], newMaxValue];
+      }
+    };
+
+    this._handleValueIncreaseWithKeyBoard = (step, handler) => {
+      const {
+        max,
+        currentValue
+      } = this.getStates();
+      const {
+        range
+      } = this.getProps();
+
+      if (handler === 'min') {
+        if (range) {
+          let newMinValue = currentValue[0] + step;
+          newMinValue = newMinValue > currentValue[1] ? currentValue[1] : newMinValue;
+          return [newMinValue, currentValue[1]];
+        } else {
+          let newMinValue = currentValue + step;
+          newMinValue = newMinValue > max ? max : newMinValue;
+          return newMinValue;
+        }
+      } else {
+        let newMaxValue = currentValue[1] + step;
+        newMaxValue = newMaxValue > max ? max : newMaxValue;
+        return [currentValue[0], newMaxValue];
+      }
+    };
+
+    this._handleHomeKey = handler => {
+      const {
+        min,
+        currentValue
+      } = this.getStates();
+      const {
+        range
+      } = this.getProps();
+
+      if (handler === 'min') {
+        if (range) {
+          return [min, currentValue[1]];
+        } else {
+          return min;
+        }
+      } else {
+        return [currentValue[0], currentValue[0]];
+      }
+    };
+
+    this._handleEndKey = handler => {
+      const {
+        max,
+        currentValue
+      } = this.getStates();
+      const {
+        range
+      } = this.getProps();
+
+      if (handler === 'min') {
+        if (range) {
+          return [currentValue[1], currentValue[1]];
+        } else {
+          return max;
+        }
+      } else {
+        return [currentValue[0], max];
+      }
+    };
+
+    this.handleKeyDown = (event, handler) => {
+      var _context;
+
+      const {
+        min,
+        max,
+        currentValue
+      } = this.getStates();
+      const {
+        step,
+        range
+      } = this.getProps();
+      let outputValue;
+
+      switch (event.key) {
+        case "ArrowLeft":
+        case "ArrowDown":
+          outputValue = this._handleValueDecreaseWithKeyBoard(step, handler);
+          break;
+
+        case "ArrowRight":
+        case "ArrowUp":
+          outputValue = this._handleValueIncreaseWithKeyBoard(step, handler);
+          break;
+
+        case "PageUp":
+          outputValue = this._handleValueIncreaseWithKeyBoard(10 * step, handler);
+          break;
+
+        case "PageDown":
+          outputValue = this._handleValueDecreaseWithKeyBoard(10 * step, handler);
+          break;
+
+        case "Home":
+          outputValue = this._handleHomeKey(handler);
+          break;
+
+        case "End":
+          outputValue = this._handleEndKey(handler);
+          break;
+
+        case 'default':
+          break;
+      }
+
+      if (includes_default()(_context = ["ArrowLeft", "ArrowDown", "ArrowRight", "ArrowUp", "PageUp", "PageDown", "Home", "End"]).call(_context, event.key)) {
+        let update = true;
+
+        if (is_array_default()(currentValue)) {
+          update = !(currentValue[0] === outputValue[0] && currentValue[1] === outputValue[1]);
+        } else {
+          update = currentValue !== outputValue;
+        }
+
+        if (update) {
+          this._adapter.updateCurrentValue(outputValue);
+
+          this._adapter.notifyChange(outputValue);
+        }
+
+        handlePrevent(event);
+      }
     }; // eslint-disable-next-line @typescript-eslint/no-empty-function
 
 
-    this.onFocus = (e, handler) => {};
+    this.onFocus = (e, handler) => {
+      handlePrevent(e);
+      const {
+        target
+      } = e;
+
+      try {
+        if (target.matches(':focus-visible')) {
+          if (handler === 'min') {
+            this._adapter.setStateVal('firstDotFocusVisible', true);
+          } else {
+            this._adapter.setStateVal('secondDotFocusVisible', true);
+          }
+        }
+      } catch (error) {
+        Object(warning["a" /* default */])(true, 'Warning: [Semi Slider] The current browser does not support the focus-visible');
+      }
+    };
+
+    this.onBlur = (e, handler) => {
+      const {
+        firstDotFocusVisible,
+        secondDotFocusVisible
+      } = this.getStates();
+
+      if (handler === 'min') {
+        firstDotFocusVisible && this._adapter.setStateVal('firstDotFocusVisible', false);
+      } else {
+        secondDotFocusVisible && this._adapter.setStateVal('secondDotFocusVisible', false);
+      }
+    };
 
     this.handleWrapClick = e => {
       const {
@@ -85901,7 +86115,9 @@ class slider_Slider extends baseComponent_BaseComponent {
       const {
         chooseMovePos,
         isDrag,
-        isInRenderTree
+        isInRenderTree,
+        firstDotFocusVisible,
+        secondDotFocusVisible
       } = this.state;
       const stylePos = vertical ? 'top' : 'left';
       const percentInfo = this.foundation.getMinAndMaxPercent(this.state.currentValue);
@@ -85927,7 +86143,7 @@ class slider_Slider extends baseComponent_BaseComponent {
         currentValue
       } = this.state;
       const commonAria = {
-        'aria-label': ariaLabel,
+        'aria-label': ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : disabled ? 'Disabled Slider' : undefined,
         'aria-labelledby': ariaLabelledby,
         'aria-disabled': disabled
       };
@@ -85939,7 +86155,7 @@ class slider_Slider extends baseComponent_BaseComponent {
         position: "top",
         trigger: "custom",
         rePosKey: minPercent,
-        visible: isInRenderTree && tipVisible.min,
+        visible: isInRenderTree && (tipVisible.min || firstDotFocusVisible),
         className: "".concat(slider_constants_cssClasses.HANDLE, "-tooltip")
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", assign_default()({
         onMouseOver: this.foundation.checkAndUpdateIsInRenderTreeState,
@@ -85971,20 +86187,28 @@ class slider_Slider extends baseComponent_BaseComponent {
         onTouchEnd: e => {
           this.foundation.onHandleUp(e);
         },
-        onFocus: e => this.foundation.onFocus(e, 'min'),
+        onKeyDown: e => {
+          this.foundation.handleKeyDown(e, 'min');
+        },
+        onFocus: e => {
+          this.foundation.onFocus(e, 'min');
+        },
+        onBlur: e => {
+          this.foundation.onBlur(e, 'min');
+        },
         role: "slider",
-        tabIndex: 0
+        "aria-valuetext": getAriaValueText ? getAriaValueText(currentValue, 0) : ariaValueText,
+        tabIndex: disabled ? -1 : 0
       }, commonAria, {
         "aria-valuenow": currentValue,
         "aria-valuemax": max,
-        "aria-valuemin": min,
-        "aria-valuetext": getAriaValueText ? getAriaValueText(currentValue) : ariaValueText
+        "aria-valuemin": min
       }))) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(tooltip_Tooltip, {
         content: tipChildren.min,
         position: "top",
         trigger: "custom",
         rePosKey: minPercent,
-        visible: isInRenderTree && tipVisible.min,
+        visible: isInRenderTree && (tipVisible.min || firstDotFocusVisible),
         className: "".concat(slider_constants_cssClasses.HANDLE, "-tooltip")
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", assign_default()({
         ref: this.minHanleEl,
@@ -86015,12 +86239,20 @@ class slider_Slider extends baseComponent_BaseComponent {
         onTouchEnd: e => {
           this.foundation.onHandleUp(e);
         },
-        onFocus: e => this.foundation.onFocus(e, 'min'),
+        onKeyDown: e => {
+          this.foundation.handleKeyDown(e, 'min');
+        },
+        onFocus: e => {
+          this.foundation.onFocus(e, 'min');
+        },
+        onBlur: e => {
+          this.foundation.onBlur(e, 'min');
+        },
         role: "slider",
-        tabIndex: 0
+        tabIndex: disabled ? -1 : 0
       }, commonAria, {
+        "aria-valuetext": getAriaValueText ? getAriaValueText(currentValue[0], 0) : ariaValueText,
         "aria-valuenow": currentValue[0],
-        "aria-valuetext": getAriaValueText ? getAriaValueText(currentValue[0]) : ariaValueText,
         "aria-valuemax": currentValue[1],
         "aria-valuemin": min
       }))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(tooltip_Tooltip, {
@@ -86028,7 +86260,7 @@ class slider_Slider extends baseComponent_BaseComponent {
         position: "top",
         trigger: "custom",
         rePosKey: maxPercent,
-        visible: isInRenderTree && tipVisible.max,
+        visible: isInRenderTree && (tipVisible.max || secondDotFocusVisible),
         className: "".concat(slider_constants_cssClasses.HANDLE, "-tooltip")
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", assign_default()({
         ref: this.maxHanleEl,
@@ -86059,12 +86291,20 @@ class slider_Slider extends baseComponent_BaseComponent {
         onTouchEnd: e => {
           this.foundation.onHandleUp(e);
         },
-        onFocus: e => this.foundation.onFocus(e, 'min'),
+        onKeyDown: e => {
+          this.foundation.handleKeyDown(e, 'max');
+        },
+        onFocus: e => {
+          this.foundation.onFocus(e, 'max');
+        },
+        onBlur: e => {
+          this.foundation.onBlur(e, 'max');
+        },
         role: "slider",
-        tabIndex: 0
+        tabIndex: disabled ? -1 : 0
       }, commonAria, {
+        "aria-valuetext": getAriaValueText ? getAriaValueText(currentValue[1], 1) : ariaValueText,
         "aria-valuenow": currentValue[1],
-        "aria-valuetext": getAriaValueText ? getAriaValueText(currentValue[1]) : ariaValueText,
         "aria-valuemax": max,
         "aria-valuemin": currentValue[0]
       }))));
@@ -86165,6 +86405,13 @@ class slider_Slider extends baseComponent_BaseComponent {
       return labelContent;
     };
 
+    this._getAriaValueText = (value, index) => {
+      const {
+        getAriaValueText
+      } = this.props;
+      return getAriaValueText ? getAriaValueText(value, index) : value;
+    };
+
     let {
       value
     } = this.props;
@@ -86185,14 +86432,14 @@ class slider_Slider extends baseComponent_BaseComponent {
       isDrag: false,
       clickValue: 0,
       showBoundary: false,
-      isInRenderTree: true
+      isInRenderTree: true,
+      firstDotFocusVisible: false,
+      secondDotFocusVisible: false
     };
     this.sliderEl = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createRef();
     this.minHanleEl = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createRef();
     this.maxHanleEl = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createRef();
-    this.dragging = [false, false]; // this.chooseMovePos = 'min';
-    // this.isDrag = false;
-
+    this.dragging = [false, false];
     this.foundation = new foundation_SliderFoundation(this.adapter);
     this.eventListenerSet = new set_default.a();
   }
@@ -86259,8 +86506,7 @@ class slider_Slider extends baseComponent_BaseComponent {
         return flag;
       },
       getOverallVars: () => ({
-        dragging: this.dragging,
-        chooseMovePos: this.chooseMovePos
+        dragging: this.dragging
       }),
       updateDisabled: disabled => {
         this.setState({
@@ -86294,9 +86540,6 @@ class slider_Slider extends baseComponent_BaseComponent {
       getMinHandleEl: () => this.minHanleEl,
       getMaxHandleEl: () => this.maxHanleEl,
       onHandleDown: e => {
-        e.stopPropagation();
-        e.preventDefault();
-
         this._addEventListener(document.body, 'mousemove', this.foundation.onHandleMove, false);
 
         this._addEventListener(document.body, 'mouseup', this.foundation.onHandleUp, false);
@@ -86419,37 +86662,55 @@ class slider_Slider extends baseComponent_BaseComponent {
   }
 
   render() {
+    var _context5;
+
+    const {
+      disabled,
+      currentValue,
+      min,
+      max
+    } = this.state;
+    const {
+      vertical,
+      verticalReverse,
+      style,
+      railStyle,
+      range,
+      className
+    } = this.props;
     const wrapperClass = classnames_default()("".concat(slider_prefixCls, "-wrapper"), {
-      ["".concat(slider_prefixCls, "-disabled")]: this.state.disabled,
-      ["".concat(slider_constants_cssClasses.VERTICAL, "-wrapper")]: this.props.vertical,
-      ["".concat(slider_prefixCls, "-reverse")]: this.props.vertical && this.props.verticalReverse
-    }, this.props.className);
+      ["".concat(slider_prefixCls, "-disabled")]: disabled,
+      ["".concat(slider_constants_cssClasses.VERTICAL, "-wrapper")]: vertical,
+      ["".concat(slider_prefixCls, "-reverse")]: vertical && verticalReverse
+    }, className);
     const boundaryClass = classnames_default()("".concat(slider_prefixCls, "-boundary"), {
       ["".concat(slider_prefixCls, "-boundary-show")]: this.props.showBoundary && this.state.showBoundary
     });
     const sliderCls = classnames_default()({
-      ["".concat(slider_prefixCls)]: !this.props.vertical,
-      [slider_constants_cssClasses.VERTICAL]: this.props.vertical
+      ["".concat(slider_prefixCls)]: !vertical,
+      [slider_constants_cssClasses.VERTICAL]: vertical
     });
+    const ariaLabel = range ? concat_default()(_context5 = "Range: ".concat(this._getAriaValueText(currentValue[0], 0), " to ")).call(_context5, this._getAriaValueText(currentValue[1], 1)) : undefined;
     const slider = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       className: wrapperClass,
-      style: this.props.style,
+      style: style,
       ref: this.sliderEl,
+      "aria-label": ariaLabel,
       onMouseEnter: () => this.foundation.handleWrapperEnter(),
       onMouseLeave: () => this.foundation.handleWrapperLeave()
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       className: "".concat(slider_prefixCls, "-rail"),
       onClick: this.foundation.handleWrapClick,
-      style: this.props.railStyle
+      style: railStyle
     }), this.renderTrack(), this.renderStepDot(), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", null, this.renderHandle()), this.renderLabel(), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       className: boundaryClass
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
       className: "".concat(slider_prefixCls, "-boundary-min")
-    }, this.state.min), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
+    }, min), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
       className: "".concat(slider_prefixCls, "-boundary-max")
-    }, this.state.max)));
+    }, max)));
 
-    if (!this.props.vertical) {
+    if (!vertical) {
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
         className: sliderCls
       }, slider);
@@ -86502,7 +86763,8 @@ slider_Slider.propTypes = {
   className: prop_types_default.a.string,
   showBoundary: prop_types_default.a.bool,
   railStyle: prop_types_default.a.object,
-  verticalReverse: prop_types_default.a.bool
+  verticalReverse: prop_types_default.a.bool,
+  getAriaValueText: prop_types_default.a.func
 };
 slider_Slider.defaultProps = {
   // allowClear: false,
@@ -108479,16 +108741,8 @@ class transfer_Transfer extends baseComponent_BaseComponent {
       type,
       showPath
     } = this.props;
-    let newItem = item;
-
-    if (draggable) {
-      newItem = assign_default()(assign_default()({}, item), {
-        key: item._optionKey
-      });
-      delete newItem._optionKey;
-    }
 
-    const onRemove = () => this.foundation.handleSelectOrRemove(newItem);
+    const onRemove = () => this.foundation.handleSelectOrRemove(item);
 
     const rightItemCls = classnames_default()({
       ["".concat(transfer_prefixcls, "-item")]: true,
@@ -108516,7 +108770,7 @@ class transfer_Transfer extends baseComponent_BaseComponent {
       external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
         role: "listitem",
         className: rightItemCls,
-        key: newItem.key
+        key: item.key
       }, draggable ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(DragHandle, null) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
         className: "".concat(transfer_prefixcls, "-right-item-text")
       }, label), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconClose, {
@@ -108543,7 +108797,7 @@ class transfer_Transfer extends baseComponent_BaseComponent {
 
   renderRightSortableList(selectedData) {
     // when choose some items && draggable is true
-    const SortableItem = sortableElement(item => this.renderRightItem(item));
+    const SortableItem = sortableElement(props => this.renderRightItem(props.item));
     const SortableList = sortableContainer(_ref => {
       let {
         items
@@ -108554,14 +108808,12 @@ class transfer_Transfer extends baseComponent_BaseComponent {
         "aria-label": "Selected list"
       }, map_default()(items).call(items, (item, index) =>
       /*#__PURE__*/
-      // sortableElement will take over the property 'key', so use another '_optionKey' to pass
       // @ts-ignore skip SortableItem type check
-      external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(SortableItem, assign_default()({
+      external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(SortableItem, {
         key: item.label,
-        index: index
-      }, item, {
-        _optionKey: item.key
-      })))) // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        index: index,
+        item: item
+      }))) // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore see reasons: https://github.com/clauderic/react-sortable-hoc/issues/206
       ;
     }, {