@douyinfe/semi-ui 2.8.0-beta.0 → 2.9.0-beta.0

package/lib/es/badge/index.js

@@ -1,6 +1,22 @@
+import _noop from "lodash/noop";
 import _isString from "lodash/isString";
 import _isNumber from "lodash/isNumber";
+import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && _indexOfInstanceProperty(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
+    if (_indexOfInstanceProperty(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
 import React, { PureComponent } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -18,7 +34,8 @@ export default class Badge extends PureComponent {
 
     const defaultPosition = direction === 'rtl' ? 'leftTop' : 'rightTop'; // eslint-disable-next-line max-len
 
-    const {
+    const _a = this.props,
+          {
       count,
       dot,
       type,
@@ -28,7 +45,9 @@ export default class Badge extends PureComponent {
       style,
       children,
       className
-    } = this.props;
+    } = _a,
+          rest = __rest(_a, ["count", "dot", "type", "theme", "position", "overflowCount", "style", "children", "className"]);
+
     const custom = count && !(_isNumber(count) || _isString(count));
     const showBadge = count !== null && typeof count !== 'undefined';
     const wrapper = cls(className, {
@@ -48,9 +67,9 @@ export default class Badge extends PureComponent {
       content = count;
     }
 
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement("span", _Object$assign({
       className: prefixCls
-    }, children, /*#__PURE__*/React.createElement("span", {
+    }, rest), children, /*#__PURE__*/React.createElement("span", {
       className: wrapper,
       style: style
     }, dot ? null : content));
@@ -67,11 +86,17 @@ Badge.propTypes = {
   overflowCount: PropTypes.number,
   style: PropTypes.object,
   className: PropTypes.string,
-  children: PropTypes.node
+  children: PropTypes.node,
+  onClick: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func
 };
 Badge.defaultProps = {
   dot: false,
   type: 'primary',
   theme: 'solid',
-  className: ''
+  className: '',
+  onClick: () => _noop,
+  onMouseEnter: () => _noop,
+  onMouseLeave: () => _noop
 };

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

@@ -6,8 +6,7 @@ import Item from './item';
 export { DescriptionsItemProps } from './item';
 export declare type DescriptionsSize = 'small' | 'medium' | 'large';
 export interface Data {
-    [x: string]: any;
-    key?: string | number;
+    key?: React.ReactNode;
     value?: (() => React.ReactNode) | React.ReactNode;
     hidden?: boolean;
 }

package/lib/es/descriptions/index.js

@@ -29,10 +29,11 @@ class Descriptions extends PureComponent {
       ["".concat(prefixCls, "-double")]: row,
       [_concatInstanceProperty(_context2 = "".concat(prefixCls, "-double-")).call(_context2, size)]: row
     });
-    const childrenList = data && data.length ? _mapInstanceProperty(data).call(data, item => _isPlainObject(item) ? /*#__PURE__*/React.createElement(Item, _Object$assign({
-      key: item.key,
+    const childrenList = data && data.length ? _mapInstanceProperty(data).call(data, (item, index) => _isPlainObject(item) ? /*#__PURE__*/React.createElement(Item, _Object$assign({
       itemKey: item.key
-    }, item), item.value) : null) : children;
+    }, item, {
+      key: index
+    }), item.value) : null) : children;
     return /*#__PURE__*/React.createElement("div", {
       className: classNames,
       style: style

package/lib/es/descriptions/item.d.ts

@@ -5,7 +5,7 @@ export interface DescriptionsItemProps {
     hidden?: boolean;
     className?: string;
     style?: React.CSSProperties;
-    itemKey: string | number;
+    itemKey?: React.ReactNode;
 }
 export default class Item extends PureComponent<DescriptionsItemProps> {
     static propTypes: {

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

@@ -0,0 +1,20 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import '@douyinfe/semi-foundation/lib/es/divider/divider.css';
+export interface DividerProps {
+    /** The position of title inside divider */
+    align?: 'left' | 'right' | 'center';
+    /** space between divider and surroundings **/
+    margin?: number | string;
+    /** The wrapped title */
+    children?: ReactNode;
+    /** Style class name */
+    className?: string;
+    /** Whether line is dashed  */
+    dashed?: boolean;
+    /** The direction type of divider */
+    layout?: 'horizontal' | 'vertical';
+    /** Divider inline style */
+    style?: CSSProperties;
+}
+declare const Divider: React.FC<DividerProps>;
+export default Divider;

package/lib/es/divider/index.js

@@ -0,0 +1,68 @@
+import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && _indexOfInstanceProperty(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
+    if (_indexOfInstanceProperty(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import React from 'react';
+import cls from 'classnames';
+import { cssClasses } from '@douyinfe/semi-foundation/lib/es/divider/constants';
+import '@douyinfe/semi-foundation/lib/es/divider/divider.css';
+const prefixCls = cssClasses.PREFIX;
+
+const Divider = props => {
+  var _context;
+
+  const {
+    layout = 'horizontal',
+    dashed,
+    align = 'center',
+    className,
+    margin,
+    style,
+    children
+  } = props,
+        rest = __rest(props, ["layout", "dashed", "align", "className", "margin", "style", "children"]);
+
+  const dividerClassNames = cls("".concat(prefixCls, "-divider"), className, {
+    ["".concat(prefixCls, "-divider-horizontal")]: layout === 'horizontal',
+    ["".concat(prefixCls, "-divider-vertical")]: layout === 'vertical',
+    ["".concat(prefixCls, "-divider-dashed")]: !!dashed,
+    ["".concat(prefixCls, "-divider-with-text")]: children && layout === 'horizontal',
+    [_concatInstanceProperty(_context = "".concat(prefixCls, "-divider-with-text-")).call(_context, align)]: children && layout === 'horizontal'
+  });
+  let overrideDefaultStyle = {};
+
+  if (margin !== undefined) {
+    if (layout === 'vertical') {
+      overrideDefaultStyle = {
+        'marginLeft': margin,
+        'marginRight': margin
+      };
+    } else if (layout === 'horizontal') {
+      overrideDefaultStyle = {
+        'marginTop': margin,
+        'marginBottom': margin
+      };
+    }
+  }
+
+  return /*#__PURE__*/React.createElement("div", _Object$assign({}, rest, {
+    className: dividerClassNames,
+    style: _Object$assign(_Object$assign({}, overrideDefaultStyle), style)
+  }), children && layout === 'horizontal' ? typeof children === 'string' ? /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-divider_inner-text")
+  }, children) : children : null);
+};
+
+export default Divider;

package/lib/es/index.d.ts

@@ -20,6 +20,7 @@ export { default as Collapsible } from './collapsible';
 export { default as ConfigProvider } from './configProvider';
 export { default as DatePicker } from './datePicker';
 export { default as Descriptions } from './descriptions';
+export { default as Divider } from './divider';
 export { default as Empty } from './empty';
 export { default as Modal } from './modal';
 export { default as Dropdown } from './dropdown';

package/lib/es/index.js

@@ -20,6 +20,7 @@ export { default as Collapsible } from './collapsible';
 export { default as ConfigProvider } from './configProvider';
 export { default as DatePicker } from './datePicker';
 export { default as Descriptions } from './descriptions';
+export { default as Divider } from './divider';
 export { default as Empty } from './empty';
 export { default as Modal } from './modal';
 export { default as Dropdown } from './dropdown';

package/lib/es/slider/index.js

@@ -266,7 +266,10 @@ export default class Slider extends BaseComponent {
           ["".concat(prefixCls, "-dot-active")]: this.foundation.isMarkActive(Number(mark)) === 'active'
         });
         const markPercent = (Number(mark) - min) / (max - min);
-        return activeResult ? /*#__PURE__*/React.createElement("span", {
+        return activeResult ?
+        /*#__PURE__*/
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        React.createElement("span", {
           key: mark,
           onClick: e => this.foundation.handleWrapClick(e),
           className: markClass,
@@ -448,6 +451,7 @@ export default class Slider extends BaseComponent {
       onHandleMove: function (mousePos, isMin) {
         let stateChangeCallback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _noop;
         let clickTrack = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+        let outPutValue = arguments.length > 4 ? arguments[4] : undefined;
 
         const sliderDOMIsInRenderTree = _this.foundation.checkAndUpdateIsInRenderTreeState();
 
@@ -456,32 +460,32 @@ export default class Slider extends BaseComponent {
         }
 
         const {
-          value,
-          onChange
+          value
         } = _this.props;
+        let finalOutPutValue = outPutValue;
 
-        const moveValue = _this.foundation.transPosToValue(mousePos, isMin);
+        if (finalOutPutValue === undefined) {
+          const moveValue = _this.foundation.transPosToValue(mousePos, isMin);
 
-        if (moveValue === false) {
-          return;
-        }
+          if (moveValue === false) {
+            return;
+          }
 
-        const outPutValue = _this.foundation.outPutValue(moveValue);
+          finalOutPutValue = _this.foundation.outPutValue(moveValue);
+        }
 
         const {
           currentValue
         } = _this.state;
 
-        if (!_isEqual(_this.foundation.outPutValue(currentValue), outPutValue)) {
-          onChange(outPutValue);
-
+        if (!_isEqual(_this.foundation.outPutValue(currentValue), finalOutPutValue)) {
           if (!clickTrack && _this.foundation.valueFormatIsCorrect(value)) {
             // still require afterChangeCallback when click on the track directly, need skip here
             return false;
           }
 
           _this.setState({
-            currentValue: outPutValue
+            currentValue: finalOutPutValue
           }, stateChangeCallback);
         }
       },

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

@@ -82,7 +82,7 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         onRemove: PropTypes.Requireable<(...args: any[]) => any>;
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
         size: PropTypes.Requireable<"default" | "small" | "large">;
-        validateStatus: PropTypes.Requireable<"default" | "error" | "warning">;
+        validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         'aria-label': PropTypes.Requireable<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.8.0-beta.0",
+    "version": "2.9.0-beta.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,12 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.8.0-beta.0",
-        "@douyinfe/semi-animation-react": "2.8.0-beta.0",
-        "@douyinfe/semi-foundation": "2.8.0-beta.0",
-        "@douyinfe/semi-icons": "2.8.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.8.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.8.0-beta.0",
+        "@douyinfe/semi-animation": "2.9.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.9.0-beta.0",
+        "@douyinfe/semi-foundation": "2.9.0-beta.0",
+        "@douyinfe/semi-icons": "2.9.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.9.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.9.0-beta.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -28,7 +28,7 @@
         "date-fns-tz": "^1.0.10",
         "lodash": "^4.17.21",
         "react-resizable": "^1.8.0",
-        "react-sortable-hoc": "^1.11.0",
+        "react-sortable-hoc": "^2.0.0",
         "react-window": "^1.8.2",
         "resize-observer-polyfill": "^1.5.1",
         "scroll-into-view-if-needed": "^2.2.24",
@@ -60,7 +60,7 @@
     },
     "repository": {
         "type": "git",
-        "url": "https://github.com/DouyinFE"
+        "url": "https://github.com/DouyinFE/semi-design"
     },
     "_unpkg": true,
     "unpkgFiles": [
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "05140034ad843d6a8d3a4a205e71f02b429f78fe",
+    "gitHead": "acb1db546e6d3b2a7a40467d83d4b1e1b51e2b21",
     "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.8.0-beta.0",
+        "@douyinfe/semi-scss-compile": "2.9.0-beta.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/select/__test__/select.test.js

@@ -504,6 +504,22 @@ describe('Select', () => {
         expect(optionList.at(0).text()).toEqual('Abc');
     });
 
+    it('filter = true,label includes regex special character and key it at first', () => {
+        let props = {
+            filter: true,
+            optionList: [{label: 'label++',value: ''}]
+        };
+        const select = getSelect(props);
+        // click to show input
+        select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('click', {});
+        let inputValue = '+';
+        let event = { target: { value: inputValue } };
+        select.find('input').simulate('change', event);
+        let optionList = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
+        expect(optionList.length).toEqual(1);
+        expect(optionList.at(0).text()).toEqual('label++');
+    });
+
     it('filter = custom function', () => {
         let customFilter = (sugInput, option) => {
             return option.label == 'Hotsoon';

package/slider/_story/slider.stories.js

@@ -254,14 +254,15 @@ SliderInScrollContainer.story = {
 
 class ControlledSlider extends Component {
   state = {
-    value: 50,
-    rangeValue: undefined,
+    value: 30,
+    rangeValue: [10, 30],
   };
   changeValue = () => {
     this.setState({ value: this.state.value + 10 });
+    const [start, end] = this.state.rangeValue;
+    this.setState({ rangeValue: [start - 10, end + 10]})
   };
   changeRangeValue = rangeValue => {
-    console.log('rangeValue' + rangeValue);
     this.setState({ rangeValue: rangeValue });
   };
   render() {
@@ -269,21 +270,42 @@ class ControlledSlider extends Component {
     return (
       <div>
         <Button onClick={() => this.changeValue()}>点击改变value</Button>
-        <div style={{ width: 800, marginLeft: 20, marginTop: 40 }}>
+        <div data-cy="horizontalNoChangeSlider" style={{ width: 800, marginLeft: 20, marginTop: 40 }}>
+          <Slider
+            value={30}
+            onChange={value => {
+              console.log('value改变了' + value);
+            }}
+          ></Slider>
+        </div>
+        <div data-cy="horizontalOnChangeSlider" style={{ width: 800, marginLeft: 20, marginTop: 40 }}>
           <Slider
             value={value}
             onChange={value => {
               console.log('value改变了' + value);
+              this.setState({value: value});
             }}
           ></Slider>
         </div>
-        <div style={{ width: 800, marginLeft: 20, marginTop: 40 }}>
+        <div data-cy="horizontalNoChangeRangeSlider" style={{ width: 800, marginLeft: 20, marginTop: 40 }}>
           <Slider
             value={rangeValue}
-            onChange={rangeValue => this.changeRangeValue(rangeValue)}
+            onChange={rangeValue => {
+              console.log('value改变了' + rangeValue);
+            }}
             range
           ></Slider>
         </div>
+        <div data-cy="horizontalNoChangeVerticalSlider" style={{ width: 800, marginLeft: 20, marginTop: 40 }}>
+          <Slider
+            value={40}
+            vertical
+            onChange={value => {
+              console.log('value改变了' + value);
+            }}
+            style={{height: '300px'}}
+          ></Slider>
+        </div>
       </div>
     );
   }

package/slider/index.tsx

@@ -195,29 +195,33 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                 this._addEventListener(document.body, 'mouseup', this.foundation.onHandleUp, false);
                 this._addEventListener(document.body, 'touchmove', this.foundation.onHandleTouchMove, false);
             },
-            onHandleMove: (mousePos: number, isMin: boolean, stateChangeCallback = noop, clickTrack = false): boolean | void => {
+            onHandleMove: (mousePos: number, isMin: boolean, stateChangeCallback = noop, clickTrack = false, outPutValue): boolean | void => {
 
                 const sliderDOMIsInRenderTree = this.foundation.checkAndUpdateIsInRenderTreeState();
                 if (!sliderDOMIsInRenderTree) {
                     return;
                 }
 
-                const { value, onChange } = this.props;
-                const moveValue = this.foundation.transPosToValue(mousePos, isMin);
-                if (moveValue === false) {
-                    return;
+                const { value } = this.props;
+                
+
+                let finalOutPutValue = outPutValue;
+                if (finalOutPutValue === undefined) {
+                    const moveValue = this.foundation.transPosToValue(mousePos, isMin);
+                    if (moveValue === false) {
+                        return;
+                    }
+                    finalOutPutValue = this.foundation.outPutValue(moveValue);
                 }
 
-                const outPutValue = this.foundation.outPutValue(moveValue);
                 const { currentValue } = this.state;
-                if (!isEqual(this.foundation.outPutValue(currentValue), outPutValue)) {
-                    onChange(outPutValue);
+                if (!isEqual(this.foundation.outPutValue(currentValue), finalOutPutValue)) {
                     if (!clickTrack && this.foundation.valueFormatIsCorrect(value)) {
                         // still require afterChangeCallback when click on the track directly, need skip here
                         return false;
                     }
                     this.setState({
-                        currentValue: outPutValue,
+                        currentValue: finalOutPutValue,
                     }, stateChangeCallback);
                 }
             },
@@ -300,14 +304,14 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
         const maxClass = cls(cssClasses.HANDLE, {
             [`${cssClasses.HANDLE}-clicked`]: chooseMovePos === 'max' && isDrag,
         });
-        const {min, max, currentValue} = this.state;
+        const { min, max, currentValue } = this.state;
 
         const commonAria = {
             'aria-label': ariaLabel,
             'aria-labelledby': ariaLabelledby,
             'aria-disabled': disabled
         };
-        vertical && Object.assign(commonAria, {'aria-orientation': 'vertical'});
+        vertical && Object.assign(commonAria, { 'aria-orientation': 'vertical' });
 
         const handleContents = !range ? (
             <Tooltip
@@ -494,6 +498,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                         });
                         const markPercent = (Number(mark) - min) / (max - min);
                         return activeResult ? (
+                            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
                             <span
                                 key={mark}
                                 onClick={e => this.foundation.handleWrapClick(e)}

package/upload/_story/upload.stories.js

@@ -1,11 +1,10 @@
 /* argus-disable unPkgSensitiveInfo */
 import React, { useState } from 'react';
-import { Upload, Button, Toast, Icon } from '@douyinfe/semi-ui/index';
+import FileCard from '../fileCard';
+import { Button, Upload, Toast, Icon } from '@douyinfe/semi-ui/index';
 import { withField, Form } from '../../form/index';
 import { IconPlus, IconFile, IconUpload, IconEyeOpened, IconDownload, IconDelete } from '@douyinfe/semi-icons';
 
-import FileCard from '../fileCard';
-
 export default {
   title: 'Upload'
 }