feat: support dropdownStyle and merge dropdownMenuColumnStyle to styles prop

src/Cascader.tsx

@@ -1,7 +1,7 @@
 import type { BuildInPlacements } from '@rc-component/trigger/lib/interface';
-import type { BaseSelectProps,BaseSelectPropsWithoutPrivate,BaseSelectRef } from 'rc-select';
+import type { BaseSelectProps,BaseSelectPropsWithoutPrivate,BaseSelectRef } from 'rc-select';
 import { BaseSelect } from 'rc-select';
-import type { DisplayValueType,Placement } from 'rc-select/lib/BaseSelect';
+import type { DisplayValueType,Placement } from 'rc-select/lib/BaseSelect';
 import useId from 'rc-select/lib/hooks/useId';
 import { conductCheck } from 'rc-tree/lib/utils/conductUtil';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
@@ -14,9 +14,9 @@ import useRefFunc from './hooks/useRefFunc';
 import useSearchConfig from './hooks/useSearchConfig';
 import useSearchOptions from './hooks/useSearchOptions';
 import OptionList from './OptionList';
-import { fillFieldNames,SHOW_CHILD,SHOW_PARENT,toPathKey,toPathKeys } from './utils/commonUtil';
-import { formatStrategyValues,toPathOptions } from './utils/treeUtil';
-import warningProps,{ warningNullOptions } from './utils/warningPropsUtil';
+import { fillFieldNames,SHOW_CHILD,SHOW_PARENT,toPathKey,toPathKeys } from './utils/commonUtil';
+import { formatStrategyValues,toPathOptions } from './utils/treeUtil';
+import warningProps,{ warningNullOptions } from './utils/warningPropsUtil';
 
 export interface ShowSearchType<OptionType extends BaseOptionType = DefaultOptionType> {
  filter?: (inputValue: string, options: OptionType[], fieldNames: FieldNames) => boolean;
@@ -57,7 +57,7 @@ export interface DefaultOptionType extends BaseOptionType {
  disableCheckbox?: boolean;
 }
 
-interface BaseCascaderProps<OptionType extends BaseOptionType = DefaultOptionType>
+export interface BaseCascaderProps<OptionType extends BaseOptionType = DefaultOptionType>
  extends Omit<
  BaseSelectPropsWithoutPrivate,
  'tokenSeparators' | 'labelInValue' | 'mode' | 'showSearch'
@@ -97,8 +97,15 @@ interface BaseCascaderProps<OptionType extends BaseOptionType = DefaultOptionTyp
  /** @deprecated Use `dropdownClassName` instead */
  popupClassName?: string;
  dropdownClassName?: string;
+ /** @deprecated Use `styles.popupColumn` instead */
  dropdownMenuColumnStyle?: React.CSSProperties;
 
+ // styles
+ styles?: {
+ popup?: React.CSSProperties;
+ popupColumn?: React.CSSProperties;
+ };
+
  /** @deprecated Use `placement` instead */
  popupPlacement?: Placement;
  placement?: Placement;
@@ -197,8 +204,11 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
  popupVisible,
  open,
 
+ styles,
+
  popupClassName,
  dropdownClassName,
+ dropdownStyle,
  dropdownMenuColumnStyle,
 
  popupPlacement,
@@ -448,7 +458,7 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
  expandTrigger,
  expandIcon,
  loadingIcon,
- dropdownMenuColumnStyle,
+ dropdownMenuColumnStyle: styles?.popupColumn ?? dropdownMenuColumnStyle,
  }),
  [
  mergedOptions,
@@ -465,6 +475,7 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
  expandIcon,
  loadingIcon,
  dropdownMenuColumnStyle,
+ styles?.popupColumn,
  ],
  );
 
@@ -473,14 +484,21 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
  // ==============================================================
  const emptyOptions = !(mergedSearchValue ? searchOptions : mergedOptions).length;
 
- const dropdownStyle: React.CSSProperties =
+ const mergedDropdownStyle: React.CSSProperties =
  // Search to match width
- (mergedSearchValue && searchConfig.matchInputWidth) ||
- // Empty keep the width
+ styles?.popup ??
+ dropdownStyle ??
+ (mergedSearchValue && searchConfig.matchInputWidth) ??
  emptyOptions
- ? {}
+ ? // Empty keep the width
+ {
+ ...styles?.popup,
+ ...dropdownStyle,
+ }
  : {
  minWidth: 'auto',
+ ...styles?.popup,
+ ...dropdownStyle,
  };
 
  return (
@@ -492,7 +510,7 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
  id={mergedId}
  prefixCls={prefixCls}
  dropdownMatchSelectWidth={dropdownMatchSelectWidth}
- dropdownStyle={dropdownStyle}
+ dropdownStyle={mergedDropdownStyle}
  // Value
  displayValues={displayValues}
  onDisplayValuesChange={onDisplayValuesChange}

src/utils/warningPropsUtil.ts

@@ -1,8 +1,8 @@
 import warning from 'rc-util/lib/warning';
-import type { DefaultOptionType, FieldNames, InternalCascaderProps } from '../Cascader';
+import type { DefaultOptionType, FieldNames, BaseCascaderProps } from '../Cascader';
 
-function warningProps(props: InternalCascaderProps) {
- const { onPopupVisibleChange, popupVisible, popupClassName, popupPlacement} = props;
+function warningProps(props: BaseCascaderProps) {
+ const { onPopupVisibleChange, popupVisible, popupClassName, popupPlacement,dropdownMenuColumnStyle} = props;
 
  warning(
  !onPopupVisibleChange,
@@ -17,6 +17,10 @@ function warningProps(props: InternalCascaderProps) {
  popupPlacement === undefined,
  '`popupPlacement` is deprecated. Please use `placement` instead.',
  );
+ warning(
+ dropdownMenuColumnStyle === undefined,
+ '`dropdownMenuColumnStyle` is deprecated. Please use `styles.popupColumn` instead.',
+ );
 }
 
 // value in Cascader options should not be null

tests/index.spec.tsx

@@ -4,7 +4,7 @@ import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import { resetWarned } from 'rc-util/lib/warning';
 import React from 'react';
 import Cascader from '../src';
-import { addressOptions,addressOptionsForUneven,optionsForActiveMenuItems } from './demoOptions';
+import { addressOptions,addressOptionsForUneven,optionsForActiveMenuItems } from './demoOptions';
 import { mount } from './enzyme';
 
 describe('Cascader.Basic', () => {
@@ -655,7 +655,8 @@ describe('Cascader.Basic', () => {
  changeOnSelect
  expandTrigger="hover"
  options={addressOptionsForUneven}
- onChange={onChange}>
+ onChange={onChange}
+ >
  <input readOnly />
  </Cascader>,
  );
@@ -684,7 +685,7 @@ describe('Cascader.Basic', () => {
  wrapper.update();
  expect(selectedValue).toBeFalsy();
  expect(wrapper.isOpen()).toBeTruthy();
- })
+ });
 
  describe('focus test', () => {
  let domSpy;
@@ -803,9 +804,8 @@ describe('Cascader.Basic', () => {
  expect(activeItems).toHaveLength(2);
  expect(activeItems.last().text()).toEqual('高雄');
  });
- })
+ });
  });
-
  });
 
  it('defaultValue not exist', () => {
@@ -1063,4 +1063,29 @@ describe('Cascader.Basic', () => {
  );
  errorSpy.mockReset();
  });
+
+ it('`dropdownMenuColumnStyle`in Cascader options should throw a warning', () => {
+ const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => null);
+ mount(<Cascader dropdownMenuColumnStyle={{}} options={[]} />);
+
+ expect(errorSpy).toHaveBeenCalledWith(
+ 'Warning: `dropdownMenuColumnStyle` is deprecated. Please use `styles.popupColumn` instead.',
+ );
+ errorSpy.mockReset();
+ });
+
+ it('`styles` api should work correctly', () => {
+ const wrapper = mount(
+ <Cascader
+ styles={{
+ popup: { backgroundColor: 'red' },
+ popupColumn: { backgroundColor: 'blue' },
+ }}
+ options={[]}
+ open
+ />,
+ );
+ expect(wrapper.find('.rc-cascader-dropdown').props().style.backgroundColor).toEqual('red');
+ expect(wrapper.find('.rc-cascader-menu-item').props().style.backgroundColor).toEqual('blue');
+ });
 });