feat: dropdownPrefixCls

assets/list.less

@@ -5,12 +5,12 @@
     min-height: auto;
   }
 
-  &-holder {
-    display: flex;
-    flex-wrap: nowrap;
-  }
-
   &-menu {
+    &-holder {
+      display: flex;
+      flex-wrap: nowrap;
+    }
+
     flex: none;
     margin: 0;
     padding: 0;

src/Cascader.tsx

@@ -97,6 +97,8 @@ interface BaseCascaderProps
   expandTrigger?: 'hover' | 'click';
 
   dropdownMenuColumnStyle?: React.CSSProperties;
+  /** @private Internal usage. Do not use in your production. */
+  dropdownPrefixCls?: string;
   loadData?: (selectOptions: DataNode[]) => void;
 
   expandIcon?: React.ReactNode;
@@ -153,6 +155,7 @@ const Cascader = React.forwardRef((props: CascaderProps, ref: React.Ref<Cascader
 
     loadData,
     dropdownMenuColumnStyle,
+    dropdownPrefixCls,
 
     ...restProps
   } = props;
@@ -292,6 +295,7 @@ const Cascader = React.forwardRef((props: CascaderProps, ref: React.Ref<Cascader
       loadData,
       dropdownMenuColumnStyle,
       search: searchConfig,
+      dropdownPrefixCls,
     }),
     [
       changeOnSelect,
@@ -302,6 +306,7 @@ const Cascader = React.forwardRef((props: CascaderProps, ref: React.Ref<Cascader
       loadData,
       dropdownMenuColumnStyle,
       searchConfig,
+      dropdownPrefixCls,
     ],
   );
 

src/OptionList/index.tsx

@@ -13,7 +13,7 @@ import { isLeaf, restoreCompatibleValue } from '../util';
 import CascaderContext from '../context';
 import useSearchResult from '../hooks/useSearchResult';
 
-type OptionListProps = SelectOptionListProps<OptionDataNode[]>;
+type OptionListProps = SelectOptionListProps<OptionDataNode[]> & { prefixCls: string };
 export type FlattenOptions = OptionListProps['flattenOptions'];
 
 const RefOptionList = React.forwardRef<RefOptionListProps, OptionListProps>((props, ref) => {
@@ -33,9 +33,11 @@ const RefOptionList = React.forwardRef<RefOptionListProps, OptionListProps>((pro
   const rtl = direction === 'rtl';
 
   const { checkedKeys, halfCheckedKeys } = React.useContext(SelectContext);
-  const { changeOnSelect, expandTrigger, fieldNames, loadData, search } =
+  const { changeOnSelect, expandTrigger, fieldNames, loadData, search, dropdownPrefixCls } =
     React.useContext(CascaderContext);
 
+  const mergedPrefixCls = dropdownPrefixCls || prefixCls;
+
   // ========================= loadData =========================
   const [loadingKeys, setLoadingKeys] = React.useState([]);
 
@@ -122,6 +124,7 @@ const RefOptionList = React.forwardRef<RefOptionListProps, OptionListProps>((pro
   // ========================== Search ==========================
   const searchOptions = useSearchResult({
     ...props,
+    prefixCls: mergedPrefixCls,
     fieldNames,
     changeOnSelect,
     searchConfig: search,
@@ -310,6 +313,7 @@ const RefOptionList = React.forwardRef<RefOptionListProps, OptionListProps>((pro
       key={index}
       index={index}
       {...columnProps}
+      prefixCls={mergedPrefixCls}
       options={col.options}
       openKey={openPath[index]}
     />
@@ -319,8 +323,8 @@ const RefOptionList = React.forwardRef<RefOptionListProps, OptionListProps>((pro
   return (
     <>
       <div
-        className={classNames(`${prefixCls}-holder`, {
-          [`${prefixCls}-rtl`]: rtl,
+        className={classNames(`${mergedPrefixCls}-menu-holder`, {
+          [`${mergedPrefixCls}-rtl`]: rtl,
         })}
       >
         {columnNodes}

src/context.ts

@@ -2,22 +2,23 @@ import * as React from 'react';
 import type { CascaderProps } from './Cascader';
 import type { ShowSearchType } from './interface';
 
-const CascaderContext = React.createContext<
-  Required<
-    Pick<
-      CascaderProps,
-      | 'changeOnSelect'
-      | 'expandTrigger'
-      | 'fieldNames'
-      | 'expandIcon'
-      | 'loadingIcon'
-      | 'loadData'
-      | 'dropdownMenuColumnStyle'
-    > & {
-      search: ShowSearchType;
-    }
+type ContextProps = Required<
+  Pick<
+    CascaderProps,
+    | 'changeOnSelect'
+    | 'expandTrigger'
+    | 'fieldNames'
+    | 'expandIcon'
+    | 'loadingIcon'
+    | 'loadData'
+    | 'dropdownMenuColumnStyle'
   >
->({
+> & {
+  search: ShowSearchType;
+  dropdownPrefixCls?: string;
+};
+
+const CascaderContext = React.createContext<ContextProps>({
   changeOnSelect: false,
   expandTrigger: 'click',
   fieldNames: null,

tests/__snapshots__/index.spec.js.snap

@@ -66,7 +66,7 @@ exports[`Cascader.Basic should render custom dropdown correctly 1`] = `
       class="custom-dropdown"
     >
       <div
-        class="rc-cascader-holder"
+        class="rc-cascader-menu-holder"
       >
         <ul
           class="rc-cascader-menu"

tests/__snapshots__/private.spec.tsx.snap

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cascader.Private dropdownPrefixCls 1`] = `
+<div
+  class="bamboo bamboo-single bamboo-show-arrow bamboo-open"
+>
+  <div
+    class="bamboo-selector"
+  >
+    <span
+      class="bamboo-selection-search"
+    >
+      <input
+        aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+        aria-autocomplete="list"
+        aria-controls="rc_select_TEST_OR_SSR_list"
+        aria-expanded="true"
+        aria-haspopup="listbox"
+        aria-owns="rc_select_TEST_OR_SSR_list"
+        autocomplete="off"
+        class="bamboo-selection-search-input"
+        id="rc_select_TEST_OR_SSR"
+        readonly=""
+        role="combobox"
+        style="opacity: 0;"
+        type="search"
+        unselectable="on"
+        value=""
+      />
+    </span>
+    <span
+      class="bamboo-selection-item"
+      title="Light / Toy"
+    >
+      Light / Toy
+    </span>
+  </div>
+  <div>
+    <div
+      class="bamboo-dropdown"
+      style="opacity: 0; pointer-events: none; min-width: auto;"
+    >
+      <div>
+        <div
+          class="little-menu-holder"
+        >
+          <ul
+            class="little-menu"
+            role="menu"
+          >
+            <li
+              aria-checked="false"
+              class="little-menu-item little-menu-item-active"
+              role="menuitemcheckbox"
+              title="Light"
+            >
+              <div
+                class="little-menu-item-content"
+              >
+                Light
+              </div>
+              <div
+                class="little-menu-item-expand-icon"
+              >
+                &gt;
+              </div>
+            </li>
+          </ul>
+          <ul
+            class="little-menu"
+            role="menu"
+          >
+            <li
+              aria-checked="true"
+              class="little-menu-item little-menu-item-active"
+              role="menuitemcheckbox"
+              title="Toy"
+            >
+              <div
+                class="little-menu-item-content"
+              >
+                Toy
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    aria-hidden="true"
+    class="bamboo-arrow"
+    style="user-select: none;"
+    unselectable="on"
+  >
+    <span
+      class="bamboo-arrow-icon"
+    />
+  </span>
+</div>
+`;

tests/private.spec.tsx

@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/consistent-type-imports */
+
+import React from 'react';
+import { mount } from './enzyme';
+import Cascader from '../src';
+
+describe('Cascader.Private', () => {
+  it('dropdownPrefixCls', () => {
+    const wrapper = mount(
+      <Cascader
+        defaultValue={['light', 'toy']}
+        options={[
+          {
+            label: 'Light',
+            value: 'light',
+            children: [
+              {
+                label: 'Toy',
+                value: 'toy',
+              },
+            ],
+          },
+        ]}
+        open
+        prefixCls="bamboo"
+        dropdownPrefixCls="little"
+      />,
+    );
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+});