fix(cascader): The Cascader component enforces isSelectIconRight to be false to prevent potential style conflicts that may arise when isSelectIconRight is set to true #3852

components/cascader-select/__tests__/index-spec.tsx

@@ -558,4 +558,12 @@ describe('CascaderSelect', () => {
         cy.get('.next-tag').invoke('text').should('eq', '西安');
         cy.get('.next-select-trigger-search input').should('have.text', '');
     });
+
+    it('should support The value of the menuProps attribute is passed by props, close #3852', () => {
+        cy.mount(
+            <CascaderSelect dataSource={ChinaArea} menuProps={{ itemClassName: 'test-list-cls' }} />
+        );
+        cy.get('.next-select').click();
+        cy.get('.next-menu-item').first().should('have.class', 'test-list-cls');
+    });
 });

components/cascader-select/cascader-select.tsx

@@ -27,11 +27,8 @@ const { bindCtx } = func;
 const { pickOthers } = obj;
 const { getStyle } = dom;
 
-type normalizeValueResult<T> = T extends NonNullable<T>
-    ? T extends unknown[]
-        ? NonNullable<T>
-        : [NonNullable<T>]
-    : [];
+type normalizeValueResult<T> =
+    T extends NonNullable<T> ? (T extends unknown[] ? NonNullable<T> : [NonNullable<T>]) : [];
 
 const normalizeValue = <T,>(value: T): normalizeValueResult<T> => {
     if (value) {

components/cascader-select/types.ts

@@ -244,8 +244,8 @@ export interface CascaderSelectProps
      */
     treeCheckable?: boolean;
     /**
-     * 透传到 Cascader 的属性对象
-     * @en props object passed to Cascader
+     * 透传到 Cascader 的属性对象；focusedKey、onItemFocus、className、style、focusable、isSelectIconRight传入无效，其中onBlur在filter下传入无效
+     * @en props object passed to Cascader：The parameters focusedKey, onItemFocus, className, style, focusable, and isSelectIconRight are invalid. Additionally, onBlur is invalid when passed under the filter
      */
     menuProps?: Omit<CascaderProps, 'onSelect' | 'onChange'>;
     /**

components/cascader/__docs__/index.en-us.md

@@ -1,20 +1,20 @@
 # Cascader
 
--   category: Components
--   family: DataDisplay
--   chinese: 级联
--   type: Baisc
+- category: Components
+- family: DataDisplay
+- chinese: 级联
+- type: Baisc
 
 ---
 
 ## Guide
 
 ### When To Use
 
--   Applies to the interactive way of selecting from a set of related data sets.
--   Cascading is an effective method of saving screen space due to the hidden subset directory.
--   The number of levels depends on the business needs, and it is not recommended to exceed 5 levels.
--   Cascading is used for form scenes. It can be used independently on the page or in combination with other elements, such as cascading options.
+- Applies to the interactive way of selecting from a set of related data sets.
+- Cascading is an effective method of saving screen space due to the hidden subset directory.
+- The number of levels depends on the business needs, and it is not recommended to exceed 5 levels.
+- Cascading is used for form scenes. It can be used independently on the page or in combination with other elements, such as cascading options.
 
 ## API
 
@@ -47,7 +47,7 @@
 ```typescript
 export type CascaderDataItem = {
     value: string;
-    label?: string;
+    label?: React.ReactNode;
     disabled?: boolean;
     checkboxDisabled?: boolean;
     children?: Array<CascaderDataItem>;
@@ -64,7 +64,7 @@ export type CascaderDataItemWithPosInfo = CascaderDataItem & {
      * 位置信息
      */
     pos: string;
-    _source: CascaderDataItem;
+    _source?: CascaderDataItem;
 };
 ```
 

components/cascader/__docs__/index.md

@@ -1,20 +1,20 @@
 # Cascader
 
--   category: Components
--   family: DataDisplay
--   chinese: 级联
--   type: 基本
+- category: Components
+- family: DataDisplay
+- chinese: 级联
+- type: 基本
 
 ---
 
 级联组件。
 
 ## 何时使用
 
--   适用于从一组具有关联性的数据集合中进行选择的交互方式。
--   由于子集目录隐藏，级联是一种节约屏幕空间的有效方法。
--   级别数因业务需求而定，建议不超过5级。
--   级联多用于表单场景，可以独立在页面中使用，也可以与其他元素组合使用，如级联选择。
+- 适用于从一组具有关联性的数据集合中进行选择的交互方式。
+- 由于子集目录隐藏，级联是一种节约屏幕空间的有效方法。
+- 级别数因业务需求而定，建议不超过5级。
+- 级联多用于表单场景，可以独立在页面中使用，也可以与其他元素组合使用，如级联选择。
 
 ## API
 
@@ -47,7 +47,7 @@
 ```typescript
 export type CascaderDataItem = {
     value: string;
-    label?: string;
+    label?: React.ReactNode;
     disabled?: boolean;
     checkboxDisabled?: boolean;
     children?: Array<CascaderDataItem>;
@@ -64,7 +64,7 @@ export type CascaderDataItemWithPosInfo = CascaderDataItem & {
      * 位置信息
      */
     pos: string;
-    _source: CascaderDataItem;
+    _source?: CascaderDataItem;
 };
 ```
 

components/cascader/__tests__/index-spec.tsx

@@ -8,6 +8,7 @@ import React, {
 import cloneDeep from 'lodash.clonedeep';
 import type { SinonSpy } from 'cypress/types/sinon';
 import Cascader, { type CascaderDataItem, type CascaderProps } from '../index';
+import ConfigProvider from '../../config-provider'
 import '../style';
 
 function freeze(dataSource: NonNullable<CascaderProps['dataSource']>) {
@@ -739,4 +740,63 @@ describe('Cascader', () => {
             'rgb(255, 255, 255)'
         );
     });
+
+    // Fix https://github.com/alibaba-fusion/next/issues/3852
+    it('The Cascader component enforces isSelectIconRight to be false to prevent potential style conflicts that may arise when isSelectIconRight is set to true', () => {
+        const dataSource = [
+            {
+                value: '2973',
+                label: '陕西',
+                children: [
+                    {
+                        value: '2974',
+                        label: '西安',
+                        children: [
+                            { value: '2975', label: '西安市' },
+                            { value: '2976', label: '高陵县' },
+                        ],
+                    },
+                    {
+                        value: '2980',
+                        label: '铜川',
+                        children: [
+                            { value: '2981', label: '铜川市' },
+                            { value: '2982', label: '宜君县' },
+                        ],
+                    },
+                ],
+            },
+            {
+                value: '3371',
+                label: '新疆',
+                children: [
+                    {
+                        value: '3430',
+                        label: '巴音郭楞蒙古自治州',
+                        children: [
+                            { value: '3431', label: '库尔勒市' },
+                            { value: '3432', label: '和静县' },
+                        ],
+                    },
+                ],
+            },
+        ];
+        cy.mount(
+            <ConfigProvider defaultPropsConfig={{
+                Menu: {
+                    isSelectIconRight: true
+                }
+            }}>
+                <Cascader
+                    dataSource={dataSource}
+                />
+            </ConfigProvider>
+        );
+        findItem(0, 0)
+            .click({ force: true })
+            .then(()=>{
+                findItem(0, 0).find('.next-menu-icon-selected').should('have.css', 'left', '20px')
+            })
+
+    });
 });

components/cascader/cascader.tsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { polyfill } from 'react-lifecycles-compat';
 import cloneDeep from 'lodash.clonedeep';
 import cx from 'classnames';
+import { omit as lodashOmit } from 'lodash';
 import Menu, { type ItemProps, type CheckboxItemProps } from '../menu';
 import { func, obj, dom } from '../util';
 import CascaderMenu from './menu';
@@ -25,9 +26,11 @@ import type {
     P2n,
     V2n,
 } from './types';
+import { Menu as ViewMenu } from '../menu/view/menu';
+import { ConfigProvider } from '..';
 
 const { bindCtx } = func;
-const { pickOthers } = obj;
+const { pickOthers, pickProps } = obj;
 const { addClass, removeClass, setStyle, getStyle } = dom;
 
 // 数据打平
@@ -109,6 +112,27 @@ const normalizeValue = <T,>(value: T): NormalizeValueReturns<T> => {
     return [] as NormalizeValueReturns<T>;
 };
 
+const getFormatMenuProps = (others: Record<string, unknown>) => {
+    const omitProps = [
+        'value',
+        'onChange',
+        'defaultValue',
+        'focusedKey',
+        'onItemFocus',
+        'focusable',
+        'onBlur',
+    ];
+    const targetProps = lodashOmit<Record<string, unknown>>(ViewMenu.propTypes, [
+        ...omitProps,
+        ...Object.keys(ConfigProvider.propTypes),
+    ]);
+    const targetMenuProps = pickProps(targetProps, others);
+    return {
+        ...targetMenuProps,
+        isSelectIconRight: false,
+    };
+};
+
 /**
  * Cascader
  */
@@ -631,11 +655,13 @@ class Cascader extends Component<CascaderProps, CascaderState> {
             listClassName,
             listStyle,
             itemRender,
+            ...others
         } = this.props;
         const { value, expandedValue, focusedValue } = this.state;
 
         return (
             <CascaderMenu
+                {...getFormatMenuProps(others)}
                 key={level}
                 prefix={prefix}
                 useVirtual={useVirtual}
@@ -771,10 +797,18 @@ class Cascader extends Component<CascaderProps, CascaderState> {
     }
 
     renderFilteredList() {
-        const { prefix, filteredListStyle, filteredPaths, focusable = false } = this.props;
+        const {
+            prefix,
+            filteredListStyle,
+            filteredPaths,
+            focusable = false,
+            ...others
+        } = this.props;
         const { focusedValue } = this.state;
+
         return (
             <Menu
+                {...getFormatMenuProps(others)}
                 // 如果不设置为false， CascaderSelect 开启 showSearch后，弹窗展开时，光标无法到input上去，也无法输入.
                 // TODO: set focusable=true in 2.x
                 focusable={focusable}
@@ -801,7 +835,10 @@ class Cascader extends Component<CascaderProps, CascaderState> {
             searchValue,
         } = this.props;
         // FIXME 这样做风险比较大，propTypes 如果不全，就会出现一些 div 接收不了的参数传导到 div
-        const others = pickOthers(Cascader.propTypes, this.props);
+        const others = pickOthers(
+            Object.assign({}, Cascader.propTypes, ViewMenu.propTypes),
+            this.props
+        );
         const { value } = this.state;
 
         if (rtl) {

components/cascader/types.ts

@@ -102,7 +102,20 @@ export interface CascaderMenuProps extends CommonProps, MenuProps {
  */
 export interface CascaderProps
     extends Omit<HTMLAttributesWeak, 'onChange' | 'onSelect' | 'defaultValue'>,
-        CommonProps {
+        CommonProps,
+        Omit<
+            MenuProps,
+            | 'value'
+            | 'onChange'
+            | 'onSelect'
+            | 'defaultValue'
+            | 'focusedKey'
+            | 'onItemFocus'
+            | 'focusable'
+            | 'isSelectIconRight'
+            | 'onBlur'
+            | keyof CommonProps
+        > {
     /**
      * 数据源
      * @en data source