@douyinfe/semi-ui 2.1.6-alpha.0 → 2.2.0-beta.0

package/_base/_story/a11y.scss

@@ -0,0 +1,49 @@
+body[data-page="a11y"] {
+    overflow: hidden;
+
+    #root {
+        padding: 0 !important;
+
+        .semi-slider {
+            padding: 0;
+        }
+
+        .rows-container > .semi-row {
+            margin-bottom: 24px;
+        }
+
+        .mt12 {
+            margin-top: 12px;
+        }
+
+        .mb12 {
+            margin-bottom: 12px;
+        }
+    }
+    
+    .grid {
+    
+        .semi-row,
+        .semi-row-flex {
+            text-align: center;
+    
+            .semi-col {
+                min-height: 30px;
+                line-height: 30px;
+                background: var(--semi-color-primary-light-default);
+                outline: 1px solid var(--semi-color-primary-light-active);
+            }
+        }
+    
+        &.grid-gutter {
+    
+            .semi-col {
+    
+                .gutter-box,
+                .col-content {
+                    background: var(--semi-color-primary-light-hover);
+                }
+            }
+        }
+    }
+}

package/_base/_story/index.stories.js

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { Button, Typography, Card, Tooltip, Tag, Avatar, Rating, Nav, Layout } from '../../index';
 import { IconHelpCircle, IconUser, IconStar, IconSetting } from '@douyinfe/semi-icons';
+import SemiA11y from './a11y';
 import './index.scss';
 
 export default {
@@ -8,7 +9,8 @@ export default {
 };
 
 export {
-  TestAlwaysDarkLight
+  TestAlwaysDarkLight,
+  SemiA11y
 };
 
 const TestAlwaysDarkLight = () => {

package/_utils/index.ts

@@ -83,7 +83,7 @@ export const getHighLightTextHTML = ({
     const markEle = option.highlightTag || 'mark';
     const highlightClassName = option.highlightClassName || '';
     const highlightStyle = option.highlightStyle || {};
-    return chunks.map((chunk: HighLightTextHTMLChunk) => {
+    return chunks.map((chunk: HighLightTextHTMLChunk, index: number) => {
         const { end, start, highlight } = chunk;
         const text = sourceString.substr(start, end - start);
         if (highlight) {
@@ -92,6 +92,7 @@ export const getHighLightTextHTML = ({
                 {
                     style: highlightStyle,
                     className: highlightClassName,
+                    key: text + index
                 },
                 text
             );

package/cascader/__test__/cascader.test.js

@@ -997,6 +997,149 @@ describe('Cascader', () => {
         ).toEqual('美国');
     });
 
+    it('multiple select enableLeafClick', () => {
+        const cascaderWithMultiple = render({
+            multiple: true,
+            enableLeafClick: true,
+            treeData: [
+                {
+                    label: '北美洲',
+                    value: 'Beimeizhou',
+                    key: 'beimeizhou',
+                    children: [
+                        {
+                            label: '美国',
+                            value: 'Meiguo',
+                            key: 'meiguo',
+                        },
+                        {
+                            label: '加拿大',
+                            value: 'Jianada',
+                            key: 'jianada',
+                        },
+                    ],
+                },
+                {
+                    label: '南美洲',
+                    value: 'Nanmeiguo',
+                    key: 'Nanmeiguo',
+                }
+            ]
+        })
+        const selectBox = cascaderWithMultiple.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).at(0);
+        selectBox.simulate('click');
+        // click checkbox
+        cascaderWithMultiple
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option`)
+            .at(1)
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option-label`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-checkbox`)
+            .at(0)
+            .simulate('click');
+        expect(cascaderWithMultiple.state().checkedKeys.size).toEqual(1);
+        // click option cancel checked
+        cascaderWithMultiple
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option`)
+            .at(1)
+            .simulate('click')
+        expect(cascaderWithMultiple.state().checkedKeys.size).toEqual(0);
+        // click option select
+        cascaderWithMultiple
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option`)
+            .at(0)
+            .simulate('click')
+        cascaderWithMultiple
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`)
+            .at(1)
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option`)
+            .at(0)
+            .simulate('click')
+        expect(cascaderWithMultiple.state().checkedKeys.size).toEqual(1);
+        const states = cascaderWithMultiple.state()
+        cascaderWithMultiple.unmount();
+    })
+
+    it('multiple select disable enableLeafClick', () => {
+        const cascaderWithMultiple = render({
+            multiple: true,
+            treeData: [
+                {
+                    label: '北美洲',
+                    value: 'Beimeizhou',
+                    key: 'beimeizhou',
+                    children: [
+                        {
+                            label: '美国',
+                            value: 'Meiguo',
+                            key: 'meiguo',
+                        },
+                        {
+                            label: '加拿大',
+                            value: 'Jianada',
+                            key: 'jianada',
+                        },
+                    ],
+                },
+                {
+                    label: '南美洲',
+                    value: 'Nanmeiguo',
+                    key: 'Nanmeiguo',
+                }
+            ]
+        })
+        const selectBox = cascaderWithMultiple.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).at(0);
+        selectBox.simulate('click');
+        // click checkbox
+        cascaderWithMultiple
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option`)
+            .at(1)
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option-label`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-checkbox`)
+            .at(0)
+            .simulate('click');
+        expect(cascaderWithMultiple.state().checkedKeys.size).toEqual(1);
+        // click option can't cancel checked
+        cascaderWithMultiple
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option`)
+            .at(1)
+            .simulate('click')
+        expect(cascaderWithMultiple.state().checkedKeys.size).toEqual(1);
+        cascaderWithMultiple.unmount();
+    })
+
+    it('separator', () => {
+        const cascader = render({
+            filterTreeNode: true,
+            defaultValue: ['Yazhou', 'Zhongguo', 'Beijing'],
+            separator: ' > ',
+            defaultOpen: true,
+        });
+        const input = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection input`);
+        expect(input.props().placeholder).toEqual('亚洲 > 中国 > 北京'); 
+        const event = { target: { value: '中国' } };
+        input.simulate('change', event);
+        expect(
+            cascader
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option-list li`)
+            .at(0)
+            .getDOMNode()
+            .textContent
+        ).toEqual('亚洲 > 中国 > 北京');
+        cascader.unmount();
+    });
+
     it('triggerRender', () => {
         const spyTriggerRender = sinon.spy(() => <span>123</span>);
         const cascaderAutoMerge = render({
@@ -1027,4 +1170,82 @@ describe('Cascader', () => {
         expect(args2.value).toEqual(new Set(['0','0-0','0-0-1','0-0-0']));
         cascaderNoAutoMerge.unmount();
     });
+
+    it('autoMergeValue', () => {
+        const cascader = render({
+            multiple: true,
+            autoMergeValue: false,
+            defaultValue: 'Yazhou',
+        });
+        const tags = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`)
+        expect(tags.length).toEqual(4);
+        cascader.unmount();
+
+        const cascaderAutoMerge = render({
+            multiple: true,
+            autoMergeValue: true,
+            defaultValue: 'Yazhou',
+        });
+        const tags2 = cascaderAutoMerge.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`)
+        expect(tags2.length).toEqual(1);
+        expect(
+            tags2
+                .find(`.${BASE_CLASS_PREFIX}-tag-content`)
+                .getDOMNode()
+                .textContent
+        ).toEqual('亚洲');
+        cascaderAutoMerge.unmount();
+    });
+
+    it('leafOnly', () => {
+        /* autoMergeValue and leafOnly are both false */
+        const cascader = render({
+            multiple: true,
+            autoMergeValue: false,
+            leafOnly: false,
+            defaultValue: 'Yazhou',
+        });
+        const tags = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`)
+        expect(tags.length).toEqual(4);
+        cascader.unmount();
+
+        /* autoMergeValue and leafOnly are both true */
+        const cascader2 = render({
+            multiple: true,
+            autoMergeValue: true,
+            leafOnly: true,
+            defaultValue: 'Yazhou',
+        });
+        const tags2 = cascader2.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`)
+        expect(tags2.length).toEqual(2);
+        cascader2.unmount();
+
+        /* autoMergeValue is false, leafOnly is true */
+        const cascader3 = render({
+            multiple: true,
+            autoMergeValue: false,
+            leafOnly: true,
+            defaultValue: 'Yazhou',
+        });
+        const tags3 = cascader3.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`)
+        expect(tags3.length).toEqual(2);
+        cascader3.unmount();
+
+        /* autoMergeValue is true, leafOnly is false */
+        const cascader4 = render({
+            multiple: true,
+            autoMergeValue: true,
+            leafOnly: false,
+            defaultValue: 'Yazhou',
+        });
+        const tags4 = cascader4.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`)
+        expect(tags4.length).toEqual(1);
+        expect(
+            tags4
+                .find(`.${BASE_CLASS_PREFIX}-tag-content`)
+                .getDOMNode()
+                .textContent
+        ).toEqual('亚洲');
+        cascader4.unmount();
+    });
 });

package/cascader/_story/cascader.stories.js

@@ -273,6 +273,25 @@ export const _Cascader = () => {
       />
       <br />
       <br />
+      <Cascader
+        style={{ width: 300 }}
+        treeData={treeData1}
+        placeholder="Multiple select"
+        multiple
+        motion={false}
+      />
+      <br />
+      <br />
+      <Cascader
+        style={{ width: 300 }}
+        treeData={treeData1}
+        placeholder="Multiple select enableLeafClick"
+        multiple
+        enableLeafClick
+        motion={false}
+      />
+      <br />
+      <br />
       <Cascader
         style={{ width: 300 }}
         treeData={[]}
@@ -374,6 +393,23 @@ export const Disabled = () => {
         filterTreeNode
         disabled
       />
+      <br /><br />
+      <Cascader
+        defaultValue={['yazhou', 'zhongguo']}
+        style={{ width: 300 }}
+        treeData={treeData2}
+        multiple
+        filterTreeNode
+        disabled
+      />
+      <br /><br />
+      <Cascader
+        defaultValue={['yazhou', 'zhongguo']}
+        style={{ width: 300 }}
+        treeData={treeData2}
+        multiple
+        disabled
+      />
     </div>
   );
 };
@@ -420,6 +456,20 @@ export const DisabledOption = () => {
         defaultValue={['yazhou', 'riben']}
         placeholder="Japan node is disabled"
       />
+      <br />
+      <br />
+      <div>multiple selection + filterTreeNode + defaultValue is disabled option</div>
+      <Cascader
+          filterTreeNode
+          multiple
+          style={{ width: 300 }}
+          treeData={treeData2}
+          defaultValue={[
+              ['yazhou', 'riben'],
+              ['beimeizhou', 'jianada']
+          ]}
+          placeholder="Japan node is disabled"
+      />
     </div>
   );
 };
@@ -1211,3 +1261,91 @@ export const OnChangeWithObject = () => (
     />
   </>
 );
+
+export const LeafOnly = () => {
+  const [value, setValue] = useState([])
+  return (
+      <div>
+          <div>autoMergeValue=false,leafOnly=false</div>
+          <Cascader
+              style={{ width: 300 }}
+              treeData={treeData4}
+              placeholder="请选择所在地区"
+              multiple
+              autoMergeValue={false}
+              leafOnly={false}
+              defaultValue={['zhejiang']}
+          />
+          <br />
+          <br />
+          <div>autoMergeValue=false,leafOnly=true, leafOnly生效</div>
+          <Cascader
+              style={{ width: 300 }}
+              treeData={treeData4}
+              placeholder="请选择所在地区"
+              multiple
+              autoMergeValue={false}
+              leafOnly={true}
+              defaultValue={['zhejiang']}
+          />
+          <br />
+          <br />
+          <div>受控，autoMergeValue=false,leafOnly=true, leafOnly生效</div>
+          <Cascader
+              style={{ width: 300 }}
+              treeData={treeData4}
+              placeholder="请选择所在地区"
+              multiple
+              onChange={v=>{
+                  console.log(v);
+                  setValue(v)
+              }}
+              autoMergeValue={false}
+              leafOnly={true}
+              value={value}
+          />
+          <br />
+          <br />
+          <div>受控 onChangeWithObject, autoMergeValue=false,leafOnly=true, leafOnly生效</div>
+          <Cascader
+              style={{ width: 300 }}
+              treeData={treeData4}
+              placeholder="请选择所在地区"
+              multiple
+              onChange={v=>{
+                  console.log(v);
+                  setValue(v)
+              }}
+              onChangeWithObject
+              autoMergeValue={false}
+              leafOnly={true}
+              value={value}
+          />
+          <br />
+          <br />
+          <div>autoMergeValue=true,leafOnly=false</div>
+          <Cascader
+              style={{ width: 300 }}
+              treeData={treeData4}
+              placeholder="请选择所在地区"
+              multiple
+              autoMergeValue={true}
+              leafOnly={false}
+              defaultValue={['zhejiang']}
+          />
+          <br />
+          <br />
+          <br />
+          <div>autoMergeValue=true,leafOnly=true</div>
+          <Cascader
+              style={{ width: 300 }}
+              treeData={treeData4}
+              placeholder="请选择所在地区"
+              multiple
+              autoMergeValue={true}
+              leafOnly={true}
+              defaultValue={['zhejiang']}
+          />
+      </div>
+  );
+}

package/cascader/index.tsx

@@ -14,10 +14,10 @@ import CascaderFoundation, {
 } from '@douyinfe/semi-foundation/cascader/foundation';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/cascader/constants';
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/popover/constants';
-import { isEqual, isString, isEmpty, isFunction, isNumber, noop } from 'lodash';
+import { isEqual, isString, isEmpty, isFunction, isNumber, noop, flatten } from 'lodash';
 import '@douyinfe/semi-foundation/cascader/cascader.scss';
 import { IconClear, IconChevronDown } from '@douyinfe/semi-icons';
-import { findKeysForValues, convertDataToEntities } from '@douyinfe/semi-foundation/cascader/util';
+import { findKeysForValues, convertDataToEntities, calcMergeType } from '@douyinfe/semi-foundation/cascader/util';
 import { calcCheckedKeys, normalizeKeyList, calcDisabledKeys } from '@douyinfe/semi-foundation/tree/treeUtil';
 import ConfigContext from '../configProvider/context';
 import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
@@ -143,15 +143,19 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         showRestTagsPopover: PropTypes.bool,
         restTagsPopoverProps: PropTypes.object,
         max: PropTypes.number,
+        separator: PropTypes.string,
         onExceed: PropTypes.func,
         onClear: PropTypes.func,
         loadData: PropTypes.func,
         onLoad: PropTypes.func,
         loadedKeys: PropTypes.array,
         disableStrictly: PropTypes.bool,
+        leafOnly: PropTypes.bool,
+        enableLeafClick: PropTypes.bool,
     };
 
     static defaultProps = {
+        leafOnly: false,
         arrowIcon: <IconChevronDown />,
         stopPropagation: true,
         motion: true,
@@ -168,6 +172,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         filterLeafOnly: true,
         showRestTagsPopover: false,
         restTagsPopoverProps: {},
+        separator: ' / ',
         size: 'default' as const,
         treeNodeFilterProp: 'label' as const,
         displayProp: 'label' as const,
@@ -177,6 +182,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         onClear: noop,
         onDropdownVisibleChange: noop,
         onListScroll: noop,
+        enableLeafClick: false,
     };
 
     options: any;
@@ -185,6 +191,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     triggerRef: React.RefObject<HTMLDivElement>;
     optionsRef: React.RefObject<any>;
     clickOutsideHandler: any;
+    mergeType: string;
 
     constructor(props: CascaderProps) {
         super(props);
@@ -215,8 +222,8 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             checkedKeys: new Set([]),
             /* Key of half checked node, when multiple */
             halfCheckedKeys: new Set([]),
-            /* Auto merged checkedKeys, when multiple */
-            mergedCheckedKeys: new Set([]),
+            /* Auto merged checkedKeys or leaf checkedKeys, when multiple */
+            resolvedCheckedKeys: new Set([]),
             /* Keys of loaded item */
             loadedKeys: new Set(),
             /* Keys of loading item */
@@ -226,6 +233,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         };
         this.options = {};
         this.isEmpty = false;
+        this.mergeType = calcMergeType(props.autoMergeValue, props.leafOnly);
         this.inputRef = React.createRef();
         this.triggerRef = React.createRef();
         this.optionsRef = React.createRef();
@@ -346,7 +354,9 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             multiple,
             value,
             defaultValue,
-            onChangeWithObject
+            onChangeWithObject,
+            leafOnly,
+            autoMergeValue,
         } = props;
         const { prevProps } = prevState;
         let keyEntities = prevState.keyEntities || {};
@@ -402,21 +412,18 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                     });
                     realKeys = formatKeys;
                 }
-                let checkedKeys = new Set([]);
-                let halfCheckedKeys = new Set([]);
-                realKeys.forEach(v => {
-                    const calRes = calcCheckedKeys(v, keyEntities);
-                    checkedKeys = new Set([...checkedKeys, ...calRes.checkedKeys]);
-                    halfCheckedKeys = new Set([...halfCheckedKeys, ...calRes.halfCheckedKeys]);
-                });
+                const calRes = calcCheckedKeys(flatten(realKeys as string[]), keyEntities);
+                const checkedKeys = new Set(calRes.checkedKeys);
+                const halfCheckedKeys = new Set(calRes.halfCheckedKeys);
                 // disableStrictly
                 if (props.disableStrictly) {
                     newState.disabledKeys = calcDisabledKeys(keyEntities);
                 }
+                const isLeafOnlyMerge = calcMergeType(autoMergeValue, leafOnly) === strings.LEAF_ONLY_MERGE_TYPE;
                 newState.prevProps = props;
                 newState.checkedKeys = checkedKeys;
                 newState.halfCheckedKeys = halfCheckedKeys;
-                newState.mergedCheckedKeys = new Set(normalizeKeyList(checkedKeys, keyEntities));
+                newState.resolvedCheckedKeys = new Set(normalizeKeyList(checkedKeys, keyEntities, isLeafOnlyMerge));
             }
         }
         return newState;
@@ -493,7 +500,6 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         const {
             size,
             disabled,
-            autoMergeValue,
             placeholder,
             maxTagCount,
             showRestTagsPopover,
@@ -503,11 +509,13 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             inputValue,
             checkedKeys,
             keyEntities,
-            mergedCheckedKeys
+            resolvedCheckedKeys
         } = this.state;
         const tagInputcls = cls(`${prefixcls}-tagInput-wrapper`);
         const tagValue: Array<Array<string>> = [];
-        const realKeys = autoMergeValue ? mergedCheckedKeys : checkedKeys;
+        const realKeys = this.mergeType === strings.NONE_MERGE_TYPE
+            ? checkedKeys
+            : resolvedCheckedKeys;
         [...realKeys].forEach(checkedKey => {
             if (!isEmpty(keyEntities[checkedKey])) {
                 tagValue.push(keyEntities[checkedKey].valuePath);
@@ -592,6 +600,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             dropdownStyle,
             loadData,
             emptyContent,
+            separator,
             topSlot,
             bottomSlot,
             showNext,
@@ -606,6 +615,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                 <Item
                     activeKeys={activeKeys}
                     selectedKeys={selectedKeys}
+                    separator={separator}
                     loadedKeys={loadedKeys}
                     loadingKeys={loadingKeys}
                     onItemClick={this.handleItemClick}
@@ -658,8 +668,10 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
 
     renderMultipleTags = () => {
         const { autoMergeValue, maxTagCount } = this.props;
-        const { checkedKeys, mergedCheckedKeys } = this.state;
-        const realKeys = autoMergeValue ? mergedCheckedKeys : checkedKeys;
+        const { checkedKeys, resolvedCheckedKeys } = this.state;
+        const realKeys = this.mergeType === strings.NONE_MERGE_TYPE
+            ? checkedKeys
+            : resolvedCheckedKeys;
         const displayTag: Array<ReactNode> = [];
         const hiddenTag: Array<ReactNode> = [];
         [...realKeys].forEach((checkedKey, idx) => {
@@ -729,11 +741,15 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     };
 
     renderCustomTrigger = () => {
-        const { disabled, triggerRender, multiple, autoMergeValue } = this.props;
-        const { selectedKeys, inputValue, inputPlaceHolder, mergedCheckedKeys, checkedKeys } = this.state;
+        const { disabled, triggerRender, multiple } = this.props;
+        const { selectedKeys, inputValue, inputPlaceHolder, resolvedCheckedKeys, checkedKeys } = this.state;
         let realValue;
         if (multiple) {
-            realValue = autoMergeValue ? mergedCheckedKeys : checkedKeys;
+            if (this.mergeType === strings.NONE_MERGE_TYPE) {
+                realValue = checkedKeys;
+            } else {
+                realValue = resolvedCheckedKeys;
+            }
         } else {
             realValue = [...selectedKeys][0];
         }

package/cascader/item.tsx

@@ -54,6 +54,7 @@ export interface CascaderItemProps {
     emptyContent: React.ReactNode;
     loadData: (selectOptions: CascaderData[]) => Promise<void>;
     data: Array<Data | Entity>;
+    separator: string;
     multiple: boolean;
     checkedKeys: Set<string>;
     halfCheckedKeys: Set<string>;
@@ -75,6 +76,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
         checkedKeys: PropTypes.object,
         halfCheckedKeys: PropTypes.object,
         onItemCheckboxClick: PropTypes.func,
+        separator: PropTypes.string,
         keyword: PropTypes.string
     };
 
@@ -142,7 +144,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
 
     highlight = (searchText: React.ReactNode[]) => {
         const content: React.ReactNode[] = [];
-        const { keyword } = this.props;
+        const { keyword, separator } = this.props;
         searchText.forEach((item, idx) => {
             if (typeof item === 'string' && includes(item, keyword)) {
                 item.split(keyword).forEach((node, index) => {
@@ -159,7 +161,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
                 content.push(item);
             }
             if (idx !== searchText.length - 1) {
-                content.push(' / ');
+                content.push(separator);
             }
         });
         return content;