Merge branch 'main' of github.com:DouyinFE/semi-design

content/start/tailwind/index-en-US.md

@@ -48,13 +48,42 @@ No matter which side of Tailwind or the component library has higher priority, p
 ```shell
 yarn add -D @douyinfe/semi-webpack-plugin
 ```
-** 2. In the configuration file of the project (webpack.config.js, etc.), import the Semi webpack plug-in and enable cssLayer (users who use non-webpack builds, please refer to the principle to wrap the semi css layer by yourself) **
+** 2. In the configuration file in the project **
+
+- Webpack user: import Semi webpack plugin and enable cssLayer in the webpack.config.js
+
 ```js
-new SemiWebpackPlugin({
-     cssLayer:true,
-     /* ...options */
-});
+const SemiPlugin = require('@douyinfe/semi-webpack-plugin').default;
+
+module.exports = {
+    // ...
+    plugins: [
+        new SemiPlugin({
+            cssLayer:true,
+            /* ...options */
+        })
+    ]
+    // ...
+};
+
 ```
+- Rspack user:  import Semi webpack plugin and enable cssLayer in the rspack.config.js
+
+```js
+const {SemiRspackPlugin} = require('@douyinfe/semi-rspack-plugin');
+
+module.exports = {
+    // ...
+    plugins: [
+        new SemiRspackPlugin({
+            cssLayer:true
+        })
+    ]
+};
+```
+
+For users who use neither webpack or rspack build, please refer to the principle to layer-wrap semi's css yourself
+
 ** 3. Modify Tailwind entry configuration**
 
 The CSS of Tailwind entry is usually a file containing the following three lines
@@ -66,7 +95,7 @@ The CSS of Tailwind entry is usually a file containing the following three lines
 
 Modify it to (copy directly):
 ```css
-@layer tailwind-base,semi,components,utils;
+@layer tailwind-base,semi,tailwind-components,tailwind-utils;
 @layer tailwind-base{
      @tailwind base;
 }
@@ -93,7 +122,7 @@ After enabling the plugin, all Semi styles will be wrapped by `@layer {xxxx}`. I
 
 In addition, we configured the priority order of various Layers:
 ```css
-@layer tailwind-base,semi,components,utils;
+@layer tailwind-base,semi,tailwind-components,tailwind-utils;
 ```
 The meaning of the above CSS is that base (including Preflight) has the lowest priority, followed by Semi. The atomic class styles set by the user (padding-[xxx], etc.) have the highest priority, which can solve the above problems.
 
@@ -224,4 +253,4 @@ module.export = {
         }
     }
 }
-```
+```

content/start/tailwind/index.md

@@ -50,13 +50,43 @@ Semi 不依赖任何第三方样式库，没有安装 Tailwind 一样可以运
 ```shell
 yarn add -D @douyinfe/semi-webpack-plugin
 ```
-** 2. 在项目中的配置文件中（webpack.config.js 等）引入Semi webpack 插件并开启 cssLayer (使用非 webpack 构建的用户请参照原理自行对 semi 的 css 进行 layer 包裹) **
+** 2. 在项目中的配置文件中 **
+
+- webpack 用户: 在webpack.config.js 引入Semi webpack 插件并开启 cssLayer
+
+```js
+const SemiPlugin = require('@douyinfe/semi-webpack-plugin').default;
+
+module.exports = {
+    // ...
+    plugins: [
+        new SemiPlugin({
+            cssLayer:true,
+            /* ...options */
+        })
+    ]
+    // ...
+};
+
+```
+- rspack 用户: 在 rspack.config.js  引入Semi webpack 插件并开启 cssLayer
+
 ```js
-new SemiWebpackPlugin({
-    cssLayer:true,
-    /* ...options */
-});
+const {SemiRspackPlugin} = require('@douyinfe/semi-rspack-plugin');
+
+module.exports = {
+    // ...
+    plugins: [
+        new SemiRspackPlugin({
+            cssLayer:true
+        })
+    ]
+};
 ```
+
+使用非 webpack rspack 构建的用户请参照原理自行对 semi 的 css 进行 layer 包裹
+
+
 ** 3. 修改 Tailwind 入口配置**
 
 Tailwind 入口的 CSS 通常是包含了下面三行的文件
@@ -68,7 +98,7 @@ Tailwind 入口的 CSS 通常是包含了下面三行的文件
 
 将其修改为（直接复制）
 ```css
-@layer tailwind-base,semi,components,utils;
+@layer tailwind-base,semi,tailwind-components,tailwind-utils;
 @layer tailwind-base{
     @tailwind base;
 }
@@ -95,7 +125,7 @@ CSS Layer 要求浏览器版本高于 Chromium 99 <a target="_blank" href="https
 
 另外，我们配置了各种 Layer 的优先级顺序：
 ```css
-@layer tailwind-base,semi,components,utils;
+@layer tailwind-base,semi,tailwind-components,tailwind-utils;
 ```
 上述 CSS 的含义为， base （含 Preflight）优先级最低，Semi 次之，用户设置的原子类样式（padding-[xxx] 等）优先级最高，这样即可解决上面遇到的问题。
 
@@ -224,4 +254,4 @@ module.export = {
         }
     }
 }
-```
+```

package.json

@@ -227,7 +227,8 @@
     "resolutions": {
         "@types/react": "^18.0.5",
         "@types/react-dom": "^18.0.1",
-        "babel-plugin-lodash/@babel/types": "~7.20.0"
+        "babel-plugin-lodash/@babel/types": "~7.20.0",
+        "cheerio": "1.0.0-rc.12"
     },
     "lint-staged": {
         "src/**/*.{js,jsx,ts,tsx}": [
@@ -241,4 +242,4 @@
         ]
     },
     "license": "MIT"
-}
+}

packages/semi-foundation/cascader/foundation.ts

@@ -926,6 +926,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
             filteredKeys: new Set(filteredKeys),
         });
         this._adapter.notifyOnSearch(sugInput);
+        this._adapter.rePositionDropdown();
     }
 
     handleClear() {
@@ -1039,6 +1040,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         }
         const removedItem = keyEntities[key] ?? {};
         !removedItem?.data?.disable && this._handleMultipleSelect(removedItem);
+        this._adapter.rePositionDropdown();
     }
 
     handleTagRemoveInTrigger = (pos: string) => {