@hi-ui/check-select 4.6.3 → 4.6.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hi-ui/check-select
 
+## 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

@@ -101,6 +101,7 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   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,
@@ -292,16 +293,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,
@@ -378,7 +384,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,
@@ -451,12 +458,13 @@ 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"]);
+    depth = _a.depth,
+    rest = tslib.__rest(_a, ["prefixCls", "className", "label", "depth"]);
   var cls = classname.cx(prefixCls, className);
   return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     ref: ref,
     className: cls
-  }, rest), /*#__PURE__*/React__default["default"].createElement("span", null, label));
+  }, rest), renderIndent(prefixCls, !depth || depth === 0 ? 0 : depth - 1), /*#__PURE__*/React__default["default"].createElement("span", null, label));
 });
 // @ts-ignore
 CheckSelectOptionGroup.HiName = 'CheckSelectOptionGroup';

package/lib/esm/CheckSelect.js

@@ -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';
@@ -87,6 +87,7 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
   var i18n = useLocaleContext();
   var placeholder = isUndef(placeholderProp) ? i18n.get('checkSelect.placeholder') : placeholderProp;
   // ************************** Picker ************************* //
+  var pickerInnerRef = useRef(null);
   var _useUncontrolledToggl = useUncontrolledToggle({
       visible: visible,
       disabled: disabled,
@@ -278,16 +279,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,
@@ -364,7 +370,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,
@@ -437,12 +444,13 @@ 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"]);
+    depth = _a.depth,
+    rest = __rest(_a, ["prefixCls", "className", "label", "depth"]);
   var cls = cx(prefixCls, className);
   return /*#__PURE__*/React.createElement("div", Object.assign({
     ref: ref,
     className: cls
-  }, rest), /*#__PURE__*/React.createElement("span", null, label));
+  }, rest), renderIndent(prefixCls, !depth || depth === 0 ? 0 : depth - 1), /*#__PURE__*/React.createElement("span", null, label));
 });
 // @ts-ignore
 CheckSelectOptionGroup.HiName = 'CheckSelectOptionGroup';

package/lib/types/CheckSelect.d.ts

@@ -124,4 +124,8 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/check-select",
-  "version": "4.6.3",
+  "version": "4.6.4",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -52,8 +52,8 @@
     "@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/picker": "^4.1.8",
+    "@hi-ui/popper": "^4.1.7",
     "@hi-ui/tag-input": "^4.1.3",
     "@hi-ui/times": "^4.0.4",
     "@hi-ui/tree-utils": "^4.1.6",