@douyinfe/semi-ui 2.9.1 → 2.10.0-beta.0

package/lib/es/switch/index.js

@@ -1,7 +1,7 @@
 import _noop from "lodash/noop";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 
-/* eslint-disable max-len, jsx-a11y/role-supports-aria-props */
+/* eslint-disable max-len */
 import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -14,9 +14,19 @@ import Spin from '../spin';
 class Switch extends BaseComponent {
   constructor(props) {
     super(props);
+
+    this.handleFocusVisible = event => {
+      this.foundation.handleFocusVisible(event);
+    };
+
+    this.handleBlur = event => {
+      this.foundation.handleBlur();
+    };
+
     this.state = {
       nativeControlChecked: false,
-      nativeControlDisabled: false
+      nativeControlDisabled: false,
+      focusVisible: false
     };
     this.switchRef = /*#__PURE__*/React.createRef();
     this.foundation = new SwitchFoudation(this.adapter);
@@ -52,6 +62,11 @@ class Switch extends BaseComponent {
           nativeControlDisabled
         });
       },
+      setFocusVisible: focusVisible => {
+        this.setState({
+          focusVisible
+        });
+      },
       notifyChange: (checked, e) => {
         this.props.onChange(checked, e);
       }
@@ -61,7 +76,8 @@ class Switch extends BaseComponent {
   render() {
     const {
       nativeControlChecked,
-      nativeControlDisabled
+      nativeControlDisabled,
+      focusVisible
     } = this.state;
     const {
       className,
@@ -80,11 +96,11 @@ class Switch extends BaseComponent {
       [cssClasses.DISABLED]: nativeControlDisabled,
       [cssClasses.LARGE]: size === 'large',
       [cssClasses.SMALL]: size === 'small',
-      [cssClasses.LOADING]: loading
+      [cssClasses.LOADING]: loading,
+      [cssClasses.FOCUS]: focusVisible
     });
     const switchProps = {
       type: 'checkbox',
-      role: 'switch',
       className: cssClasses.NATIVE_CONTROL,
       disabled: nativeControlDisabled || loading,
       checked: nativeControlChecked || false
@@ -109,13 +125,17 @@ class Switch extends BaseComponent {
     }, uncheckedText) : null, /*#__PURE__*/React.createElement("input", _Object$assign({}, switchProps, {
       ref: this.switchRef,
       id: id,
+      role: 'switch',
       "aria-checked": nativeControlChecked,
       "aria-invalid": this.props['aria-invalid'],
       "aria-errormessage": this.props['aria-errormessage'],
       "aria-label": this.props['aria-label'],
       "aria-labelledby": this.props['aria-labelledby'],
       "aria-describedby": this.props["aria-describedby"],
-      onChange: e => this.foundation.handleChange(e.target.checked, e)
+      "aria-disabled": this.props['disabled'],
+      onChange: e => this.foundation.handleChange(e.target.checked, e),
+      onFocus: e => this.handleFocusVisible(e),
+      onBlur: e => this.handleBlur(e)
     })));
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.9.1",
+    "version": "2.10.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.9.1",
-        "@douyinfe/semi-animation-react": "2.9.1",
-        "@douyinfe/semi-foundation": "2.9.1",
-        "@douyinfe/semi-icons": "2.9.1",
-        "@douyinfe/semi-illustrations": "2.9.1",
-        "@douyinfe/semi-theme-default": "2.9.1",
+        "@douyinfe/semi-animation": "2.10.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.10.0-beta.0",
+        "@douyinfe/semi-foundation": "2.10.0-beta.0",
+        "@douyinfe/semi-icons": "2.10.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.10.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.10.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": "9593ab23b59b5a18305627ac402cfd4527072f9c",
+    "gitHead": "10c5eff42fe3144451fd73d9d542a710d165d456",
     "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.9.1",
+        "@douyinfe/semi-scss-compile": "2.10.0-beta.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/switch/index.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable max-len, jsx-a11y/role-supports-aria-props */
+/* eslint-disable max-len */
 import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -33,6 +33,7 @@ export interface SwitchProps {
 export interface SwitchState {
     nativeControlChecked: boolean;
     nativeControlDisabled: boolean;
+    focusVisible: boolean;
 }
 
 class Switch extends BaseComponent<SwitchProps, SwitchState> {
@@ -74,6 +75,7 @@ class Switch extends BaseComponent<SwitchProps, SwitchState> {
         this.state = {
             nativeControlChecked: false,
             nativeControlDisabled: false,
+            focusVisible: false
         };
         this.switchRef = React.createRef();
         this.foundation = new SwitchFoudation(this.adapter);
@@ -105,14 +107,25 @@ class Switch extends BaseComponent<SwitchProps, SwitchState> {
             setNativeControlDisabled: (nativeControlDisabled: boolean): void => {
                 this.setState({ nativeControlDisabled });
             },
+            setFocusVisible: (focusVisible: boolean): void => {
+                this.setState({ focusVisible });
+            },
             notifyChange: (checked: boolean, e: React.ChangeEvent<HTMLInputElement>): void => {
                 this.props.onChange(checked, e);
             },
         };
     }
 
+    handleFocusVisible = (event: React.FocusEvent) => {
+        this.foundation.handleFocusVisible(event);
+    }
+
+    handleBlur = (event: React.FocusEvent) => {
+        this.foundation.handleBlur();
+    }
+
     render() {
-        const { nativeControlChecked, nativeControlDisabled } = this.state;
+        const { nativeControlChecked, nativeControlDisabled, focusVisible } = this.state;
         const { className, style, onMouseEnter, onMouseLeave, size, checkedText, uncheckedText, loading, id } = this.props;
         const wrapperCls = cls(className, {
             [cssClasses.PREFIX]: true,
@@ -121,10 +134,10 @@ class Switch extends BaseComponent<SwitchProps, SwitchState> {
             [cssClasses.LARGE]: size === 'large',
             [cssClasses.SMALL]: size === 'small',
             [cssClasses.LOADING]: loading,
+            [cssClasses.FOCUS]: focusVisible,
         });
         const switchProps = {
             type: 'checkbox',
-            role: 'switch',
             className: cssClasses.NATIVE_CONTROL,
             disabled: nativeControlDisabled || loading,
             checked: nativeControlChecked || false,
@@ -157,13 +170,17 @@ class Switch extends BaseComponent<SwitchProps, SwitchState> {
                     {...switchProps}
                     ref={this.switchRef}
                     id={id}
+                    role='switch'
                     aria-checked={nativeControlChecked}
                     aria-invalid={this.props['aria-invalid']}
                     aria-errormessage={this.props['aria-errormessage']}
                     aria-label={this.props['aria-label']}
                     aria-labelledby={this.props['aria-labelledby']}
                     aria-describedby={this.props["aria-describedby"]}
+                    aria-disabled={this.props['disabled']}
                     onChange={e => this.foundation.handleChange(e.target.checked, e)}
+                    onFocus={e => this.handleFocusVisible(e)}
+                    onBlur={e => this.handleBlur(e)}
                 />
             </div>
         );

package/tagInput/__test__/tagInput.test.js

@@ -78,7 +78,7 @@ describe('TagInput', () => {
 
     it('TagInput with defaultValue and value is undefined', () => {
         const props = {
-            defaultValue: ['tiktok', 'hotsoon'],
+            defaultValue: ['semi', 'hotsoon'],
             value: undefined,
         };
         const tagInput = getTagInput(props);
@@ -89,7 +89,7 @@ describe('TagInput', () => {
 
     it('TagInput with defaultValue and value is null', () => {
         const props = {
-            defaultValue: ['tiktok', 'hotsoon'],
+            defaultValue: ['semi', 'hotsoon'],
             value: null,
         };
         const tagInput = getTagInput(props);
@@ -123,26 +123,26 @@ describe('TagInput', () => {
         /* when separator is null */
         const props2 = {
             separator: null,
-            inputValue: 'tiktok-hotsoon'
+            inputValue: 'semi-hotsoon'
         }
         const tagInput2 = getTagInput(props2);
         tagInput2.find('input').simulate('keyDown', { keyCode: 13 });
         const tags2 = tagInput2.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`);
         expect(tags2.length).toEqual(1);
-        expect(tags2.at(0).getDOMNode().textContent).toEqual('tiktok-hotsoon');
+        expect(tags2.at(0).getDOMNode().textContent).toEqual('semi-hotsoon');
         tagInput2.unmount();
 
         /* when separator is number */
         const props3 = {
             separator: 1,
-            inputValue: 'tiktok1hotsoon'
+            inputValue: 'semi1design'
         }
         const tagInput3 = getTagInput(props3);
         tagInput3.find('input').simulate('keyDown', { keyCode: 13 });
         const tags3 = tagInput3.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`);
         expect(tags3.length).toEqual(2);
-        expect(tags3.at(0).getDOMNode().textContent).toEqual('tiktok');
-        expect(tags3.at(1).getDOMNode().textContent).toEqual('hotsoon');
+        expect(tags3.at(0).getDOMNode().textContent).toEqual('semi');
+        expect(tags3.at(1).getDOMNode().textContent).toEqual('design');
         tagInput3.unmount();
     });
 
@@ -352,10 +352,10 @@ describe('TagInput', () => {
 
     it('tagInput with set value to null  ', () => {
         const props = {
-            value: ['tiktok']
+            value: ['semi']
         };
         const tagInput = getTagInput(props);
-        expect(tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`).getDOMNode().textContent).toEqual('tiktok');
+        expect(tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`).getDOMNode().textContent).toEqual('semi');
         tagInput.setProps({ value: null });
         tagInput.update();
         const tags = tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`);
@@ -364,10 +364,10 @@ describe('TagInput', () => {
 
     it('tagInput with set value to null  ', () => {
         const props = {
-            value: ['tiktok']
+            value: ['semi']
         };
         const tagInput = getTagInput(props);
-        expect(tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`).getDOMNode().textContent).toEqual('tiktok');
+        expect(tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`).getDOMNode().textContent).toEqual('semi');
         tagInput.setProps({ value: undefined });
         tagInput.update();
         const tags = tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`);