@hi-ui/tree-select 4.3.1 → 5.0.0-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,79 @@
 # @hi-ui/tree-select
 
+## 5.0.0-alpha.0
+
+### Major Changes
+
+- 1b05b44a4: feat: 组件的 package.json 中的 exports 统一加上 types 配置 (5.0)
+
+### Minor Changes
+
+- 77ed66eac: <br>
+  - feat(picker): 下拉选择类组件增加 xs 尺寸 (5.0)
+  - feat(input): 输入框组件增加 xs 尺寸 (5.0)
+- 632dbda3a: feat: 下拉选择组件增加 showIndicator 参数 & 修改 appearance 中的 unset 样式 (5.0)
+- 1b51c1bbe: feat: 下拉选择类组件 appearance 参数增加 contained 类型 (5.0)
+
+### Patch Changes
+
+- eb5506b8d: style(picker): 移除 picker 组件中的 \_\_text 样式定义 (5.0)
+- c3ec579cd: fix: 修改组件问题 (5.0)
+- cfaf8c48d: perf: 对下拉选择类组件的 customRender 的内容增加 memoization 以优化性能 (5.0)
+- 61d132802: build: 将 package.json 中 exports 配置中的 types 配置放在最上面 (5.0)
+- 9f2ee08cf: <br>
+  - style(tag-input): 间距调整 (5.0)
+  - style(select): 选择类组件选项圆角改为 4px (5.0)
+  - style(picker): 搜索框样式调整 (5.0)
+- c125e4c48: fix: 修复 UI 问题 (5.0)
+- Updated dependencies [abebb5eed]
+- Updated dependencies [85bb84874]
+- Updated dependencies [7bda04e64]
+- Updated dependencies [5de7a848b]
+- Updated dependencies [77ed66eac]
+- Updated dependencies [ddd2acc79]
+- Updated dependencies [5de7a848b]
+- Updated dependencies [1b05b44a4]
+- Updated dependencies [0cd15438e]
+- Updated dependencies [eb69f0baa]
+- Updated dependencies [a01771e8d]
+- Updated dependencies [67960d871]
+- Updated dependencies [de7f92b26]
+- Updated dependencies [8116f0304]
+- Updated dependencies [85bb84874]
+- Updated dependencies [f5dd358d7]
+- Updated dependencies [77ed66eac]
+- Updated dependencies [632dbda3a]
+- Updated dependencies [2c7c65a5a]
+- Updated dependencies [36bb992d3]
+- Updated dependencies [1b51c1bbe]
+- Updated dependencies [61d132802]
+- Updated dependencies [6ebf40f96]
+- Updated dependencies [9f2ee08cf]
+- Updated dependencies [6eac4b78b]
+- Updated dependencies [85bb84874]
+- Updated dependencies [bcd3d08dd]
+- Updated dependencies [4fb586f6f]
+- Updated dependencies [c125e4c48]
+- Updated dependencies [b7ad460d8]
+- Updated dependencies [df25ec39b]
+  - @hi-ui/picker@5.0.0-alpha.0
+  - @hi-ui/tree@5.0.0-alpha.0
+  - @hi-ui/input@5.0.0-alpha.0
+  - @hi-ui/core@5.0.0-alpha.0
+  - @hi-ui/use-data-source@5.0.0-alpha.0
+  - @hi-ui/use-search-mode@5.0.0-alpha.0
+  - @hi-ui/use-toggle@5.0.0-alpha.0
+  - @hi-ui/use-uncontrolled-state@5.0.0-alpha.0
+  - @hi-ui/icons@5.0.0-alpha.0
+  - @hi-ui/highlighter@5.0.0-alpha.0
+  - @hi-ui/popper@5.0.0-alpha.0
+  - @hi-ui/array-utils@5.0.0-alpha.0
+  - @hi-ui/classname@5.0.0-alpha.0
+  - @hi-ui/env@5.0.0-alpha.0
+  - @hi-ui/func-utils@5.0.0-alpha.0
+  - @hi-ui/tree-utils@5.0.0-alpha.0
+  - @hi-ui/type-assertion@5.0.0-alpha.0
+
 ## 4.3.1
 
 ### Patch Changes

package/lib/cjs/TreeSelect.js

@@ -89,7 +89,10 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     prefix = _a.prefix,
     suffix = _a.suffix,
     customRender = _a.customRender,
-    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "dataSource", "disabled", "visible", "onOpen", "onClose", "fieldNames", "defaultExpandAll", "expandedIds", "defaultExpandedIds", "onExpand", "defaultValue", "value", "onChange", "searchable", "searchMode", "onLoadChildren", "render", "filterOption", "keyword", "onSearch", "clearable", "onClear", "invalid", "displayRender", "placeholder", "appearance", "virtual", "itemHeight", "height", "size", "prefix", "suffix", "customRender"]);
+    label = _a.label,
+    _a$showIndicator = _a.showIndicator,
+    showIndicator = _a$showIndicator === void 0 ? true : _a$showIndicator,
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "dataSource", "disabled", "visible", "onOpen", "onClose", "fieldNames", "defaultExpandAll", "expandedIds", "defaultExpandedIds", "onExpand", "defaultValue", "value", "onChange", "searchable", "searchMode", "onLoadChildren", "render", "filterOption", "keyword", "onSearch", "clearable", "onClear", "invalid", "displayRender", "placeholder", "appearance", "virtual", "itemHeight", "height", "size", "prefix", "suffix", "customRender", "label", "showIndicator"]);
   var i18n = core.useLocaleContext();
   var pickerInnerRef = React.useRef(null);
   var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('treeSelect.placeholder') : placeholderProp;
@@ -196,9 +199,9 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }
     // 本地搜索执行默认高亮规则
     var highlight = !!searchValue && (searchMode === 'highlight' || searchMode === 'filter');
-    var ret = highlight ? /*#__PURE__*/React__default["default"].createElement(highlighter.Highlighter, {
-      keyword: searchValue
-    }, node.title) : true;
+    var ret = highlight ? ( /*#__PURE__*/React__default["default"].createElement(highlighter.Highlighter, {
+      keyword: new RegExp(searchValue, 'ig')
+    }, node.title)) : true;
     return ret;
   }, [titleRender, searchValue, searchMode]);
   var shouldUseSearch = !!searchValue && !hasError;
@@ -222,6 +225,9 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }
     return flattedData;
   }, [selectedItem, flattedData]);
+  var customRenderContent = React.useMemo(function () {
+    return customRender ? typeof customRender === 'function' ? customRender(selectedItem) : customRender : null;
+  }, [customRender, selectedItem]);
   var cls = classname.cx(prefixCls, className);
   React.useEffect(function () {
     var _a;
@@ -246,9 +252,10 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     keyword: keywordProp,
     onSearch: funcUtils.callAllFuncs(onSearchProp, onSearch),
     loading: rest.loading !== undefined ? rest.loading : loading,
-    trigger: customRender ? typeof customRender === 'function' ? customRender(selectedItem) : customRender : ( /*#__PURE__*/React__default["default"].createElement(input.MockInput
-    // disabled={disabled}
-    , {
+    trigger: customRender ? customRenderContent : ( /*#__PURE__*/React__default["default"].createElement(input.MockInput, {
+      style: {
+        maxWidth: appearance === 'contained' ? '360px' : undefined
+      },
       // disabled={disabled}
       size: size,
       clearable: clearable,
@@ -256,6 +263,7 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       placeholder: placeholder,
       displayRender: displayRenderProp,
       prefix: prefix,
+      showIndicator: showIndicator,
       suffix: [menuVisible ? /*#__PURE__*/React__default["default"].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null), suffix],
       focused: menuVisible,
       value: value,
@@ -263,7 +271,8 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       data: mergedData,
       // @ts-ignore
       invalid: invalid,
-      appearance: appearance
+      appearance: appearance,
+      label: label
     }))
   }), typeAssertion.isArrayNonEmpty(treeProps.data) ? ( /*#__PURE__*/React__default["default"].createElement(tree.Tree, Object.assign({
     size: 'md',

package/lib/cjs/styles/index.scss.js

@@ -12,7 +12,7 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-var css_248z = "";
+var css_248z = ".hi-v5-tree-select__tree .hi-v5-tree-node__wrap {border-radius: var(--hi-v5-border-radius-md, 4px);}";
 var __styleInject__ = require('@hi-ui/style-inject')["default"];
 __styleInject__(css_248z);
 exports["default"] = css_248z;

package/lib/esm/TreeSelect.js

@@ -77,7 +77,10 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     prefix = _a.prefix,
     suffix = _a.suffix,
     customRender = _a.customRender,
-    rest = __rest(_a, ["prefixCls", "role", "className", "data", "dataSource", "disabled", "visible", "onOpen", "onClose", "fieldNames", "defaultExpandAll", "expandedIds", "defaultExpandedIds", "onExpand", "defaultValue", "value", "onChange", "searchable", "searchMode", "onLoadChildren", "render", "filterOption", "keyword", "onSearch", "clearable", "onClear", "invalid", "displayRender", "placeholder", "appearance", "virtual", "itemHeight", "height", "size", "prefix", "suffix", "customRender"]);
+    label = _a.label,
+    _a$showIndicator = _a.showIndicator,
+    showIndicator = _a$showIndicator === void 0 ? true : _a$showIndicator,
+    rest = __rest(_a, ["prefixCls", "role", "className", "data", "dataSource", "disabled", "visible", "onOpen", "onClose", "fieldNames", "defaultExpandAll", "expandedIds", "defaultExpandedIds", "onExpand", "defaultValue", "value", "onChange", "searchable", "searchMode", "onLoadChildren", "render", "filterOption", "keyword", "onSearch", "clearable", "onClear", "invalid", "displayRender", "placeholder", "appearance", "virtual", "itemHeight", "height", "size", "prefix", "suffix", "customRender", "label", "showIndicator"]);
   var i18n = useLocaleContext();
   var pickerInnerRef = useRef(null);
   var placeholder = isUndef(placeholderProp) ? i18n.get('treeSelect.placeholder') : placeholderProp;
@@ -184,9 +187,9 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
     // 本地搜索执行默认高亮规则
     var highlight = !!searchValue && (searchMode === 'highlight' || searchMode === 'filter');
-    var ret = highlight ? /*#__PURE__*/React.createElement(Highlighter, {
-      keyword: searchValue
-    }, node.title) : true;
+    var ret = highlight ? ( /*#__PURE__*/React.createElement(Highlighter, {
+      keyword: new RegExp(searchValue, 'ig')
+    }, node.title)) : true;
     return ret;
   }, [titleRender, searchValue, searchMode]);
   var shouldUseSearch = !!searchValue && !hasError;
@@ -210,6 +213,9 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
     return flattedData;
   }, [selectedItem, flattedData]);
+  var customRenderContent = useMemo(function () {
+    return customRender ? typeof customRender === 'function' ? customRender(selectedItem) : customRender : null;
+  }, [customRender, selectedItem]);
   var cls = cx(prefixCls, className);
   useEffect(function () {
     var _a;
@@ -234,9 +240,10 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     keyword: keywordProp,
     onSearch: callAllFuncs(onSearchProp, onSearch),
     loading: rest.loading !== undefined ? rest.loading : loading,
-    trigger: customRender ? typeof customRender === 'function' ? customRender(selectedItem) : customRender : ( /*#__PURE__*/React.createElement(MockInput
-    // disabled={disabled}
-    , {
+    trigger: customRender ? customRenderContent : ( /*#__PURE__*/React.createElement(MockInput, {
+      style: {
+        maxWidth: appearance === 'contained' ? '360px' : undefined
+      },
       // disabled={disabled}
       size: size,
       clearable: clearable,
@@ -244,6 +251,7 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       placeholder: placeholder,
       displayRender: displayRenderProp,
       prefix: prefix,
+      showIndicator: showIndicator,
       suffix: [menuVisible ? /*#__PURE__*/React.createElement(UpOutlined, null) : /*#__PURE__*/React.createElement(DownOutlined, null), suffix],
       focused: menuVisible,
       value: value,
@@ -251,7 +259,8 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       data: mergedData,
       // @ts-ignore
       invalid: invalid,
-      appearance: appearance
+      appearance: appearance,
+      label: label
     }))
   }), isArrayNonEmpty(treeProps.data) ? ( /*#__PURE__*/React.createElement(Tree, Object.assign({
     size: 'md',

package/lib/esm/styles/index.scss.js

@@ -8,6 +8,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import __styleInject__ from '@hi-ui/style-inject';
-var css_248z = "";
+var css_248z = ".hi-v5-tree-select__tree .hi-v5-tree-node__wrap {border-radius: var(--hi-v5-border-radius-md, 4px);}";
 __styleInject__(css_248z);
 export { css_248z as default };

package/lib/types/TreeSelect.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { TreeSelectDataItem } from './types';
+import { TreeSelectDataItem, TreeSelectAppearanceEnum } from './types';
 import { TreeNodeEventData } from '@hi-ui/tree';
 import { PickerProps } from '@hi-ui/picker';
-import { HiBaseAppearanceEnum, HiBaseSizeEnum } from '@hi-ui/core';
+import { HiBaseSizeEnum } from '@hi-ui/core';
 import { UseDataSource } from '@hi-ui/use-data-source';
 /**
  * 树形选择器
@@ -109,7 +109,11 @@ export interface TreeSelectProps extends Omit<PickerProps, 'data' | 'onChange' |
     /**
      * 设置展现形式
      */
-    appearance?: HiBaseAppearanceEnum;
+    appearance?: TreeSelectAppearanceEnum;
+    /**
+     * 设置输入框 label 内容，仅在 appearance 为 contained 时生效
+     */
+    label?: React.ReactNode;
     /**
      * 设置虚拟滚动容器的可视高度。暂不对外暴露
      * @private
@@ -140,4 +144,8 @@ export interface TreeSelectProps extends Omit<PickerProps, 'data' | 'onChange' |
      * 自定义触发器
      */
     customRender?: React.ReactNode | ((selectedItem: TreeSelectDataItem | null) => React.ReactNode);
+    /**
+     * 是否展示箭头
+     */
+    showIndicator?: boolean;
 }

package/lib/types/types.d.ts

@@ -1,4 +1,4 @@
-import { HiBaseDataItem } from '@hi-ui/core';
+import { HiBaseAppearanceEnum, HiBaseDataItem } from '@hi-ui/core';
 import React from 'react';
 export interface TreeSelectDataItem extends HiBaseDataItem {
     /**
@@ -48,3 +48,4 @@ export interface TreeSelectDataSource<T = any> {
      */
     transformResponse?: (response: object) => T;
 }
+export declare type TreeSelectAppearanceEnum = HiBaseAppearanceEnum | 'contained' | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/tree-select",
-  "version": "4.3.1",
+  "version": "5.0.0-alpha.0",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -19,6 +19,7 @@
   "typings": "lib/types/index.d.ts",
   "exports": {
     ".": {
+      "types": "./lib/types/index.d.ts",
       "require": "./lib/cjs/index.js",
       "default": "./lib/esm/index.js"
     }
@@ -43,31 +44,31 @@
     "url": "https://github.com/XiaoMi/hiui/issues"
   },
   "dependencies": {
-    "@hi-ui/array-utils": "^4.0.5",
-    "@hi-ui/classname": "^4.0.5",
-    "@hi-ui/env": "^4.0.5",
-    "@hi-ui/func-utils": "^4.0.4",
-    "@hi-ui/highlighter": "^4.1.2",
-    "@hi-ui/icons": "^4.0.19",
-    "@hi-ui/input": "^4.4.0",
-    "@hi-ui/picker": "^4.1.8",
-    "@hi-ui/popper": "^4.1.7",
-    "@hi-ui/tree": "^4.6.1",
-    "@hi-ui/tree-utils": "^4.1.4",
-    "@hi-ui/type-assertion": "^4.0.4",
-    "@hi-ui/use-data-source": "^4.0.4",
-    "@hi-ui/use-search-mode": "^4.1.4",
-    "@hi-ui/use-toggle": "^4.0.4",
-    "@hi-ui/use-uncontrolled-state": "^4.0.4"
+    "@hi-ui/array-utils": "^5.0.0-alpha.0",
+    "@hi-ui/classname": "^5.0.0-alpha.0",
+    "@hi-ui/env": "^5.0.0-alpha.0",
+    "@hi-ui/func-utils": "^5.0.0-alpha.0",
+    "@hi-ui/highlighter": "^5.0.0-alpha.0",
+    "@hi-ui/icons": "^5.0.0-alpha.0",
+    "@hi-ui/input": "^5.0.0-alpha.0",
+    "@hi-ui/picker": "^5.0.0-alpha.0",
+    "@hi-ui/popper": "^5.0.0-alpha.0",
+    "@hi-ui/tree": "^5.0.0-alpha.0",
+    "@hi-ui/tree-utils": "^5.0.0-alpha.0",
+    "@hi-ui/type-assertion": "^5.0.0-alpha.0",
+    "@hi-ui/use-data-source": "^5.0.0-alpha.0",
+    "@hi-ui/use-search-mode": "^5.0.0-alpha.0",
+    "@hi-ui/use-toggle": "^5.0.0-alpha.0",
+    "@hi-ui/use-uncontrolled-state": "^5.0.0-alpha.0"
   },
   "peerDependencies": {
-    "@hi-ui/core": ">=4.0.8",
+    "@hi-ui/core": ">=5.0.0-alpha.0",
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/core": "^4.0.8",
-    "@hi-ui/core-css": "^4.1.5",
+    "@hi-ui/core": "^5.0.0-alpha.0",
+    "@hi-ui/core-css": "^5.0.0-alpha.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   }