refactor: Semantic structure re-layout

assets/index.less

@@ -1,4 +1,5 @@
 @select-prefix: ~'rc-select';
+@import url('./patch.less');
 
 * {
   box-sizing: border-box;

assets/patch.less

@@ -0,0 +1,83 @@
+// This is used for semantic refactoring
+@import (reference) url('./index.less');
+
+.@{select-prefix}.@{select-prefix} {
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+  border: 1px solid blue;
+  position: relative;
+
+  // Content 部分自动占据剩余宽度
+  .@{select-prefix}-content {
+    flex: auto;
+    display: flex;
+    align-items: center;
+    /* Prevent content from wrapping */
+    min-width: 0; /* allow flex item to shrink */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+  }
+
+  .@{select-prefix}-input {
+    border: none;
+    background: transparent;
+  }
+
+  .@{select-prefix}-placeholder {
+    opacity: 0.5;
+
+    &::after {
+      content: '\00a0'; // nbsp placeholder
+      width: 0;
+      overflow: hidden;
+    }
+  }
+
+  .@{select-prefix}-content,
+  .@{select-prefix}-input,
+  .@{select-prefix}-placeholder {
+    padding: 0;
+    margin: 0;
+    line-height: 1.5;
+    font-size: 14px;
+    font-weight: normal;
+  }
+
+  // 其他部分禁止自动宽度，使用内容宽度
+  .@{select-prefix}-prefix,
+  .@{select-prefix}-suffix,
+  .@{select-prefix}-clear {
+    flex: none;
+  }
+
+  .@{select-prefix}-clear {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  // ============================= Single =============================
+  &-single {
+    .@{select-prefix}-input {
+      position: absolute;
+      inset: 0;
+    }
+  }
+
+  // ============================ Multiple ============================
+  &-multiple {
+    .@{select-prefix}-selection-item {
+      background: rgba(0, 0, 0, 0.1);
+      border-radius: 8px;
+      margin-right: 4px;
+    }
+
+    .@{select-prefix}-input {
+      width: calc(var(--select-input-width, 10) * 1px);
+      min-width: 4px;
+    }
+  }
+}

docs/examples/multiple-with-maxCount.tsx

@@ -14,6 +14,7 @@ const Test: React.FC = () => {
     <>
       <h2>Multiple with maxCount</h2>
       <Select
+        showSearch
         maxCount={4}
         mode="multiple"
         value={value}

docs/examples/multiple.tsx

@@ -99,7 +99,7 @@ class Test extends React.Component {
             style={{ width: 500 }}
             mode="multiple"
             loading={loading}
-            suffixIcon={suffixIcon}
+            suffix={suffixIcon}
             allowClear
             optionFilterProp="children"
             optionLabelProp="children"

jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  setupFilesAfterEnv: ['<rootDir>/tests/setup.ts'],
+  collectCoverage: true,
+  collectCoverageFrom: ['src/**/*.{ts,tsx,js,jsx}'],
+};