{"meta":"<p>A collection of tool for generating overlay.</p>\n<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<p>Overlay provides a series of components for creating overlay:</p>\n<h3 id=\"Overlay\">Overlay <a class=\"header-anchor scroll-count-item\" href=\"#Overlay\" data-scroll-id=\"Overlay\">#</a></h3>\n<p>Overlay can pop up a layer in the page, provides positioning, animation and other common functions. Overlay is designed as a stateless component that does not control the state of its own visible.</p>\n<p><strong>Note:</strong> Configurations like canCloseby* also need to work with onRequestClose to close the overlay.</p>\n<h4>Safe node</h4>\n<p>Overlay provides the function of hiding itself by clicking document. If you want to click a node and do not hide the overlay (for example, the node that triggers the overlay to open), pass the node to the safeNode property.</p>\n<h4>Alignment</h4>\n<ol>\n<li>\n<p>The value of the align property can be a space-separated string, such as <code>tl bl</code>, <code>tl</code> means the top left of the target element and <code>bl</code> means the bottom left of the reference element, so <code>tl bl</code> means the top left of the target element aligns with the bottom left of the reference element. Among the available options are <code>tl</code>, <code>tc</code>, <code>tr</code>, <code>cl</code>, <code>cc</code>, <code>cr</code>, <code>bl</code>, <code>bc</code>, <code>br</code>. <code>t</code> is short for <code>top</code>, <code>b</code> is short for <code>bottom</code>, <code>c</code> is short for <code>center</code>, <code>l</code> is short for <code>left</code>, and <code>r</code> is short for <code>right</code>.</p>\n</li>\n<li>\n<p>The align support Boolean value is only false. When set to false, JS positioning is not used, so you can pass the style or className for CSS positioning according to your needs.</p>\n</li>\n<li>\n<p>Under RTL Mode, Overylay will transfer r(right) and l(left) to each other automatically. It means <code>tl bl</code> under RTL Mode works the same to <code>tr br</code> under Non-RTL Mode\nThe following example shows how to position the overlay to the top right corner of the page:</p>\n</li>\n</ol>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>Overlay</span> <span class=\"token attr-name\">visible</span> <span class=\"token attr-name\">align</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">&quot;</span>tr tr<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>123<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>Overlay</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre>\n<h3 id=\"Popup\">Popup <a class=\"header-anchor scroll-count-item\" href=\"#Popup\" data-scroll-id=\"Popup\">#</a></h3>\n<p>Popup is the wrapper of Overlay. It receives a node as a trigger node and pops up a overlay. This overlay uses the node as the reference element for positioning by default.</p>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Overlay-1\">Overlay <a class=\"header-anchor scroll-count-item\" href=\"#Overlay-1\" data-scroll-id=\"Overlay 1\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n<th>Supported Version</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>Content of overlay</td>\n<td>React.ReactElement &amp; { ref?: React.RefCallback&lt;HTMLElement&gt; }</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>visible</td>\n<td>Whether to show the overlay</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onRequestClose</td>\n<td>Callback function that triggers an event when the overlay request closed</td>\n<td>(type: string, e: Event | React.MouseEvent&lt;Element&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>target</td>\n<td>Reference element for overlay positioning</td>\n<td>PropTarget</td>\n<td>Position.VIEWPORT</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>align</td>\n<td>Alignment of the overlay relative to the reference element, see <a href=\"#Alignment\">Alignment</a></td>\n<td>string | boolean</td>\n<td>&apos;tl bl&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>offset</td>\n<td>Fine</td>\n<td>Array&lt;number&gt;</td>\n<td>[0, 0]</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>container</td>\n<td>Container of the overlay, if it is a function, it should return ref, if it is a string, it is should be the id of the DOM element, it can also be passed the DOM element directly.</td>\n<td>PropTarget</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>hasMask</td>\n<td>Whether to show the mask</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>canCloseByEsc</td>\n<td>Whether to support pressing esc to close the overlay</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>canCloseByOutSideClick</td>\n<td>Whether to support clicking the outside to close the overlay when the mask is hidden</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>canCloseByMask</td>\n<td>Whether to support clicking the mask to close the overlay when the mask is visible</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>beforeOpen</td>\n<td>Callback function that triggers the event before the overlay opens</td>\n<td>(target?: React.ReactNode) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onOpen</td>\n<td>Callback function that triggers the event when the overlay opens</td>\n<td>(target?: React.ReactNode) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>afterOpen</td>\n<td>Callback function that triggers the event after the overlay opens, if enable animations, trigger after the animation ends</td>\n<td>(target?: React.ReactNode) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>beforeClose</td>\n<td>Callback function that triggers the event before the overlay closes</td>\n<td>(target?: React.ReactNode) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onClose</td>\n<td>Callback function that triggers the event when the overlay closes</td>\n<td>(target?: React.ReactNode) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>afterClose</td>\n<td>Callback function that triggers the event after the overlay closes, if enable animations, trigger after the animation ends</td>\n<td>(target?: React.ReactNode) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>beforePosition</td>\n<td>Callback function that triggers the event before the overlay positions</td>\n<td>() =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onPosition</td>\n<td>Callback function that triggers the event when the overlay positions</td>\n<td>(config: object, node?: object) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>shouldUpdatePosition</td>\n<td>Whether to force the update of positioning after each rerendered, which is generally used to maintain the original positioning when the size of the content area changes.</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>autoFocus</td>\n<td>Whether to focus the element in the overlay automatically when the overlay is opened</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>needAdjust</td>\n<td>When the overlay is not visible due to scrolling of the page, does it automatically adjust the position to appear in the visible area?</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>disableScroll</td>\n<td>Whether to disable page scrolling</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>cache</td>\n<td>Whether to keep dom nodes when hidden</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>safeNode</td>\n<td>When clicking on the document, does not close the overlay if the node is included. If it is a function, it should return ref, if it is a string, it should be the id of the DOM element, it can also be directly passed to the DOM element, or the above values Array</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>wrapperClassName</td>\n<td>Class name of the overlay&apos;s wrapper node</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>wrapperStyle</td>\n<td>Inline stylesheet of the overlay&apos;s wrapper node</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>animation</td>\n<td>Configure animation, support the {in: &apos;enter-class&apos;, out: &apos;leave</td>\n<td>string | boolean | AnimationObjectType | undefined</td>\n<td>{ in: &apos;expandInDown&apos;, out: &apos;expandOutUp&apos; }</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>v2</td>\n<td>Enable v2</td>\n<td>false | undefined</td>\n<td>false</td>\n<td></td>\n<td>1.25</td>\n</tr>\n<tr>\n<td>points</td>\n<td>[v2] align in the array form, cannot be used with align</td>\n<td>Array&lt;string&gt;</td>\n<td>-</td>\n<td></td>\n<td>1.25</td>\n</tr>\n<tr>\n<td>useCapture</td>\n<td>Add listener in capture phase, compatible with react 17</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>1.25</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Overlay V 2\">Overlay V2 <a class=\"header-anchor scroll-count-item\" href=\"#Overlay V 2\" data-scroll-id=\"Overlay V 2\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n<th>Supported Version</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>Content of overlay</td>\n<td>React.ReactElement &amp; { ref?: React.RefCallback&lt;HTMLElement&gt; }</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>visible</td>\n<td>Whether to show the overlay</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onRequestClose</td>\n<td>Callback function that triggers an event when the overlay request closed</td>\n<td>(type: string, e: Event | React.MouseEvent&lt;Element&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>target</td>\n<td>Reference element for overlay positioning</td>\n<td>PropTarget</td>\n<td>Position.VIEWPORT</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>align</td>\n<td>Alignment of the overlay relative to the reference element, see <a href=\"#Alignment\">Alignment</a></td>\n<td>string</td>\n<td>&apos;tl bl&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>offset</td>\n<td>Fine</td>\n<td>Array&lt;number&gt;</td>\n<td>[0, 0]</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>container</td>\n<td>Container of the overlay, if it is a function, it should return ref, if it is a string, it is should be the id of the DOM element, it can also be passed the DOM element directly.</td>\n<td>PropTarget</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>hasMask</td>\n<td>Whether to show the mask</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>canCloseByEsc</td>\n<td>Whether to support pressing esc to close the overlay</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>canCloseByOutSideClick</td>\n<td>Whether to support clicking the outside to close the overlay when the mask is hidden</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>canCloseByMask</td>\n<td>Whether to support clicking the mask to close the overlay when the mask is visible</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>beforeOpen</td>\n<td>Callback function that triggers the event before the overlay opens</td>\n<td>(target?: React.ReactNode) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onOpen</td>\n<td>Callback function that triggers the event when the overlay opens</td>\n<td>(target?: React.ReactNode) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>afterOpen</td>\n<td>Callback function that triggers the event after the overlay opens, if enable animations, trigger after the animation ends</td>\n<td>(target?: React.ReactNode) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>beforeClose</td>\n<td>Callback function that triggers the event before the overlay closes</td>\n<td>(target?: React.ReactNode) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onClose</td>\n<td>Callback function that triggers the event when the overlay closes</td>\n<td>(target?: React.ReactNode) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>afterClose</td>\n<td>Callback function that triggers the event after the overlay closes, if enable animations, trigger after the animation ends</td>\n<td>(target?: React.ReactNode) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>beforePosition</td>\n<td>Callback function that triggers the event before the overlay positions</td>\n<td>() =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onPosition</td>\n<td>Callback function that triggers the event when the overlay positions</td>\n<td>(config: object, node?: object) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>shouldUpdatePosition</td>\n<td>Whether to force the update of positioning after each rerendered, which is generally used to maintain the original positioning when the size of the content area changes.</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>autoFocus</td>\n<td>Whether to focus the element in the overlay automatically when the overlay is opened</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>disableScroll</td>\n<td>Whether to disable page scrolling</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>cache</td>\n<td>Whether to keep dom nodes when hidden</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>safeNode</td>\n<td>When clicking on the document, does not close the overlay if the node is included. If it is a function, it should return ref, if it is a string, it should be the id of the DOM element, it can also be directly passed to the DOM element, or the above values Array</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>wrapperClassName</td>\n<td>Class name of the overlay&apos;s wrapper node</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>wrapperStyle</td>\n<td>Inline stylesheet of the overlay&apos;s wrapper node</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>animation</td>\n<td>Configure animation, support the {in: &apos;enter-class&apos;, out: &apos;leave</td>\n<td>string | false | AnimationObjectType | undefined</td>\n<td>{ in: &apos;expandInDown&apos;, out: &apos;expandOutUp&apos; }</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>v2</td>\n<td>Enable v2</td>\n<td>true</td>\n<td>false</td>\n<td></td>\n<td>1.25</td>\n</tr>\n<tr>\n<td>points</td>\n<td>[v2] align in the array form, cannot be used with align</td>\n<td>Array&lt;string&gt;</td>\n<td>-</td>\n<td></td>\n<td>1.25</td>\n</tr>\n<tr>\n<td>useCapture</td>\n<td>Add listener in capture phase, compatible with react 17</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>1.25</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Overlay Popup\">Overlay.Popup <a class=\"header-anchor scroll-count-item\" href=\"#Overlay Popup\" data-scroll-id=\"Overlay Popup\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>autoAdjust</td>\n<td>Whether to adjust the position automatically when the overlay is covered</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>Content of overlay</td>\n<td>React.ReactElement</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>autoFit</td>\n<td>Whether the overlay is automatically adapted to the content</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>visible</td>\n<td>Whether the overlay is visible currently</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>target</td>\n<td>Reference element for overlay positioning</td>\n<td>PropTarget</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>trigger</td>\n<td>Trigger the overlay to show or hide elements</td>\n<td>React.ReactElement</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>triggerType</td>\n<td>Trigger the overlay to show or hide operations, either &apos;click&apos;, &apos;hover&apos;, &apos;focus&apos;, or an array of them, such as [&apos;hover&apos;, &apos;focus&apos;]</td>\n<td>&apos;click&apos; | &apos;hover&apos; | &apos;focus&apos; | Array&lt;&apos;click&apos; | &apos;hover&apos; | &apos;focus&apos;&gt;</td>\n<td>&apos;hover&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>triggerClickKeycode</td>\n<td>Customize the keyboard trigger keys that will trigger click event handlers when trigger is focused. It will only take effect when the triggerType is &apos;click&apos;.</td>\n<td>number | Array&lt;number&gt;</td>\n<td>[KEYCODE.SPACE, KEYCODE.ENTER]</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultVisible</td>\n<td>Whether to show the overlay by default</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>onVisibleChange</td>\n<td>Callback function that triggers when the overlay shows or hides</td>\n<td>(visible: boolean, type: string | object, e?: object) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Set this property, the overlay cannot be displayed or hidden</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>delay</td>\n<td>Delay time (in milliseconds) when the overlay is displayed or hidden, effective when triggerType is set to hover</td>\n<td>number</td>\n<td>200</td>\n<td></td>\n</tr>\n<tr>\n<td>mouseEnterDelay</td>\n<td>Delay display after mouse enter, Higher priority than delay</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>mouseLeaveDelay</td>\n<td>Delay display after mouse leave, Higher priority than delay</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>canCloseByTrigger</td>\n<td>Whether overlay can be closed by trigger</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>followTrigger</td>\n<td>Follow trigger to scroll or not</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>v2</td>\n<td>Enable v2 version</td>\n<td>false | undefined</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>placement</td>\n<td>[v2] quick position</td>\n<td>string</td>\n<td>&apos;tr&apos;</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Overlay Popup-1\">Overlay.Popup <a class=\"header-anchor scroll-count-item\" href=\"#Overlay Popup-1\" data-scroll-id=\"Overlay Popup 1\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>autoAdjust</td>\n<td>Whether to adjust the position automatically when the overlay is covered</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>Content of overlay</td>\n<td>React.ReactElement</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>autoFit</td>\n<td>Whether the overlay is automatically adapted to the content</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>visible</td>\n<td>Whether the overlay is visible currently</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>target</td>\n<td>Reference element for overlay positioning</td>\n<td>PropTarget</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>trigger</td>\n<td>Trigger the overlay to show or hide elements</td>\n<td>React.ReactElement</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>triggerType</td>\n<td>Trigger the overlay to show or hide operations, either &apos;click&apos;, &apos;hover&apos;, &apos;focus&apos;, or an array of them, such as [&apos;hover&apos;, &apos;focus&apos;]</td>\n<td>&apos;click&apos; | &apos;hover&apos; | &apos;focus&apos; | Array&lt;&apos;click&apos; | &apos;hover&apos; | &apos;focus&apos;&gt;</td>\n<td>&apos;hover&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>triggerClickKeycode</td>\n<td>Customize the keyboard trigger keys that will trigger click event handlers when trigger is focused. It will only take effect when the triggerType is &apos;click&apos;.</td>\n<td>number | Array&lt;number&gt;</td>\n<td>[KEYCODE.SPACE, KEYCODE.ENTER]</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultVisible</td>\n<td>Whether the overlay is visible default</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>onVisibleChange</td>\n<td>Callback function that triggers the event when the overlay shows or hides</td>\n<td>(visible: boolean, type: string | object, e?: object) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>If set this property, the overlay cannot be shown or hidden</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>delay</td>\n<td>Delay time (in milliseconds) when the overlay is displayed or hidden, effective when triggerType is set to hover</td>\n<td>number</td>\n<td>200</td>\n<td></td>\n</tr>\n<tr>\n<td>mouseEnterDelay</td>\n<td>Delay display after mouse enter, Higher priority than delay</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>mouseLeaveDelay</td>\n<td>Delay display after mouse leave, Higher priority than delay</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>canCloseByTrigger</td>\n<td>Whether the trigger element can close the overlay</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>followTrigger</td>\n<td>Follow trigger to scroll or not</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>v2</td>\n<td>Enable v2 version</td>\n<td>true</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>placement</td>\n<td>[v2] quick position</td>\n<td>string</td>\n<td>&apos;tr&apos;</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Overlay Position\">Overlay.Position <a class=\"header-anchor scroll-count-item\" href=\"#Overlay Position\" data-scroll-id=\"Overlay Position\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>Content of overlay</td>\n<td>React.ReactElement</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>target</td>\n<td>Reference element for overlay positioning</td>\n<td>PropTarget | &apos;viewport&apos;</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Overlay Gateway\">Overlay.Gateway <a class=\"header-anchor scroll-count-item\" href=\"#Overlay Gateway\" data-scroll-id=\"Overlay Gateway\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>Content of overlay</td>\n<td>null | (React.ReactElement &amp; { ref?: React.RefCallback&lt;HTMLElement&gt; | string })</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>target</td>\n<td>Reference element for overlay positioning</td>\n<td>PropTarget</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Animation Object Type\">AnimationObjectType <a class=\"header-anchor scroll-count-item\" href=\"#Animation Object Type\" data-scroll-id=\"Animation Object Type\">#</a></h3>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">type</span> <span class=\"token class-name\">AnimationObjectType</span> <span class=\"token operator\">=</span> Record<span class=\"token operator\">&lt;</span><span class=\"token string\">&apos;in&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;out&apos;</span><span class=\"token punctuation\">,</span> <span class=\"token builtin\">string</span><span class=\"token operator\">&gt;</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<h3 id=\"Prop Target\">PropTarget <a class=\"header-anchor scroll-count-item\" href=\"#Prop Target\" data-scroll-id=\"Prop Target\">#</a></h3>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">type</span> <span class=\"token class-name\">Target<span class=\"token operator\">&lt;</span><span class=\"token constant\">T</span> <span class=\"token operator\">=</span> <span class=\"token builtin\">unknown</span><span class=\"token operator\">&gt;</span></span> <span class=\"token operator\">=</span>\n    <span class=\"token operator\">|</span> React<span class=\"token punctuation\">.</span>ReactInstance\n    <span class=\"token operator\">|</span> <span class=\"token builtin\">string</span>\n    <span class=\"token operator\">|</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span>param<span class=\"token operator\">?</span><span class=\"token operator\">:</span> <span class=\"token constant\">T</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> React<span class=\"token punctuation\">.</span>ReactInstance <span class=\"token operator\">|</span> Element <span class=\"token operator\">|</span> Text <span class=\"token operator\">|</span> Node <span class=\"token operator\">|</span> <span class=\"token keyword\">null</span> <span class=\"token operator\">|</span> <span class=\"token keyword\">void</span> <span class=\"token operator\">|</span> <span class=\"token keyword\">undefined</span><span class=\"token punctuation\">)</span>\n    <span class=\"token operator\">|</span> Element\n    <span class=\"token operator\">|</span> Node\n    <span class=\"token operator\">|</span> Text\n    <span class=\"token operator\">|</span> <span class=\"token keyword\">null</span>\n    <span class=\"token operator\">|</span> <span class=\"token boolean\">false</span>\n    <span class=\"token operator\">|</span> <span class=\"token keyword\">undefined</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<h2 id=\"ARIA And Key Board\">ARIA and KeyBoard <a class=\"header-anchor scroll-count-item\" href=\"#ARIA And Key Board\" data-scroll-id=\"ARIA And Key Board\">#</a></h2>\n<p><code>Description</code>: This component needs to be used in conjunction with other components to be prompted. Refer to the above <code>overlay</code></p>\n"}