feat: retire deprecated api and rename to popup (#558)

* refactor: update prop names and remove deprecated props

* chore: adjust logic

* chore: remove useless code

* refactor: rename to popup

* chore: change import path

* chore: remove useless test case

* chore: remove compatible logic

* revert

* revert

* refactor: update key logic

* fix: type error

Author: aojunhao123

docs/demo/dropdown-render.md

@@ -0,0 +1,8 @@
+---
+title: popup-render
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../../examples/popup-render.tsx"></code>

docs/demo/popup-render.md

@@ -74,7 +74,7 @@ const Demo = () => {
         <div>
           {menus}
           <hr />
-          Hey, DropdownRender, Long DropdownRender, Long DropdownRender
+          Hey, popupRender, Long popupRender, Long popupRender
         </div>
       )}
     >

examples/dropdown-render.tsx renamed to examples/popup-render.tsx

@@ -59,7 +59,7 @@ const addressOptions = [
 
 const Demo = () => {
   const [value, setValue] = useState<string[]>([]);
-  const [popupVisible, setPopupVisible] = useState(false);
+  const [open, setOpen] = useState(false);
 
   const getLabel = () => {
     return arrayTreeFilter(addressOptions, (o, level) => o.value === value[level])
@@ -69,10 +69,10 @@ const Demo = () => {
 
   return (
     <Cascader
-      popupVisible={popupVisible}
+      open={open}
       value={value}
       options={addressOptions}
-      onPopupVisibleChange={open => setPopupVisible(open)}
+      onPopupVisibleChange={open => setOpen(open)}
       onChange={value => setValue(value)}
     >
       <input value={getLabel()} readOnly />

examples/visible.tsx

@@ -33,6 +33,7 @@
     "build": "dumi build",
     "compile": "father build",
     "coverage": "father test --coverage",
+    "tsc": "bunx tsc --noEmit",
     "deploy": "UMI_ENV=gh npm run build && gh-pages -d dist",
     "lint": "eslint src/ examples/ --ext .tsx,.ts,.jsx,.jsx",
     "now-build": "npm run build",
@@ -43,9 +44,9 @@
   },
   "dependencies": {
     "@rc-component/select": "~1.0.0",
+    "@rc-component/tree": "~1.0.0",
     "@rc-component/util": "^1.2.1",
-    "classnames": "^2.3.1",
-    "rc-tree": "~5.13.1"
+    "classnames": "^2.3.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.2",
@@ -55,8 +56,8 @@
     "@types/classnames": "^2.2.6",
     "@types/enzyme": "^3.1.15",
     "@types/jest": "^29.4.0",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@types/warning": "^3.0.0",
     "@umijs/fabric": "^4.0.0",
     "array-tree-filter": "^3.0.2",

package.json

@@ -28,7 +28,7 @@ import {
   toRawValues,
 } from './utils/commonUtil';
 import { formatStrategyValues, toPathOptions } from './utils/treeUtil';
-import warningProps, { warningNullOptions } from './utils/warningPropsUtil';
+import { warningNullOptions } from './utils/warningPropsUtil';
 
 export interface BaseOptionType {
   disabled?: boolean;
@@ -71,9 +71,9 @@ interface BaseCascaderProps<
   OptionType extends DefaultOptionType = DefaultOptionType,
   ValueField extends keyof OptionType = keyof OptionType,
 > extends Omit<
-    BaseSelectPropsWithoutPrivate,
-    'tokenSeparators' | 'labelInValue' | 'mode' | 'showSearch'
-  > {
+  BaseSelectPropsWithoutPrivate,
+  'tokenSeparators' | 'labelInValue' | 'mode' | 'showSearch'
+> {
   // MISC
   id?: string;
   prefixCls?: string;
@@ -99,18 +99,12 @@ interface BaseCascaderProps<
   // Options
   options?: OptionType[];
   /** @private Internal usage. Do not use in your production. */
-  dropdownPrefixCls?: string;
+  popupPrefixCls?: string;
   loadData?: (selectOptions: OptionType[]) => void;
 
-  // Open
-  /** @deprecated Use `open` instead */
-  popupVisible?: boolean;
-
   popupClassName?: string;
-  dropdownMenuColumnStyle?: React.CSSProperties;
+  popupMenuColumnStyle?: React.CSSProperties;
 
-  /** @deprecated Use `placement` instead */
-  popupPlacement?: Placement;
   placement?: Placement;
   builtinPlacements?: BuildInPlacements;
 
@@ -135,8 +129,8 @@ export type ValueType<
   ValueField extends keyof OptionType = keyof OptionType,
 > = keyof OptionType extends ValueField
   ? unknown extends OptionType['value']
-    ? OptionType[ValueField]
-    : OptionType['value']
+  ? OptionType[ValueField]
+  : OptionType['value']
   : OptionType[ValueField];
 
 export type GetValueType<
@@ -167,6 +161,9 @@ export interface CascaderProps<
 }
 
 export type SingleValueType = (string | number)[];
+
+export type LegacyKey = string | number;
+
 export type InternalValueType = SingleValueType | SingleValueType[];
 
 export interface InternalFieldNames extends Required<FieldNames> {
@@ -210,18 +207,15 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
 
     // Options
     options,
-    dropdownPrefixCls,
+    popupPrefixCls,
     loadData,
 
-    // Open
-    popupVisible,
     open,
 
     popupClassName,
-    dropdownMenuColumnStyle,
+    popupMenuColumnStyle,
     popupStyle: customPopupStyle,
 
-    popupPlacement,
     placement,
 
     onPopupVisibleChange,
@@ -281,7 +275,7 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
     mergedSearchValue,
     mergedOptions,
     mergedFieldNames,
-    dropdownPrefixCls || prefixCls,
+    popupPrefixCls || prefixCls,
     searchConfig,
     changeOnSelect || multiple,
   );
@@ -374,18 +368,13 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
     onInternalSelect(valueCells);
   };
 
-  // ============================ Open ============================
-  const mergedOpen = open !== undefined ? open : popupVisible;
-
-  const mergedPlacement = placement || popupPlacement;
-
   const onInternalPopupVisibleChange = (nextVisible: boolean) => {
     onPopupVisibleChange?.(nextVisible);
   };
 
+
   // ========================== Warning ===========================
   if (process.env.NODE_ENV !== 'production') {
-    warningProps(props);
     warningNullOptions(mergedOptions, mergedFieldNames);
   }
 
@@ -400,12 +389,12 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
       onSelect: onInternalSelect,
       checkable,
       searchOptions,
-      dropdownPrefixCls,
+      popupPrefixCls,
       loadData,
       expandTrigger,
       expandIcon,
       loadingIcon,
-      dropdownMenuColumnStyle,
+      popupMenuColumnStyle,
       optionRender,
     }),
     [
@@ -417,12 +406,12 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
       onInternalSelect,
       checkable,
       searchOptions,
-      dropdownPrefixCls,
+      popupPrefixCls,
       loadData,
       expandTrigger,
       expandIcon,
       loadingIcon,
-      dropdownMenuColumnStyle,
+      popupMenuColumnStyle,
       optionRender,
     ],
   );
@@ -435,12 +424,12 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
   const popupStyle: React.CSSProperties =
     // Search to match width
     (mergedSearchValue && searchConfig.matchInputWidth) ||
-    // Empty keep the width
-    emptyOptions
+      // Empty keep the width
+      emptyOptions
       ? {}
       : {
-          minWidth: 'auto',
-        };
+        minWidth: 'auto',
+      };
 
   return (
     <CascaderContext.Provider value={cascaderContext}>
@@ -468,9 +457,9 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
         OptionList={OptionList}
         emptyOptions={emptyOptions}
         // Open
-        open={mergedOpen}
+        open={open}
         popupClassName={popupClassName}
-        placement={mergedPlacement}
+        placement={placement}
         onPopupVisibleChange={onInternalPopupVisibleChange}
         // Children
         getRawInputElement={() => children as React.ReactElement}

src/Cascader.tsx

@@ -50,7 +50,7 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
     expandTrigger,
     expandIcon,
     loadingIcon,
-    dropdownMenuColumnStyle,
+    popupMenuColumnStyle,
     optionRender,
   } = React.useContext(CascaderContext);
 
@@ -155,7 +155,7 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
                 [`${menuItemPrefixCls}-disabled`]: isOptionDisabled(disabled),
                 [`${menuItemPrefixCls}-loading`]: isLoading,
               })}
-              style={dropdownMenuColumnStyle}
+              style={popupMenuColumnStyle}
               role="menuitemcheckbox"
               title={title}
               aria-checked={checked}

src/OptionList/Column.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import type { useBaseProps } from '@rc-component/select';
 import type { RefOptionListProps } from '@rc-component/select/lib/OptionList';
 import * as React from 'react';
-import type { DefaultOptionType, SingleValueType } from '../Cascader';
+import type { DefaultOptionType, LegacyKey, SingleValueType } from '../Cascader';
 import CascaderContext from '../context';
 import {
   getFullPathKeys,
@@ -54,17 +54,17 @@ const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((
     changeOnSelect,
     onSelect,
     searchOptions,
-    dropdownPrefixCls,
+    popupPrefixCls,
     loadData,
     expandTrigger,
   } = React.useContext(CascaderContext);
 
-  const mergedPrefixCls = dropdownPrefixCls || prefixCls;
+  const mergedPrefixCls = popupPrefixCls || prefixCls;
 
   // ========================= loadData =========================
-  const [loadingKeys, setLoadingKeys] = React.useState<React.Key[]>([]);
+  const [loadingKeys, setLoadingKeys] = React.useState<LegacyKey[]>([]);
 
-  const internalLoadData = (valueCells: React.Key[]) => {
+  const internalLoadData = (valueCells: LegacyKey[]) => {
     // Do not load when search
     if (!loadData || searchValue) {
       return;
@@ -108,7 +108,7 @@ const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((
   const [activeValueCells, setActiveValueCells] = useActive(multiple, open);
 
   // =========================== Path ===========================
-  const onPathOpen = (nextValueCells: React.Key[]) => {
+  const onPathOpen = (nextValueCells: LegacyKey[]) => {
     setActiveValueCells(nextValueCells);
 
     // Trigger loadData

src/OptionList/List.tsx

@@ -1,20 +1,21 @@
 import * as React from 'react';
 import CascaderContext from '../context';
+import { LegacyKey } from '@/Cascader';
 
 /**
  * Control the active open options path.
  */
 const useActive = (
   multiple?: boolean,
   open?: boolean,
-): [React.Key[], (activeValueCells: React.Key[]) => void] => {
+): [LegacyKey[], (activeValueCells: LegacyKey[]) => void] => {
   const { values } = React.useContext(CascaderContext);
 
   const firstValueCells = values[0];
 
   // Record current dropdown active options
   // This also control the open status
-  const [activeValueCells, setActiveValueCells] = React.useState<React.Key[]>([]);
+  const [activeValueCells, setActiveValueCells] = React.useState<LegacyKey[]>([]);
 
   React.useEffect(
     () => {

src/OptionList/useActive.ts

@@ -1,16 +1,16 @@
 import type { RefOptionListProps } from '@rc-component/select/lib/OptionList';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import * as React from 'react';
-import type { DefaultOptionType, InternalFieldNames, SingleValueType } from '../Cascader';
+import type { DefaultOptionType, InternalFieldNames, LegacyKey, SingleValueType } from '../Cascader';
 import { SEARCH_MARK } from '../hooks/useSearchOptions';
 import { getFullPathKeys, toPathKey } from '../utils/commonUtil';
 
 export default (
   ref: React.Ref<RefOptionListProps>,
   options: DefaultOptionType[],
   fieldNames: InternalFieldNames,
-  activeValueCells: React.Key[],
-  setActiveValueCells: (activeValueCells: React.Key[]) => void,
+  activeValueCells: LegacyKey[],
+  setActiveValueCells: (activeValueCells: LegacyKey[]) => void,
   onKeyBoardSelect: (valueCells: SingleValueType, option: DefaultOptionType) => void,
   contextProps: {
     direction?: 'ltr' | 'rtl';
@@ -28,7 +28,7 @@ export default (
       let currentOptions = options;
 
       const mergedActiveIndexes: number[] = [];
-      const mergedActiveValueCells: React.Key[] = [];
+      const mergedActiveValueCells: LegacyKey[] = [];
 
       const len = activeValueCells.length;
 
@@ -64,7 +64,7 @@ export default (
     }, [activeValueCells, fieldNames, options]);
 
   // Update active value cells and scroll to target element
-  const internalSetActiveValueCells = (next: React.Key[]) => {
+  const internalSetActiveValueCells = (next: LegacyKey[]) => {
     setActiveValueCells(next);
   };