feat: Cascader.Panel support default expand cells

examples/panel.tsx

@@ -61,6 +61,8 @@ export default () => {
 
   const [value2, setValue2] = React.useState<string[][]>([]);
 
+  const [defaultActiveValueCells, setDefaultActiveValueCells] = React.useState<string[]>([]);
+
   return (
     <>
       <h1>Panel</h1>
@@ -80,6 +82,13 @@ export default () => {
         }}
       />
 
+      <button
+        onClick={() => {
+            setDefaultActiveValueCells(['bj', 'haidian']);
+        }}
+      >
+        Set defaultActiveValueCells
+      </button>
       <Cascader.Panel
         checkable
         value={value2}
@@ -88,6 +97,7 @@ export default () => {
           console.log('Change:', nextValue);
           setValue2(nextValue);
         }}
+        defaultActiveValueCells={defaultActiveValueCells}
       />
 
       <Cascader.Panel options={addressOptions} direction="rtl" />

src/Cascader.tsx

@@ -159,6 +159,7 @@ export interface CascaderProps<
     value: GetValueType<OptionType, ValueField, Multiple>,
     selectOptions: OptionType[],
   ) => void;
+  defaultActiveValueCells?: React.Key[];
 }
 
 export type SingleValueType = (string | number)[];
@@ -175,6 +176,7 @@ export type InternalCascaderProps = Omit<CascaderProps, 'onChange' | 'value' | '
     value: InternalValueType,
     selectOptions: BaseOptionType[] | BaseOptionType[][],
   ) => void;
+  defaultActiveValueCells?: React.Key[];
 };
 
 export type CascaderRef = Omit<BaseSelectRef, 'scrollTo'>;

src/OptionList/List.tsx

@@ -22,10 +22,10 @@ import useKeyboard from './useKeyboard';
 export type RawOptionListProps = Pick<
   ReturnType<typeof useBaseProps>,
   'prefixCls' | 'multiple' | 'searchValue' | 'toggleOpen' | 'notFoundContent' | 'direction' | 'open'
->;
+> & { defaultActiveValueCells?: React.Key[]; };
 
 const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((props, ref) => {
-  const { prefixCls, multiple, searchValue, toggleOpen, notFoundContent, direction, open } = props;
+  const { prefixCls, multiple, searchValue, toggleOpen, notFoundContent, direction, open, defaultActiveValueCells } = props;
 
   const containerRef = React.useRef<HTMLDivElement>(null);
   const rtl = direction === 'rtl';
@@ -99,6 +99,12 @@ const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((
     internalLoadData(nextValueCells);
   };
 
+  React.useEffect(() => {
+    if (defaultActiveValueCells && defaultActiveValueCells?.length > 0) {
+        setActiveValueCells(defaultActiveValueCells)
+    }
+  }, [defaultActiveValueCells]);
+
   const isSelectable = (option: DefaultOptionType) => {
     const { disabled } = option;
 

src/Panel.tsx

@@ -35,7 +35,8 @@ export type PickType =
   | 'className'
   | 'style'
   | 'direction'
-  | 'notFoundContent';
+  | 'notFoundContent'
+  | 'defaultActiveValueCells';
 
 export type PanelProps<
   OptionType extends DefaultOptionType = DefaultOptionType,
@@ -68,6 +69,7 @@ export default function Panel<
     loadingIcon,
     direction,
     notFoundContent = 'Not Found',
+    defaultActiveValueCells
   } = props as Pick<InternalCascaderProps, PickType>;
 
   // ======================== Multiple ========================
@@ -200,6 +202,7 @@ export default function Panel<
             toggleOpen={noop}
             open
             direction={direction}
+            defaultActiveValueCells={defaultActiveValueCells}
           />
         )}
       </div>

tests/Panel.spec.tsx

@@ -79,6 +79,19 @@ describe('Cascader.Panel', () => {
     expect(onChange).toHaveBeenCalledWith([['bamboo', 'little']], expect.anything());
   });
 
+  it('multiple with defaultActiveValueCells', () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      <Cascader.Panel
+        checkable
+        options={options}
+        onChange={onChange}
+        defaultActiveValueCells={['bamboo', 'little']}
+      />,
+    );
+    expect(container.querySelectorAll('.rc-cascader-menu')).toHaveLength(2);
+  });
+
   it('rtl', () => {
     const { container } = render(<Cascader.Panel options={options} direction="rtl" />);