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

package/lib/es/slider/index.js

@@ -50,7 +50,9 @@ export default class Slider extends BaseComponent {
       const {
         chooseMovePos,
         isDrag,
-        isInRenderTree
+        isInRenderTree,
+        firstDotFocusVisible,
+        secondDotFocusVisible
       } = this.state;
       const stylePos = vertical ? 'top' : 'left';
       const percentInfo = this.foundation.getMinAndMaxPercent(this.state.currentValue);
@@ -76,7 +78,7 @@ export default class Slider extends 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
       };
@@ -88,7 +90,7 @@ export default class Slider extends BaseComponent {
         position: "top",
         trigger: "custom",
         rePosKey: minPercent,
-        visible: isInRenderTree && tipVisible.min,
+        visible: isInRenderTree && (tipVisible.min || firstDotFocusVisible),
         className: "".concat(cssClasses.HANDLE, "-tooltip")
       }, /*#__PURE__*/React.createElement("span", _Object$assign({
         onMouseOver: this.foundation.checkAndUpdateIsInRenderTreeState,
@@ -120,20 +122,28 @@ export default class Slider extends 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__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
         content: tipChildren.min,
         position: "top",
         trigger: "custom",
         rePosKey: minPercent,
-        visible: isInRenderTree && tipVisible.min,
+        visible: isInRenderTree && (tipVisible.min || firstDotFocusVisible),
         className: "".concat(cssClasses.HANDLE, "-tooltip")
       }, /*#__PURE__*/React.createElement("span", _Object$assign({
         ref: this.minHanleEl,
@@ -164,12 +174,20 @@ export default class Slider extends 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__*/React.createElement(Tooltip, {
@@ -177,7 +195,7 @@ export default class Slider extends BaseComponent {
         position: "top",
         trigger: "custom",
         rePosKey: maxPercent,
-        visible: isInRenderTree && tipVisible.max,
+        visible: isInRenderTree && (tipVisible.max || secondDotFocusVisible),
         className: "".concat(cssClasses.HANDLE, "-tooltip")
       }, /*#__PURE__*/React.createElement("span", _Object$assign({
         ref: this.maxHanleEl,
@@ -208,12 +226,20 @@ export default class Slider extends 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]
       }))));
@@ -314,6 +340,13 @@ export default class Slider extends BaseComponent {
       return labelContent;
     };
 
+    this._getAriaValueText = (value, index) => {
+      const {
+        getAriaValueText
+      } = this.props;
+      return getAriaValueText ? getAriaValueText(value, index) : value;
+    };
+
     let {
       value
     } = this.props;
@@ -334,14 +367,14 @@ export default class Slider extends BaseComponent {
       isDrag: false,
       clickValue: 0,
       showBoundary: false,
-      isInRenderTree: true
+      isInRenderTree: true,
+      firstDotFocusVisible: false,
+      secondDotFocusVisible: false
     };
     this.sliderEl = /*#__PURE__*/React.createRef();
     this.minHanleEl = /*#__PURE__*/React.createRef();
     this.maxHanleEl = /*#__PURE__*/React.createRef();
-    this.dragging = [false, false]; // this.chooseMovePos = 'min';
-    // this.isDrag = false;
-
+    this.dragging = [false, false];
     this.foundation = new SliderFoundation(this.adapter);
     this.eventListenerSet = new _Set();
   }
@@ -408,8 +441,7 @@ export default class Slider extends BaseComponent {
         return flag;
       },
       getOverallVars: () => ({
-        dragging: this.dragging,
-        chooseMovePos: this.chooseMovePos
+        dragging: this.dragging
       }),
       updateDisabled: disabled => {
         this.setState({
@@ -443,9 +475,6 @@ export default class Slider extends 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);
@@ -568,37 +597,55 @@ export default class Slider extends BaseComponent {
   }
 
   render() {
+    var _context5;
+
+    const {
+      disabled,
+      currentValue,
+      min,
+      max
+    } = this.state;
+    const {
+      vertical,
+      verticalReverse,
+      style,
+      railStyle,
+      range,
+      className
+    } = this.props;
     const wrapperClass = cls("".concat(prefixCls, "-wrapper"), {
-      ["".concat(prefixCls, "-disabled")]: this.state.disabled,
-      ["".concat(cssClasses.VERTICAL, "-wrapper")]: this.props.vertical,
-      ["".concat(prefixCls, "-reverse")]: this.props.vertical && this.props.verticalReverse
-    }, this.props.className);
+      ["".concat(prefixCls, "-disabled")]: disabled,
+      ["".concat(cssClasses.VERTICAL, "-wrapper")]: vertical,
+      ["".concat(prefixCls, "-reverse")]: vertical && verticalReverse
+    }, className);
     const boundaryClass = cls("".concat(prefixCls, "-boundary"), {
       ["".concat(prefixCls, "-boundary-show")]: this.props.showBoundary && this.state.showBoundary
     });
     const sliderCls = cls({
-      ["".concat(prefixCls)]: !this.props.vertical,
-      [cssClasses.VERTICAL]: this.props.vertical
+      ["".concat(prefixCls)]: !vertical,
+      [cssClasses.VERTICAL]: vertical
     });
+    const ariaLabel = range ? _concatInstanceProperty(_context5 = "Range: ".concat(this._getAriaValueText(currentValue[0], 0), " to ")).call(_context5, this._getAriaValueText(currentValue[1], 1)) : undefined;
     const slider = /*#__PURE__*/React.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__*/React.createElement("div", {
       className: "".concat(prefixCls, "-rail"),
       onClick: this.foundation.handleWrapClick,
-      style: this.props.railStyle
+      style: railStyle
     }), this.renderTrack(), this.renderStepDot(), /*#__PURE__*/React.createElement("div", null, this.renderHandle()), this.renderLabel(), /*#__PURE__*/React.createElement("div", {
       className: boundaryClass
     }, /*#__PURE__*/React.createElement("span", {
       className: "".concat(prefixCls, "-boundary-min")
-    }, this.state.min), /*#__PURE__*/React.createElement("span", {
+    }, min), /*#__PURE__*/React.createElement("span", {
       className: "".concat(prefixCls, "-boundary-max")
-    }, this.state.max)));
+    }, max)));
 
-    if (!this.props.vertical) {
+    if (!vertical) {
       return /*#__PURE__*/React.createElement("div", {
         className: sliderCls
       }, slider);
@@ -651,7 +698,8 @@ Slider.propTypes = {
   className: PropTypes.string,
   showBoundary: PropTypes.bool,
   railStyle: PropTypes.object,
-  verticalReverse: PropTypes.bool
+  verticalReverse: PropTypes.bool,
+  getAriaValueText: PropTypes.func
 };
 Slider.defaultProps = {
   // allowClear: false,

package/lib/es/tooltip/index.js

@@ -684,7 +684,7 @@ export default class Tooltip extends 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
 

package/lib/es/transfer/index.d.ts

@@ -63,6 +63,11 @@ export interface ResolvedDataItem extends DataItem {
     };
     _optionKey?: string | number;
 }
+export interface DraggableResolvedDataItem {
+    key?: string | number;
+    index?: number;
+    item?: ResolvedDataItem;
+}
 export declare type DataSource = Array<DataItem> | Array<GroupItem> | Array<TreeItem>;
 interface HeaderConfig {
     totalContent: string;

package/lib/es/transfer/index.js

@@ -419,16 +419,8 @@ class Transfer extends BaseComponent {
       type,
       showPath
     } = this.props;
-    let newItem = item;
 
-    if (draggable) {
-      newItem = _Object$assign(_Object$assign({}, item), {
-        key: item._optionKey
-      });
-      delete newItem._optionKey;
-    }
-
-    const onRemove = () => this.foundation.handleSelectOrRemove(newItem);
+    const onRemove = () => this.foundation.handleSelectOrRemove(item);
 
     const rightItemCls = cls({
       ["".concat(prefixcls, "-item")]: true,
@@ -456,7 +448,7 @@ class Transfer extends BaseComponent {
       React.createElement("div", {
         role: "listitem",
         className: rightItemCls,
-        key: newItem.key
+        key: item.key
       }, draggable ? /*#__PURE__*/React.createElement(DragHandle, null) : null, /*#__PURE__*/React.createElement("div", {
         className: "".concat(prefixcls, "-right-item-text")
       }, label), /*#__PURE__*/React.createElement(IconClose, {
@@ -483,7 +475,7 @@ class Transfer extends 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
@@ -494,14 +486,12 @@ class Transfer extends BaseComponent {
         "aria-label": "Selected list"
       }, _mapInstanceProperty(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
-      React.createElement(SortableItem, _Object$assign({
+      React.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
       ;
     }, {

package/lib/es/typography/base.js

@@ -45,12 +45,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;
@@ -68,7 +74,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;
 };
 

package/lib/es/typography/text.js

@@ -3,11 +3,20 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { strings } from '@douyinfe/semi-foundation/lib/es/typography/constants';
 import Base from './base';
+import cls from 'classnames';
+import { cssClasses } from '@douyinfe/semi-foundation/lib/es/typography/constants';
+const prefixCls = cssClasses.PREFIX;
 export default class Text extends PureComponent {
   render() {
+    const className = cls(this.props.className, {
+      ["".concat(prefixCls, "-text")]: true,
+      ["".concat(prefixCls, "-text-icon")]: this.props.icon
+    });
     return /*#__PURE__*/React.createElement(Base, _Object$assign({
       component: 'span'
-    }, this.props));
+    }, this.props, {
+      className: className
+    }));
   }
 
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.15.0",
+    "version": "2.16.0-beta.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -15,11 +15,11 @@
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.15.0",
-        "@douyinfe/semi-foundation": "2.15.0",
-        "@douyinfe/semi-icons": "2.15.0",
+        "@douyinfe/semi-animation-react": "2.16.0-beta.0",
+        "@douyinfe/semi-foundation": "2.16.0-beta.0",
+        "@douyinfe/semi-icons": "2.16.0-beta.0",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.15.0",
+        "@douyinfe/semi-theme-default": "2.16.0-beta.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "236be8e52864297171e3b08da20475139dadd633",
+    "gitHead": "e2cb837fd9d77bd14f32f8bee74c16bcdf0d9196",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.15.0",
+        "@douyinfe/semi-scss-compile": "2.16.0-beta.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/slider/_story/slider.stories.js

@@ -113,7 +113,8 @@ export const HorizontalSlider = () => (
     <div style={divStyle}>
       <div>marks</div>
       <Slider
-        marks={{ 20: '20c', 40: '40c' }}
+        marks={{ 20: '20°C', 40: '40°C' }}
+        getAriaValueText={(value) => `${value}°C`}
         defaultValue={[0, 100]}
         range={true}
         onChange={value => {
@@ -124,7 +125,8 @@ export const HorizontalSlider = () => (
     <div style={divStyle}>
       <div>inclued</div>
       <Slider
-        marks={{ 20: '20c', 40: '40c' }}
+        marks={{ 20: '20°C', 40: '40°C' }}
+        getAriaValueText={(value) => `${value}°C`}
         included={false}
         defaultValue={[0, 100]}
         range={true}