@aloudata/aloudata-design 2.0.0-beta.9 → 2.0.0

package/dist/Select/style/index.less

@@ -7,6 +7,7 @@
 @import './selectDropdown.less';
 @import './option.less';
 @import './layout.less';
+@import './emptyShowAll.less';
 
 .ald-select.ald-select {
   display: inline-block;
@@ -33,6 +34,10 @@
     &.ald-select-prefix-multiple {
       cursor: default;
     }
+
+    .ant-select-selection-overflow {
+      margin-left: 6px;
+    }
   }
 
   .ant-select {
@@ -63,14 +68,13 @@
       .ant-select-selection-overflow {
         align-self: normal;
         flex-wrap: nowrap;
-        margin-left: 6px;
         min-width: 52px;
         height: 100%;
 
         .ant-select-selection-overflow-item {
           align-items: center;
           line-height: inherit;
-          flex: 1;
+          // flex: 1;
           min-width: 0;
           // height: 100%;
 
@@ -113,11 +117,6 @@
                 height: 16px;
                 padding: 0 var(--alias-spacing-50, 4px);
                 border-radius: var(--alias-radius-100, 8px);
-                background: var(
-                  --alias-colors-bg-accent-blue-subtle-default,
-                  #d4e7fd
-                );
-                color: var(--alias-colors-text-information, #0f59b1);
                 font-size: 12px;
               }
             }
@@ -133,6 +132,17 @@
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
+            // position: relative;;
+
+            &::before {
+              content: '，';
+            }
+          }
+
+          &:first-of-type {
+            .ald-select-multiple-tag-default::before {
+              content: '';
+            }
           }
 
           .ant-select-selection-search-input {

package/dist/Select/style/layout.less

@@ -27,6 +27,7 @@
       align-items: center;
       flex: none;
       right: 0;
+      background-color: transparent;
 
       &::before {
         position: absolute;

package/dist/Select/style/selectDropdown.less

@@ -10,8 +10,7 @@
     overflow-y: overlay;
     border: 1px solid var(--alias-colors-border-strong, #d1d5db);
     background: var(--alias-colors-bg-skeleton-subtler, #fff);
-    box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.05),
-      0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 10px 18px -2px rgba(0, 0, 0, 0.08);
     padding: 4px 0;
   }
 }

package/dist/Select/style/status.less

@@ -11,12 +11,28 @@
 .ald-select.ald-select-primary {
   .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtle, #F9FAFB),var(--alias-colors-text-default, #1f2937));
 
+  &.ald-select-multiple .ant-select {
+    .ant-select-selector {
+      color: var(--alias-colors-text-selected, #126fdd);
+
+      .ant-select-selection-overflow-item-rest {
+        .ant-select-selection-item-content {
+          background: var(
+            --alias-colors-bg-accent-blue-subtle-default,
+            #d4e7fd
+          );
+          color: var(--alias-colors-text-information, #0f59b1);
+        }
+      }
+    }
+  }
+
   &.ald-select-fitted {
     .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtle, #F9FAFB),var(--alias-colors-text-default, #1f2937));
   }
 
   &:hover {
-    .select-color(var(--alias-colors-border-accent-gray-subtle-hover, #9ca3af),var(--alias-colors-bg-skeleton-subtler, #FFF),var(--alias-colors-text-default, #1f2937));
+    .select-color(var(--alias-colors-border-accent-gray-subtle-hover, #9ca3af), var(--alias-colors-bg-accent-gray-subtler-default, #F9FAFB),var(--alias-colors-text-default, #1f2937));
   }
 
   &:active {
@@ -28,12 +44,22 @@
 
     cursor: default;
 
-    .ant-select .ant-select-selector {
+    .ant-select {
       cursor: default;
 
+      .ant-select-selector {
+        cursor: default;
+      }
+
       .ant-select-selection-search input {
         cursor: default;
       }
+
+      .ant-select-arrow {
+        .ald-select-suffix-icon {
+          color: var(--alias-colors-icon-disabled, rgba(0, 0, 0, 0.25));
+        }
+      }
     }
   }
 
@@ -46,6 +72,17 @@
   &.ald-select-secondary {
     .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtler, #FFF),var(--alias-colors-text-default, #1f2937));
 
+    &.ald-select-multiple .ant-select {
+      .ant-select-selector {
+        .ant-select-selection-overflow-item-rest {
+          .ant-select-selection-item-content {
+            background: transparent;
+            color: var(--alias-colors-text-subtle, #4b5563);
+          }
+        }
+      }
+    }
+
     &.ald-select-fitted {
       .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtler, #FFF),var(--alias-colors-text-default, #1f2937));
     }
@@ -73,6 +110,12 @@
         .ant-select-selection-search input {
           cursor: default;
         }
+
+        .ant-select-arrow {
+          .ald-select-suffix-icon {
+            color: var(--alias-colors-icon-disabled, rgba(0, 0, 0, 0.25));
+          }
+        }
       }
     }
   }

package/dist/Table/style/index.less

@@ -13,10 +13,10 @@
 
 .ald-table-main {
   width: 100%;
-  color: #171717;
   font-size: 13px;
   line-height: 20px;
   background: #fff;
+  color: var(--alias-colors-text-subtle, #4b5563);
 
   .ald-table-content {
     display: flex;
@@ -69,7 +69,8 @@
 
   .ald-table-th-default {
     font-weight: 500;
-    padding: 0 var(--alias-spacing-200, 16px);
+    line-height: 16px;
+    padding-left: var(--alias-spacing-200, 16px);
     font-size: 12px;
     overflow: hidden;
     height: 40px;
@@ -78,13 +79,13 @@
   }
 
   .ald-table-td-default {
-    padding: 0 var(--alias-spacing-200, 16px);
+    line-height: 20px;
+    padding-left: var(--alias-spacing-200, 16px);
     display: flex;
     align-items: center;
     height: 100%;
     font-size: 14px;
     min-height: 47px;
-    font-weight: 400;
     overflow: hidden;
   }
 
@@ -102,7 +103,7 @@
   }
 
   .ald-table-body {
-    min-height: 200px;
+    min-height: 96px;
     overflow: auto;
 
     .ald-table-tr {

package/dist/Tabs/style/index.less

@@ -53,8 +53,7 @@
   .ant-tabs-ink-bar {
     height: @tabs-ink-link-bar-height;
     background: @tab-ink-link-bar-background;
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
+    border-radius: 2px;
   }
 
   /* small size */
@@ -134,7 +133,7 @@
     margin-bottom: 20px;
 
     &::before {
-      border-color: @BG70;
+      border-color: var(--alias-colors-border-default, #e5e7eb);
     }
   }
 
@@ -151,10 +150,6 @@
   &.ald-tabs-compact {
     .ant-tabs-nav {
       margin-bottom: 0;
-
-      &::before {
-        border: 0;
-      }
     }
   }
 }

package/dist/Tooltip/index.js

@@ -1,6 +1,6 @@
-import React from 'react';
 import AntdTooltip from 'antd/lib/tooltip';
 import classNames from 'classnames';
+import React from 'react';
 export default function Tooltip(props) {
   var children = props.children,
     title = props.title,
@@ -9,8 +9,10 @@ export default function Tooltip(props) {
     trigger = props.trigger,
     zIndex = props.zIndex,
     placement = props.placement,
-    mouseEnterDelay = props.mouseEnterDelay,
-    mouseLeaveDelay = props.mouseLeaveDelay,
+    _props$mouseEnterDela = props.mouseEnterDelay,
+    mouseEnterDelay = _props$mouseEnterDela === void 0 ? 0 : _props$mouseEnterDela,
+    _props$mouseLeaveDela = props.mouseLeaveDelay,
+    mouseLeaveDelay = _props$mouseLeaveDela === void 0 ? 0 : _props$mouseLeaveDela,
     getPopupContainer = props.getPopupContainer,
     destroyTooltipOnHide = props.destroyTooltipOnHide,
     getTooltipContainer = props.getTooltipContainer,

package/dist/Tooltip/style/index.less

@@ -1,25 +1,25 @@
 @import '../../style/index.less';
 
-.ald-tooltip-overlay.ald-tooltip-overlay {
+.ant-tooltip.ant-tooltip {
   .ant-tooltip-inner {
     padding: 6px 8px;
     line-height: 16px;
-    background: @BG10;
-    border-radius: 2px;
+    background: var(--alias-colors-bg-skeleton-inverse-subtler, #111827);
+    border-radius: var(--alias-radius-50, 4px);
     box-shadow: none;
-    color: @ND0;
     font-weight: 400;
     font-size: 12px;
     min-height: 28px;
+    color: var(--alias-colors-text-inverse-strong, #fff);
   }
 
   .ant-tooltip-arrow {
     &::before {
-      background-color: @BG10;
+      background: var(--alias-colors-bg-skeleton-inverse-subtler, #111827);
     }
   }
 
   .ant-tooltip-arrow-content {
-    background: @BG10;
+    background: var(--alias-colors-bg-skeleton-inverse-subtler, #111827);
   }
 }

package/dist/Tree/Tree.d.ts

@@ -80,7 +80,7 @@ interface DraggableConfig {
     icon?: React.ReactNode | false;
     nodeDraggable?: DraggableFn;
 }
-export interface TreeProps<T extends BasicDataNode = DataNode> extends Omit<RcTreeProps<T>, 'prefixCls' | 'showLine' | 'direction' | 'draggable' | 'icon' | 'switcherIcon'> {
+export interface TreeProps<T extends BasicDataNode = DataNode> extends Omit<RcTreeProps<T>, 'prefixCls' | 'showLine' | 'direction' | 'draggable' | 'icon' | 'switcherIcon' | 'filterTreeNode'> {
     showLine?: boolean | {
         showLeafIcon: boolean | TreeLeafIcon;
     };
@@ -116,7 +116,7 @@ export interface TreeProps<T extends BasicDataNode = DataNode> extends Omit<RcTr
     defaultSelectedKeys?: Key[];
     selectable?: boolean;
     /** 点击树节点触发 */
-    filterAldTreeNode?: (node: AldTreeNode) => boolean;
+    filterTreeNode?: (node: DataNode) => boolean;
     loadedKeys?: Key[];
     /** 设置节点可拖拽（IE>8） */
     draggable?: DraggableFn | boolean | DraggableConfig;
@@ -131,6 +131,7 @@ export interface TreeProps<T extends BasicDataNode = DataNode> extends Omit<RcTr
     titleRender?: (node: T) => React.ReactNode;
     showTabLeader?: boolean;
     handlerRender?: (node: T) => React.ReactNode;
+    highlightKeywords?: string;
 }
 declare const Tree: React.ForwardRefExoticComponent<TreeProps<DataNode> & React.RefAttributes<RcTree<DataNode>>>;
 export default Tree;

package/dist/Tree/Tree.js

@@ -1,21 +1,29 @@
+var _excluded = ["className", "showIcon", "showLine", "blockNode", "children", "checkable", "selectable", "draggable", "titleRender", "showTabLeader", "handlerRender", "filterTreeNode", "treeData", "highlightKeywords", "motion"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import classNames from 'classnames';
+import { produce } from 'immer';
 import { noop } from 'lodash';
 import RcTree from 'rc-tree';
 import * as React from 'react';
 import { ConfigContext } from "../ConfigProvider";
-import { ChevronDownLine, DragLine } from "../Icon";
+import HighlightText from "../HighlightText";
+import { ArrowRightLightLine, DragLine } from "../Icon";
 import collapseMotion from "../_utils/motion";
 import dropIndicatorRender from "./utils/dropIndicator";
 import renderSwitcherIcon from "./utils/iconUtil";
-var TREE_SWITCH_LARGE_ICON_SIZE = 20;
 var TREE_SWITCH_CION_SIZE = 16;
+var NODE_DISABLE_CLASS_NAME = 'ald-tree-node-disabled';
 
 // [Legacy] Compatible for v3
 
@@ -42,17 +50,21 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     showTabLeader = props.showTabLeader,
     _props$handlerRender = props.handlerRender,
     handlerRender = _props$handlerRender === void 0 ? noop : _props$handlerRender,
+    filterTreeNode = props.filterTreeNode,
+    treeData = props.treeData,
+    highlightKeywords = props.highlightKeywords,
     _props$motion = props.motion,
     motion = _props$motion === void 0 ? _objectSpread(_objectSpread({}, collapseMotion), {}, {
       motionAppear: false
-    }) : _props$motion;
+    }) : _props$motion,
+    rest = _objectWithoutProperties(props, _excluded);
   var prefixCls = getPrefixCls('tree', 'ald-tree');
   var customTitleRender = React.useCallback(function (node) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, titleRender ? titleRender(node) : node.title, showTabLeader && /*#__PURE__*/React.createElement("div", {
       className: "ald-tree-tab-leader"
     }), handlerRender && handlerRender(node));
   }, [titleRender, showTabLeader, handlerRender]);
-  var newProps = _objectSpread(_objectSpread({}, props), {}, {
+  var newProps = _objectSpread(_objectSpread({}, rest), {}, {
     checkable: checkable,
     selectable: selectable,
     showIcon: showIcon,
@@ -95,7 +107,7 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
       keyEntities = nodeProps.context.keyEntities,
       isLeaf = nodeProps.isLeaf;
     var level = ((_keyEntities = keyEntities[eventKey]) === null || _keyEntities === void 0 ? void 0 : _keyEntities.level) || 0;
-    var iconSize = size === 'small' ? TREE_SWITCH_CION_SIZE : TREE_SWITCH_LARGE_ICON_SIZE;
+    var iconSize = TREE_SWITCH_CION_SIZE;
     var indentWidth = isLeaf ? iconSize : 0;
     indentWidth += level * (iconSize / 2);
     return /*#__PURE__*/React.createElement("span", {
@@ -105,13 +117,71 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     });
   };
+  var newTreeData = React.useMemo(function () {
+    if (!filterTreeNode || !treeData) return treeData;
+    var shouldNodeDisabled = function shouldNodeDisabled(node) {
+      // 初始化一个标志来表示是否需要为当前节点添加className
+      var shouldAddDisabled = true;
+      if (filterTreeNode(node)) {
+        shouldAddDisabled = false;
+      }
+      if (node.children) {
+        // 遍历当前节点的子节点，只要有一个子节点不disable，则该不需要添加className
+        var allChildrenShouldAddDisabled = node.children.reduce(function (pre, child) {
+          return shouldNodeDisabled(child) && pre;
+        }, shouldAddDisabled);
+        shouldAddDisabled = allChildrenShouldAddDisabled;
+      }
+
+      // 如果shouldAddDisabled为true，就为当前节点添加className
+      if (shouldAddDisabled) {
+        var _node$className;
+        node.className = (_node$className = node.className) !== null && _node$className !== void 0 && _node$className.includes(NODE_DISABLE_CLASS_NAME) ? node.className : classNames(node.className, NODE_DISABLE_CLASS_NAME);
+      } else {
+        var _node$className2;
+        var reg = /ald-tree-node-disabled/g;
+        (_node$className2 = node.className) === null || _node$className2 === void 0 ? void 0 : _node$className2.replace(reg, ' ');
+      }
+      if (highlightKeywords && typeof node.title !== 'function') {
+        node.title = /*#__PURE__*/React.createElement(HighlightText, {
+          keyword: highlightKeywords
+        }, node.title);
+      }
+      return shouldAddDisabled;
+    };
+    var newTreeData = produce(treeData, function (draft) {
+      var _iterator = _createForOfIteratorHelper(draft),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var rootNode = _step.value;
+          shouldNodeDisabled(rootNode);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    });
+    return newTreeData;
+  }, [filterTreeNode, treeData, highlightKeywords]);
+  var noChildren = React.useMemo(function () {
+    if (newTreeData !== null && newTreeData !== void 0 && newTreeData.length) {
+      return newTreeData.every(function (node) {
+        var _node$children;
+        return !((_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length);
+      });
+    }
+    return true;
+  }, [newTreeData]);
   return /*#__PURE__*/React.createElement(RcTree, _extends({
     itemHeight: 20,
     ref: ref,
     virtual: virtual
   }, newProps, {
     prefixCls: prefixCls,
-    className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-icon-hide"), !showIcon), _defineProperty(_classNames, "".concat(prefixCls, "-block-node"), blockNode), _defineProperty(_classNames, "".concat(prefixCls, "-unselectable"), !selectable), _defineProperty(_classNames, "".concat(prefixCls, "-large"), size === 'large'), _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _defineProperty(_classNames, 'ald-draggable-tree', draggable), _classNames), className),
+    treeData: newTreeData,
+    className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-icon-hide"), !showIcon), _defineProperty(_classNames, "".concat(prefixCls, "-block-node"), blockNode), _defineProperty(_classNames, "".concat(prefixCls, "-unselectable"), !selectable), _defineProperty(_classNames, "".concat(prefixCls, "-large"), size === 'large'), _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _defineProperty(_classNames, 'ald-draggable-tree', draggable), _defineProperty(_classNames, "".concat(prefixCls, "-no-children"), noChildren), _classNames), className),
     direction: direction,
     checkable: checkable ? /*#__PURE__*/React.createElement("span", {
       className: "".concat(prefixCls, "-checkbox-inner")
@@ -120,10 +190,10 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     // @ts-ignore
     ,
     switcherIcon: function switcherIcon(nodeProps) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, renderIndent(nodeProps), renderSwitcherIcon(prefixCls, /*#__PURE__*/React.createElement(ChevronDownLine, {
-        size: size === 'small' ? TREE_SWITCH_CION_SIZE : TREE_SWITCH_LARGE_ICON_SIZE,
-        color: '#a2a2a2'
-      }, "\u5C55\u5F00"), showLine, nodeProps, size === 'small' ? TREE_SWITCH_CION_SIZE : TREE_SWITCH_LARGE_ICON_SIZE));
+      return /*#__PURE__*/React.createElement(React.Fragment, null, renderIndent(nodeProps), renderSwitcherIcon(prefixCls, /*#__PURE__*/React.createElement(ArrowRightLightLine, {
+        size: TREE_SWITCH_CION_SIZE,
+        color: '#9CA3AF'
+      }, "\u5C55\u5F00"), showLine, nodeProps, TREE_SWITCH_CION_SIZE));
     },
     draggable: draggableConfig
   }), children);

package/dist/Tree/demo/basic/index.js

@@ -4,6 +4,7 @@ export default (function () {
   return /*#__PURE__*/React.createElement(App, null, /*#__PURE__*/React.createElement(Tree, {
     size: "large",
     showIcon: true,
+    checkable: true,
     icon: 'icon',
     treeData: [{
       title: 'Parent 1',
@@ -33,6 +34,9 @@ export default (function () {
           disabled: true
         }]
       }]
+    }, {
+      title: 'Parent 2',
+      key: '1-1'
     }]
   }));
 });

package/dist/Tree/demo/filter/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/Tree/demo/filter/index.js

@@ -0,0 +1,64 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { App, Input, Tree } from "../../..";
+import React from 'react';
+export default (function () {
+  var _React$useState = React.useState(''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    filterKey = _React$useState2[0],
+    setFilterKey = _React$useState2[1];
+  var _React$useState3 = React.useState([]),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    expandedKeys = _React$useState4[0],
+    setExpandedKeys = _React$useState4[1];
+  return /*#__PURE__*/React.createElement(App, null, /*#__PURE__*/React.createElement(Input, {
+    onChange: function onChange(v) {
+      setFilterKey(v.target.value);
+    }
+  }), /*#__PURE__*/React.createElement(Tree, {
+    size: "large",
+    showIcon: true,
+    icon: 'icon',
+    filterTreeNode: function filterTreeNode(node) {
+      var title = node.title;
+      if (typeof title === 'string') {
+        return title.includes(filterKey);
+      }
+      return false;
+    },
+    highlightKeywords: filterKey,
+    expandedKeys: expandedKeys,
+    onExpand: function onExpand(keys) {
+      setExpandedKeys(keys);
+    },
+    treeData: [{
+      title: 'Parent 1',
+      key: '0-0',
+      children: [{
+        title: 'parent 1-0',
+        key: '0-0-0',
+        children: [{
+          title: 'leaf',
+          key: '0-0-0-0',
+          isLeaf: true
+        }, {
+          title: 'leaf',
+          key: '0-0-0-1',
+          isLeaf: true
+        }]
+      }, {
+        title: 'parent 1-1',
+        key: '0-0-1',
+        children: [{
+          title: 'ssss',
+          key: '0-0-1-0',
+          disabled: true
+        }]
+      }]
+    }]
+  }));
+});