@douyinfe/semi-ui 2.20.2 → 2.20.4

package/lib/es/form/hoc/withField.js

@@ -1,5 +1,5 @@
 /* eslint-disable max-lines-per-function, react-hooks/rules-of-hooks, prefer-const, max-len */
-import React, { useState, useLayoutEffect, useMemo, useRef, forwardRef } from 'react';
+import React, { useState, useLayoutEffect, useEffect, useMemo, useRef, forwardRef } from 'react';
 import classNames from 'classnames';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/form/constants';
 import { isValid, generateValidatesFromRules, mergeOptions, mergeProps, getDisplayName } from '@douyinfe/semi-foundation/lib/es/form/utils';
@@ -11,7 +11,10 @@ import ErrorMessage from '../errorMessage';
 import { isElement } from '../../_base/reactUtils';
 import Label from '../label';
 import { Col } from '../../grid';
-const prefix = cssClasses.PREFIX;
+const prefix = cssClasses.PREFIX; // To avoid useLayoutEffect warning when ssr, refer: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+// Fix issue 1140
+
+const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 /**
  * withFiled is used to inject components
  * 1. Takes over the value and onChange of the component and synchronizes them to Form Foundation
@@ -351,12 +354,12 @@ function withField(Component, opts) {
       status
     }; // avoid hooks capture value, fixed issue 346
 
-    useLayoutEffect(() => {
+    useIsomorphicEffect(() => {
       rulesRef.current = rules;
       validateRef.current = validate;
     }, [rules, validate]); // exec validate once when trigger inlcude 'mount'
 
-    useLayoutEffect(() => {
+    useIsomorphicEffect(() => {
       if (validateOnMount) {
         fieldValidate(value);
       } // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -364,7 +367,7 @@ function withField(Component, opts) {
     }, []); // register when mounted，unregister when unmounted
     // register again when field change
 
-    useLayoutEffect(() => {
+    useIsomorphicEffect(() => {
       // register
       if (typeof field === 'undefined') {
         // eslint-disable-next-line @typescript-eslint/no-empty-function

package/lib/es/image/image.d.ts

@@ -2,7 +2,6 @@ import React from "react";
 import BaseComponent from "../_base/baseComponent";
 import { ImageProps, ImageStates } from "./interface";
 import PropTypes from "prop-types";
-import '@douyinfe/semi-foundation/lib/es/image/image.css';
 import { PreviewContextProps } from "./previewContext";
 import ImageFoundation, { ImageAdapter } from '@douyinfe/semi-foundation/lib/es/image/imageFoundation';
 export default class Image extends BaseComponent<ImageProps, ImageStates> {

package/lib/es/image/image.js

@@ -10,7 +10,6 @@ import { cssClasses } from '@douyinfe/semi-foundation/lib/es/image/constants';
 import cls from "classnames";
 import { IconUploadError, IconEyeOpened } from "@douyinfe/semi-icons";
 import PreviewInner from "./previewInner";
-import '@douyinfe/semi-foundation/lib/es/image/image.css';
 import { PreviewContext } from "./previewContext";
 import ImageFoundation from '@douyinfe/semi-foundation/lib/es/image/imageFoundation';
 import LocaleConsumer from "../locale/localeConsumer";

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

@@ -1,6 +1,7 @@
 import Image from "./image";
 import PreviewInner from "./previewInner";
 import Preview from "./preview";
+import '@douyinfe/semi-foundation/lib/es/image/image.css';
 export default Image;
 export { PreviewInner, Preview, };
 export { ImageProps, PreviewImageProps, PreviewProps, } from "./interface";

package/lib/es/image/index.js

@@ -1,5 +1,6 @@
 import Image from "./image";
 import PreviewInner from "./previewInner";
 import Preview from "./preview";
+import '@douyinfe/semi-foundation/lib/es/image/image.css';
 export default Image;
 export { PreviewInner, Preview };

package/lib/es/inputNumber/index.js

@@ -377,7 +377,7 @@ class InputNumber extends BaseComponent {
         }
       }
 
-      if (_isString(newValue) && newValue !== String(this.props.value)) {
+      if (newValue && _isString(newValue) && newValue !== String(this.props.value)) {
         this.foundation.notifyChange(newValue, null);
       }
     }

package/lib/es/modal/ModalContent.js

@@ -199,7 +199,6 @@ export default class ModalContent extends BaseComponent {
       }, /*#__PURE__*/React.createElement("div", {
         role: "dialog",
         ref: this.modalDialogRef,
-        tabIndex: -1,
         "aria-modal": "true",
         "aria-labelledby": "".concat(cssClasses.DIALOG, "-title"),
         "aria-describedby": "".concat(cssClasses.DIALOG, "-body"),
@@ -299,8 +298,16 @@ export default class ModalContent extends BaseComponent {
   }
 
   componentDidMount() {
+    var _a;
+
     this.foundation.handleKeyDownEventListenerMount();
     this.foundation.modalDialogFocus();
+    const nodes = FocusTrapHandle.getFocusableElements(this.modalDialogRef.current);
+
+    if (!this.modalDialogRef.current.contains(document.activeElement)) {
+      // focus on first focusable element
+      (_a = nodes[0]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
   }
 
   componentWillUnmount() {
@@ -329,7 +336,6 @@ export default class ModalContent extends BaseComponent {
       className: classList
     }, this.getMaskElement(), /*#__PURE__*/React.createElement("div", {
       role: "none",
-      tabIndex: -1,
       className: cls({
         ["".concat(cssClasses.DIALOG, "-wrap")]: true,
         ["".concat(cssClasses.DIALOG, "-wrap-center")]: this.props.centered

package/lib/es/navigation/Footer.js

@@ -25,13 +25,13 @@ export default class NavFooter extends PureComponent {
         locale,
         isCollapsed
       } = this.context;
-      return /*#__PURE__*/React.createElement(CollapseButton, Object.assign({
+      return /*#__PURE__*/React.createElement(CollapseButton, {
         prefixCls: prefixCls,
         isCollapsed: isCollapsed,
         locale: locale,
         onClick: onCollapseChange,
         collapseText: collapseText
-      }, collapseButton));
+      });
     };
   }
 

package/lib/es/navigation/OpenIconTransition.js

@@ -50,6 +50,7 @@ function OpenIconTransition() {
 
     if ( /*#__PURE__*/React.isValidElement(children)) {
       return /*#__PURE__*/React.cloneElement(children, {
+        // @ts-ignore
         style: Object.assign(Object.assign({}, children.props && children.props.style), formatedStyle)
       });
     }

package/lib/es/navigation/SubNav.js

@@ -127,11 +127,15 @@ export default class SubNav extends BaseComponent {
       ["".concat(prefixCls, "-item-icon-info")]: !isToggleIcon
     });
     const isOpen = this.adapter.getIsOpen();
-    const iconElem = /*#__PURE__*/React.isValidElement(icon) ? withTransition ? /*#__PURE__*/React.createElement(OpenIconTransition, {
+    const iconElem = /*#__PURE__*/React.isValidElement(icon) ? withTransition ?
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement(OpenIconTransition, {
       isOpen: isOpen
     }, /*#__PURE__*/React.cloneElement(icon, {
       size: iconSize
-    })) : /*#__PURE__*/React.cloneElement(icon, {
+    })) //@ts-ignore
+    : /*#__PURE__*/React.cloneElement(icon, {
       size: iconSize
     }) : null;
     return /*#__PURE__*/React.createElement("i", {

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

@@ -53,7 +53,7 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         visible: PropTypes.Requireable<boolean>;
         autoAdjustOverflow: PropTypes.Requireable<boolean>;
         motion: PropTypes.Requireable<boolean | object>;
-        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
+        position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
         mouseEnterDelay: PropTypes.Requireable<number>;
         mouseLeaveDelay: PropTypes.Requireable<number>;
         trigger: PropTypes.Validator<"hover" | "focus" | "click" | "custom">;

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

@@ -168,7 +168,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
         emptyContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         onDropdownVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
         zIndex: PropTypes.Requireable<number>;
-        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
+        position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
         onSearch: PropTypes.Requireable<(...args: any[]) => any>;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         dropdownClassName: PropTypes.Requireable<string>;

package/lib/es/table/Body/index.js

@@ -292,7 +292,7 @@ class Body extends BaseComponent {
         overflowY: 'auto'
       };
       const wrapCls = classnames("".concat(prefixCls, "-body"));
-      return /*#__PURE__*/React.createElement(List, Object.assign({}, virtualized, {
+      return /*#__PURE__*/React.createElement(List, Object.assign({}, typeof virtualized === 'object' ? virtualized : {}, {
         initialScrollOffset: this.state.cache.virtualizedScrollTop,
         onScroll: this.handleVirtualizedScroll,
         onItemsRendered: this.onItemsRendered,

package/lib/es/table/Table.d.ts

@@ -300,7 +300,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
         showSizeChanger?: boolean;
         showQuickJumper?: boolean;
         popoverZIndex?: number;
-        popoverPosition?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
+        popoverPosition?: "left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
         hideOnSinglePage?: boolean;
         hoverShowPageSelect?: boolean;
     };

package/lib/es/timeline/index.js

@@ -46,6 +46,7 @@ class Timeline extends PureComponent {
     this.addClassName = items => React.Children.map(items, (ele, idx) => {
       if ( /*#__PURE__*/React.isValidElement(ele)) {
         return /*#__PURE__*/React.cloneElement(ele, {
+          // @ts-ignore
           className: cls(ele.props.className, this.getPosCls(ele, idx))
         });
       }

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

@@ -81,7 +81,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         motion: PropTypes.Requireable<boolean | object>;
         autoAdjustOverflow: PropTypes.Requireable<boolean>;
-        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
+        position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         mouseEnterDelay: PropTypes.Requireable<number>;
         mouseLeaveDelay: PropTypes.Requireable<number>;

package/lib/es/typography/title.d.ts

@@ -37,7 +37,7 @@ export default class Title extends PureComponent<TitleProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
-        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 5 | 6>;
+        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 6 | 5>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.20.2",
+    "version": "2.20.4",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -18,11 +18,11 @@
     ],
     "dependencies": {
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.20.2",
-        "@douyinfe/semi-foundation": "2.20.2",
-        "@douyinfe/semi-icons": "2.20.2",
+        "@douyinfe/semi-animation-react": "2.20.4",
+        "@douyinfe/semi-foundation": "2.20.4",
+        "@douyinfe/semi-icons": "2.20.4",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.20.2",
+        "@douyinfe/semi-theme-default": "2.20.4",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "bd882a1aea13fc07aa43d61a51dd9a346b428059",
+    "gitHead": "40e37ceae0e1a93741bb2434448e4f7421986492",
     "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.20.2",
+        "@douyinfe/semi-scss-compile": "2.20.4",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "@types/react": ">=16.0.0",