fix(CascaderSelect): The value of the menuProps attribute is passed b…

…y props

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={{ listStyle: { width: '200px' } }} />
+        );
+        cy.get('.next-select').click();
+        cy.get('.next-cascader-menu-wrapper').should('have.css', 'width', '200px');
+    });
 });

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

@@ -631,11 +631,14 @@ class Cascader extends Component<CascaderProps, CascaderState> {
             listClassName,
             listStyle,
             itemRender,
+            ...others
         } = this.props;
         const { value, expandedValue, focusedValue } = this.state;
 
         return (
             <CascaderMenu
+                {...pickOthers(Object.keys(Cascader.propTypes), others)}
+                isSelectIconRight={false}
                 key={level}
                 prefix={prefix}
                 useVirtual={useVirtual}
@@ -771,10 +774,19 @@ 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
+                {...pickOthers(Object.keys(Cascader.propTypes), others)}
+                isSelectIconRight={false}
                 // 如果不设置为false， CascaderSelect 开启 showSearch后，弹窗展开时，光标无法到input上去，也无法输入.
                 // TODO: set focusable=true in 2.x
                 focusable={focusable}