@kdcloudjs/kdesign 1.7.19 → 1.7.21

package/es/config-provider/compDefaultProps.js

@@ -463,7 +463,22 @@ var compDefaultProps = {
         type: "arrow-right-solid"
       });
     },
-    expandOnClickNode: false
+    expandOnClickNode: false,
+    listHeight: 184,
+    virtual: true
+  },
+  CityPicker: {
+    type: 'domestic',
+    loading: false,
+    size: 'small',
+    borderType: 'underline',
+    defaultOpen: false,
+    showArrow: true,
+    placeholder: '',
+    description: '城市',
+    showDescription: true,
+    optionHighlightProps: 'highlightText',
+    allowClear: true
   }
 };
 export default compDefaultProps;

package/es/input/style/token.less

@@ -9,16 +9,10 @@
 @input-clear-color: var(~'@{input-prefix}-clear-color', #d9d9d9);
 @input-clear-color-hover: var(~'@{input-prefix}-clear-color-hover', #999);
 @input-background-color-inner: var(~'@{input-prefix}-color-background', @color-white);
-@input-background-color-disabled-inner: var(
-  ~'@{input-prefix}-color-background-disabled',
-  @color-background-contain-disabled
-);
+@input-background-color-disabled-inner: var(~'@{input-prefix}-color-background-disabled', @color-background-contain-disabled);
 @input-border-color-focused: var(~'@{input-prefix}-color-border-focused', @color-theme);
 @input-border-color-disabled-inner: var(~'@{input-prefix}-color-border-disabled', @color-border-strong);
-@input-underline-border-color-disabled-inner: var(
-  ~'@{input-prefix}-underline-color-border-disabled',
-  @color-border-weak
-);
+@input-underline-border-color-disabled-inner: var(~'@{input-prefix}-underline-color-border-disabled', @color-border-weak);
 @input-color-disabled-inner: var(~'@{input-prefix}-color-disabled', @color-disabled);
 @input-affix-color: var(~'@{input-prefix}-affix-color-text', #666);
 @input-error-color: var(~'@{input-prefix}-color-error', @color-error);

package/es/select/select.js

@@ -140,22 +140,29 @@ var InternalSelect = function InternalSelect(props, ref) {
           var arr = [];
           _mapInstanceProperty(initValue).call(initValue, function (item) {
             var _a, _b;
-            var obj = (realChildren === null || realChildren === void 0 ? void 0 : _findInstanceProperty(realChildren).call(realChildren, function (child) {
+            var obj = realChildren === null || realChildren === void 0 ? void 0 : _findInstanceProperty(realChildren).call(realChildren, function (child) {
               if (child && child.props) {
                 return child.props.value === item;
               } else {
                 return child.value === item;
               }
-            })) || {};
-            if (options && options.length) {
-              arr.push({
-                value: obj === null || obj === void 0 ? void 0 : obj.value,
-                label: (obj === null || obj === void 0 ? void 0 : obj.label) || (obj === null || obj === void 0 ? void 0 : obj.value)
-              });
+            });
+            if (obj) {
+              if (options && options.length) {
+                arr.push({
+                  value: obj === null || obj === void 0 ? void 0 : obj.value,
+                  label: (obj === null || obj === void 0 ? void 0 : obj.label) || (obj === null || obj === void 0 ? void 0 : obj.value)
+                });
+              } else {
+                arr.push({
+                  value: (_a = obj.props) === null || _a === void 0 ? void 0 : _a.value,
+                  label: (_b = obj.props) === null || _b === void 0 ? void 0 : _b.children
+                });
+              }
             } else {
               arr.push({
-                value: (_a = obj.props) === null || _a === void 0 ? void 0 : _a.value,
-                label: (_b = obj.props) === null || _b === void 0 ? void 0 : _b.children
+                value: item,
+                label: item
               });
             }
           });
@@ -172,19 +179,22 @@ var InternalSelect = function InternalSelect(props, ref) {
     if (!isMultiple) {
       multipleRef.current.selectedVal = initValue; // 默认选中值
       if (initValue !== undefined) {
-        var obj = (realChildren === null || realChildren === void 0 ? void 0 : _findInstanceProperty(realChildren).call(realChildren, function (child) {
+        var obj = realChildren === null || realChildren === void 0 ? void 0 : _findInstanceProperty(realChildren).call(realChildren, function (child) {
           var _a;
           if (child && child.props) {
             return ((_a = child.props) === null || _a === void 0 ? void 0 : _a.value) === initValue;
           } else {
             return (child === null || child === void 0 ? void 0 : child.value) === initValue;
           }
-        })) || {};
-        if (options && options.length) {
-          setSingleVal(getOptionLabel(obj) || (obj === null || obj === void 0 ? void 0 : obj.value));
+        });
+        if (obj) {
+          if (options && options.length) {
+            setSingleVal(getOptionLabel(obj) || (obj === null || obj === void 0 ? void 0 : obj.value));
+          } else {
+            setSingleVal(getOptionLabel(obj));
+          }
         } else {
-          // setSingleVal(obj.props?.children)
-          setSingleVal(getOptionLabel(obj));
+          setSingleVal(initValue);
         }
       } else {
         setSingleVal(undefined);

package/es/tree/tree.js

@@ -21,8 +21,9 @@ import cloneDeep from 'lodash/cloneDeep';
 import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
 import TreeNode from './treeNode';
+import VirtualList from '../virtual-list';
 import { getChecked, getHalfChecked, addKeys, flattenAll, delKey, getFilterData, getSpreadAttrData, getAllCheckedKeys, getDataCheckededStateStrictly, getAllChildKeys, getPos, calcDropPosition } from './utils/treeUtils';
-import { useChecked, useExpand, usePlantomHeightEffect, useViewportHeight, useVisibleDataMemo, useScrollToKey, useSelect } from './treeHooks';
+import { useChecked, useExpand, useSelect } from './treeHooks';
 import isBoolean from 'lodash/isBoolean';
 var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useContext = useContext(ConfigContext),
@@ -80,7 +81,6 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     notFoundContent = TreeProps.notFoundContent,
     others = __rest(TreeProps, ["prefixCls", "treeData", "virtual", "showIcon", "switcherIcon", "icon", "checkable", "checkStrictly", "disabled", "draggable", "scrollToKey", "expandedKeys", "checkedKeys", "defaultExpandRoot", "defaultExpandAll", "defaultExpandParent", "defaultExpandedKeys", "defaultCheckedKeys", "defaultSelectedKeys", "height", "onCheck", "onExpand", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect", "selectedKeys", "setTreeNodeStyle", "setTreeNodeClassName", "estimatedItemSize", "style", "className", "filterTreeNode", "filterValue", "expandOnClickNode", "onlyExpandOnClickIcon", "loadData", "notFoundContent"]);
   var treePrefixCls = getPrefixCls(prefixCls, 'tree', customPrefixcls); // 树样式前缀
-  var treeNodePrefixCls = getPrefixCls(prefixCls, 'tree-node', customPrefixcls); // 树节点样式前缀
   var treeNodeClassName = classNames(className, _defineProperty({}, "".concat(treePrefixCls), true));
   var treeRootClassName = "".concat(treePrefixCls, "-root");
   var estimatedItemSize = innerEstimatedItemSize; // 节点高度
@@ -94,45 +94,41 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     scrollKey = _React$useState2[0],
     setScrollKey = _React$useState2[1];
-  var _React$useState3 = React.useState(0),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    start = _React$useState4[0],
-    setStart = _React$useState4[1];
   var _useSelect = useSelect(selectedKeysProps, defaultSelectedKeys),
     _useSelect2 = _slicedToArray(_useSelect, 2),
     selectedKeys = _useSelect2[0],
     setSelectedKeys = _useSelect2[1];
   var listRef = React.useRef(null);
-  var plantomRef = React.useRef(null);
   var rootRef = React.useRef(null);
   var scrollRef = ref || rootRef;
   var treeNodeRef = React.useRef(null);
   var dragNodeRef = React.useRef(null);
   var delayedDragEnterRef = React.useRef(null);
-  var _React$useState5 = React.useState(true),
+  var virtualListRef = React.useRef(null);
+  var _React$useState3 = React.useState(true),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isInit = _React$useState4[0],
+    setIsInit = _React$useState4[1];
+  var _React$useState5 = React.useState(null),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
-    isInit = _React$useState6[0],
-    setIsInit = _React$useState6[1];
+    dropPosition = _React$useState6[0],
+    setDropPosition = _React$useState6[1];
   var _React$useState7 = React.useState(null),
     _React$useState8 = _slicedToArray(_React$useState7, 2),
-    dropPosition = _React$useState8[0],
-    setDropPosition = _React$useState8[1];
-  var _React$useState9 = React.useState(null),
+    dragOverNodeKey = _React$useState8[0],
+    setDragOverNodeKey = _React$useState8[1];
+  var _React$useState9 = React.useState(new _Set()),
     _React$useState10 = _slicedToArray(_React$useState9, 2),
-    dragOverNodeKey = _React$useState10[0],
-    setDragOverNodeKey = _React$useState10[1];
+    loadedKeys = _React$useState10[0],
+    setLoadedKeys = _React$useState10[1];
   var _React$useState11 = React.useState(new _Set()),
     _React$useState12 = _slicedToArray(_React$useState11, 2),
-    loadedKeys = _React$useState12[0],
-    setLoadedKeys = _React$useState12[1];
-  var _React$useState13 = React.useState(new _Set()),
+    loadingKeys = _React$useState12[0],
+    setLoadingKeys = _React$useState12[1];
+  var _React$useState13 = React.useState([]),
     _React$useState14 = _slicedToArray(_React$useState13, 2),
-    loadingKeys = _React$useState14[0],
-    setLoadingKeys = _React$useState14[1];
-  var _React$useState15 = React.useState([]),
-    _React$useState16 = _slicedToArray(_React$useState15, 2),
-    searchExpandedKeys = _React$useState16[0],
-    setSearchExpandedKeys = _React$useState16[1];
+    searchExpandedKeys = _React$useState14[0],
+    setSearchExpandedKeys = _React$useState14[1];
   var isSearching = React.useMemo(function () {
     return typeof filterTreeNode === 'function' && !!filterValue;
   }, [filterValue]);
@@ -157,13 +153,11 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var filterData = React.useMemo(function () {
     return getFilterData(spreadAttrData, filterTreeNode, isSearching, posData, keysData);
   }, [spreadAttrData, isSearching, posData, keysData]);
-  var _useViewportHeight = useViewportHeight(height, listRef),
-    _useViewportHeight2 = _slicedToArray(_useViewportHeight, 1),
-    viewportHeight = _useViewportHeight2[0];
-  var _useVisibleDataMemo = useVisibleDataMemo(virtual, filterData, viewportHeight, estimatedItemSize, start),
-    _useVisibleDataMemo2 = _slicedToArray(_useVisibleDataMemo, 1),
-    visibleData = _useVisibleDataMemo2[0];
-  var index = React.useMemo(function () {
+  useEffect(function () {
+    var _a, _b;
+    if (typeof scrollKey === 'undefined') {
+      return;
+    }
     var scrollIndex = 0;
     for (var i = 0; i < filterData.length; i++) {
       if (filterData[i].key === scrollKey) {
@@ -171,19 +165,21 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
         break;
       }
     }
-    return scrollIndex;
-  }, [filterData, scrollKey]);
-  useScrollToKey(scrollKey, index, estimatedItemSize, scrollRef, viewportHeight, treeNodePrefixCls);
-  usePlantomHeightEffect(plantomRef, filterData, estimatedItemSize);
-  var handleScroll = useCallback(function () {
-    if (!virtual) return;
-    var scrollTop = scrollRef.current.scrollTop;
-    setStart(Math.floor(scrollTop / estimatedItemSize));
-    var tempStartOffset = scrollTop - scrollTop % estimatedItemSize;
-    if (listRef.current && virtual) {
-      listRef.current.style.transform = "translate3d(0,".concat(tempStartOffset, "px,0)");
+    if (virtual) {
+      (_a = virtualListRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+        index: scrollIndex
+      });
+    } else {
+      var wrapperDom = scrollRef.current;
+      var node = wrapperDom ? (_b = wrapperDom === null || wrapperDom === void 0 ? void 0 : wrapperDom.children[0]) === null || _b === void 0 ? void 0 : _b.children[scrollIndex] : null;
+      if (node && wrapperDom) {
+        var containerHeight = wrapperDom.clientHeight;
+        var targetHeight = node.clientHeight;
+        var scrollPosition = node.offsetTop + targetHeight - containerHeight;
+        wrapperDom.scrollTop = scrollPosition;
+      }
     }
-  }, [listRef, scrollRef, virtual, estimatedItemSize]);
+  }, [filterData, scrollKey, virtual]);
   var handleNodeLoad = useCallback(function (loadedKeys, loadingKeys, data) {
     var key = data.key;
     if (!loadData || loadedKeys.has(key) || loadingKeys.has(key)) {
@@ -228,7 +224,7 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var newSearchExpandedKeys = expanded ? addKeys(searchExpandedKeys, [key]) : delKey(searchExpandedKeys, [key]);
       setSearchExpandedKeys(newSearchExpandedKeys);
     }
-    setScrollKey('');
+    setScrollKey(undefined);
     setIsInit(false);
     if (expanded && loadData) {
       handleNodeLoad(loadedKeys, loadingKeys, node);
@@ -374,18 +370,7 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
   useEffect(function () {
     setCheckedKeys(checkedKeys);
   }, [checkedKeys, setCheckedKeys]);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: treeNodeClassName,
-    style: style,
-    ref: scrollRef,
-    onScroll: handleScroll
-  }, others), /*#__PURE__*/React.createElement("div", {
-    ref: plantomRef,
-    className: "".concat(treePrefixCls, "-plantom")
-  }), /*#__PURE__*/React.createElement("div", {
-    className: treeRootClassName,
-    ref: listRef
-  }, !(visibleData === null || visibleData === void 0 ? void 0 : visibleData.length) && notFoundContent, visibleData && _mapInstanceProperty(visibleData).call(visibleData, function (item) {
+  var renderTreeNode = function renderTreeNode(item) {
     var checked = getChecked(checkedKeys, item.key);
     var indeterminate = getHalfChecked(halfCheckedKeys, item.key);
     item.nodeKey = item.key;
@@ -423,7 +408,26 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
       key: item.key,
       ref: treeNodeRef
     }));
-  })));
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: treeNodeClassName,
+    style: style,
+    ref: scrollRef
+  }, others), /*#__PURE__*/React.createElement("div", {
+    className: treeRootClassName,
+    ref: listRef
+  }, !(filterData === null || filterData === void 0 ? void 0 : filterData.length) && notFoundContent, virtual ? /*#__PURE__*/React.createElement(VirtualList, {
+    className: className,
+    style: style,
+    ref: virtualListRef,
+    data: filterData,
+    isStaticItemHeight: true,
+    itemKey: function itemKey(item) {
+      return item === null || item === void 0 ? void 0 : item.key;
+    },
+    height: height,
+    itemHeight: estimatedItemSize
+  }, renderTreeNode) : _mapInstanceProperty(filterData).call(filterData, renderTreeNode)));
 });
 var Tree = InternalTree;
 Tree.displayName = 'Tree';

package/es/tree/treeNode.js

@@ -18,7 +18,7 @@ import { getCompProps } from '../_utils';
 import Checkbox from './../checkbox';
 import Icon from '../icon';
 import Spin from '../spin';
-var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var TreeNode = /*#__PURE__*/React.forwardRef(function (props) {
   var _context;
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
@@ -230,11 +230,6 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleSelect = React.useCallback(function (e) {
     selectable && !disabled && onSelect && onSelect(e, nodeData, nodeKey);
   }, [onSelect, selectable, disabled, nodeData, nodeKey]);
-  React.useImperativeHandle(ref, function () {
-    return {
-      selectNode: handleSelect
-    };
-  });
   var handleExpandIconClick = useCallback(function (e) {
     e === null || e === void 0 ? void 0 : e.stopPropagation();
     setExpandState(!expandState);

package/es/tree-select/interface.d.ts

@@ -48,6 +48,7 @@ export declare type ITreeProps = {
     treeExpandOnClickNode?: boolean;
     showTreeIcon?: boolean;
     treeLoadData?: () => void;
+    listHeight?: number;
 };
 export declare type TreeSelectValue = string | string[] | number | number[] | undefined;
 export interface ITreeSelectProps<T extends TreeSelectValue> extends AbstractSelectProps, ITreeProps {

package/es/tree-select/style/index.css

@@ -228,7 +228,7 @@
   z-index: var(--kd-c-tree-select-z-index, var(--kd-g-z-index-popper, 1050));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  padding: 4px 0;
+  padding: var(--kd-c-tree-select-dropdown-spacing-padding-vertical, 8px) 0;
   margin: 0;
   overflow: auto;
   font-size: var(--kd-c-tree-select-dropdown-font-size, 12px);
@@ -240,6 +240,9 @@
           box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
   max-height: 200px;
 }
+.kd-tree-select-dropdown .kd-tree {
+  padding: 0;
+}
 .kd-tree-select-dropdown .kd-tree-node-item {
   padding: 0 var(--kd-c-tree-select-dropdown-node-spacing-padding-horizontal, 16px);
 }

package/es/tree-select/style/index.less

@@ -126,7 +126,7 @@
     left: 0;
     z-index: @tree-select-z-index;
     box-sizing: border-box;
-    padding: 4px 0;
+    padding: @tree-select-padding-vertical 0;
     margin: 0;
     overflow: auto;
     font-size: @tree-select-list-font-size;
@@ -137,6 +137,10 @@
     box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
     max-height: 200px;
 
+    .@{tree-prefix-cls} {
+      padding: 0;
+    }
+
     .@{tree-prefix-cls}-node-item {
       padding: 0 @tree-select-dropdown-node-horizontal;
     }

package/es/tree-select/style/token.less

@@ -45,6 +45,7 @@
 @tree-select-bordered: var(~'@{tree-select-custom-prefix}-bordered-spacing-padding-left', 8px);
 @tree-select-wrapper-padding: var(~'@{tree-select-custom-prefix}-wrapper-spacing-padding', 1px 28px 1px 0);
 @tree-select-dropdown-node-horizontal: var(~'@{tree-select-custom-prefix}-dropdown-node-spacing-padding-horizontal', 16px);
+@tree-select-padding-vertical: var(~'@{tree-select-custom-prefix}-dropdown-spacing-padding-vertical', 8px);
 
 // radius
 @tree-select-g-radius-border: var(~'@{tree-select-custom-prefix}-radius-border', @radius-border);

package/es/tree-select/tree-select.js

@@ -1,3 +1,4 @@
+import _typeof from "@babel/runtime-corejs3/helpers/typeof";
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
@@ -96,7 +97,8 @@ var InternalTreeSelect = function InternalTreeSelect(props, ref) {
     onSelect = treeSelectProps.onSelect,
     onCheck = treeSelectProps.onCheck,
     dropdownRender = treeSelectProps.dropdownRender,
-    onlyExpandOnClickIcon = treeSelectProps.onlyExpandOnClickIcon;
+    onlyExpandOnClickIcon = treeSelectProps.onlyExpandOnClickIcon,
+    listHeight = treeSelectProps.listHeight;
   var isMultiple = mode === 'multiple'; // 是否多选
   var _useMergedState = useMergedState(isMultiple ? [] : undefined, {
       value: value,
@@ -155,16 +157,26 @@ var InternalTreeSelect = function InternalTreeSelect(props, ref) {
   var commCls = classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), _defineProperty(_classNames4, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames4, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames4, _concatInstanceProperty(_context3 = "".concat(selectPrefixCls, "-size-")).call(_context3, size), size), _defineProperty(_classNames4, "".concat(selectPrefixCls, "-wrapper"), true), _classNames4));
   useEffect(function () {
     var arr = [];
-    if (isMultiple && (initValue === null || initValue === void 0 ? void 0 : initValue.length)) {
+    if (isMultiple) {
       for (var index = 0; index < initValue.length; index++) {
         var key = initValue[index];
         if (TreeMap.has(key)) {
           arr.push(TreeMap.get(key));
+        } else {
+          arr.push({
+            key: key,
+            title: key
+          });
         }
       }
     } else {
       if (TreeMap.has(initValue)) {
         arr.push(TreeMap.get(initValue));
+      } else {
+        _typeof(initValue) !== undefined && arr.push({
+          key: initValue,
+          title: initValue
+        });
       }
     }
     setSelectTreeNodes(arr);
@@ -315,7 +327,8 @@ var InternalTreeSelect = function InternalTreeSelect(props, ref) {
       notFoundContent: renderNotContent(),
       filterTreeNode: defFilterTreeNode,
       onSelect: handleSelect,
-      onExpand: handleExpand
+      onExpand: handleExpand,
+      height: listHeight
     };
     if (isMultiple) {
       treeProps.checkable = true;
@@ -343,7 +356,8 @@ var InternalTreeSelect = function InternalTreeSelect(props, ref) {
   // 渲染下拉列表框
   var renderContent = function renderContent() {
     var dropDownStyle = _extends({
-      width: style === null || style === void 0 ? void 0 : style.width
+      width: style === null || style === void 0 ? void 0 : style.width,
+      maxHeight: virtual ? 'unset' : ''
     }, dropdownStyle);
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: dropDownCls,

package/lib/button/style/token.less

@@ -91,6 +91,7 @@
 @btn-middle-height: var(~'@{button-custom-prefix}-sizing-height-middle', 28px); // 中号 高度     高度配置
 @btn-middle-min-width: var(~'@{button-custom-prefix}-sizing-min-width-middle', 60px); // 中号 最小宽度
 @btn-large-height: var(~'@{button-custom-prefix}-sizing-height-large', 32px); // 大号 高度
+@btn-middle-max-width: var(~'@{button-custom-prefix}-sizing-max-width-middle'); // 中号 最大宽度
 @btn-large-min-width: var(~'@{button-custom-prefix}-sizing-min-width-large', 80px); // 大号 最小宽度
 @btn-group-dropdown-item-height: var(~'@{button-custom-prefix}--group-dropdown-item-height', 30px);
 @btn-group-dropdown-min-width: var(~'@{button-custom-prefix}-group-dropdown-min-width', 80px);

package/lib/checkbox/checkbox.js

@@ -75,20 +75,20 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
   var getIndeterminate = function getIndeterminate() {
     return selected ? false : indeterminate;
   };
-  var getDefaultClassName = (0, _classnames.default)(className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(checkboxPrefixCls), true), (0, _defineProperty2.default)(_classNames, "".concat(checkboxPrefixCls, "-no-child"), !children), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(checkboxPrefixCls, "-")).call(_context, mergedSize), true && !!children), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context2 = "".concat(checkboxPrefixCls, "-")).call(_context2, mergedCheckboxType), true), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context3 = "".concat(checkboxPrefixCls, "-")).call(_context3, mergedCheckboxType, "-disabled"), mergedDisabled), (0, _defineProperty2.default)(_classNames, "checked", selected), _classNames));
-  var getSquareClassName = (0, _classnames.default)(className, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(checkboxPrefixCls), true), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context4 = "".concat(checkboxPrefixCls, "-")).call(_context4, mergedCheckboxType), true), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context5 = "".concat(checkboxPrefixCls, "-")).call(_context5, mergedSize), true && !!children), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context6 = "".concat(checkboxPrefixCls, "-")).call(_context6, mergedCheckboxType, "-disabled"), mergedDisabled), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context7 = "".concat(checkboxPrefixCls, "-")).call(_context7, mergedCheckboxType, "-checked"), selected && !mergedDisabled), (0, _defineProperty2.default)(_classNames2, "checked", selected), _classNames2));
+  var getDefaultClassName = (0, _classnames.default)(className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(checkboxPrefixCls), true), (0, _defineProperty2.default)(_classNames, "".concat(checkboxPrefixCls, "-no-child"), !children), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(checkboxPrefixCls, "-")).call(_context, mergedSize), !!children), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context2 = "".concat(checkboxPrefixCls, "-")).call(_context2, mergedCheckboxType), true), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context3 = "".concat(checkboxPrefixCls, "-")).call(_context3, mergedCheckboxType, "-disabled"), mergedDisabled), (0, _defineProperty2.default)(_classNames, "checked", selected), _classNames));
+  var getSquareClassName = (0, _classnames.default)(className, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(checkboxPrefixCls), true), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context4 = "".concat(checkboxPrefixCls, "-")).call(_context4, mergedCheckboxType), true), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context5 = "".concat(checkboxPrefixCls, "-")).call(_context5, mergedSize), !!children), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context6 = "".concat(checkboxPrefixCls, "-")).call(_context6, mergedCheckboxType, "-disabled"), mergedDisabled), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context7 = "".concat(checkboxPrefixCls, "-")).call(_context7, mergedCheckboxType, "-checked"), selected && !mergedDisabled), (0, _defineProperty2.default)(_classNames2, "checked", selected), _classNames2));
   var getRootClassName = isDefaultType() ? getDefaultClassName : getSquareClassName;
   var inputClassName = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(checkboxPrefixCls, "-input"), true));
   var checkedWrapperClassName = (0, _classnames.default)((_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context8 = "".concat(checkboxPrefixCls, "-")).call(_context8, mergedCheckboxType, "-no-child"), !children), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context9 = "".concat(checkboxPrefixCls, "-")).call(_context9, mergedCheckboxType, "-wrapper"), true), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context10 = "".concat(checkboxPrefixCls, "-")).call(_context10, mergedCheckboxType, "-wrapper-size"), !!children), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context11 = "".concat(checkboxPrefixCls, "-")).call(_context11, mergedCheckboxType, "-margin"), !!children), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context12 = "".concat(checkboxPrefixCls, "-")).call(_context12, mergedCheckboxType, "-checked"), selected), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context13 = "".concat(checkboxPrefixCls, "-")).call(_context13, mergedCheckboxType, "-indeterminate"), getIndeterminate()), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context14 = "".concat(checkboxPrefixCls, "-")).call(_context14, mergedCheckboxType, "-disabled"), mergedDisabled && !selected), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context15 = "".concat(checkboxPrefixCls, "-")).call(_context15, mergedCheckboxType, "-checked-disabled"), mergedDisabled && selected), _classNames4));
   var triangleClassName = (0, _classnames.default)((_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, (0, _concat.default)(_context16 = "".concat(checkboxPrefixCls, "-")).call(_context16, mergedCheckboxType, "-triangle"), !selected), (0, _defineProperty2.default)(_classNames5, (0, _concat.default)(_context17 = "".concat(checkboxPrefixCls, "-")).call(_context17, mergedCheckboxType, "-triangle-checked"), selected), (0, _defineProperty2.default)(_classNames5, (0, _concat.default)(_context18 = "".concat(checkboxPrefixCls, "-")).call(_context18, mergedCheckboxType, "-triangle-disabled"), mergedDisabled), _classNames5));
   var innerIconClassName = (0, _classnames.default)((0, _defineProperty2.default)({}, (0, _concat.default)(_context19 = "".concat(checkboxPrefixCls, "-")).call(_context19, mergedCheckboxType, "-inner"), true));
-  var handleChange = (0, _react.useCallback)(function (e) {
+  var handleChange = function handleChange(e) {
     onChange && onChange(e);
     (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onCheckboxGroupChange) && (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onCheckboxGroupChange(value, e.target.checked, e));
     if (!(checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.isControlled)) {
       setSelected(e.target.checked);
     }
-  }, [onChange]);
+  };
   (0, _react.useEffect)(function () {
     (0, _isBoolean.default)(checked) && checked !== selected && setSelected(checked);
   }, [checked, selected]);

package/lib/checkbox/style/index.css

@@ -141,6 +141,8 @@
   width: 100%;
   cursor: inherit;
   opacity: 0;
+  inset: 0;
+  z-index: 1;
 }
 .kd-checkbox-children {
   display: -webkit-inline-box;

package/lib/checkbox/style/index.less

@@ -32,6 +32,8 @@
     width: 100%;
     cursor: inherit;
     opacity: 0;
+    inset: 0;
+    z-index: 1;
   }
   &-children {
     display: inline-flex;

package/lib/checkbox/style/token.less

@@ -2,7 +2,7 @@
 
 @checkbox-prefix: '--@{kd-prefix}-c-checkbox';
 
-// colors
+// color
 @checkbox-color-theme: var(~'@{checkbox-prefix}-color-theme', @color-theme);
 @checkbox-font-color: var(~'@{checkbox-prefix}-color-text-primary', #212121);
 @checkbox-border-color: var(~'@{checkbox-prefix}-color-border', #d9d9d9);

package/lib/city-picker/city-picker.d.ts

@@ -1,24 +1,4 @@
 import React from 'react';
-import CityPanelItem from './city-panel-item';
-import CityPanel, { Common, Group, List as CityList } from './city-panel';
-import SearchPanel from './city-search-panel';
-export interface CityPickerProps {
-    cityList?: CityList;
-    className?: string;
-    commons?: Common;
-    disabled?: boolean;
-    groups?: Group;
-    inputClassName?: string;
-    inputStyle?: React.CSSProperties;
-    placeholder?: string;
-    showTitle?: boolean;
-    style?: React.CSSProperties;
-    title?: string;
-}
-export interface MenuType extends React.FC<CityPickerProps> {
-    PanelItem: typeof CityPanelItem;
-    Panel: typeof CityPanel;
-    SearchPanel: typeof SearchPanel;
-}
-declare const CityPicker: MenuType;
-export default CityPicker;
+import { CityPickerProps } from './interface';
+declare const Select: React.ForwardRefExoticComponent<CityPickerProps & React.RefAttributes<unknown>>;
+export default Select;