@douyinfe/semi-ui 2.2.0-beta.0 → 2.2.0-beta.1

package/empty/index.tsx

@@ -60,7 +60,7 @@ export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
         this.observer && this.observer.disconnect();
     }
 
-    observe(mutationsList: any): void {
+    observe = (mutationsList: any): void => {
         for (const mutation of mutationsList) {
             if (mutation.type === 'attributes' && mutation.attributeName === 'theme-mode') {
                 this.updateMode();
@@ -68,7 +68,7 @@ export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
         }
     }
 
-    updateMode(): void {
+    updateMode = (): void => {
         const val = this.body.getAttribute('theme-mode');
         if (val !== this.state.mode) {
             this.setState({ mode: val });

package/gulpfile.js

@@ -81,7 +81,8 @@ gulp.task('compileScss', function compileScss() {
                     realUrl = url.replace(/~@douyinfe\/semi-foundation/, semiUIPath);
                 }
                 return { url: realUrl };
-            }
+            },
+            charset: false
         }).on('error', sass.logError))
         .pipe(gulp.dest('lib/es'))
         .pipe(gulp.dest('lib/cjs'));

package/lib/cjs/_utils/index.js

@@ -174,11 +174,17 @@ const registerMediaQuery = (media, _ref2) => {
     }
 
     callInInit && handlerMediaChange(mediaQueryList);
-    mediaQueryList.addEventListener('change', handlerMediaChange);
-    return () => mediaQueryList.removeEventListener('change', handlerMediaChange);
+
+    if (Object.prototype.hasOwnProperty.call(mediaQueryList, 'addEventListener')) {
+      mediaQueryList.addEventListener('change', handlerMediaChange);
+      return () => mediaQueryList.removeEventListener('change', handlerMediaChange);
+    }
+
+    mediaQueryList.addListener(handlerMediaChange);
+    return () => mediaQueryList.removeListener(handlerMediaChange);
   }
 
-  return null;
+  return () => undefined;
 };
 /**
  * Determine whether the incoming element is a built-in icon

package/lib/cjs/empty/index.d.ts

@@ -31,8 +31,8 @@ export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
     constructor(props: EmptyProps);
     componentDidMount(): void;
     componentWillUnmount(): void;
-    observe(mutationsList: any): void;
-    updateMode(): void;
+    observe: (mutationsList: any) => void;
+    updateMode: () => void;
     render(): JSX.Element;
 }
 export {};

package/lib/cjs/empty/index.js

@@ -31,6 +31,25 @@ const prefixCls = _constants.cssClasses.PREFIX;
 class Empty extends _baseComponent.default {
   constructor(props) {
     super(props);
+
+    this.observe = mutationsList => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'theme-mode') {
+          this.updateMode();
+        }
+      }
+    };
+
+    this.updateMode = () => {
+      const val = this.body.getAttribute('theme-mode');
+
+      if (val !== this.state.mode) {
+        this.setState({
+          mode: val
+        });
+      }
+    };
+
     this.state = {
       mode: null
     };
@@ -54,24 +73,6 @@ class Empty extends _baseComponent.default {
     this.observer && this.observer.disconnect();
   }
 
-  observe(mutationsList) {
-    for (const mutation of mutationsList) {
-      if (mutation.type === 'attributes' && mutation.attributeName === 'theme-mode') {
-        this.updateMode();
-      }
-    }
-  }
-
-  updateMode() {
-    const val = this.body.getAttribute('theme-mode');
-
-    if (val !== this.state.mode) {
-      this.setState({
-        mode: val
-      });
-    }
-  }
-
   render() {
     var _context;
 

package/lib/es/_utils/index.js

@@ -147,11 +147,17 @@ export const registerMediaQuery = (media, _ref2) => {
     }
 
     callInInit && handlerMediaChange(mediaQueryList);
-    mediaQueryList.addEventListener('change', handlerMediaChange);
-    return () => mediaQueryList.removeEventListener('change', handlerMediaChange);
+
+    if (Object.prototype.hasOwnProperty.call(mediaQueryList, 'addEventListener')) {
+      mediaQueryList.addEventListener('change', handlerMediaChange);
+      return () => mediaQueryList.removeEventListener('change', handlerMediaChange);
+    }
+
+    mediaQueryList.addListener(handlerMediaChange);
+    return () => mediaQueryList.removeListener(handlerMediaChange);
   }
 
-  return null;
+  return () => undefined;
 };
 /**
  * Determine whether the incoming element is a built-in icon

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

@@ -31,8 +31,8 @@ export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
     constructor(props: EmptyProps);
     componentDidMount(): void;
     componentWillUnmount(): void;
-    observe(mutationsList: any): void;
-    updateMode(): void;
+    observe: (mutationsList: any) => void;
+    updateMode: () => void;
     render(): JSX.Element;
 }
 export {};

package/lib/es/empty/index.js

@@ -10,6 +10,25 @@ const prefixCls = cssClasses.PREFIX;
 export default class Empty extends BaseComponent {
   constructor(props) {
     super(props);
+
+    this.observe = mutationsList => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'theme-mode') {
+          this.updateMode();
+        }
+      }
+    };
+
+    this.updateMode = () => {
+      const val = this.body.getAttribute('theme-mode');
+
+      if (val !== this.state.mode) {
+        this.setState({
+          mode: val
+        });
+      }
+    };
+
     this.state = {
       mode: null
     };
@@ -33,24 +52,6 @@ export default class Empty extends BaseComponent {
     this.observer && this.observer.disconnect();
   }
 
-  observe(mutationsList) {
-    for (const mutation of mutationsList) {
-      if (mutation.type === 'attributes' && mutation.attributeName === 'theme-mode') {
-        this.updateMode();
-      }
-    }
-  }
-
-  updateMode() {
-    const val = this.body.getAttribute('theme-mode');
-
-    if (val !== this.state.mode) {
-      this.setState({
-        mode: val
-      });
-    }
-  }
-
   render() {
     var _context;
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.2.0-beta.0",
+    "version": "2.2.0-beta.1",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,11 +14,11 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation-react": "2.2.0-beta.0",
-        "@douyinfe/semi-foundation": "2.2.0-beta.0",
-        "@douyinfe/semi-icons": "2.2.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.2.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.2.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.2.0-beta.1",
+        "@douyinfe/semi-foundation": "2.2.0-beta.1",
+        "@douyinfe/semi-icons": "2.2.0-beta.1",
+        "@douyinfe/semi-illustrations": "2.2.0-beta.1",
+        "@douyinfe/semi-theme-default": "2.2.0-beta.1",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -68,13 +68,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "e8ea6a96a5ddd73a178a797548497cd6a64eb14b",
+    "gitHead": "b380360d4f966a59369dc1ab895cb23bb9903751",
     "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.2.0-beta.0",
+        "@douyinfe/semi-scss-compile": "2.2.0-beta.1",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",
@@ -99,7 +99,7 @@
         "react-storybook-addon-props-combinations": "^1.1.0",
         "react-virtualized": "^9.22.3",
         "rimraf": "^3.0.2",
-        "sass": "1.32.13",
+        "sass": "1.45.0",
         "sinon": "^6.3.5",
         "terser-webpack-plugin": "^4.2.3",
         "through2": "^4.0.2",