npm - @hi-ui/check-select - Versions diffs - 4.6.3 → 5.0.0-alpha.0 - Mend

@hi-ui/check-select 4.6.3 → 5.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/CHANGELOG.md +102 -0
package/lib/cjs/CheckSelect.js +55 -28
package/lib/cjs/styles/index.scss.js +1 -1
package/lib/esm/CheckSelect.js +57 -30
package/lib/esm/styles/index.scss.js +1 -1
package/lib/types/CheckSelect.d.ts +22 -2
package/lib/types/types.d.ts +1 -1
package/package.json +29 -27

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,107 @@
 # @hi-ui/check-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)
+- 6eac4b78b: feat: 输入框和选择器组件增加 borderless 形态 (5.0)
+- df25ec39b: feat(select): 增加 creatableInSearch、createTitle 参数，支持在搜索无结果时可创建选项 (5.0)
+### Patch Changes
+- eb5506b8d: style(picker): 移除 picker 组件中的 \_\_text 样式定义 (5.0)
+- 958805d8b: fix(tag-input): 修复 contained 模式下 displayRender 设置无效问题 (5.0)
+- c3ec579cd: fix: 修改组件问题 (5.0)
+- 8116f0304: fix: 修改 UI 问题 (5.0)
+- cfaf8c48d: perf: 对下拉选择类组件的 customRender 的内容增加 memoization 以优化性能 (5.0)
+- 61d132802: build: 将 package.json 中 exports 配置中的 types 配置放在最上面 (5.0)
+- e39572f8f: style(tag-input): 增加 flex-wrap 属性以优化标签换行展示 (5.0)
+- 9f2ee08cf: <br>
+  - style(tag-input): 间距调整 (5.0)
+  - style(select): 选择类组件选项圆角改为 4px (5.0)
+  - style(picker): 搜索框样式调整 (5.0)
+- 85bb84874: style: 统一调整选择类组件 hover 时的背景色 (5.0)
+- c125e4c48: fix: 修复 UI 问题 (5.0)
+- Updated dependencies [abebb5eed]
+- Updated dependencies [7bda04e64]
+- Updated dependencies [7ac9bc99a]
+- Updated dependencies [77ed66eac]
+- Updated dependencies [ddd2acc79]
+- Updated dependencies [5de7a848b]
+- Updated dependencies [1b05b44a4]
+- Updated dependencies [0cd15438e]
+- Updated dependencies [958805d8b]
+- Updated dependencies [eb69f0baa]
+- Updated dependencies [a01771e8d]
+- Updated dependencies [67960d871]
+- Updated dependencies [cee645726]
+- Updated dependencies [de7f92b26]
+- Updated dependencies [b35327262]
+- Updated dependencies [8116f0304]
+- Updated dependencies [85bb84874]
+- Updated dependencies [77ed66eac]
+- Updated dependencies [632dbda3a]
+- Updated dependencies [2c7c65a5a]
+- Updated dependencies [36bb992d3]
+- Updated dependencies [1b51c1bbe]
+- Updated dependencies [2e0eca2d3]
+- Updated dependencies [61d132802]
+- Updated dependencies [e39572f8f]
+- Updated dependencies [6ebf40f96]
+- Updated dependencies [9f2ee08cf]
+- Updated dependencies [6eac4b78b]
+- 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/input@5.0.0-alpha.0
+  - @hi-ui/tag-input@5.0.0-alpha.0
+  - @hi-ui/core@5.0.0-alpha.0
+  - @hi-ui/use-check@5.0.0-alpha.0
+  - @hi-ui/use-children@5.0.0-alpha.0
+  - @hi-ui/use-data-source@5.0.0-alpha.0
+  - @hi-ui/use-id@5.0.0-alpha.0
+  - @hi-ui/use-latest@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/checkbox@5.0.0-alpha.0
+  - @hi-ui/highlighter@5.0.0-alpha.0
+  - @hi-ui/popper@5.0.0-alpha.0
+  - @hi-ui/virtual-list@5.0.0-alpha.0
+  - @hi-ui/array-utils@5.0.0-alpha.0
+  - @hi-ui/classname@5.0.0-alpha.0
+  - @hi-ui/dom-utils@5.0.0-alpha.0
+  - @hi-ui/env@5.0.0-alpha.0
+  - @hi-ui/func-utils@5.0.0-alpha.0
+  - @hi-ui/times@5.0.0-alpha.0
+  - @hi-ui/tree-utils@5.0.0-alpha.0
+  - @hi-ui/type-assertion@5.0.0-alpha.0
+## 4.6.4
+### Patch Changes
+- [#3196](https://github.com/XiaoMi/hiui/pull/3196) [`80a909d2d`](https://github.com/XiaoMi/hiui/commit/80a909d2dae99d68d71f2ec6f4b210080d032ec0) Thanks [@KEH3](https://github.com/KEH3)! - fix(popper): ref 中增加更新位置方法解决上游组件弹窗被遮挡问题 (#3195)
+- [#3208](https://github.com/XiaoMi/hiui/pull/3208) [`36086f4c8`](https://github.com/XiaoMi/hiui/commit/36086f4c8ab11728dd4d0bb34b4d9301c6068452) Thanks [@zyprepare](https://github.com/zyprepare)! - fix(select): 修复多级分组下分组标题左间距不对问题 (#3207)
+- Updated dependencies [[`80a909d2d`](https://github.com/XiaoMi/hiui/commit/80a909d2dae99d68d71f2ec6f4b210080d032ec0)]:
+  - @hi-ui/picker@4.1.8
+  - @hi-ui/popper@4.1.7
 ## 4.6.3
 ### Patch Changes

package/lib/cjs/CheckSelect.js CHANGED Viewed

@@ -36,6 +36,7 @@ var useSearchMode = require('@hi-ui/use-search-mode');
 require('@hi-ui/use-children');
 var useFlattenData = require('./hooks/use-flatten-data.js');
 var index = require('./utils/index.js');
+var useId = require('@hi-ui/use-id');
 function _interopDefaultCompat(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -85,6 +86,8 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     titleRender = _a.render,
     renderExtraFooter = _a.renderExtraFooter,
     onSearchProp = _a.onSearch,
+    onItemCreate = _a.onItemCreate,
+    creatableInSearch = _a.creatableInSearch,
     _a$fieldNames = _a.fieldNames,
     fieldNames = _a$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _a$fieldNames,
     _a$checkedOnEntered = _a.checkedOnEntered,
@@ -97,10 +100,14 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     suffix = _a.suffix,
     onKeyDownProp = _a.onKeyDown,
     keywordProp = _a.keyword,
-    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "visible", "onOpen", "onClose", "onClear", "appearance", "invalid", "dataSource", "searchOnInit", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "fieldNames", "checkedOnEntered", "customRender", "tagInputProps", "size", "prefix", "suffix", "onKeyDown", "keyword"]);
+    label = _a.label,
+    _a$showIndicator = _a.showIndicator,
+    showIndicator = _a$showIndicator === void 0 ? true : _a$showIndicator,
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "visible", "onOpen", "onClose", "onClear", "appearance", "invalid", "dataSource", "searchOnInit", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "onItemCreate", "creatableInSearch", "fieldNames", "checkedOnEntered", "customRender", "tagInputProps", "size", "prefix", "suffix", "onKeyDown", "keyword", "label", "showIndicator"]);
   var i18n = core.useLocaleContext();
   var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('checkSelect.placeholder') : placeholderProp;
   // ************************** Picker ************************* //
+  var pickerInnerRef = React.useRef(null);
   var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
       visible: visible,
       disabled: disabled,
@@ -173,7 +180,7 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       checked: node.checked,
       disabled: node.disabled
     }, /*#__PURE__*/React__default["default"].createElement(highlighter.Highlighter, {
-      keyword: searchValue
+      keyword: new RegExp(searchValue, 'ig')
     }, node.title))) : true;
     return ret;
   }, [titleRender, searchValue, searchMode]);
@@ -259,12 +266,29 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var handleKeyDown = useLatest.useLatestCallback(function (evt) {
     var key = evt.key;
     if (key === 'Enter' && checkedOnEntered) {
+      if (creatableInSearch && showData.length === 0) {
+        handleCreate(searchValue);
+        return;
+      }
       var focusedItem = showData[focusedIndex];
       if (focusedItem) {
         onSelect(focusedItem, !isCheckedId(focusedItem.id));
       }
     }
   });
+  var handleCreate = useLatest.useLatestCallback(function (keyword) {
+    var _a;
+    var id = keyword + "-" + useId.uuid();
+    var createdItem = {
+      id: id,
+      title: keyword
+    };
+    onSelect(createdItem, true);
+    onItemCreate === null || onItemCreate === void 0 ? void 0 : onItemCreate(createdItem);
+    // 创建后重置搜索和关闭弹窗
+    (_a = pickerInnerRef.current) === null || _a === void 0 ? void 0 : _a.resetSearch();
+    menuVisibleAction.off();
+  });
   // 更新 focused 索引
   React.useEffect(function () {
     setFocusedIndex(defaultIndex);
@@ -280,6 +304,9 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }
     return extra;
   };
+  var customRenderContent = React.useMemo(function () {
+    return customRender ? typeof customRender === 'function' ? customRender(mergedCheckedItems) : customRender : null;
+  }, [customRender, mergedCheckedItems]);
   var expandedViewRef = React.useRef('normal');
   var virtualListProps = {
     height: height,
@@ -292,16 +319,21 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var cls = classname.cx(prefixCls, className, prefixCls + "--" + (menuVisible ? 'open' : 'closed'));
   var listRef = React.useRef(null);
   React.useEffect(function () {
-    var _a;
-    // 每次打开或数据改变时触发一次滚动条显示
-    if (menuVisible && typeAssertion.isArrayNonEmpty(showData)) {
-      (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(undefined);
+    var _a, _b;
+    if (menuVisible) {
+      // 数据改变时更新弹窗显示位置，避免弹窗内容被遮挡
+      (_a = pickerInnerRef.current) === null || _a === void 0 ? void 0 : _a.update();
+      // 数据改变时触发一次滚动条显示
+      if (typeAssertion.isArrayNonEmpty(showData)) {
+        (_b = listRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo(undefined);
+      }
     }
   }, [menuVisible, showData]);
   return /*#__PURE__*/React__default["default"].createElement(context.CheckSelectProvider, {
     value: context$1
   }, /*#__PURE__*/React__default["default"].createElement(picker.Picker, Object.assign({
     ref: ref,
+    innerRef: pickerInnerRef,
     className: cls
   }, rootProps, {
     visible: menuVisible,
@@ -315,16 +347,24 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     onSearch: funcUtils.callAllFuncs(onSearchProp, onSearch),
     loading: rest.loading !== undefined ? rest.loading : loading,
     footer: renderDefaultFooter(),
-    trigger: customRender ? typeof customRender === 'function' ? customRender(mergedCheckedItems) : customRender : ( /*#__PURE__*/React__default["default"].createElement(tagInput.TagInputMock, Object.assign({}, tagInputProps, {
+    creatableInSearch: creatableInSearch,
+    onCreate: handleCreate,
+    trigger: customRender ? customRenderContent : ( /*#__PURE__*/React__default["default"].createElement(tagInput.TagInputMock, Object.assign({
+      style: {
+        maxWidth: appearance === 'contained' ? '360px' : undefined
+      }
+    }, tagInputProps, {
       size: size,
       clearable: clearable,
       placeholder: placeholder,
       // @ts-ignore
       displayRender: displayRender,
+      showIndicator: showIndicator,
       prefix: prefix,
       suffix: [menuVisible ? /*#__PURE__*/React__default["default"].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null), suffix],
       focused: menuVisible,
       appearance: appearance,
+      label: label,
       value: value,
       // @ts-ignore
       onChange: tryChangeValue,
@@ -378,7 +418,8 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }, virtualListProps), function (node, index) {
     /* 反向 map，搜索删选数据时会对数据进行处理 */
     return 'groupTitle' in node ? ( /*#__PURE__*/React__default["default"].createElement(CheckSelectOptionGroup, {
-      label: node.groupTitle
+      label: node.groupTitle,
+      depth: node.depth
     })) : ( /*#__PURE__*/React__default["default"].createElement(CheckSelectOption, {
       option: node,
       depth: node.depth,
@@ -404,7 +445,6 @@ var CheckSelectOption = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     option = _a$option === void 0 ? {} : _a$option,
     onClick = _a.onClick,
     titleRender = _a.titleRender,
-    depth = _a.depth,
     focused = _a.focused,
     rest = tslib.__rest(_a, ["prefixCls", "className", "children", "option", "onClick", "titleRender", "depth", "focused"]);
   var _useCheckSelectContex = context.useCheckSelectContext(),
@@ -438,7 +478,7 @@ var CheckSelectOption = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     className: cls
   }, rest, {
     onClick: handleOptionCheck
-  }), renderIndent(prefixCls, depth), renderTitle(eventNodeRef.current, titleRender));
+  }), renderTitle(eventNodeRef.current, titleRender));
 });
 // @ts-ignore
 CheckSelectOption.HiName = 'CheckSelectOption';
@@ -451,33 +491,20 @@ var CheckSelectOptionGroup = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     prefixCls = _a$prefixCls3 === void 0 ? optionGroupPrefix : _a$prefixCls3,
     className = _a.className,
     label = _a.label,
-    rest = tslib.__rest(_a, ["prefixCls", "className", "label"]);
+    rest = tslib.__rest(_a, ["prefixCls", "className", "label", "depth"]);
   var cls = classname.cx(prefixCls, className);
-  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: prefixCls + "__divider"
+  }), /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     ref: ref,
     className: cls
-  }, rest), /*#__PURE__*/React__default["default"].createElement("span", null, label));
+  }, rest), /*#__PURE__*/React__default["default"].createElement("span", null, label)));
 });
 // @ts-ignore
 CheckSelectOptionGroup.HiName = 'CheckSelectOptionGroup';
 if (env.__DEV__) {
   CheckSelectOptionGroup.displayName = 'CheckSelectOptionGroup';
 }
-/**
- * 渲染空白占位
- */
-var renderIndent = function renderIndent(prefixCls, depth) {
-  return arrayUtils.times(depth, function (index) {
-    return /*#__PURE__*/React__default["default"].createElement("span", {
-      key: index,
-      style: {
-        alignSelf: 'stretch'
-      }
-    }, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: classname.cx(prefixCls + "__indent")
-    }));
-  });
-};
 exports.CheckSelect = CheckSelect;
 exports.CheckSelectOption = CheckSelectOption;
 exports.CheckSelectOptionGroup = CheckSelectOptionGroup;

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

@@ -12,7 +12,7 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-var css_248z = ".hi-v4-check-select-option {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;border-radius: var(--hi-v4-border-radius-md, 4px);cursor: pointer;font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-check-select-option__indent {display: inline-block;width: 16px;height: 100%;}.hi-v4-check-select-option__title {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-3, 6px);font-size: inherit;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;text-size-adjust: none;font-weight: inherit;color: inherit;line-height: inherit;}.hi-v4-check-select-option:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-check-select-option--focused {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-check-select-option--disabled {cursor: not-allowed;color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-check-select-option-group {display: inline-block;margin-top: var(--hi-v4-spacing-6, 12px);margin-bottom: var(--hi-v4-spacing-2, 4px);padding: var(--hi-v4-spacing-3, 6px) 0 var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-3, 6px);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-check-select-option-group:first-child {margin-top: var(--hi-v4-spacing-2, 4px);}";
+var css_248z = ".hi-v5-check-select-option {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;border-radius: var(--hi-v5-border-radius-md, 4px);cursor: pointer;font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-normal, 400);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-700, #1a1d26);}.hi-v5-check-select-option__indent {display: inline-block;width: 16px;height: 100%;}.hi-v5-check-select-option__title {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;padding: calc(var(--hi-v5-spacing-2, 4px) + 1px) var(--hi-v5-spacing-4, 8px);font-size: inherit;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;text-size-adjust: none;font-weight: inherit;color: inherit;line-height: inherit;}.hi-v5-check-select-option:hover {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-check-select-option--focused {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-check-select-option--disabled {cursor: not-allowed;color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-check-select-option-group {display: inline-block;padding: calc(var(--hi-v5-spacing-2, 4px) + 1px) var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-normal, 400);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-600, #60636b);}.hi-v5-check-select-option-group__divider {-webkit-box-sizing: border-box;box-sizing: border-box;width: calc(100% + var(--hi-v5-spacing-4, 8px));height: 1px;margin: var(--hi-v5-spacing-2, 4px) calc(var(--hi-v5-spacing-2, 4px) * -1);background-color: var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-check-select-option-group__divider:first-child {display: none;}";
 var __styleInject__ = require('@hi-ui/style-inject')["default"];
 __styleInject__(css_248z);
 exports["default"] = css_248z;

package/lib/esm/CheckSelect.js CHANGED Viewed

@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import React, { forwardRef, useCallback, useMemo, useState, useEffect, useRef } from 'react';
+import React, { forwardRef, useRef, useCallback, useMemo, useState, useEffect } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
 import { useCheckSelect } from './use-check-select.js';
@@ -21,7 +21,7 @@ import { isUndef, isFunction, isArrayNonEmpty } from '@hi-ui/type-assertion';
 import VirtualList, { useCheckInVirtual } from '@hi-ui/virtual-list';
 import { Picker } from '@hi-ui/picker';
 import { mockDefaultHandlers } from '@hi-ui/dom-utils';
-import { uniqBy, times } from '@hi-ui/array-utils';
+import { uniqBy } from '@hi-ui/array-utils';
 import { Highlighter } from '@hi-ui/highlighter';
 import { useUncontrolledToggle } from '@hi-ui/use-toggle';
 import { callAllFuncs } from '@hi-ui/func-utils';
@@ -30,6 +30,7 @@ import { useAsyncSearch, useTreeCustomSearch, useFilterSearch, useSearchMode } f
 import '@hi-ui/use-children';
 import { flattenData } from './hooks/use-flatten-data.js';
 import { getAllCheckedStatus, isCheckableOption, isOption } from './utils/index.js';
+import { uuid } from '@hi-ui/use-id';
 var _role = 'check-select';
 var _prefix = getPrefixCls(_role);
 var DEFAULT_FIELD_NAMES = {};
@@ -71,6 +72,8 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     titleRender = _a.render,
     renderExtraFooter = _a.renderExtraFooter,
     onSearchProp = _a.onSearch,
+    onItemCreate = _a.onItemCreate,
+    creatableInSearch = _a.creatableInSearch,
     _a$fieldNames = _a.fieldNames,
     fieldNames = _a$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _a$fieldNames,
     _a$checkedOnEntered = _a.checkedOnEntered,
@@ -83,10 +86,14 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     suffix = _a.suffix,
     onKeyDownProp = _a.onKeyDown,
     keywordProp = _a.keyword,
-    rest = __rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "visible", "onOpen", "onClose", "onClear", "appearance", "invalid", "dataSource", "searchOnInit", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "fieldNames", "checkedOnEntered", "customRender", "tagInputProps", "size", "prefix", "suffix", "onKeyDown", "keyword"]);
+    label = _a.label,
+    _a$showIndicator = _a.showIndicator,
+    showIndicator = _a$showIndicator === void 0 ? true : _a$showIndicator,
+    rest = __rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "visible", "onOpen", "onClose", "onClear", "appearance", "invalid", "dataSource", "searchOnInit", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "onItemCreate", "creatableInSearch", "fieldNames", "checkedOnEntered", "customRender", "tagInputProps", "size", "prefix", "suffix", "onKeyDown", "keyword", "label", "showIndicator"]);
   var i18n = useLocaleContext();
   var placeholder = isUndef(placeholderProp) ? i18n.get('checkSelect.placeholder') : placeholderProp;
   // ************************** Picker ************************* //
+  var pickerInnerRef = useRef(null);
   var _useUncontrolledToggl = useUncontrolledToggle({
       visible: visible,
       disabled: disabled,
@@ -159,7 +166,7 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       checked: node.checked,
       disabled: node.disabled
     }, /*#__PURE__*/React.createElement(Highlighter, {
-      keyword: searchValue
+      keyword: new RegExp(searchValue, 'ig')
     }, node.title))) : true;
     return ret;
   }, [titleRender, searchValue, searchMode]);
@@ -245,12 +252,29 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
   var handleKeyDown = useLatestCallback(function (evt) {
     var key = evt.key;
     if (key === 'Enter' && checkedOnEntered) {
+      if (creatableInSearch && showData.length === 0) {
+        handleCreate(searchValue);
+        return;
+      }
       var focusedItem = showData[focusedIndex];
       if (focusedItem) {
         onSelect(focusedItem, !isCheckedId(focusedItem.id));
       }
     }
   });
+  var handleCreate = useLatestCallback(function (keyword) {
+    var _a;
+    var id = keyword + "-" + uuid();
+    var createdItem = {
+      id: id,
+      title: keyword
+    };
+    onSelect(createdItem, true);
+    onItemCreate === null || onItemCreate === void 0 ? void 0 : onItemCreate(createdItem);
+    // 创建后重置搜索和关闭弹窗
+    (_a = pickerInnerRef.current) === null || _a === void 0 ? void 0 : _a.resetSearch();
+    menuVisibleAction.off();
+  });
   // 更新 focused 索引
   useEffect(function () {
     setFocusedIndex(defaultIndex);
@@ -266,6 +290,9 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
     return extra;
   };
+  var customRenderContent = useMemo(function () {
+    return customRender ? typeof customRender === 'function' ? customRender(mergedCheckedItems) : customRender : null;
+  }, [customRender, mergedCheckedItems]);
   var expandedViewRef = useRef('normal');
   var virtualListProps = {
     height: height,
@@ -278,16 +305,21 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
   var cls = cx(prefixCls, className, prefixCls + "--" + (menuVisible ? 'open' : 'closed'));
   var listRef = useRef(null);
   useEffect(function () {
-    var _a;
-    // 每次打开或数据改变时触发一次滚动条显示
-    if (menuVisible && isArrayNonEmpty(showData)) {
-      (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(undefined);
+    var _a, _b;
+    if (menuVisible) {
+      // 数据改变时更新弹窗显示位置，避免弹窗内容被遮挡
+      (_a = pickerInnerRef.current) === null || _a === void 0 ? void 0 : _a.update();
+      // 数据改变时触发一次滚动条显示
+      if (isArrayNonEmpty(showData)) {
+        (_b = listRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo(undefined);
+      }
     }
   }, [menuVisible, showData]);
   return /*#__PURE__*/React.createElement(CheckSelectProvider, {
     value: context
   }, /*#__PURE__*/React.createElement(Picker, Object.assign({
     ref: ref,
+    innerRef: pickerInnerRef,
     className: cls
   }, rootProps, {
     visible: menuVisible,
@@ -301,16 +333,24 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     onSearch: callAllFuncs(onSearchProp, onSearch),
     loading: rest.loading !== undefined ? rest.loading : loading,
     footer: renderDefaultFooter(),
-    trigger: customRender ? typeof customRender === 'function' ? customRender(mergedCheckedItems) : customRender : ( /*#__PURE__*/React.createElement(TagInputMock, Object.assign({}, tagInputProps, {
+    creatableInSearch: creatableInSearch,
+    onCreate: handleCreate,
+    trigger: customRender ? customRenderContent : ( /*#__PURE__*/React.createElement(TagInputMock, Object.assign({
+      style: {
+        maxWidth: appearance === 'contained' ? '360px' : undefined
+      }
+    }, tagInputProps, {
       size: size,
       clearable: clearable,
       placeholder: placeholder,
       // @ts-ignore
       displayRender: displayRender,
+      showIndicator: showIndicator,
       prefix: prefix,
       suffix: [menuVisible ? /*#__PURE__*/React.createElement(UpOutlined, null) : /*#__PURE__*/React.createElement(DownOutlined, null), suffix],
       focused: menuVisible,
       appearance: appearance,
+      label: label,
       value: value,
       // @ts-ignore
       onChange: tryChangeValue,
@@ -364,7 +404,8 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, virtualListProps), function (node, index) {
     /* 反向 map，搜索删选数据时会对数据进行处理 */
     return 'groupTitle' in node ? ( /*#__PURE__*/React.createElement(CheckSelectOptionGroup, {
-      label: node.groupTitle
+      label: node.groupTitle,
+      depth: node.depth
     })) : ( /*#__PURE__*/React.createElement(CheckSelectOption, {
       option: node,
       depth: node.depth,
@@ -390,7 +431,6 @@ var CheckSelectOption = /*#__PURE__*/forwardRef(function (_a, ref) {
     option = _a$option === void 0 ? {} : _a$option,
     onClick = _a.onClick,
     titleRender = _a.titleRender,
-    depth = _a.depth,
     focused = _a.focused,
     rest = __rest(_a, ["prefixCls", "className", "children", "option", "onClick", "titleRender", "depth", "focused"]);
   var _useCheckSelectContex = useCheckSelectContext(),
@@ -424,7 +464,7 @@ var CheckSelectOption = /*#__PURE__*/forwardRef(function (_a, ref) {
     className: cls
   }, rest, {
     onClick: handleOptionCheck
-  }), renderIndent(prefixCls, depth), renderTitle(eventNodeRef.current, titleRender));
+  }), renderTitle(eventNodeRef.current, titleRender));
 });
 // @ts-ignore
 CheckSelectOption.HiName = 'CheckSelectOption';
@@ -437,31 +477,18 @@ var CheckSelectOptionGroup = /*#__PURE__*/forwardRef(function (_a, ref) {
     prefixCls = _a$prefixCls3 === void 0 ? optionGroupPrefix : _a$prefixCls3,
     className = _a.className,
     label = _a.label,
-    rest = __rest(_a, ["prefixCls", "className", "label"]);
+    rest = __rest(_a, ["prefixCls", "className", "label", "depth"]);
   var cls = cx(prefixCls, className);
-  return /*#__PURE__*/React.createElement("div", Object.assign({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__divider"
+  }), /*#__PURE__*/React.createElement("div", Object.assign({
     ref: ref,
     className: cls
-  }, rest), /*#__PURE__*/React.createElement("span", null, label));
+  }, rest), /*#__PURE__*/React.createElement("span", null, label)));
 });
 // @ts-ignore
 CheckSelectOptionGroup.HiName = 'CheckSelectOptionGroup';
 if (__DEV__) {
   CheckSelectOptionGroup.displayName = 'CheckSelectOptionGroup';
 }
-/**
- * 渲染空白占位
- */
-var renderIndent = function renderIndent(prefixCls, depth) {
-  return times(depth, function (index) {
-    return /*#__PURE__*/React.createElement("span", {
-      key: index,
-      style: {
-        alignSelf: 'stretch'
-      }
-    }, /*#__PURE__*/React.createElement("span", {
-      className: cx(prefixCls + "__indent")
-    }));
-  });
-};
 export { CheckSelect, CheckSelectOption, CheckSelectOptionGroup };

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

@@ -8,6 +8,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import __styleInject__ from '@hi-ui/style-inject';
-var css_248z = ".hi-v4-check-select-option {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;border-radius: var(--hi-v4-border-radius-md, 4px);cursor: pointer;font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-check-select-option__indent {display: inline-block;width: 16px;height: 100%;}.hi-v4-check-select-option__title {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-3, 6px);font-size: inherit;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;text-size-adjust: none;font-weight: inherit;color: inherit;line-height: inherit;}.hi-v4-check-select-option:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-check-select-option--focused {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-check-select-option--disabled {cursor: not-allowed;color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-check-select-option-group {display: inline-block;margin-top: var(--hi-v4-spacing-6, 12px);margin-bottom: var(--hi-v4-spacing-2, 4px);padding: var(--hi-v4-spacing-3, 6px) 0 var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-3, 6px);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-check-select-option-group:first-child {margin-top: var(--hi-v4-spacing-2, 4px);}";
+var css_248z = ".hi-v5-check-select-option {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;border-radius: var(--hi-v5-border-radius-md, 4px);cursor: pointer;font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-normal, 400);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-700, #1a1d26);}.hi-v5-check-select-option__indent {display: inline-block;width: 16px;height: 100%;}.hi-v5-check-select-option__title {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;padding: calc(var(--hi-v5-spacing-2, 4px) + 1px) var(--hi-v5-spacing-4, 8px);font-size: inherit;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;text-size-adjust: none;font-weight: inherit;color: inherit;line-height: inherit;}.hi-v5-check-select-option:hover {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-check-select-option--focused {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-check-select-option--disabled {cursor: not-allowed;color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-check-select-option-group {display: inline-block;padding: calc(var(--hi-v5-spacing-2, 4px) + 1px) var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-normal, 400);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-600, #60636b);}.hi-v5-check-select-option-group__divider {-webkit-box-sizing: border-box;box-sizing: border-box;width: calc(100% + var(--hi-v5-spacing-4, 8px));height: 1px;margin: var(--hi-v5-spacing-2, 4px) calc(var(--hi-v5-spacing-2, 4px) * -1);background-color: var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-check-select-option-group__divider:first-child {display: none;}";
 __styleInject__(css_248z);
 export { css_248z as default };

package/lib/types/CheckSelect.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react';
 import { UseCheckSelectProps } from './use-check-select';
-import type { HiBaseHTMLProps } from '@hi-ui/core';
+import type { HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core';
 import { CheckSelectAppearanceEnum, CheckSelectDataItem, CheckSelectItemEventData, CheckSelectMergedItem } from './types';
 import { TagInputMockProps } from '@hi-ui/tag-input';
 import { PickerProps } from '@hi-ui/picker';
@@ -39,7 +39,7 @@ export interface CheckSelectProps extends Omit<PickerProps, 'trigger' | 'scrolla
     /**
      * 自定义尺寸
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: HiBaseSizeEnum;
     /**
      * 自定义渲染节点的 title 内容
      */
@@ -56,6 +56,10 @@ export interface CheckSelectProps extends Omit<PickerProps, 'trigger' | 'scrolla
      * 设置展现形式
      */
     appearance?: CheckSelectAppearanceEnum;
+    /**
+     * 设置输入框 label 内容，仅在 appearance 为 contained 时生效
+     */
+    label?: React.ReactNode;
     /**
      * 节点搜索模式，仅在mode=normal模式下生效
      */
@@ -118,10 +122,26 @@ export interface CheckSelectProps extends Omit<PickerProps, 'trigger' | 'scrolla
      * TagInput 参数设置
      */
     tagInputProps?: TagInputMockProps;
+    /**
+     * 是否开启创建选项
+     */
+    creatableInSearch?: boolean;
+    /**
+     * 创建选项时触发
+     */
+    onItemCreate?: (item: CheckSelectMergedItem) => void;
+    /**
+     * 是否展示箭头
+     */
+    showIndicator?: boolean;
 }
 export declare const CheckSelectOption: React.ForwardRefExoticComponent<Pick<CheckSelectOptionProps, string | number> & React.RefAttributes<HTMLDivElement | null>>;
 export interface CheckSelectOptionProps extends HiBaseHTMLProps {
 }
 export declare const CheckSelectOptionGroup: React.ForwardRefExoticComponent<Pick<CheckSelectOptionGroupProps, string | number> & React.RefAttributes<HTMLDivElement | null>>;
 export interface CheckSelectOptionGroupProps extends HiBaseHTMLProps {
+    /**
+     * 深度
+     */
+    depth?: number;
 }

package/lib/types/types.d.ts CHANGED Viewed

@@ -49,4 +49,4 @@ export interface FlattedCheckSelectDataItem extends CheckSelectDataItem {
 }
 export interface CheckSelectItemEventData extends FlattedCheckSelectDataItem, CheckSelectRequiredProps {
 }
-export declare type CheckSelectAppearanceEnum = HiBaseAppearanceEnum | undefined;
+export declare type CheckSelectAppearanceEnum = HiBaseAppearanceEnum | 'contained' | undefined;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/check-select",
-  "version": "4.6.3",
+  "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,38 +44,39 @@
     "url": "https://github.com/XiaoMi/hiui/issues"
   },
   "dependencies": {
-    "@hi-ui/array-utils": "^4.0.5",
-    "@hi-ui/checkbox": "^4.0.10",
-    "@hi-ui/classname": "^4.0.5",
-    "@hi-ui/dom-utils": "^4.0.7",
-    "@hi-ui/env": "^4.0.7",
-    "@hi-ui/func-utils": "^4.0.4",
-    "@hi-ui/highlighter": "^4.1.0",
-    "@hi-ui/icons": "^4.0.19",
-    "@hi-ui/input": "^4.3.0",
-    "@hi-ui/picker": "^4.1.6",
-    "@hi-ui/popper": "^4.1.6",
-    "@hi-ui/tag-input": "^4.1.3",
-    "@hi-ui/times": "^4.0.4",
-    "@hi-ui/tree-utils": "^4.1.6",
-    "@hi-ui/type-assertion": "^4.0.4",
-    "@hi-ui/use-check": "^4.0.5",
-    "@hi-ui/use-children": "^4.0.4",
-    "@hi-ui/use-data-source": "^4.0.4",
-    "@hi-ui/use-latest": "^4.0.4",
-    "@hi-ui/use-search-mode": "^4.2.0",
-    "@hi-ui/use-toggle": "^4.0.4",
-    "@hi-ui/use-uncontrolled-state": "^4.0.4",
-    "@hi-ui/virtual-list": "^4.0.8"
+    "@hi-ui/array-utils": "^5.0.0-alpha.0",
+    "@hi-ui/checkbox": "^5.0.0-alpha.0",
+    "@hi-ui/classname": "^5.0.0-alpha.0",
+    "@hi-ui/dom-utils": "^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/tag-input": "^5.0.0-alpha.0",
+    "@hi-ui/times": "^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-check": "^5.0.0-alpha.0",
+    "@hi-ui/use-children": "^5.0.0-alpha.0",
+    "@hi-ui/use-data-source": "^5.0.0-alpha.0",
+    "@hi-ui/use-id": "^5.0.0-alpha.0",
+    "@hi-ui/use-latest": "^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/virtual-list": "^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"
   }