type: revert SafeKey and upgrade rc-tree (#586)

Author: afc163

package.json

@@ -47,7 +47,7 @@
     "@babel/runtime": "^7.25.7",
     "classnames": "2.x",
     "rc-select": "~14.15.2",
-    "rc-tree": "~5.10.0",
+    "rc-tree": "~5.10.1",
     "rc-util": "^5.43.0"
   },
   "devDependencies": {

src/LegacyContext.tsx

@@ -1,24 +1,24 @@
 import * as React from 'react';
 import type { DataEntity, IconType } from 'rc-tree/lib/interface';
-import type { LegacyDataNode, SafeKey } from './interface';
+import type { LegacyDataNode, SafeKey, Key } from './interface';
 
 interface LegacyContextProps {
   checkable: boolean | React.ReactNode;
-  checkedKeys: SafeKey[];
-  halfCheckedKeys: SafeKey[];
-  treeExpandedKeys: SafeKey[];
-  treeDefaultExpandedKeys: SafeKey[];
-  onTreeExpand: (keys: SafeKey[]) => void;
+  checkedKeys: Key[];
+  halfCheckedKeys: Key[];
+  treeExpandedKeys: Key[];
+  treeDefaultExpandedKeys: Key[];
+  onTreeExpand: (keys: Key[]) => void;
   treeDefaultExpandAll: boolean;
   treeIcon: IconType;
   showTreeIcon: boolean;
   switcherIcon: IconType;
   treeLine: boolean;
   treeNodeFilterProp: string;
-  treeLoadedKeys: SafeKey[];
+  treeLoadedKeys: Key[];
   treeMotion: any;
   loadData: (treeNode: LegacyDataNode) => Promise<unknown>;
-  onTreeLoad: (loadedKeys: SafeKey[]) => void;
+  onTreeLoad: (loadedKeys: Key[]) => void;
 
   keyEntities: Record<SafeKey, DataEntity<any>>;
 }

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 { SafeKey, TreeDataNode } from './interface';
+import type { Key, SafeKey } from './interface';
 import { getAllKeys, isCheckDisabled } from './utils/valueUtil';
 
 const HIDDEN_STYLE = {
@@ -23,7 +23,7 @@ const HIDDEN_STYLE = {
 };
 
 interface TreeEventInfo {
-  node: { key: SafeKey };
+  node: { key: Key };
   selected?: boolean;
   checked?: boolean;
 }
@@ -77,8 +77,8 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
   );
 
   // ========================== Active ==========================
-  const [activeKey, setActiveKey] = React.useState<SafeKey>(null);
-  const activeEntity = keyEntities[activeKey];
+  const [activeKey, setActiveKey] = React.useState<Key>(null);
+  const activeEntity = keyEntities[activeKey as SafeKey];
 
   // ========================== Values ==========================
   const mergedCheckedKeys = React.useMemo(() => {
@@ -112,8 +112,8 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
   };
 
   // =========================== Keys ===========================
-  const [expandedKeys, setExpandedKeys] = React.useState<SafeKey[]>(treeDefaultExpandedKeys);
-  const [searchExpandedKeys, setSearchExpandedKeys] = React.useState<SafeKey[]>(null);
+  const [expandedKeys, setExpandedKeys] = React.useState<Key[]>(treeDefaultExpandedKeys);
+  const [searchExpandedKeys, setSearchExpandedKeys] = React.useState<Key[]>(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: SafeKey[]) => {
+  const onInternalExpand = (keys: Key[]) => {
     setExpandedKeys(keys);
     setSearchExpandedKeys(keys);
 
@@ -143,7 +143,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     event.preventDefault();
   };
 
-  const onInternalSelect = (__: SafeKey[], info: TreeEventInfo) => {
+  const onInternalSelect = (__: Key[], info: TreeEventInfo) => {
     const { node } = info;
 
     if (checkable && isCheckDisabled(node)) {
@@ -227,7 +227,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
         ref={treeRef}
         focusable={false}
         prefixCls={`${prefixCls}-tree`}
-        treeData={memoTreeData as TreeDataNode[]}
+        treeData={memoTreeData}
         height={listHeight}
         itemHeight={listItemHeight}
         itemScrollOffset={listItemScrollOffset}

src/TreeNode.tsx

@@ -1,9 +1,9 @@
 /* istanbul ignore file */
 import type * as React from 'react';
-import type { DataNode, SafeKey } from './interface';
+import type { DataNode, Key } from './interface';
 
 export interface TreeNodeProps extends Omit<DataNode, 'children'> {
-  value: SafeKey;
+  value: Key;
   children?: React.ReactNode;
 }
 

src/TreeSelect.tsx

@@ -1,9 +1,4 @@
-import type {
-  BaseSelectProps,
-  BaseSelectPropsWithoutPrivate,
-  BaseSelectRef,
-  SelectProps,
-} from 'rc-select';
+import type { BaseSelectPropsWithoutPrivate, BaseSelectRef } from 'rc-select';
 import { BaseSelect } from 'rc-select';
 import useId from 'rc-select/lib/hooks/useId';
 import type { IconType } from 'rc-tree/lib/interface';
@@ -28,72 +23,21 @@ 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: SafeKey, info: { selected: boolean }) => void;
-
-/** @deprecated This is only used for legacy compatible. Not works on new code. */
-export interface LegacyCheckedNode {
-  pos: string;
-  node: React.ReactElement;
-  children?: LegacyCheckedNode[];
-}
-
-export interface ChangeEventExtra {
-  /** @deprecated Please save prev value by control logic instead */
-  preValue: LabeledValueType[];
-  triggerValue: SafeKey;
-  /** @deprecated Use `onSelect` or `onDeselect` instead. */
-  selected?: boolean;
-  /** @deprecated Use `onSelect` or `onDeselect` instead. */
-  checked?: boolean;
-
-  // Not sure if exist user still use this. We have to keep but not recommend user to use
-  /** @deprecated This prop not work as react node anymore. */
-  triggerNode: React.ReactElement;
-  /** @deprecated This prop not work as react node anymore. */
-  allCheckedNodes: LegacyCheckedNode[];
-}
-
-export interface FieldNames {
-  value?: string;
-  label?: string;
-  children?: string;
-}
-
-export interface InternalFieldName extends Omit<FieldNames, 'label'> {
-  _title: string[];
-}
-
-export interface SimpleModeConfig {
-  id?: SafeKey;
-  pId?: SafeKey;
-  rootPId?: SafeKey;
-}
-
-export interface BaseOptionType {
-  disabled?: boolean;
-  checkable?: boolean;
-  disableCheckbox?: boolean;
-  children?: BaseOptionType[];
-  [name: string]: any;
-}
-
-export interface DefaultOptionType extends BaseOptionType {
-  value?: SafeKey;
-  title?: React.ReactNode | ((data: DefaultOptionType) => React.ReactNode);
-  label?: React.ReactNode;
-  key?: SafeKey;
-  children?: DefaultOptionType[];
-}
-
-export interface LegacyDataNode extends DefaultOptionType {
-  props: any;
-}
-export interface TreeSelectProps<
-  ValueType = any,
-  OptionType extends BaseOptionType = DefaultOptionType,
-> extends Omit<BaseSelectPropsWithoutPrivate, 'mode'> {
+import type {
+  LabeledValueType,
+  SafeKey,
+  Key,
+  DataNode,
+  SimpleModeConfig,
+  ChangeEventExtra,
+  SelectSource,
+  DefaultValueType,
+  FieldNames,
+  LegacyDataNode,
+} from './interface';
+
+export interface TreeSelectProps<ValueType = any, OptionType extends DataNode = DataNode>
+  extends Omit<BaseSelectPropsWithoutPrivate, 'mode'> {
   prefixCls?: string;
   id?: string;
   children?: React.ReactNode;
@@ -109,12 +53,12 @@ export interface TreeSelectProps<
   inputValue?: string;
   onSearch?: (value: string) => void;
   autoClearSearchValue?: boolean;
-  filterTreeNode?: boolean | ((inputValue: string, treeNode: DefaultOptionType) => boolean);
+  filterTreeNode?: boolean | ((inputValue: string, treeNode: DataNode) => boolean);
   treeNodeFilterProp?: string;
 
   // >>> Select
-  onSelect?: SelectProps<ValueType, OptionType>['onSelect'];
-  onDeselect?: SelectProps<ValueType, OptionType>['onDeselect'];
+  onSelect?: (value: ValueType, option: OptionType) => void;
+  onDeselect?: (value: ValueType, option: OptionType) => void;
 
   // >>> Selector
   showCheckedStrategy?: CheckedStrategy;
@@ -255,7 +199,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
   }
 
   // ========================= FieldNames =========================
-  const mergedFieldNames: InternalFieldName = React.useMemo(
+  const mergedFieldNames: FieldNames = React.useMemo(
     () => fillFieldNames(fieldNames),
     /* eslint-disable react-hooks/exhaustive-deps */
     [JSON.stringify(fieldNames)],
@@ -268,7 +212,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
     postState: search => search || '',
   });
 
-  const onInternalSearch: BaseSelectProps['onSearch'] = searchText => {
+  const onInternalSearch = searchText => {
     setSearchValue(searchText);
     onSearch?.(searchText);
   };
@@ -310,7 +254,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
 
   // =========================== Label ============================
   const getLabel = React.useCallback(
-    (item: DefaultOptionType) => {
+    (item: DataNode) => {
       if (item) {
         if (treeNodeLabelProp) {
           return item[treeNodeLabelProp];
@@ -418,7 +362,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
   const displayValues = React.useMemo(() => {
     // Collect keys which need to show
     const displayKeys = formatStrategyValues(
-      rawCheckedValues,
+      rawCheckedValues as SafeKey[],
       mergedShowCheckedStrategy,
       keyEntities,
       mergedFieldNames,
@@ -574,7 +518,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: SafeKey[];
+          let checkedKeys: Key[];
           if (selected) {
             ({ checkedKeys } = conductCheck(keyList, true, keyEntities));
           } else {
@@ -588,7 +532,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
           // Fill back of keys
           newRawValues = [
             ...missingRawValues,
-            ...checkedKeys.map(key => keyEntities[key].node[mergedFieldNames.value]),
+            ...checkedKeys.map(key => keyEntities[key as SafeKey].node[mergedFieldNames.value]),
           ];
         }
         triggerChange(newRawValues, { selected, triggerValue: selectedValue }, source || 'option');
@@ -637,21 +581,19 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
   );
 
   // ====================== Display Change ========================
-  const onDisplayValuesChange = useRefFunc<BaseSelectProps['onDisplayValuesChange']>(
-    (newValues, info) => {
-      const newRawValues = newValues.map(item => item.value);
+  const onDisplayValuesChange = useRefFunc((newValues, info) => {
+    const newRawValues = newValues.map(item => item.value);
 
-      if (info.type === 'clear') {
-        triggerChange(newRawValues, {}, 'selection');
-        return;
-      }
+    if (info.type === 'clear') {
+      triggerChange(newRawValues, {}, 'selection');
+      return;
+    }
 
-      // TreeSelect only have multiple mode which means display change only has remove
-      if (info.values.length) {
-        onOptionSelect(info.values[0].value, { selected: false, source: 'selection' });
-      }
-    },
-  );
+    // TreeSelect only have multiple mode which means display change only has remove
+    if (info.values.length) {
+      onOptionSelect(info.values[0].value, { selected: false, source: 'selection' });
+    }
+  });
 
   // ========================== Context ===========================
   const treeSelectContext = React.useMemo<TreeSelectContextProps>(
@@ -760,7 +702,7 @@ if (process.env.NODE_ENV !== 'production') {
 
 const GenericTreeSelect = TreeSelect as unknown as (<
   ValueType = any,
-  OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType,
+  OptionType extends DataNode = DataNode,
 >(
   props: React.PropsWithChildren<TreeSelectProps<ValueType, OptionType>> & {
     ref?: React.Ref<BaseSelectRef>;

src/TreeSelectContext.ts

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import type { ExpandAction } from 'rc-tree/lib/Tree';
-import type { DefaultOptionType, InternalFieldName, OnInternalSelect } from './TreeSelect';
+import type { DataNode, FieldNames, Key } from './interface';
 
 export interface TreeSelectContextProps {
   virtual?: boolean;
   dropdownMatchSelectWidth?: boolean | number;
   listHeight: number;
   listItemHeight: number;
   listItemScrollOffset?: number;
-  treeData: DefaultOptionType[];
-  fieldNames: InternalFieldName;
-  onSelect: OnInternalSelect;
+  treeData: DataNode[];
+  fieldNames: FieldNames;
+  onSelect: (value: Key, info: { selected: boolean }) => void;
   treeExpandAction?: ExpandAction;
   treeTitleRender?: (node: any) => React.ReactNode;
   onPopupScroll?: React.UIEventHandler<HTMLDivElement>;

src/hooks/useCheckedKeys.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { DataEntity } from 'rc-tree/lib/interface';
 import { conductCheck } from 'rc-tree/lib/utils/conductUtil';
-import type { LabeledValueType, SafeKey } from '../interface';
+import type { LabeledValueType, SafeKey, Key } from '../interface';
 
 const useCheckedKeys = (
   rawLabeledValues: LabeledValueType[],
@@ -10,13 +10,12 @@ const useCheckedKeys = (
   keyEntities: Record<SafeKey, DataEntity>,
 ) => {
   return React.useMemo(() => {
-    const extractValues = (values: LabeledValueType[]): SafeKey[] =>
-      values.map(({ value }) => value);
+    const extractValues = (values: LabeledValueType[]): Key[] => values.map(({ value }) => value);
 
     const checkedKeys = extractValues(rawLabeledValues);
     const halfCheckedKeys = extractValues(rawHalfCheckedValues);
 
-    const missingValues = checkedKeys.filter(key => !keyEntities[key]);
+    const missingValues = checkedKeys.filter(key => !keyEntities[key as SafeKey]);
 
     let finalCheckedKeys = checkedKeys;
     let finalHalfCheckedKeys = halfCheckedKeys;

src/hooks/useDataEntities.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { convertDataToEntities } from 'rc-tree/lib/utils/treeUtil';
 import type { DataEntity } from 'rc-tree/lib/interface';
-import type { FieldNames } from '../TreeSelect';
-import type { SafeKey } from '../interface';
+import type { SafeKey, FieldNames } from '../interface';
 import warning from 'rc-util/lib/warning';
 import { isNil } from '../utils/valueUtil';