@douyinfe/semi-ui 2.15.0-beta.0 → 2.15.2-alpha.0

package/lib/cjs/radio/radio.js

@@ -233,9 +233,11 @@ class Radio extends _baseComponent.default {
       focusInner: focusVisible && !focusOuter,
       onInputFocus: this.handleFocusVisible,
       onInputBlur: this.handleBlur
-    })), isCardRadioGroup ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefix, "-isCardRadioGroup_content")
-    }, renderContent()) : renderContent());
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)(["".concat(prefix, "-content"), {
+        ["".concat(prefix, "-isCardRadioGroup_content")]: isCardRadioGroup
+      }])
+    }, renderContent()));
   }
 
 }

package/lib/cjs/tooltip/index.js

@@ -722,7 +722,7 @@ class Tooltip extends _baseComponent.default {
         }
       },
       tabIndex: 0,
-      'data-popupId': id
+      'data-popupid': id
     })); // If you do not add a layer of div, in order to bind the events and className in the tooltip, you need to cloneElement children, but this time it may overwrite the children's original ref reference
     // So if the user adds ref to the content, you need to use callback ref: https://github.com/facebook/react/issues/8873
 

package/lib/cjs/tree/index.js

@@ -27,6 +27,8 @@ var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stabl
 
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
 
 var _get2 = _interopRequireDefault(require("lodash/get"));
@@ -71,6 +73,8 @@ require("@douyinfe/semi-foundation/lib/cjs/tree/tree.css");
 
 var _semiIcons = require("@douyinfe/semi-icons");
 
+var _checkboxGroup = _interopRequireDefault(require("../checkbox/checkboxGroup"));
+
 var _interface = require("./interface");
 
 _forEachInstanceProperty(_context2 = _Object$keys2(_interface)).call(_context2, function (key) {
@@ -652,7 +656,9 @@ class Tree extends _baseComponent.default {
       inputValue,
       filteredKeys,
       dragOverNodeKey,
-      dropPosition
+      dropPosition,
+      checkedKeys,
+      realCheckedKeys
     } = this.state;
     const {
       blockNode,
@@ -671,7 +677,8 @@ class Tree extends _baseComponent.default {
       draggable,
       renderFullLabel,
       labelEllipsis,
-      virtualize
+      virtualize,
+      checkRelation
     } = this.props;
     const wrapperCls = (0, _classnames.default)("".concat(prefixcls, "-wrapper"), className);
     const listCls = (0, _classnames.default)("".concat(prefixcls, "-option-list"), {
@@ -729,7 +736,9 @@ class Tree extends _baseComponent.default {
       style: style
     }, filterTreeNode ? this.renderInput() : null, /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
       className: listCls
-    }, ariaAttr), noData ? this.renderEmpty() : this.renderNodeList())));
+    }, ariaAttr), noData ? this.renderEmpty() : multiple ? /*#__PURE__*/_react.default.createElement(_checkboxGroup.default, {
+      value: (0, _from.default)(checkRelation === 'related' ? checkedKeys : realCheckedKeys)
+    }, this.renderNodeList()) : this.renderNodeList())));
   }
 
 }

package/lib/cjs/tree/treeNode.js

@@ -342,7 +342,8 @@ class TreeNode extends _react.PureComponent {
   renderCheckbox() {
     const {
       checked,
-      halfChecked
+      halfChecked,
+      eventKey
     } = this.props;
     const disabled = this.isDisabled();
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -351,6 +352,7 @@ class TreeNode extends _react.PureComponent {
       onKeyPress: this.handleCheckEnterPress
     }, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
       "aria-label": 'Toggle the checked state of checkbox',
+      value: eventKey,
       indeterminate: halfChecked,
       checked: checked,
       disabled: Boolean(disabled)

package/lib/cjs/treeSelect/index.js

@@ -28,6 +28,8 @@ var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
 
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
 var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
 
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
@@ -96,6 +98,8 @@ var _utils = require("../_utils");
 
 var _semiIcons = require("@douyinfe/semi-icons");
 
+var _checkboxGroup = _interopRequireDefault(require("../checkbox/checkboxGroup"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -875,7 +879,9 @@ class TreeSelect extends _baseComponent.default {
         motionType,
         inputValue,
         filteredKeys,
-        flattenNodes
+        flattenNodes,
+        checkedKeys,
+        realCheckedKeys
       } = this.state;
       const {
         loadData,
@@ -892,7 +898,8 @@ class TreeSelect extends _baseComponent.default {
         optionListStyle,
         searchPosition,
         renderLabel,
-        renderFullLabel
+        renderFullLabel,
+        checkRelation
       } = this.props;
       const wrapperCls = (0, _classnames.default)("".concat(prefixTree, "-wrapper"));
       const listCls = (0, _classnames.default)("".concat(prefixTree, "-option-list"), {
@@ -933,7 +940,9 @@ class TreeSelect extends _baseComponent.default {
         role: "tree",
         "aria-multiselectable": multiple ? true : false,
         style: optionListStyle
-      }, noData ? this.renderEmpty() : this.renderNodeList()), outerBottomSlot));
+      }, noData ? this.renderEmpty() : multiple ? /*#__PURE__*/_react.default.createElement(_checkboxGroup.default, {
+        value: (0, _from.default)(checkRelation === 'related' ? checkedKeys : realCheckedKeys)
+      }, this.renderNodeList()) : this.renderNodeList()), outerBottomSlot));
     };
 
     this.state = {

package/lib/es/radio/radio.js

@@ -210,9 +210,11 @@ class Radio extends BaseComponent {
       focusInner: focusVisible && !focusOuter,
       onInputFocus: this.handleFocusVisible,
       onInputBlur: this.handleBlur
-    })), isCardRadioGroup ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefix, "-isCardRadioGroup_content")
-    }, renderContent()) : renderContent());
+    })), /*#__PURE__*/React.createElement("div", {
+      className: cls(["".concat(prefix, "-content"), {
+        ["".concat(prefix, "-isCardRadioGroup_content")]: isCardRadioGroup
+      }])
+    }, renderContent()));
   }
 
 }

package/lib/es/tooltip/index.js

@@ -684,7 +684,7 @@ export default class Tooltip extends BaseComponent {
         }
       },
       tabIndex: 0,
-      'data-popupId': id
+      'data-popupid': id
     })); // If you do not add a layer of div, in order to bind the events and className in the tooltip, you need to cloneElement children, but this time it may overwrite the children's original ref reference
     // So if the user adds ref to the content, you need to use callback ref: https://github.com/facebook/react/issues/8873
 

package/lib/es/tree/index.js

@@ -7,6 +7,7 @@ import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 
 /* eslint-disable max-lines-per-function */
 import React from 'react';
@@ -27,6 +28,7 @@ import NodeList from './nodeList';
 import LocaleConsumer from '../locale/localeConsumer';
 import '@douyinfe/semi-foundation/lib/es/tree/tree.css';
 import { IconSearch } from '@douyinfe/semi-icons';
+import CheckboxGroup from '../checkbox/checkboxGroup';
 export * from './interface';
 const prefixcls = cssClasses.PREFIX;
 
@@ -593,7 +595,9 @@ class Tree extends BaseComponent {
       inputValue,
       filteredKeys,
       dragOverNodeKey,
-      dropPosition
+      dropPosition,
+      checkedKeys,
+      realCheckedKeys
     } = this.state;
     const {
       blockNode,
@@ -612,7 +616,8 @@ class Tree extends BaseComponent {
       draggable,
       renderFullLabel,
       labelEllipsis,
-      virtualize
+      virtualize,
+      checkRelation
     } = this.props;
     const wrapperCls = cls("".concat(prefixcls, "-wrapper"), className);
     const listCls = cls("".concat(prefixcls, "-option-list"), {
@@ -670,7 +675,9 @@ class Tree extends BaseComponent {
       style: style
     }, filterTreeNode ? this.renderInput() : null, /*#__PURE__*/React.createElement("div", _Object$assign({
       className: listCls
-    }, ariaAttr), noData ? this.renderEmpty() : this.renderNodeList())));
+    }, ariaAttr), noData ? this.renderEmpty() : multiple ? /*#__PURE__*/React.createElement(CheckboxGroup, {
+      value: _Array$from(checkRelation === 'related' ? checkedKeys : realCheckedKeys)
+    }, this.renderNodeList()) : this.renderNodeList())));
   }
 
 }

package/lib/es/tree/treeNode.js

@@ -303,7 +303,8 @@ export default class TreeNode extends PureComponent {
   renderCheckbox() {
     const {
       checked,
-      halfChecked
+      halfChecked,
+      eventKey
     } = this.props;
     const disabled = this.isDisabled();
     return /*#__PURE__*/React.createElement("div", {
@@ -312,6 +313,7 @@ export default class TreeNode extends PureComponent {
       onKeyPress: this.handleCheckEnterPress
     }, /*#__PURE__*/React.createElement(Checkbox, {
       "aria-label": 'Toggle the checked state of checkbox',
+      value: eventKey,
       indeterminate: halfChecked,
       checked: checked,
       disabled: Boolean(disabled)

package/lib/es/treeSelect/index.js

@@ -11,6 +11,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import React, { Fragment } from 'react';
 import ReactDOM from 'react-dom';
@@ -39,6 +40,7 @@ import Trigger from '../trigger';
 import TagInput from '../tagInput';
 import { isSemiIcon } from '../_utils';
 import { IconChevronDown, IconClear, IconSearch } from '@douyinfe/semi-icons';
+import CheckboxGroup from '../checkbox/checkboxGroup';
 const prefixcls = cssClasses.PREFIX;
 const prefixTree = cssClasses.PREFIX_TREE;
 const key = 0;
@@ -821,7 +823,9 @@ class TreeSelect extends BaseComponent {
         motionType,
         inputValue,
         filteredKeys,
-        flattenNodes
+        flattenNodes,
+        checkedKeys,
+        realCheckedKeys
       } = this.state;
       const {
         loadData,
@@ -838,7 +842,8 @@ class TreeSelect extends BaseComponent {
         optionListStyle,
         searchPosition,
         renderLabel,
-        renderFullLabel
+        renderFullLabel,
+        checkRelation
       } = this.props;
       const wrapperCls = cls("".concat(prefixTree, "-wrapper"));
       const listCls = cls("".concat(prefixTree, "-option-list"), {
@@ -879,7 +884,9 @@ class TreeSelect extends BaseComponent {
         role: "tree",
         "aria-multiselectable": multiple ? true : false,
         style: optionListStyle
-      }, noData ? this.renderEmpty() : this.renderNodeList()), outerBottomSlot));
+      }, noData ? this.renderEmpty() : multiple ? /*#__PURE__*/React.createElement(CheckboxGroup, {
+        value: _Array$from(checkRelation === 'related' ? checkedKeys : realCheckedKeys)
+      }, this.renderNodeList()) : this.renderNodeList()), outerBottomSlot));
     };
 
     this.state = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.15.0-beta.0",
+    "version": "2.15.2-alpha.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -15,11 +15,11 @@
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.15.0-beta.0",
-        "@douyinfe/semi-foundation": "2.15.0-beta.0",
-        "@douyinfe/semi-icons": "2.15.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.15.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.15.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.15.2-alpha.0",
+        "@douyinfe/semi-foundation": "2.15.2-alpha.0",
+        "@douyinfe/semi-icons": "2.15.2-alpha.0",
+        "@douyinfe/semi-illustrations": "2.15.0",
+        "@douyinfe/semi-theme-default": "2.15.2-alpha.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "09fa8ba9a3765537c9de842dbcc2f97d515b54d9",
+    "gitHead": "2a0f381a9b559286fe9891093222198792fe5313",
     "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.15.0-beta.0",
+        "@douyinfe/semi-scss-compile": "2.15.2-alpha.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/radio/_story/radio.stories.js

@@ -254,18 +254,18 @@ _RadioGroup.story = {
 
 export const RadioWithVertical = () => {
   return (
-    <Radio.Group>
-      <Radio value="A" displayMode="vertical">
+    <Radio.Group direction="vertical">
+      <Radio value="A">
         无限长的一串字The Storybook webapp UI can be customised with this addon. It can be used to
         change the header, show/hide various UI elements and to enable full-screen mode by default.
       </Radio>
-      <Radio value="C" displayMode="vertical">
+      <Radio value="C">
         C
       </Radio>
-      <Radio value="D" displayMode="vertical">
+      <Radio value="D">
         D
       </Radio>
-      <Radio value="E" displayMode="vertical">
+      <Radio value="E">
         E
       </Radio>
     </Radio.Group>

package/radio/radio.tsx

@@ -285,11 +285,9 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
                     onInputFocus={this.handleFocusVisible}
                     onInputBlur={this.handleBlur}
                 />
-                {
-                    isCardRadioGroup ?
-                        <div className={`${prefix}-isCardRadioGroup_content`}>{renderContent()}</div> :
-                        renderContent()
-                }
+                <div className={cls([`${prefix}-content`, { [`${prefix}-isCardRadioGroup_content`]: isCardRadioGroup }])}>
+                    {renderContent()}
+                </div>
             </label>
         );
     }

package/tooltip/index.tsx

@@ -717,7 +717,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                 }
             },
             tabIndex: 0, // a11y keyboard
-            'data-popupId': id
+            'data-popupid': id
         });
 
         // If you do not add a layer of div, in order to bind the events and className in the tooltip, you need to cloneElement children, but this time it may overwrite the children's original ref reference

package/tree/index.tsx

@@ -41,6 +41,7 @@ import {
     KeyEntity,
     OptionProps
 } from './interface';
+import CheckboxGroup from '../checkbox/checkboxGroup';
 
 export * from './interface';
 export { AutoSizerProps } from './autoSizer';
@@ -688,6 +689,8 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
             filteredKeys,
             dragOverNodeKey,
             dropPosition,
+            checkedKeys, 
+            realCheckedKeys,
         } = this.state;
 
         const {
@@ -708,6 +711,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
             renderFullLabel,
             labelEllipsis,
             virtualize,
+            checkRelation,
         } = this.props;
         const wrapperCls = cls(`${prefixcls}-wrapper`, className);
         const listCls = cls(`${prefixcls}-option-list`, {
@@ -762,7 +766,12 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
                 <div aria-label={this.props['aria-label']} className={wrapperCls} style={style}>
                     {filterTreeNode ? this.renderInput() : null}
                     <div className={listCls} {...ariaAttr}>
-                        {noData ? this.renderEmpty() : this.renderNodeList()}
+                        {noData ? this.renderEmpty() : (multiple ? 
+                            (<CheckboxGroup value={Array.from(checkRelation === 'related' ? checkedKeys : realCheckedKeys)}>
+                                {this.renderNodeList()}
+                            </CheckboxGroup>) : 
+                            this.renderNodeList()
+                        )}
                     </div>
                 </div>
             </TreeContext.Provider>

package/tree/treeNode.tsx

@@ -221,7 +221,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
     }
 
     renderCheckbox() {
-        const { checked, halfChecked } = this.props;
+        const { checked, halfChecked, eventKey } = this.props;
         const disabled = this.isDisabled();
         return (
             <div
@@ -231,6 +231,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
             >
                 <Checkbox
                     aria-label='Toggle the checked state of checkbox'
+                    value={eventKey}
                     indeterminate={halfChecked}
                     checked={checked}
                     disabled={Boolean(disabled)}

package/treeSelect/_story/treeSelect.stories.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Icon, Button, Form, Popover, Tag, Typography } from '../../index';
+import { Icon, Button, Form, Popover, Tag, Typography, CheckboxGroup } from '../../index';
 import TreeSelect from '../index';
 import { flattenDeep } from 'lodash';
 import CustomTrigger from './CustomTrigger';
@@ -152,6 +152,43 @@ const treeDataWithoutValue = [
   },
 ];
 
+export const TreeSelectWrapper = () => (
+  <div>
+    <div>github issue 750 修改测试用例</div>
+    <CheckboxGroup>
+      <TreeSelect
+        showClear={true}
+        expandAll
+        style={{width: 400}}
+        treeData={[
+            {
+                key: '1',
+                label: '所有节点',
+                value: '1',
+                children: [
+                    { key: '20006251', label: 'Semi', value: 'semi@bytedance.com' },
+                    { key: '20006248', label: 'Design', value: 'design@bytedance.com' },
+                    {
+                        key: '20006205',
+                        label: 'React',
+                        value: 'react@bytedance.com',
+                    },
+                ],
+            },
+            ]}
+        multiple
+        filterTreeNode
+        showFilteredOnly={true}
+        leafOnly
+      />
+  </CheckboxGroup>
+  </div>
+);
+
+TreeSelectWrapper.story = {
+  name: 'treeSelect wrapper',
+};
+
 class SimpleTree extends React.Component {
   render() {
     return (

package/treeSelect/index.tsx

@@ -50,6 +50,7 @@ import { isSemiIcon } from '../_utils';
 import { OptionProps, TreeProps, TreeState, FlattenNode, TreeNodeData, TreeNodeProps } from '../tree/interface';
 import { Motion } from '../_base/base';
 import { IconChevronDown, IconClear, IconSearch } from '@douyinfe/semi-icons';
+import CheckboxGroup from '../checkbox/checkboxGroup';
 
 export type ExpandAction = false | 'click' | 'doubleClick';
 
@@ -1301,7 +1302,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
     };
 
     renderTree = () => {
-        const { keyEntities, motionKeys, motionType, inputValue, filteredKeys, flattenNodes } = this.state;
+        const { keyEntities, motionKeys, motionType, inputValue, filteredKeys, flattenNodes, checkedKeys, realCheckedKeys } = this.state;
         const {
             loadData,
             filterTreeNode,
@@ -1318,6 +1319,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             searchPosition,
             renderLabel,
             renderFullLabel,
+            checkRelation,
         } = this.props;
         const wrapperCls = cls(`${prefixTree}-wrapper`);
         const listCls = cls(`${prefixTree}-option-list`, {
@@ -1362,7 +1364,12 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                         this.renderInput()
                     }
                     <div className={listCls} role="tree" aria-multiselectable={multiple ? true : false} style={optionListStyle}>
-                        {noData ? this.renderEmpty() : this.renderNodeList()}
+                        { noData ? this.renderEmpty() : (multiple ? 
+                            (<CheckboxGroup value={Array.from(checkRelation === 'related' ? checkedKeys : realCheckedKeys)}>
+                                {this.renderNodeList()}
+                            </CheckboxGroup>) : 
+                            this.renderNodeList()
+                        )}
                     </div>
                     {outerBottomSlot}
                 </div>