docs(Popup): update popperOptions usage (#3200)

* docs(popup): update popperOptions usage

* ci(popup): update test snap

* docs(popup): update docs

src/popup/_example/popper-options.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { Button, Input, Popup, Space } from 'tdesign-react';
+
+export default function PopperOptions() {
+  const [offsetX, setOffsetX] = useState('0');
+  const [offsetY, setOffsetY] = useState('0');
+
+  return (
+    <Space direction="vertical">
+      <Space>
+        <Space align="center">
+          <span>请输入横向偏移量:</span>
+          <Input
+            placeholder="请输入横向偏移量"
+            value={offsetX}
+            onChange={(v) => setOffsetX(v)}
+            style={{ width: '130px', display: 'inline-block' }}
+          />
+        </Space>
+        <Space align="center">
+          <span>请输入纵向偏移量:</span>
+          <Input
+            placeholder="请输入纵向偏移量"
+            value={offsetY}
+            onChange={(v) => setOffsetY(v)}
+            style={{ width: '130px', display: 'inline-block' }}
+          />
+        </Space>
+      </Space>
+      <Space>
+        <Popup
+          trigger="hover"
+          showArrow
+          content="这是一个弹出框"
+          popperOptions={{
+            modifiers: [
+              {
+                name: 'offset',
+                options: {
+                  offset: [Number(offsetX), Number(offsetY)],
+                },
+              },
+            ],
+          }}
+        >
+          <Button>Hover me</Button>
+        </Popup>
+      </Space>
+    </Space>
+  );
+}

src/popup/popup.en-US.md

@@ -9,6 +9,20 @@ Support functional calls `PopupPlugin` 。
 
 {{ plugin }}
 
+### Dynamic Adaptation
+
+When the trigger or popup display content changes dynamically, the position is adjusted adaptively
+
+{{ dynamic }}
+
+### popperOptions usage
+
+https://popper.js.org/docs/v2/constructors/#types
+
+- `popperOptions` = `Options`
+
+{{ popper-options }}
+
 ## FAQ
 
 ### How to solve the problem of position offset when nesting `Popup` components?

src/popup/popup.md

@@ -15,6 +15,14 @@
 
 {{ dynamic }}
 
+### popperOptions 使用
+
+https://popper.js.org/docs/v2/constructors/#types
+
+- `popperOptions` = `Options`
+
+{{ popper-options }}
+
 ## FAQ
 
 ### `Popup` 组件，嵌套使用可能出现位置偏移的情况，如何解决？

test/snap/__snapshots__/csr.test.jsx.snap

@@ -67312,6 +67312,122 @@ exports[`csr snapshot test > csr test src/popup/_example/plugin.tsx 1`] = `
 </div>
 `;
 
+exports[`csr snapshot test > csr test src/popup/_example/popper-options.tsx 1`] = `
+<div>
+  <div
+    class="t-space t-space-vertical"
+    style="gap: 16px;"
+  >
+    <div
+      class="t-space-item"
+    >
+      <div
+        class="t-space t-space-horizontal"
+        style="gap: 16px;"
+      >
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-space t-space-align-center t-space-horizontal"
+            style="gap: 16px;"
+          >
+            <div
+              class="t-space-item"
+            >
+              <span>
+                请输入横向偏移量:
+              </span>
+            </div>
+            <div
+              class="t-space-item"
+            >
+              <div
+                class="t-input__wrap"
+                spellcheck="false"
+                style="width: 130px; display: inline-block;"
+                value="0"
+              >
+                <div
+                  class="t-input t-align-left"
+                >
+                  <input
+                    class="t-input__inner"
+                    placeholder="请输入横向偏移量"
+                    type="text"
+                    value="0"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-space t-space-align-center t-space-horizontal"
+            style="gap: 16px;"
+          >
+            <div
+              class="t-space-item"
+            >
+              <span>
+                请输入纵向偏移量:
+              </span>
+            </div>
+            <div
+              class="t-space-item"
+            >
+              <div
+                class="t-input__wrap"
+                spellcheck="false"
+                style="width: 130px; display: inline-block;"
+                value="0"
+              >
+                <div
+                  class="t-input t-align-left"
+                >
+                  <input
+                    class="t-input__inner"
+                    placeholder="请输入纵向偏移量"
+                    type="text"
+                    value="0"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="t-space-item"
+    >
+      <div
+        class="t-space t-space-horizontal"
+        style="gap: 16px;"
+      >
+        <div
+          class="t-space-item"
+        >
+          <button
+            class="t-button t-button--theme-primary t-button--variant-base"
+            type="button"
+          >
+            <span
+              class="t-button__text"
+            >
+              Hover me
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`csr snapshot test > csr test src/popup/_example/style.tsx 1`] = `
 <div>
   <div
@@ -135031,6 +135147,8 @@ exports[`ssr snapshot test > ssr test src/popup/_example/placement.tsx 1`] = `"<
 
 exports[`ssr snapshot test > ssr test src/popup/_example/plugin.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><button type="button" class="trigger-element1 t-button t-button--theme-default t-button--variant-outline"><span class="t-button__text">正常的方式打开</span></button></div><div class="t-space-item"><button type="button" class="trigger-element2 t-button t-button--theme-default t-button--variant-outline"><span class="t-button__text">通过Plugin打开，并修改不同浮层的配置</span></button></div><div class="t-space-item"><div><span>这里是一个日志查询的例子，在很长的日志内容中，日志内容存在换行的情况，可以点击链接进行日志查询操作</span><a class="trigger-element3" style="color:var(--td-text-color-brand)">点击此链接，会打开浮层进行跳转操作</a></div></div></div>"`;
 
+exports[`ssr snapshot test > ssr test src/popup/_example/popper-options.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><div style="gap:16px" class="t-space t-space-align-center t-space-horizontal"><div class="t-space-item"><span>请输入横向偏移量:</span></div><div class="t-space-item"><div style="width:130px;display:inline-block" class="t-input__wrap" value="0" spellcheck="false"><div class="t-input t-align-left"><input placeholder="请输入横向偏移量" type="text" class="t-input__inner" value="0"/></div></div></div></div></div><div class="t-space-item"><div style="gap:16px" class="t-space t-space-align-center t-space-horizontal"><div class="t-space-item"><span>请输入纵向偏移量:</span></div><div class="t-space-item"><div style="width:130px;display:inline-block" class="t-input__wrap" value="0" spellcheck="false"><div class="t-input t-align-left"><input placeholder="请输入纵向偏移量" type="text" class="t-input__inner" value="0"/></div></div></div></div></div></div></div><div class="t-space-item"><div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><button type="button" class="t-button t-button--theme-primary t-button--variant-base"><span class="t-button__text">Hover me</span></button></div></div></div></div>"`;
+
 exports[`ssr snapshot test > ssr test src/popup/_example/style.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><button type="button" class="t-button t-button--theme-default t-button--variant-outline"><span class="t-button__text">自定义浮层类名</span></button></div><div class="t-space-item"><button type="button" class="t-button t-button--theme-default t-button--variant-outline"><span class="t-button__text">固定浮层宽度</span></button></div><div class="t-space-item"><button type="button" class="t-button t-button--theme-default t-button--variant-outline"><span class="t-button__text">浮层最大宽度</span></button></div><div class="t-space-item"><button type="button" class="t-button t-button--theme-default t-button--variant-outline"><span class="t-button__text">浮层和触发元素同宽</span></button></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/popup/_example/trigger.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><button type="button" class="t-button t-button--theme-default t-button--variant-outline"><span class="t-button__text">悬浮时触发（默认）</span></button></div><div class="t-space-item"><div style="width:200px" class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left"><input placeholder="获得焦点时触发" type="text" class="t-input__inner" value=""/></div></div></div><div class="t-space-item"><button type="button" class="t-button t-button--theme-default t-button--variant-outline"><span class="t-button__text">点击时触发</span></button></div><div class="t-space-item"><button type="button" class="t-button t-button--theme-default t-button--variant-outline"><span class="t-button__text">右击时触发</span></button></div></div>"`;

test/snap/__snapshots__/ssr.test.jsx.snap

@@ -724,6 +724,8 @@ exports[`ssr snapshot test > ssr test src/popup/_example/placement.tsx 1`] = `"<
 
 exports[`ssr snapshot test > ssr test src/popup/_example/plugin.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><button type="button" class="trigger-element1 t-button t-button--theme-default t-button--variant-outline"><span class="t-button__text">正常的方式打开</span></button></div><div class="t-space-item"><button type="button" class="trigger-element2 t-button t-button--theme-default t-button--variant-outline"><span class="t-button__text">通过Plugin打开，并修改不同浮层的配置</span></button></div><div class="t-space-item"><div><span>这里是一个日志查询的例子，在很长的日志内容中，日志内容存在换行的情况，可以点击链接进行日志查询操作</span><a class="trigger-element3" style="color:var(--td-text-color-brand)">点击此链接，会打开浮层进行跳转操作</a></div></div></div>"`;
 
+exports[`ssr snapshot test > ssr test src/popup/_example/popper-options.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><div style="gap:16px" class="t-space t-space-align-center t-space-horizontal"><div class="t-space-item"><span>请输入横向偏移量:</span></div><div class="t-space-item"><div style="width:130px;display:inline-block" class="t-input__wrap" value="0" spellcheck="false"><div class="t-input t-align-left"><input placeholder="请输入横向偏移量" type="text" class="t-input__inner" value="0"/></div></div></div></div></div><div class="t-space-item"><div style="gap:16px" class="t-space t-space-align-center t-space-horizontal"><div class="t-space-item"><span>请输入纵向偏移量:</span></div><div class="t-space-item"><div style="width:130px;display:inline-block" class="t-input__wrap" value="0" spellcheck="false"><div class="t-input t-align-left"><input placeholder="请输入纵向偏移量" type="text" class="t-input__inner" value="0"/></div></div></div></div></div></div></div><div class="t-space-item"><div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><button type="button" class="t-button t-button--theme-primary t-button--variant-base"><span class="t-button__text">Hover me</span></button></div></div></div></div>"`;
+
 exports[`ssr snapshot test > ssr test src/popup/_example/style.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><button type="button" class="t-button t-button--theme-default t-button--variant-outline"><span class="t-button__text">自定义浮层类名</span></button></div><div class="t-space-item"><button type="button" class="t-button t-button--theme-default t-button--variant-outline"><span class="t-button__text">固定浮层宽度</span></button></div><div class="t-space-item"><button type="button" class="t-button t-button--theme-default t-button--variant-outline"><span class="t-button__text">浮层最大宽度</span></button></div><div class="t-space-item"><button type="button" class="t-button t-button--theme-default t-button--variant-outline"><span class="t-button__text">浮层和触发元素同宽</span></button></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/popup/_example/trigger.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><button type="button" class="t-button t-button--theme-default t-button--variant-outline"><span class="t-button__text">悬浮时触发（默认）</span></button></div><div class="t-space-item"><div style="width:200px" class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left"><input placeholder="获得焦点时触发" type="text" class="t-input__inner" value=""/></div></div></div><div class="t-space-item"><button type="button" class="t-button t-button--theme-default t-button--variant-outline"><span class="t-button__text">点击时触发</span></button></div><div class="t-space-item"><button type="button" class="t-button t-button--theme-default t-button--variant-outline"><span class="t-button__text">右击时触发</span></button></div></div>"`;