chore: by pass rc-select semantic structure (#630)

* test: update test case

* test: more

* chore: update logic

* chore: test refactor

* chore: ts support

* chore: clean up

Author: zombieJ

package.json

@@ -43,7 +43,7 @@
     "test": "rc-test"
   },
   "dependencies": {
-    "@rc-component/select": "~1.2.0-alpha.2",
+    "@rc-component/select": "~1.2.0-alpha.3",
     "@rc-component/tree": "~1.0.0",
     "@rc-component/util": "^1.3.0",
     "clsx": "^2.1.1"

src/Cascader.tsx

@@ -152,7 +152,15 @@ export type GetOptionType<
   Multiple extends boolean | React.ReactNode = false,
 > = false extends Multiple ? OptionType[] : OptionType[][];
 
-type SemanticName = 'input' | 'prefix' | 'suffix';
+type SemanticName =
+  | 'input'
+  | 'prefix'
+  | 'suffix'
+  | 'placeholder'
+  | 'content'
+  | 'item'
+  | 'itemContent'
+  | 'itemRemove';
 type PopupSemantic = 'list' | 'listItem';
 export interface CascaderProps<
   OptionType extends DefaultOptionType = DefaultOptionType,
@@ -451,16 +459,8 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
         prefixCls={prefixCls}
         autoClearSearchValue={autoClearSearchValue}
         popupMatchSelectWidth={popupMatchSelectWidth}
-        classNames={{
-          prefix: classNames?.prefix,
-          suffix: classNames?.suffix,
-          input: classNames?.input,
-        }}
-        styles={{
-          prefix: styles?.prefix,
-          suffix: styles?.suffix,
-          input: styles?.input,
-        }}
+        classNames={classNames}
+        styles={styles}
         popupStyle={{
           ...popupStyle,
           ...customPopupStyle,

tests/__snapshots__/search.spec.tsx.snap

@@ -1,38 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Cascader.Search should correct render Cascader with same field name of label and value 1`] = `
-<div
-  class="rc-cascader rc-cascader-single rc-cascader-open rc-cascader-show-search"
->
+[
   <div
-    class="rc-cascader-selector"
+    class="rc-cascader rc-cascader-single rc-cascader-open rc-cascader-show-search"
   >
-    <span
-      class="rc-cascader-selection-wrap"
+    <div
+      class="rc-cascader-content"
     >
-      <span
-        class="rc-cascader-selection-search"
-      >
-        <input
-          aria-autocomplete="list"
-          aria-controls="test-id_list"
-          aria-expanded="true"
-          aria-haspopup="listbox"
-          aria-owns="test-id_list"
-          autocomplete="off"
-          class="rc-cascader-selection-search-input"
-          id="test-id"
-          role="combobox"
-          type="search"
-          value="z"
-        />
-      </span>
-      <span
-        class="rc-cascader-selection-placeholder"
+      <div
+        class="rc-cascader-placeholder"
         style="visibility: hidden;"
       />
-    </span>
-  </div>
+      <input
+        aria-autocomplete="list"
+        aria-controls="test-id_list"
+        aria-expanded="true"
+        aria-haspopup="listbox"
+        aria-owns="test-id_list"
+        autocomplete="off"
+        class="rc-cascader-input"
+        id="test-id"
+        role="combobox"
+        type="search"
+        value="z"
+      />
+    </div>
+  </div>,
   <div
     class="rc-cascader-dropdown rc-cascader-dropdown-placement-bottomLeft"
     style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -74,6 +68,6 @@ exports[`Cascader.Search should correct render Cascader with same field name of
         </ul>
       </div>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;

tests/fieldNames.spec.tsx

@@ -39,7 +39,7 @@ describe('Cascader.FieldNames', () => {
     );
 
     // Open
-    wrapper.find('.rc-cascader-selector').simulate('mousedown');
+    wrapper.find('.rc-cascader').first().simulate('mousedown');
     expect(wrapper.isOpen()).toBeTruthy();
 
     // Check values
@@ -76,7 +76,7 @@ describe('Cascader.FieldNames', () => {
       />,
     );
 
-    expect(wrapper.find('.rc-cascader-selection-item').text()).toEqual('Bamboo / Little / Toy');
+    expect(wrapper.find('.rc-cascader-content-value').text()).toEqual('Bamboo / Little / Toy');
 
     expect(wrapper.find('.rc-cascader-menu')).toHaveLength(3);
     expect(wrapper.find('.rc-cascader-menu-item-active')).toHaveLength(3);
@@ -97,7 +97,7 @@ describe('Cascader.FieldNames', () => {
       />,
     );
 
-    expect(wrapper.find('.rc-cascader-selection-item').text()).toEqual(
+    expect(wrapper.find('.rc-cascader-content-value').text()).toEqual(
       'Bamboo->Little->Toy & bamboo>>little>>toy',
     );
   });