feat: retire deprecated api and rename to popup

examples/visible.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 />

package.json

@@ -55,7 +55,7 @@
     "@types/classnames": "^2.2.6",
     "@types/enzyme": "^3.1.15",
     "@types/jest": "^29.4.0",
-    "@types/react": "^17.0.38",
+    "@types/react": "^18.0.38",
     "@types/react-dom": "^18.0.11",
     "@types/warning": "^3.0.0",
     "@umijs/fabric": "^4.0.0",

src/Cascader.tsx

@@ -24,7 +24,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;
@@ -67,9 +67,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;
@@ -95,18 +95,14 @@ 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;
+  /** @deprecated Use `popupMenuColumnStyle` instead */
   dropdownMenuColumnStyle?: React.CSSProperties;
+  popupMenuColumnStyle?: React.CSSProperties;
 
-  /** @deprecated Use `placement` instead */
-  popupPlacement?: Placement;
   placement?: Placement;
   builtinPlacements?: BuildInPlacements;
 
@@ -131,8 +127,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<
@@ -201,18 +197,16 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
 
     // Options
     options,
-    dropdownPrefixCls,
+    popupPrefixCls,
     loadData,
 
-    // Open
-    popupVisible,
     open,
 
     popupClassName,
     dropdownMenuColumnStyle,
+    popupMenuColumnStyle,
     popupStyle: customPopupStyle,
 
-    popupPlacement,
     placement,
 
     onPopupVisibleChange,
@@ -272,7 +266,7 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
     mergedSearchValue,
     mergedOptions,
     mergedFieldNames,
-    dropdownPrefixCls || prefixCls,
+    popupPrefixCls || prefixCls,
     searchConfig,
     changeOnSelect || multiple,
   );
@@ -365,19 +359,14 @@ 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);
   };
 
+  const mergedPopupMenuColumnStyle = popupMenuColumnStyle || dropdownMenuColumnStyle;
+
   // ========================== Warning ===========================
   if (process.env.NODE_ENV !== 'production') {
-    warningProps(props);
     warningNullOptions(mergedOptions, mergedFieldNames);
   }
 
@@ -392,12 +381,12 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
       onSelect: onInternalSelect,
       checkable,
       searchOptions,
-      dropdownPrefixCls,
+      popupPrefixCls,
       loadData,
       expandTrigger,
       expandIcon,
       loadingIcon,
-      dropdownMenuColumnStyle,
+      popupMenuColumnStyle: mergedPopupMenuColumnStyle,
       optionRender,
     }),
     [
@@ -409,12 +398,12 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
       onInternalSelect,
       checkable,
       searchOptions,
-      dropdownPrefixCls,
+      popupPrefixCls,
       loadData,
       expandTrigger,
       expandIcon,
       loadingIcon,
-      dropdownMenuColumnStyle,
+      mergedPopupMenuColumnStyle,
       optionRender,
     ],
   );
@@ -427,12 +416,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}>
@@ -460,9 +449,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/OptionList/Column.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/List.tsx

@@ -54,12 +54,12 @@ 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[]>([]);

src/Panel.tsx

@@ -153,12 +153,12 @@ export default function Panel<
       onSelect: onInternalSelect,
       checkable,
       searchOptions: [],
-      dropdownPrefixCls: undefined,
+      popupPrefixCls: undefined,
       loadData,
       expandTrigger,
       expandIcon,
       loadingIcon,
-      dropdownMenuColumnStyle: undefined,
+      popupMenuColumnStyle: undefined,
     }),
     [
       mergedOptions,

src/context.ts

@@ -15,12 +15,12 @@ export interface CascaderContextProps {
   onSelect: (valuePath: SingleValueType) => void;
   checkable?: boolean | React.ReactNode;
   searchOptions: DefaultOptionType[];
-  dropdownPrefixCls?: string;
+  popupPrefixCls?: string;
   loadData?: (selectOptions: DefaultOptionType[]) => void;
   expandTrigger?: 'hover' | 'click';
   expandIcon?: React.ReactNode;
   loadingIcon?: React.ReactNode;
-  dropdownMenuColumnStyle?: React.CSSProperties;
+  popupMenuColumnStyle?: React.CSSProperties;
   optionRender?: CascaderProps['optionRender'];
 }
 

src/utils/warningPropsUtil.ts

@@ -1,15 +1,5 @@
 import warning from '@rc-component/util/lib/warning';
-import type { DefaultOptionType, FieldNames, InternalCascaderProps } from '../Cascader';
-
-function warningProps(props: InternalCascaderProps) {
-  const { popupVisible, popupPlacement } = props;
-
-  warning(popupVisible === undefined, '`popupVisible` is deprecated. Please use `open` instead.');
-  warning(
-    popupPlacement === undefined,
-    '`popupPlacement` is deprecated. Please use `placement` instead.',
-  );
-}
+import type { DefaultOptionType, FieldNames } from '../Cascader';
 
 // value in Cascader options should not be null
 export function warningNullOptions(options: DefaultOptionType[], fieldNames: FieldNames) {
@@ -35,5 +25,3 @@ export function warningNullOptions(options: DefaultOptionType[], fieldNames: Fie
     recursiveOptions(options);
   }
 }
-
-export default warningProps;

tests/index.spec.tsx

@@ -514,28 +514,20 @@ describe('Cascader.Basic', () => {
     expect(wrapper.isOpen()).toBeTruthy();
   });
 
-  it('warning popupVisible & onPopupVisibleChange & popupClassName', () => {
+  it('warning onPopupVisibleChange & popupClassName', () => {
     resetWarned();
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
     const onPopupVisibleChange = jest.fn();
     const wrapper = mount(
       <Cascader
-        popupVisible
+        open
         onPopupVisibleChange={onPopupVisibleChange}
         popupClassName="legacy-cls"
-        popupPlacement="topRight"
+        placement="topRight"
       />,
     );
 
-    expect(errorSpy).toHaveBeenCalledWith(
-      'Warning: `popupVisible` is deprecated. Please use `open` instead.',
-    );
-    expect(errorSpy).toHaveBeenCalledWith(
-      'Warning: `popupPlacement` is deprecated. Please use `placement` instead.',
-    );
-
     expect(wrapper.exists('.legacy-cls')).toBeTruthy();
-    expect(wrapper.find('Trigger').prop('popupPlacement')).toEqual('topRight');
 
     errorSpy.mockRestore();
   });
@@ -604,7 +596,7 @@ describe('Cascader.Basic', () => {
       },
     ];
     const wrapper = mount(
-      <Cascader options={options} popupVisible>
+      <Cascader options={options} open>
         <input readOnly />
       </Cascader>,
     );
@@ -616,7 +608,7 @@ describe('Cascader.Basic', () => {
     const wrapper = mount(
       <Cascader
         options={addressOptions}
-        popupVisible
+        open
         popupRender={menus => (
           <div className="custom-dropdown">
             {menus}

tests/private.spec.tsx

@@ -21,7 +21,7 @@ describe('Cascader.Private', () => {
         ]}
         open
         prefixCls="bamboo"
-        dropdownPrefixCls="little"
+        popupPrefixCls="little"
       />,
     );