@douyinfe/semi-ui 2.1.4-alpha.0 → 2.1.4

package/lib/es/upload/index.js

@@ -267,6 +267,14 @@ class Upload extends BaseComponent {
     this.inputRef = /*#__PURE__*/React.createRef();
     this.replaceInputRef = /*#__PURE__*/React.createRef();
   }
+  /**
+   * Notes:
+   *   The input parameter and return value here do not declare the type, otherwise tsc may report an error in form/fields.tsx when wrap after withField
+   *   `The types of the parameters "props" and "nextProps" are incompatible.
+         The attribute "action" is missing in the type "Readonly<any>", but it is required in the type "UploadProps".`
+   *   which seems to be a bug, remove props type declare here
+   */
+
 
   static getDerivedStateFromProps(props) {
     const {

package/modal/Modal.tsx

@@ -11,9 +11,9 @@ import PropTypes from 'prop-types';
 import { noop } from 'lodash';
 import '@douyinfe/semi-foundation/modal/modal.scss';
 import BaseComponent from '../_base/baseComponent';
-import confirm, { withConfirm, withError, withInfo, withSuccess, withWarning } from '../modal/confirm';
+import confirm, { withConfirm, withError, withInfo, withSuccess, withWarning } from './confirm';
 import { Locale } from '../locale/interface';
-import useModal from '../modal/useModal';
+import useModal from './useModal';
 import { ButtonProps } from '../button/Button';
 
 export const destroyFns: any[] = [];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.1.4-alpha.0",
+    "version": "2.1.4",
     "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.1.3",
-        "@douyinfe/semi-foundation": "2.1.3",
-        "@douyinfe/semi-icons": "2.1.3",
-        "@douyinfe/semi-illustrations": "2.1.3",
-        "@douyinfe/semi-theme-default": "2.1.3",
+        "@douyinfe/semi-animation-react": "2.1.4",
+        "@douyinfe/semi-foundation": "2.1.4",
+        "@douyinfe/semi-icons": "2.1.4",
+        "@douyinfe/semi-illustrations": "2.1.4",
+        "@douyinfe/semi-theme-default": "2.1.4",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -60,13 +60,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "77731b7e7efb84a5233e1ba6e96cca47e1b86620",
+    "gitHead": "c6ce83aa28229d455cba4c01bc84c53f76c57c78",
     "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.1.3",
+        "@douyinfe/semi-scss-compile": "2.1.4",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/radio/__test__/radioGroup.test.jsx

@@ -131,20 +131,55 @@ describe('RadioGroup', () => {
     });
 
     it('radioGroup card style', () => {
-        const radio = mount(
+        const radioGroup = mount(
             createRadioGroup({ type: 'card' })
         );
-        expect(radio.exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)).toEqual(true);
+        expect(radioGroup.exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)).toEqual(true);
+        radioGroup.unmount();
+
+        const disabledRadioGroup = mount(
+            createRadioGroup({ type: 'card', disabled: true, defaultValue: 'A' })
+        );
+        expect(
+            disabledRadioGroup
+                .find(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)
+                .at(0)
+                .exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup_checked_disabled`)
+        ).toEqual(true);
+        expect(
+            disabledRadioGroup
+                .find(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)
+                .at(1)
+                .exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup_checked_disabled`)
+        ).toEqual(false);
+        disabledRadioGroup.unmount();
     });
 
     it('radioGroup pure card style', () => {
-        const radio = mount(
+        const radioGroup = mount(
             createRadioGroup({ type: 'pureCard' })
         );
-        expect(radio.exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)).toEqual(true);
-        expect(radio.exists(`.${BASE_CLASS_PREFIX}-radio-inner-pureCardRadio`)).toEqual(true);
-    });
+        expect(radioGroup.exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)).toEqual(true);
+        expect(radioGroup.exists(`.${BASE_CLASS_PREFIX}-radio-inner-pureCardRadio`)).toEqual(true);
+        radioGroup.unmount();
 
+        const disabledRadioGroup = mount(
+            createRadioGroup({ type: 'pureCard', disabled: true, defaultValue: 'A' })
+        );
+        expect(
+            disabledRadioGroup
+                .find(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)
+                .at(0)
+                .exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup_checked_disabled`)
+        ).toEqual(true);
+        expect(
+            disabledRadioGroup
+                .find(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)
+                .at(1)
+                .exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup_checked_disabled`)
+        ).toEqual(false);
+        disabledRadioGroup.unmount();
+    });
 
     it('The buttonSize of the button type radio', () => {
         const smallRadio = mount(

package/radio/_story/radio.stories.js

@@ -481,10 +481,10 @@ export const RadioGroupCardStyle = () => (
     <br />
     <div>radio disabled</div>
     <RadioGroup type="card" defaultValue={1}>
-      <Radio value={1} disabled extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={1} disabled extra="disabled+checked" style={{ width: 280 }}>
         多选框标题
       </Radio>
-      <Radio value={2} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={2} disabled extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Radio>
       <Radio value={3} extra="Semi Design" style={{ width: 280 }}>
@@ -495,13 +495,13 @@ export const RadioGroupCardStyle = () => (
     <br />
     <div>radioGroup disabled</div>
     <RadioGroup type="card" disabled defaultValue={1}>
-      <Radio value={1} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={1} extra="disabled+checked" style={{ width: 280 }}>
         多选框标题
       </Radio>
-      <Radio value={2} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={2} extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Radio>
-      <Radio value={3} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={3} extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Radio>
     </RadioGroup>
@@ -678,10 +678,10 @@ export const RadioGroupPureCardStyle = () => (
     <br />
     <div>radio disabled</div>
     <RadioGroup type="pureCard" defaultValue={1}>
-      <Radio value={1} disabled extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={1} disabled extra="disabled+checked" style={{ width: 280 }}>
         多选框标题
       </Radio>
-      <Radio value={2} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={2} disabled extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Radio>
       <Radio value={3} extra="Semi Design" style={{ width: 280 }}>
@@ -692,13 +692,13 @@ export const RadioGroupPureCardStyle = () => (
     <br />
     <div>radioGroup disabled</div>
     <RadioGroup type="pureCard" disabled defaultValue={1}>
-      <Radio value={1} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={1} extra="disabled+checked" style={{ width: 280 }}>
         多选框标题
       </Radio>
-      <Radio value={2} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={2} extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Radio>
-      <Radio value={3} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={3} extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Radio>
     </RadioGroup>

package/radio/radio.tsx

@@ -193,6 +193,7 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             [`${prefix}-cardRadioGroup`]: isCardRadioGroup,
             [`${prefix}-cardRadioGroup_disabled`]: isDisabled && isCardRadioGroup,
             [`${prefix}-cardRadioGroup_checked`]: isCardRadioGroup && realChecked && !isDisabled,
+            [`${prefix}-cardRadioGroup_checked_disabled`]: isCardRadioGroup && realChecked && isDisabled,
             [`${prefix}-cardRadioGroup_hover`]: isCardRadioGroup && !realChecked && isHover && !isDisabled,
             [className]: Boolean(className),
         });

package/rating/item.tsx

@@ -101,6 +101,7 @@ export default class Item extends PureComponent<RatingItemProps> {
                     aria-posinset={index + 1}
                     aria-setsize={count}
                     tabIndex={0}
+                    className={`${prefixCls}-wrapper`}
                 >
                     <div className={`${prefixCls}-first`} style={{ width: `${firstWidth * 100}%` }}>{content}</div>
                     <div className={`${prefixCls}-second`}>{content}</div>

package/treeSelect/index.tsx

@@ -27,7 +27,7 @@ import {
 } from '@douyinfe/semi-foundation/tree/treeUtil';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/treeSelect/constants';
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/popover/constants';
-import { FixedSizeList as VirtualList } from 'react-window';
+import { FixedSizeList as VirtualList, ListItemKeySelector } from 'react-window';
 import '@douyinfe/semi-foundation/tree/tree.scss';
 import '@douyinfe/semi-foundation/treeSelect/treeSelect.scss';
 import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
@@ -1166,7 +1166,8 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                         itemSize={virtualize.itemSize}
                         height={height}
                         width={width}
-                        itemKey={this.itemKey}
+                        // @ts-ignore avoid strict check of itemKey
+                        itemKey={this.itemKey as ListItemKeySelector<TreeNodeData>}
                         itemData={flattenNodes as any}
                         className={`${prefixTree}-virtual-list`}
                         style={{ direction }}

package/tsconfig.json

@@ -25,7 +25,8 @@
         "esModuleInterop": true,
         "skipLibCheck": true,
         "declaration": true,
-        "strictNullChecks": false
+        "strictNullChecks": false,
+        "strict": true
     },
     "include": ["**/*.tsx", "**/*.ts"],
     "exclude": ["node_modules", "packages/rollup-plugin-semi-svg"]

package/upload/index.tsx

@@ -193,7 +193,14 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
         this.replaceInputRef = React.createRef<HTMLInputElement>();
     }
 
-    static getDerivedStateFromProps(props: UploadProps): Partial<UploadState> | null {
+    /**
+     * Notes: 
+     *   The input parameter and return value here do not declare the type, otherwise tsc may report an error in form/fields.tsx when wrap after withField
+     *   `The types of the parameters "props" and "nextProps" are incompatible.
+           The attribute "action" is missing in the type "Readonly<any>", but it is required in the type "UploadProps".`
+     *   which seems to be a bug, remove props type declare here
+     */
+    static getDerivedStateFromProps(props) {
         const { fileList } = props;
         if ('fileList' in props) {
             return {