@douyinfe/semi-ui 2.15.2-alpha.0 → 2.17.0-alpha.1

package/dist/umd/semi-ui.js

@@ -1604,97 +1604,6 @@ function times(n, iteratee) {
 module.exports = times;
 
 
-/***/ }),
-
-/***/ "16Al":
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-
-
-var ReactPropTypesSecret = __webpack_require__("WbBG");
-
-function emptyFunction() {}
-function emptyFunctionWithReset() {}
-emptyFunctionWithReset.resetWarningCache = emptyFunction;
-
-module.exports = function() {
-  function shim(props, propName, componentName, location, propFullName, secret) {
-    if (secret === ReactPropTypesSecret) {
-      // It is still safe when called from React.
-      return;
-    }
-    var err = new Error(
-      'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
-      'Use PropTypes.checkPropTypes() to call them. ' +
-      'Read more at http://fb.me/use-check-prop-types'
-    );
-    err.name = 'Invariant Violation';
-    throw err;
-  };
-  shim.isRequired = shim;
-  function getShim() {
-    return shim;
-  };
-  // Important!
-  // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
-  var ReactPropTypes = {
-    array: shim,
-    bool: shim,
-    func: shim,
-    number: shim,
-    object: shim,
-    string: shim,
-    symbol: shim,
-
-    any: shim,
-    arrayOf: getShim,
-    element: shim,
-    elementType: shim,
-    instanceOf: getShim,
-    node: shim,
-    objectOf: getShim,
-    oneOf: getShim,
-    oneOfType: getShim,
-    shape: getShim,
-    exact: getShim,
-
-    checkPropTypes: emptyFunctionWithReset,
-    resetWarningCache: emptyFunction
-  };
-
-  ReactPropTypes.PropTypes = ReactPropTypes;
-
-  return ReactPropTypes;
-};
-
-
-/***/ }),
-
-/***/ "17x9":
-/***/ (function(module, exports, __webpack_require__) {
-
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-if (false) { var throwOnDirectAccess, ReactIs; } else {
-  // By explicitly using `prop-types` you are opting into new production behavior.
-  // http://fb.me/prop-types-in-prod
-  module.exports = __webpack_require__("16Al")();
-}
-
-
 /***/ }),
 
 /***/ "1EDM":
@@ -14880,26 +14789,6 @@ module.exports = function (it) {
 };
 
 
-/***/ }),
-
-/***/ "WbBG":
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-
-
-var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
-
-module.exports = ReactPropTypesSecret;
-
-
 /***/ }),
 
 /***/ "WbkG":
@@ -25128,8 +25017,8 @@ var external_root_React_commonjs2_react_commonjs_react_amd_react_default = /*#__
 var classnames = __webpack_require__("O94r");
 var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
 
-// EXTERNAL MODULE: ./node_modules/prop-types/index.js
-var prop_types = __webpack_require__("17x9");
+// EXTERNAL MODULE: /Users/bytedance/code/semi-design/node_modules/prop-types/index.js
+var prop_types = __webpack_require__("aWzz");
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
 
 // CONCATENATED MODULE: ../semi-foundation/base/env.ts
@@ -33480,12 +33369,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 +33398,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 +34036,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 +38799,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 +40001,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: /Users/bytedance/code/semi-design/node_modules/@babel/runtime-corejs3/core-js-stable/instance/keys.js
 var instance_keys = __webpack_require__("BoX2");
@@ -52588,7 +52502,8 @@ class cascader_Cascader extends baseComponent_BaseComponent {
       autoAdjustOverflow,
       stopPropagation,
       mouseLeaveDelay,
-      mouseEnterDelay
+      mouseEnterDelay,
+      position
     } = this.props;
     const {
       isOpen,
@@ -52599,7 +52514,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 +52608,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,
@@ -83235,11 +83151,9 @@ class radio_Radio extends baseComponent_BaseComponent {
       focusInner: focusVisible && !focusOuter,
       onInputFocus: this.handleFocusVisible,
       onInputBlur: this.handleBlur
-    })), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-      className: classnames_default()(["".concat(prefix, "-content"), {
-        ["".concat(prefix, "-isCardRadioGroup_content")]: isCardRadioGroup
-      }])
-    }, renderContent()));
+    })), isCardRadioGroup ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      className: "".concat(prefix, "-isCardRadioGroup_content")
+    }, renderContent()) : renderContent());
   }
 
 }
@@ -85103,6 +85017,7 @@ const touchEventPolyfill = (touch, touchEvent) => {
 
 
 
+
 /* eslint-disable no-param-reassign */
 
 /* eslint-disable max-len */
@@ -85110,6 +85025,8 @@ const touchEventPolyfill = (touch, touchEvent) => {
 /* eslint-disable no-nested-ternary */
 
 
+
+
 class foundation_SliderFoundation extends foundation {
   constructor(adapter) {
     var _this;
@@ -85634,8 +85551,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);
       }
@@ -85699,18 +85615,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 {
@@ -85903,7 +86004,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);
@@ -85929,7 +86032,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
       };
@@ -85941,7 +86044,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,
@@ -85973,20 +86076,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,
@@ -86017,12 +86128,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, {
@@ -86030,7 +86149,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,
@@ -86061,12 +86180,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]
       }))));
@@ -86167,6 +86294,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;
@@ -86187,14 +86321,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();
   }
@@ -86261,8 +86395,7 @@ class slider_Slider extends baseComponent_BaseComponent {
         return flag;
       },
       getOverallVars: () => ({
-        dragging: this.dragging,
-        chooseMovePos: this.chooseMovePos
+        dragging: this.dragging
       }),
       updateDisabled: disabled => {
         this.setState({
@@ -86296,9 +86429,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);
@@ -86421,37 +86551,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);
@@ -86504,7 +86652,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,
@@ -106033,10 +106182,6 @@ function _nonIterableSpread() {
 function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
-// EXTERNAL MODULE: /Users/bytedance/code/semi-design/node_modules/prop-types/index.js
-var semi_design_node_modules_prop_types = __webpack_require__("aWzz");
-var semi_design_node_modules_prop_types_default = /*#__PURE__*/__webpack_require__.n(semi_design_node_modules_prop_types);
-
 // CONCATENATED MODULE: /Users/bytedance/code/semi-design/node_modules/react-sortable-hoc/dist/react-sortable-hoc.esm.js
 
 
@@ -106554,37 +106699,37 @@ function defaultShouldCancelStart(event) {
 }
 
 var propTypes = {
-  axis: semi_design_node_modules_prop_types_default.a.oneOf(['x', 'y', 'xy']),
-  contentWindow: semi_design_node_modules_prop_types_default.a.any,
-  disableAutoscroll: semi_design_node_modules_prop_types_default.a.bool,
-  distance: semi_design_node_modules_prop_types_default.a.number,
-  getContainer: semi_design_node_modules_prop_types_default.a.func,
-  getHelperDimensions: semi_design_node_modules_prop_types_default.a.func,
-  helperClass: semi_design_node_modules_prop_types_default.a.string,
-  helperContainer: semi_design_node_modules_prop_types_default.a.oneOfType([semi_design_node_modules_prop_types_default.a.func, typeof HTMLElement === 'undefined' ? semi_design_node_modules_prop_types_default.a.any : semi_design_node_modules_prop_types_default.a.instanceOf(HTMLElement)]),
-  hideSortableGhost: semi_design_node_modules_prop_types_default.a.bool,
-  keyboardSortingTransitionDuration: semi_design_node_modules_prop_types_default.a.number,
-  lockAxis: semi_design_node_modules_prop_types_default.a.string,
-  lockOffset: semi_design_node_modules_prop_types_default.a.oneOfType([semi_design_node_modules_prop_types_default.a.number, semi_design_node_modules_prop_types_default.a.string, semi_design_node_modules_prop_types_default.a.arrayOf(semi_design_node_modules_prop_types_default.a.oneOfType([semi_design_node_modules_prop_types_default.a.number, semi_design_node_modules_prop_types_default.a.string]))]),
-  lockToContainerEdges: semi_design_node_modules_prop_types_default.a.bool,
-  onSortEnd: semi_design_node_modules_prop_types_default.a.func,
-  onSortMove: semi_design_node_modules_prop_types_default.a.func,
-  onSortOver: semi_design_node_modules_prop_types_default.a.func,
-  onSortStart: semi_design_node_modules_prop_types_default.a.func,
-  pressDelay: semi_design_node_modules_prop_types_default.a.number,
-  pressThreshold: semi_design_node_modules_prop_types_default.a.number,
-  keyCodes: semi_design_node_modules_prop_types_default.a.shape({
-    lift: semi_design_node_modules_prop_types_default.a.arrayOf(semi_design_node_modules_prop_types_default.a.number),
-    drop: semi_design_node_modules_prop_types_default.a.arrayOf(semi_design_node_modules_prop_types_default.a.number),
-    cancel: semi_design_node_modules_prop_types_default.a.arrayOf(semi_design_node_modules_prop_types_default.a.number),
-    up: semi_design_node_modules_prop_types_default.a.arrayOf(semi_design_node_modules_prop_types_default.a.number),
-    down: semi_design_node_modules_prop_types_default.a.arrayOf(semi_design_node_modules_prop_types_default.a.number)
+  axis: prop_types_default.a.oneOf(['x', 'y', 'xy']),
+  contentWindow: prop_types_default.a.any,
+  disableAutoscroll: prop_types_default.a.bool,
+  distance: prop_types_default.a.number,
+  getContainer: prop_types_default.a.func,
+  getHelperDimensions: prop_types_default.a.func,
+  helperClass: prop_types_default.a.string,
+  helperContainer: prop_types_default.a.oneOfType([prop_types_default.a.func, typeof HTMLElement === 'undefined' ? prop_types_default.a.any : prop_types_default.a.instanceOf(HTMLElement)]),
+  hideSortableGhost: prop_types_default.a.bool,
+  keyboardSortingTransitionDuration: prop_types_default.a.number,
+  lockAxis: prop_types_default.a.string,
+  lockOffset: prop_types_default.a.oneOfType([prop_types_default.a.number, prop_types_default.a.string, prop_types_default.a.arrayOf(prop_types_default.a.oneOfType([prop_types_default.a.number, prop_types_default.a.string]))]),
+  lockToContainerEdges: prop_types_default.a.bool,
+  onSortEnd: prop_types_default.a.func,
+  onSortMove: prop_types_default.a.func,
+  onSortOver: prop_types_default.a.func,
+  onSortStart: prop_types_default.a.func,
+  pressDelay: prop_types_default.a.number,
+  pressThreshold: prop_types_default.a.number,
+  keyCodes: prop_types_default.a.shape({
+    lift: prop_types_default.a.arrayOf(prop_types_default.a.number),
+    drop: prop_types_default.a.arrayOf(prop_types_default.a.number),
+    cancel: prop_types_default.a.arrayOf(prop_types_default.a.number),
+    up: prop_types_default.a.arrayOf(prop_types_default.a.number),
+    down: prop_types_default.a.arrayOf(prop_types_default.a.number)
   }),
-  shouldCancelStart: semi_design_node_modules_prop_types_default.a.func,
-  transitionDuration: semi_design_node_modules_prop_types_default.a.number,
-  updateBeforeSortStart: semi_design_node_modules_prop_types_default.a.func,
-  useDragHandle: semi_design_node_modules_prop_types_default.a.bool,
-  useWindowAsScrollContainer: semi_design_node_modules_prop_types_default.a.bool
+  shouldCancelStart: prop_types_default.a.func,
+  transitionDuration: prop_types_default.a.number,
+  updateBeforeSortStart: prop_types_default.a.func,
+  useDragHandle: prop_types_default.a.bool,
+  useWindowAsScrollContainer: prop_types_default.a.bool
 };
 var defaultKeyCodes = {
   lift: [KEYCODE.SPACE],
@@ -107531,9 +107676,9 @@ function sortableContainer(WrappedComponent) {
 }
 
 var propTypes$1 = {
-  index: semi_design_node_modules_prop_types_default.a.number.isRequired,
-  collection: semi_design_node_modules_prop_types_default.a.oneOfType([semi_design_node_modules_prop_types_default.a.number, semi_design_node_modules_prop_types_default.a.string]),
-  disabled: semi_design_node_modules_prop_types_default.a.bool
+  index: prop_types_default.a.number.isRequired,
+  collection: prop_types_default.a.oneOfType([prop_types_default.a.number, prop_types_default.a.string]),
+  disabled: prop_types_default.a.bool
 };
 var omittedProps$1 = Object.keys(propTypes$1);
 function sortableElement(WrappedComponent) {
@@ -108481,16 +108626,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,
@@ -108518,7 +108655,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, {
@@ -108545,7 +108682,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
@@ -108556,14 +108693,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
       ;
     }, {