From 72d007a7c68f3528accda9190a5b73b007249a2a Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 15 Oct 2024 12:02:36 +0800
Subject: [PATCH] type: React.Key => SafeKey (#578)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: afc163 <afc163@gmail.com>
---
 .husky/pre-commit            |  1 +
 examples/form.tsx            | 19 +++--------
 package.json                 | 39 +++++++++++----------
 src/LegacyContext.tsx        | 18 +++++-----
 src/OptionList.tsx           | 14 ++++----
 src/TreeNode.tsx             |  4 +--
 src/TreeSelect.tsx           | 66 +++++++++++++++---------------------
 src/hooks/useCache.ts        |  6 ++--
 src/hooks/useCheckedKeys.ts  | 11 +++---
 src/hooks/useDataEntities.ts |  5 +--
 src/interface.ts             | 43 ++++++++++++-----------
 src/utils/legacyUtil.tsx     |  8 ++---
 src/utils/strategyUtil.ts    | 31 ++++++-----------
 src/utils/valueUtil.ts       |  5 ++-
 14 files changed, 123 insertions(+), 147 deletions(-)
 create mode 100644 .husky/pre-commit

diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100644
index 00000000..af5adff9
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1 @@
+lint-staged
\ No newline at end of file
diff --git a/examples/form.tsx b/examples/form.tsx
index 0ab0ebd7..17464cd5 100644
--- a/examples/form.tsx
+++ b/examples/form.tsx
@@ -21,7 +21,7 @@ const errorStyle = {
 };
 
 class TreeSelectInput extends Component<{
-  onChange?: Function;
+  onChange?: (value: string[]) => void;
   style: React.CSSProperties;
 }> {
   onChange = (value, ...args) => {
@@ -105,11 +105,7 @@ const Demo = () => {
             >
               {(control, { errors }) => (
                 <div>
-                  <TreeSelectInput
-                    {...tProps}
-                    {...control}
-                    style={{ width: 300 }}
-                  />
+                  <TreeSelectInput {...tProps} {...control} style={{ width: 300 }} />
 
                   <p style={errorStyle}>{errors.join(',')}</p>
                 </div>
@@ -122,18 +118,11 @@ const Demo = () => {
           <div>
             <Field
               name="select"
-              rules={[
-                { required: true, type: 'array', message: 'select 需要必填' },
-              ]}
+              rules={[{ required: true, type: 'array', message: 'select 需要必填' }]}
             >
               {(control, { errors }) => (
                 <div>
-                  <Select
-                    style={{ width: 200 }}
-                    {...control}
-                    allowClear
-                    mode="multiple"
-                  >
+                  <Select style={{ width: 200 }} {...control} allowClear mode="multiple">
                     <Option value="jack">jack</Option>
                     <Option value="lucy">lucy</Option>
                     <Option value="disabled" disabled>
diff --git a/package.json b/package.json
index 84723153..8816214b 100644
--- a/package.json
+++ b/package.json
@@ -34,49 +34,54 @@
     "compile": "father build",
     "lint": "eslint src/ examples/ --ext .tsx,.ts,.jsx,.js",
     "now-build": "npm run build",
-    "prepare": "dumi setup",
+    "prepare": "husky && dumi setup",
     "prepublishOnly": "npm run compile && np --yolo --no-publish --any-branch",
     "prettier": "prettier '{src,tests}/**/*.{ts,tsx}' 'tests/**/*.js' --write",
     "start": "dumi dev",
     "test": "rc-test"
   },
+  "lint-staged": {
+    "*": "prettier --write --ignore-unknown"
+  },
   "dependencies": {
     "@babel/runtime": "^7.25.7",
     "classnames": "2.x",
-    "rc-select": "~14.15.0",
-    "rc-tree": "~5.9.0",
+    "rc-select": "~14.15.2",
+    "rc-tree": "~5.10.0",
     "rc-util": "^5.43.0"
   },
   "devDependencies": {
-    "@rc-component/father-plugin": "^1.0.0",
-    "@rc-component/trigger": "^1.5.0",
-    "@testing-library/react": "^12.0.0",
-    "@types/jest": "^29.5.12",
+    "@rc-component/father-plugin": "^1.1.0",
+    "@rc-component/trigger": "^1.18.3",
+    "@testing-library/react": "^12.1.5",
+    "@types/jest": "^29.5.13",
     "@types/node": "^22.7.5",
-    "@types/react": "^16.8.19",
-    "@types/react-dom": "^18.2.19",
-    "@types/warning": "^3.0.0",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@types/warning": "^3.0.3",
     "@umijs/fabric": "^4.0.1",
+    "cheerio": "1.0.0-rc.12",
     "cross-env": "^7.0.3",
     "dumi": "^2.4.12",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.8",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "^8.56.0",
-    "eslint-plugin-jest": "^27.6.0",
+    "eslint": "^8.57.1",
+    "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-unicorn": "^56.0.0",
     "father": "^4.5.0",
     "glob": "^11.0.0",
+    "husky": "^9.1.6",
+    "lint-staged": "^15.2.10",
     "np": "^10.0.7",
     "prettier": "^3.3.3",
     "rc-dialog": "^9.6.0",
     "rc-field-form": "^2.4.0",
-    "rc-test": "^7.1.0",
+    "rc-test": "^7.1.1",
     "rc-virtual-list": "^3.14.8",
-    "react": "16.x",
-    "react-dom": "16.x",
-    "typescript": "^5.6.3",
-    "cheerio": "1.0.0-rc.12"
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "typescript": "^5.6.3"
   },
   "peerDependencies": {
     "react": "*",
diff --git a/src/LegacyContext.tsx b/src/LegacyContext.tsx
index 61347e6f..c90ada70 100644
--- a/src/LegacyContext.tsx
+++ b/src/LegacyContext.tsx
@@ -1,26 +1,26 @@
 import * as React from 'react';
 import type { DataEntity, IconType } from 'rc-tree/lib/interface';
-import type { Key, LegacyDataNode, RawValueType } from './interface';
+import type { LegacyDataNode, SafeKey } from './interface';
 
 interface LegacyContextProps {
   checkable: boolean | React.ReactNode;
-  checkedKeys: Key[];
-  halfCheckedKeys: Key[];
-  treeExpandedKeys: Key[];
-  treeDefaultExpandedKeys: Key[];
-  onTreeExpand: (keys: Key[]) => void;
+  checkedKeys: SafeKey[];
+  halfCheckedKeys: SafeKey[];
+  treeExpandedKeys: SafeKey[];
+  treeDefaultExpandedKeys: SafeKey[];
+  onTreeExpand: (keys: SafeKey[]) => void;
   treeDefaultExpandAll: boolean;
   treeIcon: IconType;
   showTreeIcon: boolean;
   switcherIcon: IconType;
   treeLine: boolean;
   treeNodeFilterProp: string;
-  treeLoadedKeys: Key[];
+  treeLoadedKeys: SafeKey[];
   treeMotion: any;
   loadData: (treeNode: LegacyDataNode) => Promise<unknown>;
-  onTreeLoad: (loadedKeys: Key[]) => void;
+  onTreeLoad: (loadedKeys: SafeKey[]) => void;
 
-  keyEntities: Record<RawValueType, DataEntity<any>>;
+  keyEntities: Record<SafeKey, DataEntity<any>>;
 }
 
 const LegacySelectContext = React.createContext<LegacyContextProps>(null);
diff --git a/src/OptionList.tsx b/src/OptionList.tsx
index 2d627c1d..4e87be23 100644
--- a/src/OptionList.tsx
+++ b/src/OptionList.tsx
@@ -8,7 +8,7 @@ import useMemo from 'rc-util/lib/hooks/useMemo';
 import * as React from 'react';
 import LegacyContext from './LegacyContext';
 import TreeSelectContext from './TreeSelectContext';
-import type { Key, TreeDataNode } from './interface';
+import type { SafeKey, TreeDataNode } from './interface';
 import { getAllKeys, isCheckDisabled } from './utils/valueUtil';
 
 const HIDDEN_STYLE = {
@@ -23,7 +23,7 @@ const HIDDEN_STYLE = {
 };
 
 interface TreeEventInfo {
-  node: { key: Key };
+  node: { key: SafeKey };
   selected?: boolean;
   checked?: boolean;
 }
@@ -77,7 +77,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
   );
 
   // ========================== Active ==========================
-  const [activeKey, setActiveKey] = React.useState<Key>(null);
+  const [activeKey, setActiveKey] = React.useState<SafeKey>(null);
   const activeEntity = keyEntities[activeKey];
 
   // ========================== Values ==========================
@@ -112,8 +112,8 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
   };
 
   // =========================== Keys ===========================
-  const [expandedKeys, setExpandedKeys] = React.useState<Key[]>(treeDefaultExpandedKeys);
-  const [searchExpandedKeys, setSearchExpandedKeys] = React.useState<Key[]>(null);
+  const [expandedKeys, setExpandedKeys] = React.useState<SafeKey[]>(treeDefaultExpandedKeys);
+  const [searchExpandedKeys, setSearchExpandedKeys] = React.useState<SafeKey[]>(null);
 
   const mergedExpandedKeys = React.useMemo(() => {
     if (treeExpandedKeys) {
@@ -129,7 +129,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchValue]);
 
-  const onInternalExpand = (keys: Key[]) => {
+  const onInternalExpand = (keys: SafeKey[]) => {
     setExpandedKeys(keys);
     setSearchExpandedKeys(keys);
 
@@ -143,7 +143,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     event.preventDefault();
   };
 
-  const onInternalSelect = (__: React.Key[], info: TreeEventInfo) => {
+  const onInternalSelect = (__: SafeKey[], info: TreeEventInfo) => {
     const { node } = info;
 
     if (checkable && isCheckDisabled(node)) {
diff --git a/src/TreeNode.tsx b/src/TreeNode.tsx
index 53f30341..3afbb596 100644
--- a/src/TreeNode.tsx
+++ b/src/TreeNode.tsx
@@ -1,9 +1,9 @@
 /* istanbul ignore file */
 import type * as React from 'react';
-import type { DataNode, Key } from './interface';
+import type { DataNode, SafeKey } from './interface';
 
 export interface TreeNodeProps extends Omit<DataNode, 'children'> {
-  value: Key;
+  value: SafeKey;
   children?: React.ReactNode;
 }
 
diff --git a/src/TreeSelect.tsx b/src/TreeSelect.tsx
index 0843e358..7551bd92 100644
--- a/src/TreeSelect.tsx
+++ b/src/TreeSelect.tsx
@@ -28,22 +28,9 @@ import type { CheckedStrategy } from './utils/strategyUtil';
 import { formatStrategyValues, SHOW_ALL, SHOW_CHILD, SHOW_PARENT } from './utils/strategyUtil';
 import { fillFieldNames, isNil, toArray } from './utils/valueUtil';
 import warningProps from './utils/warningPropsUtil';
+import type { LabeledValueType, SafeKey, SelectSource, DefaultValueType } from './interface';
 
-export type OnInternalSelect = (value: RawValueType, info: { selected: boolean }) => void;
-
-export type RawValueType = string | number;
-
-export interface LabeledValueType {
-  key?: React.Key;
-  value?: RawValueType;
-  label?: React.ReactNode;
-  /** Only works on `treeCheckStrictly` */
-  halfChecked?: boolean;
-}
-
-export type SelectSource = 'option' | 'selection' | 'input' | 'clear';
-
-export type DraftValueType = RawValueType | LabeledValueType | (RawValueType | LabeledValueType)[];
+export type OnInternalSelect = (value: SafeKey, info: { selected: boolean }) => void;
 
 /** @deprecated This is only used for legacy compatible. Not works on new code. */
 export interface LegacyCheckedNode {
@@ -55,7 +42,7 @@ export interface LegacyCheckedNode {
 export interface ChangeEventExtra {
   /** @deprecated Please save prev value by control logic instead */
   preValue: LabeledValueType[];
-  triggerValue: RawValueType;
+  triggerValue: SafeKey;
   /** @deprecated Use `onSelect` or `onDeselect` instead. */
   selected?: boolean;
   /** @deprecated Use `onSelect` or `onDeselect` instead. */
@@ -79,9 +66,9 @@ export interface InternalFieldName extends Omit<FieldNames, 'label'> {
 }
 
 export interface SimpleModeConfig {
-  id?: React.Key;
-  pId?: React.Key;
-  rootPId?: React.Key;
+  id?: SafeKey;
+  pId?: SafeKey;
+  rootPId?: SafeKey;
 }
 
 export interface BaseOptionType {
@@ -93,10 +80,10 @@ export interface BaseOptionType {
 }
 
 export interface DefaultOptionType extends BaseOptionType {
-  value?: RawValueType;
-  title?: React.ReactNode;
+  value?: SafeKey;
+  title?: React.ReactNode | ((data: DefaultOptionType) => React.ReactNode);
   label?: React.ReactNode;
-  key?: React.Key;
+  key?: SafeKey;
   children?: DefaultOptionType[];
 }
 
@@ -109,6 +96,7 @@ export interface TreeSelectProps<
 > extends Omit<BaseSelectPropsWithoutPrivate, 'mode'> {
   prefixCls?: string;
   id?: string;
+  children?: React.ReactNode;
 
   // >>> Value
   value?: ValueType;
@@ -145,14 +133,14 @@ export interface TreeSelectProps<
   treeData?: OptionType[];
   treeDataSimpleMode?: boolean | SimpleModeConfig;
   loadData?: (dataNode: LegacyDataNode) => Promise<unknown>;
-  treeLoadedKeys?: React.Key[];
-  onTreeLoad?: (loadedKeys: React.Key[]) => void;
+  treeLoadedKeys?: SafeKey[];
+  onTreeLoad?: (loadedKeys: SafeKey[]) => void;
 
   // >>> Expanded
   treeDefaultExpandAll?: boolean;
-  treeExpandedKeys?: React.Key[];
-  treeDefaultExpandedKeys?: React.Key[];
-  onTreeExpand?: (expandedKeys: React.Key[]) => void;
+  treeExpandedKeys?: SafeKey[];
+  treeDefaultExpandedKeys?: SafeKey[];
+  onTreeExpand?: (expandedKeys: SafeKey[]) => void;
   treeExpandAction?: ExpandAction;
 
   // >>> Options
@@ -171,7 +159,7 @@ export interface TreeSelectProps<
   treeMotion?: any;
 }
 
-function isRawValue(value: RawValueType | LabeledValueType): value is RawValueType {
+function isRawValue(value: SafeKey | LabeledValueType): value is SafeKey {
   return !value || typeof value !== 'object';
 }
 
@@ -295,7 +283,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
 
   /** Get `missingRawValues` which not exist in the tree yet */
   const splitRawValues = React.useCallback(
-    (newRawValues: RawValueType[]) => {
+    (newRawValues: SafeKey[]) => {
       const missingRawValues = [];
       const existRawValues = [];
 
@@ -343,7 +331,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
   );
 
   // ========================= Wrap Value =========================
-  const toLabeledValues = React.useCallback((draftValues: DraftValueType) => {
+  const toLabeledValues = React.useCallback((draftValues: DefaultValueType) => {
     const values = toArray(draftValues);
 
     return values.map(val => {
@@ -355,7 +343,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
   }, []);
 
   const convert2LabelValues = React.useCallback(
-    (draftValues: DraftValueType) => {
+    (draftValues: DefaultValueType) => {
       const values = toLabeledValues(draftValues);
 
       return values.map(item => {
@@ -368,7 +356,9 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
 
         // Fill missing label & status
         if (entity) {
-          rawLabel = treeTitleRender ? treeTitleRender(entity.node) : rawLabel ?? getLabel(entity.node);
+          rawLabel = treeTitleRender
+            ? treeTitleRender(entity.node)
+            : (rawLabel ?? getLabel(entity.node));
           rawDisabled = entity.node.disabled;
         } else if (rawLabel === undefined) {
           // We try to find in current `labelInValue` value
@@ -475,8 +465,8 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
   // =========================== Change ===========================
   const triggerChange = useRefFunc(
     (
-      newRawValues: RawValueType[],
-      extra: { triggerValue?: RawValueType; selected?: boolean },
+      newRawValues: SafeKey[],
+      extra: { triggerValue?: SafeKey; selected?: boolean },
       source: SelectSource,
     ) => {
       const labeledValues = convert2LabelValues(newRawValues);
@@ -489,7 +479,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
 
       // Generate rest parameters is costly, so only do it when necessary
       if (onChange) {
-        let eventValues: RawValueType[] = newRawValues;
+        let eventValues: SafeKey[] = newRawValues;
         if (treeConduction) {
           const formattedKeyList = formatStrategyValues(
             newRawValues,
@@ -508,7 +498,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
           selected: undefined,
         };
 
-        let returnRawValues: (LabeledValueType | RawValueType)[] = eventValues;
+        let returnRawValues: (LabeledValueType | SafeKey)[] = eventValues;
 
         // We need fill half check back
         if (treeCheckStrictly) {
@@ -563,7 +553,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
   // ========================== Options ===========================
   /** Trigger by option list */
   const onOptionSelect = React.useCallback(
-    (selectedKey: React.Key, { selected, source }: { selected: boolean; source: SelectSource }) => {
+    (selectedKey: SafeKey, { selected, source }: { selected: boolean; source: SelectSource }) => {
       const entity = keyEntities[selectedKey];
       const node = entity?.node;
       const selectedValue = node?.[mergedFieldNames.value] ?? selectedKey;
@@ -584,7 +574,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
           const keyList = existRawValues.map(val => valueEntities.get(val).key);
 
           // Conduction by selected or not
-          let checkedKeys: React.Key[];
+          let checkedKeys: SafeKey[];
           if (selected) {
             ({ checkedKeys } = conductCheck(keyList, true, keyEntities));
           } else {
diff --git a/src/hooks/useCache.ts b/src/hooks/useCache.ts
index db939e5f..ae730e28 100644
--- a/src/hooks/useCache.ts
+++ b/src/hooks/useCache.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { LabeledValueType, RawValueType } from '../TreeSelect';
+import type { LabeledValueType, SafeKey } from '../interface';
 
 /**
  * This function will try to call requestIdleCallback if available to save performance.
@@ -7,12 +7,12 @@ import type { LabeledValueType, RawValueType } from '../TreeSelect';
  */
 export default (values: LabeledValueType[]): [LabeledValueType[]] => {
   const cacheRef = React.useRef({
-    valueLabels: new Map<RawValueType, React.ReactNode>(),
+    valueLabels: new Map<SafeKey, React.ReactNode>(),
   });
 
   return React.useMemo(() => {
     const { valueLabels } = cacheRef.current;
-    const valueLabelsCache = new Map<RawValueType, React.ReactNode>();
+    const valueLabelsCache = new Map<SafeKey, React.ReactNode>();
 
     const filledValues = values.map(item => {
       const { value } = item;
diff --git a/src/hooks/useCheckedKeys.ts b/src/hooks/useCheckedKeys.ts
index de9a97d1..d5d1e938 100644
--- a/src/hooks/useCheckedKeys.ts
+++ b/src/hooks/useCheckedKeys.ts
@@ -1,17 +1,17 @@
 import * as React from 'react';
 import type { DataEntity } from 'rc-tree/lib/interface';
 import { conductCheck } from 'rc-tree/lib/utils/conductUtil';
-import type { LabeledValueType, RawValueType } from '../TreeSelect';
+import type { LabeledValueType, SafeKey } from '../interface';
 
 export default (
   rawLabeledValues: LabeledValueType[],
   rawHalfCheckedValues: LabeledValueType[],
   treeConduction: boolean,
-  keyEntities: Record<React.Key, DataEntity>,
+  keyEntities: Record<SafeKey, DataEntity>,
 ) =>
   React.useMemo(() => {
-    let checkedKeys: RawValueType[] = rawLabeledValues.map(({ value }) => value);
-    let halfCheckedKeys: RawValueType[] = rawHalfCheckedValues.map(({ value }) => value);
+    let checkedKeys: SafeKey[] = rawLabeledValues.map(({ value }) => value);
+    let halfCheckedKeys: SafeKey[] = rawHalfCheckedValues.map(({ value }) => value);
 
     const missingValues = checkedKeys.filter(key => !keyEntities[key]);
 
@@ -23,5 +23,6 @@ export default (
       // Checked keys should fill with missing keys which should de-duplicated
       Array.from(new Set([...missingValues, ...checkedKeys])),
       // Half checked keys
-      halfCheckedKeys];
+      halfCheckedKeys,
+    ];
   }, [rawLabeledValues, rawHalfCheckedValues, treeConduction, keyEntities]);
diff --git a/src/hooks/useDataEntities.ts b/src/hooks/useDataEntities.ts
index d015033c..8fe48bc8 100644
--- a/src/hooks/useDataEntities.ts
+++ b/src/hooks/useDataEntities.ts
@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { convertDataToEntities } from 'rc-tree/lib/utils/treeUtil';
 import type { DataEntity } from 'rc-tree/lib/interface';
-import type { FieldNames, RawValueType } from '../TreeSelect';
+import type { FieldNames } from '../TreeSelect';
+import type { SafeKey } from '../interface';
 import warning from 'rc-util/lib/warning';
 import { isNil } from '../utils/valueUtil';
 
 export default (treeData: any, fieldNames: FieldNames) =>
   React.useMemo<{
-    valueEntities: Map<RawValueType, DataEntity>;
+    valueEntities: Map<SafeKey, DataEntity>;
     keyEntities: Record<string, DataEntity>;
   }>(() => {
     const collection = convertDataToEntities(treeData, {
diff --git a/src/interface.ts b/src/interface.ts
index 9f491eda..be7a88c6 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -1,26 +1,25 @@
 import type * as React from 'react';
+import type { SafeKey } from 'rc-tree/lib/interface';
 
-export type SelectSource = 'option' | 'selection' | 'input' | 'clear';
-
-export type Key = string | number;
+export type { SafeKey };
 
-export type RawValueType = string | number;
+export type SelectSource = 'option' | 'selection' | 'input' | 'clear';
 
-export interface LabelValueType {
-  key?: Key;
-  value?: RawValueType;
+export interface LabeledValueType {
+  key?: SafeKey;
+  value?: SafeKey;
   label?: React.ReactNode;
   /** Only works on `treeCheckStrictly` */
   halfChecked?: boolean;
 }
 
-export type DefaultValueType = RawValueType | RawValueType[] | LabelValueType | LabelValueType[];
+export type DefaultValueType = SafeKey | LabeledValueType | (SafeKey | LabeledValueType)[];
 
 export interface DataNode {
-  value?: RawValueType;
-  title?: React.ReactNode;
+  value?: SafeKey;
+  title?: React.ReactNode | ((data: DataNode) => React.ReactNode);
   label?: React.ReactNode;
-  key?: Key;
+  key?: SafeKey;
   disabled?: boolean;
   disableCheckbox?: boolean;
   checkable?: boolean;
@@ -31,9 +30,9 @@ export interface DataNode {
 }
 
 export interface InternalDataEntity {
-  key: Key;
-  value: RawValueType;
-  title?: React.ReactNode;
+  key: SafeKey;
+  value: SafeKey;
+  title?: React.ReactNode | ((data: InternalDataEntity) => React.ReactNode);
   disableCheckbox?: boolean;
   disabled?: boolean;
   children?: InternalDataEntity[];
@@ -47,22 +46,22 @@ export interface LegacyDataNode extends DataNode {
 }
 
 export interface TreeDataNode extends DataNode {
-  key: Key;
+  key: SafeKey;
   children?: TreeDataNode[];
 }
 
 export interface FlattenDataNode {
   data: InternalDataEntity;
-  key: Key;
-  value: RawValueType;
+  key: SafeKey;
+  value: SafeKey;
   level: number;
   parent?: FlattenDataNode;
 }
 
 export interface SimpleModeConfig {
-  id?: Key;
-  pId?: Key;
-  rootPId?: Key;
+  id?: SafeKey;
+  pId?: SafeKey;
+  rootPId?: SafeKey;
 }
 
 /** @deprecated This is only used for legacy compatible. Not works on new code. */
@@ -74,8 +73,8 @@ export interface LegacyCheckedNode {
 
 export interface ChangeEventExtra {
   /** @deprecated Please save prev value by control logic instead */
-  preValue: LabelValueType[];
-  triggerValue: RawValueType;
+  preValue: LabeledValueType[];
+  triggerValue: SafeKey;
   /** @deprecated Use `onSelect` or `onDeselect` instead. */
   selected?: boolean;
   /** @deprecated Use `onSelect` or `onDeselect` instead. */
diff --git a/src/utils/legacyUtil.tsx b/src/utils/legacyUtil.tsx
index c300f5d8..62342f56 100644
--- a/src/utils/legacyUtil.tsx
+++ b/src/utils/legacyUtil.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import toArray from 'rc-util/lib/Children/toArray';
 import warning from 'rc-util/lib/warning';
-import type { DataNode, ChangeEventExtra, RawValueType, LegacyCheckedNode } from '../interface';
+import type { DataNode, ChangeEventExtra, SafeKey, LegacyCheckedNode } from '../interface';
 import TreeNode from '../TreeNode';
 import type { DefaultOptionType, FieldNames } from '../TreeSelect';
 
@@ -33,7 +33,7 @@ export function convertChildrenToData(nodes: React.ReactNode): DataNode[] {
     .filter(data => data);
 }
 
-export function fillLegacyProps(dataNode: DataNode): any {
+export function fillLegacyProps(dataNode: DataNode) {
   if (!dataNode) {
     return dataNode;
   }
@@ -57,8 +57,8 @@ export function fillLegacyProps(dataNode: DataNode): any {
 
 export function fillAdditionalInfo(
   extra: ChangeEventExtra,
-  triggerValue: RawValueType,
-  checkedValues: RawValueType[],
+  triggerValue: SafeKey,
+  checkedValues: SafeKey[],
   treeData: DefaultOptionType[],
   showPosition: boolean,
   fieldNames: FieldNames,
diff --git a/src/utils/strategyUtil.ts b/src/utils/strategyUtil.ts
index cd08960a..bf1b3523 100644
--- a/src/utils/strategyUtil.ts
+++ b/src/utils/strategyUtil.ts
@@ -1,7 +1,6 @@
-import type * as React from 'react';
 import type { InternalFieldName } from '../TreeSelect';
 import type { DataEntity } from 'rc-tree/lib/interface';
-import type { RawValueType, Key } from '../interface';
+import type { SafeKey } from '../interface';
 import { isCheckDisabled } from './valueUtil';
 
 export const SHOW_ALL = 'SHOW_ALL';
@@ -11,39 +10,31 @@ export const SHOW_CHILD = 'SHOW_CHILD';
 export type CheckedStrategy = typeof SHOW_ALL | typeof SHOW_PARENT | typeof SHOW_CHILD;
 
 export function formatStrategyValues(
-  values: React.Key[],
+  values: SafeKey[],
   strategy: CheckedStrategy,
-  keyEntities: Record<Key, DataEntity>,
+  keyEntities: Record<SafeKey, DataEntity>,
   fieldNames: InternalFieldName,
-): RawValueType[] {
+): SafeKey[] {
   const valueSet = new Set(values);
 
   if (strategy === SHOW_CHILD) {
     return values.filter(key => {
       const entity = keyEntities[key];
-
-      if (
-        entity &&
-        entity.children &&
-        entity.children.some(({ node }) => valueSet.has(node[fieldNames.value])) &&
-        entity.children.every(
+      return (
+        !entity ||
+        !entity.children ||
+        !entity.children.some(({ node }) => valueSet.has(node[fieldNames.value])) ||
+        !entity.children.every(
           ({ node }) => isCheckDisabled(node) || valueSet.has(node[fieldNames.value]),
         )
-      ) {
-        return false;
-      }
-      return true;
+      );
     });
   }
   if (strategy === SHOW_PARENT) {
     return values.filter(key => {
       const entity = keyEntities[key];
       const parent = entity ? entity.parent : null;
-
-      if (parent && !isCheckDisabled(parent.node) && valueSet.has(parent.key)) {
-        return false;
-      }
-      return true;
+      return !parent || isCheckDisabled(parent.node) || !valueSet.has(parent.key);
     });
   }
   return values;
diff --git a/src/utils/valueUtil.ts b/src/utils/valueUtil.ts
index 0063ce82..220a0108 100644
--- a/src/utils/valueUtil.ts
+++ b/src/utils/valueUtil.ts
@@ -1,5 +1,4 @@
-import type * as React from 'react';
-import type { DataNode, FieldNames } from '../interface';
+import type { DataNode, FieldNames, SafeKey } from '../interface';
 import type { DefaultOptionType, InternalFieldName } from '../TreeSelect';
 
 export function toArray<T>(value: T | T[]): T[] {
@@ -28,7 +27,7 @@ export function isCheckDisabled(node: DataNode) {
 
 /** Loop fetch all the keys exist in the tree */
 export function getAllKeys(treeData: DefaultOptionType[], fieldNames: InternalFieldName) {
-  const keys: React.Key[] = [];
+  const keys: SafeKey[] = [];
 
   function dig(list: DefaultOptionType[]) {
     list.forEach(item => {