antd-solid 0.0.20 → 0.0.22

package/es/Table/index.js

@@ -1,14 +1,14 @@
-import { createComponent, ssr, ssrHydrationKey, escape, ssrAttribute } from 'solid-js/web';
+import { createComponent, insert, effect, className, template } from 'solid-js/web';
 import { For, Show } from 'solid-js';
 import cs from 'classnames';
 import Empty from '../Empty/index.js';
 import Element from '../Element/index.js';
 import useComponentSize from '../hooks/useComponentSize.js';
 
-var _tmpl$ = ["<table", " class=\"w-full\"><thead><tr>", "</tr></thead><tbody>", "</tbody></table>"],
-  _tmpl$2 = ["<th", ">", "</th>"],
-  _tmpl$3 = ["<tr", " class=\"hover:bg-[var(--ant-table-row-hover-bg)]\">", "</tr>"],
-  _tmpl$4 = ["<td", ">", "</td>"];
+var _tmpl$ = /*#__PURE__*/template(`<table class=w-full><thead><tr></tr></thead><tbody>`),
+  _tmpl$2 = /*#__PURE__*/template(`<th>`),
+  _tmpl$3 = /*#__PURE__*/template(`<tr class=hover:bg-[var(--ant-table-row-hover-bg)]>`),
+  _tmpl$4 = /*#__PURE__*/template(`<td>`);
 const sizeClassDict = {
   large: 'p-16px leading-22px',
   middle: 'px-8px py-12px leading-22px',
@@ -19,22 +19,44 @@ const Table = props => {
   return createComponent(Element, {
     "class": "[font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]",
     get children() {
-      return [ssr(_tmpl$, ssrHydrationKey(), escape(createComponent(For, {
-        get each() {
-          return props.columns;
-        },
-        children: item => ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", escape(cs(sizeClassDict[size()], 'bg-[var(--ant-table-header-bg)] font-bold [border-bottom:1px_solid_var(--ant-table-border-color)] text-left'), true), false), escape(item.title))
-      })), escape(createComponent(For, {
-        get each() {
-          return props.dataSource;
-        },
-        children: (row, i) => ssr(_tmpl$3, ssrHydrationKey(), escape(createComponent(For, {
+      return [(() => {
+        var _el$ = _tmpl$(),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.firstChild,
+          _el$4 = _el$2.nextSibling;
+        insert(_el$3, createComponent(For, {
           get each() {
             return props.columns;
           },
-          children: item => ssr(_tmpl$4, ssrHydrationKey() + ssrAttribute("class", escape(cs(sizeClassDict[size()], '[border-bottom:1px_solid_var(--ant-table-border-color)]'), true), false), escape(item.render(row, i)))
-        })))
-      }))), createComponent(Show, {
+          children: item => (() => {
+            var _el$5 = _tmpl$2();
+            insert(_el$5, () => item.title);
+            effect(() => className(_el$5, cs(sizeClassDict[size()], 'bg-[var(--ant-table-header-bg)] font-bold [border-bottom:1px_solid_var(--ant-table-border-color)] text-left')));
+            return _el$5;
+          })()
+        }));
+        insert(_el$4, createComponent(For, {
+          get each() {
+            return props.dataSource;
+          },
+          children: (row, i) => (() => {
+            var _el$6 = _tmpl$3();
+            insert(_el$6, createComponent(For, {
+              get each() {
+                return props.columns;
+              },
+              children: item => (() => {
+                var _el$7 = _tmpl$4();
+                insert(_el$7, () => item.render(row, i));
+                effect(() => className(_el$7, cs(sizeClassDict[size()], '[border-bottom:1px_solid_var(--ant-table-border-color)]')));
+                return _el$7;
+              })()
+            }));
+            return _el$6;
+          })()
+        }));
+        return _el$;
+      })(), createComponent(Show, {
         get when() {
           return !props.dataSource.length;
         },

package/es/Tabs/index.js

@@ -1,5 +1,5 @@
-import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape, ssrStyle, Dynamic } from 'solid-js/web';
-import { mergeProps, untrack, createSelector, createSignal, createEffect, on, children, Show, Switch, Match, For } from 'solid-js';
+import { delegateEvents, createComponent, insert, effect, className, setAttribute, style, Dynamic, template, use } from 'solid-js/web';
+import { mergeProps, untrack, createSelector, createSignal, createEffect, on, children, Show, Switch, Match, For, onCleanup } from 'solid-js';
 import cs from 'classnames';
 import Segmented from '../Segmented/index.js';
 import { unwrapStringOrJSXElement } from '../utils/solid.js';
@@ -8,10 +8,8 @@ import Element from '../Element/index.js';
 import createControllableValue from '../hooks/createControllableValue.js';
 import useComponentSize from '../hooks/useComponentSize.js';
 
-var _tmpl$ = ["<div", ">", "</div>"],
-  _tmpl$2 = ["<div", "><!--$-->", "<!--/--><div aria-label=\"selected-bar\"", " style=\"", "\"></div></div>"],
-  _tmpl$3 = ["<div", " style=\"", "\"><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"],
-  _tmpl$4 = ["<div", " style=\"", "\">", "</div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div><div aria-label=selected-bar>`);
 const Tabs = _props => {
   const props = mergeProps({
     type: 'line',
@@ -30,8 +28,33 @@ const Tabs = _props => {
     left: '0px',
     width: '0px'
   });
+  let lineNav;
+  const updateSelectedBarStyle = () => {
+    if (!lineNav) return;
+    const el = lineNav.querySelector(':scope > [aria-label="selected"]');
+    if (!el) return;
+    if (props.placement === 'top' || props.placement === 'bottom') {
+      setSelectedBarStyle({
+        left: `${el.offsetLeft}px`,
+        width: `${el.clientWidth}px`
+      });
+    } else {
+      setSelectedBarStyle({
+        top: `${el.offsetTop}px`,
+        height: `${el.clientHeight}px`
+      });
+    }
+  };
   createEffect(on([() => props.type, () => props.placement], () => {
-    return;
+    if (!lineNav) return;
+    updateSelectedBarStyle();
+    const resizeObserver = new ResizeObserver(() => {
+      updateSelectedBarStyle();
+    });
+    resizeObserver.observe(lineNav);
+    onCleanup(() => {
+      resizeObserver.disconnect();
+    });
   }));
   const resolvedAddonBefore = children(() => props.addonBefore);
   const resolvedAddonAfter = children(() => props.addonAfter);
@@ -47,89 +70,157 @@ const Tabs = _props => {
       };
     },
     get children() {
-      return [ssr(_tmpl$3, ssrHydrationKey() + ssrAttribute("class", escape(cs('shrink-0 flex items-center gap-16px', props.navClass, props.type === 'segment' ? 'mb-[--ant-tabs-gap]' : ['border-solid border-[var(--ant-color-border-secondary)] border-0', props.placement === 'top' && '!border-b-1px mb-[--ant-tabs-gap]', props.placement === 'bottom' && '!border-t-1px mt-[--ant-tabs-gap]', props.placement === 'left' && '!border-r-1px mr-[--ant-tabs-gap]', props.placement === 'right' && '!border-l-1px ml-[--ant-tabs-gap]', (props.placement === 'left' || props.placement === 'right') && 'flex-col'], {
-        small: '[font-size:var(--ant-font-size)]',
-        middle: '[font-size:var(--ant-font-size)]',
-        large: '[font-size:var(--ant-font-size-lg)]'
-      }[size()]), true), false), ssrStyle(props.tabBarStyle), escape(createComponent(Show, {
-        get when() {
-          return resolvedAddonBefore();
-        },
-        get children() {
-          return ssr(_tmpl$, ssrHydrationKey(), escape(resolvedAddonBefore()));
-        }
-      })), escape(createComponent(Switch, {
-        get children() {
-          return [createComponent(Match, {
-            get when() {
-              return props.type === 'line';
-            },
-            get children() {
-              return ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", escape(cs('grow flex relative', (props.placement === 'top' || props.placement === 'bottom') && 'gap-32px', (props.placement === 'left' || props.placement === 'right') && 'flex-col gap-16px'), true), false), escape(createComponent(For, {
-                get each() {
-                  return props.items;
-                },
-                children: item => ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('cursor-pointer', 'hover:text-[var(--ant-color-primary)]', props.navItemClass, isSelectedItem(item.key) && 'text-[var(--ant-color-primary)]', (props.placement === 'top' || props.placement === 'bottom') && {
-                  small: 'py-[--ant-padding-xs]',
-                  middle: 'py-[--ant-padding-sm]',
-                  large: 'py-[--ant-padding]'
-                }[size()], (props.placement === 'left' || props.placement === 'right') && 'px-24px py-8px'), true), false) + ssrAttribute("aria-label", isSelectedItem(item.key) ? 'selected' : escape(undefined, true), false), escape(unwrapStringOrJSXElement(item.label)))
-              })), ssrAttribute("class", escape(cs('absolute bg-[var(--ant-color-primary)] transition-left,top', props.placement === 'top' && '-bottom-1px', props.placement === 'bottom' && '-top-1px', props.placement === 'left' && '-right-1px', props.placement === 'right' && '-left-1px', (props.placement === 'top' || props.placement === 'bottom') && 'h-2px', (props.placement === 'left' || props.placement === 'right') && 'w-2px'), true), false), ssrStyle(selectedBarStyle()));
-            }
-          }), createComponent(Match, {
-            get when() {
-              return props.type === 'segment';
-            },
-            get children() {
-              return createComponent(Segmented, {
-                "class": "grow",
-                block: true,
-                get size() {
-                  return size();
-                },
-                get disabled() {
-                  return props.disabled;
-                },
-                get value() {
-                  return activeKey();
-                },
-                onChange: key => {
-                  setActiveKey(key);
-                },
-                get options() {
-                  return props.items.map(item => ({
-                    label: item.label,
-                    value: item.key
-                  }));
-                }
-              });
-            }
-          }), createComponent(Match, {
-            get when() {
-              return props.type === 'card';
-            },
-            get children() {
-              return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('grow flex gap-2px relative', (props.placement === 'left' || props.placement === 'right') && 'flex-col'), true), false), escape(createComponent(For, {
-                get each() {
-                  return props.items;
-                },
-                children: item => ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs({
-                  small: 'py-6px',
-                  middle: 'py-8px',
-                  large: 'py-8px'
-                }[size()], 'px-16px cursor-pointer border-solid border-[var(--ant-color-border-secondary)] border-1px relative', 'hover:text-[var(--ant-color-primary)]', props.placement === 'top' && 'rounded-t-[var(--ant-border-radius-lg)] !border-b-0px', props.placement === 'bottom' && 'rounded-b-[var(--ant-border-radius-lg)] !border-t-0px', props.placement === 'left' && 'rounded-l-[var(--ant-border-radius-lg)] !border-r-0px', props.placement === 'right' && 'rounded-r-[var(--ant-border-radius-lg)] !border-l-0px', props.navItemClass, isSelectedItem(item.key) ? ['text-[var(--ant-color-primary)] bg-[var(--ant-color-bg-container)]', ['after:content-empty after:block after:absolute after:bg-inherit', props.placement === 'top' && 'after:bottom--1px', props.placement === 'bottom' && 'after:top--1px', props.placement === 'left' && 'after:right--1px', props.placement === 'right' && 'after:left--1px', (props.placement === 'top' || props.placement === 'bottom') && 'after:left-0 after:right-0 after:h-1px', (props.placement === 'left' || props.placement === 'right') && 'after:top-0 after:bottom-0 after:w-1px']] : 'bg-[var(--ant-tabs-card-bg)]'), true), false), escape(unwrapStringOrJSXElement(item.label)))
-              })));
-            }
-          })];
-        }
-      })), escape(createComponent(Show, {
-        get when() {
-          return resolvedAddonAfter();
-        },
-        get children() {
-          return ssr(_tmpl$, ssrHydrationKey(), escape(resolvedAddonAfter()));
-        }
-      }))), createComponent(For, {
+      return [(() => {
+        var _el$ = _tmpl$();
+        insert(_el$, createComponent(Show, {
+          get when() {
+            return resolvedAddonBefore();
+          },
+          get children() {
+            var _el$2 = _tmpl$();
+            insert(_el$2, resolvedAddonBefore);
+            return _el$2;
+          }
+        }), null);
+        insert(_el$, createComponent(Switch, {
+          get children() {
+            return [createComponent(Match, {
+              get when() {
+                return props.type === 'line';
+              },
+              get children() {
+                var _el$3 = _tmpl$2(),
+                  _el$4 = _el$3.firstChild;
+                var _ref$ = lineNav;
+                typeof _ref$ === "function" ? use(_ref$, _el$3) : lineNav = _el$3;
+                insert(_el$3, createComponent(For, {
+                  get each() {
+                    return props.items;
+                  },
+                  children: item => (() => {
+                    var _el$7 = _tmpl$();
+                    _el$7.$$click = () => {
+                      setActiveKey(item.key);
+                      updateSelectedBarStyle();
+                    };
+                    insert(_el$7, () => unwrapStringOrJSXElement(item.label));
+                    effect(_p$ => {
+                      var _v$6 = cs('cursor-pointer', 'hover:text-[var(--ant-color-primary)]', props.navItemClass, isSelectedItem(item.key) && 'text-[var(--ant-color-primary)]', (props.placement === 'top' || props.placement === 'bottom') && {
+                          small: 'py-[--ant-padding-xs]',
+                          middle: 'py-[--ant-padding-sm]',
+                          large: 'py-[--ant-padding]'
+                        }[size()], (props.placement === 'left' || props.placement === 'right') && 'px-24px py-8px'),
+                        _v$7 = isSelectedItem(item.key) ? 'selected' : undefined;
+                      _v$6 !== _p$.e && className(_el$7, _p$.e = _v$6);
+                      _v$7 !== _p$.t && setAttribute(_el$7, "aria-label", _p$.t = _v$7);
+                      return _p$;
+                    }, {
+                      e: undefined,
+                      t: undefined
+                    });
+                    return _el$7;
+                  })()
+                }), _el$4);
+                effect(_p$ => {
+                  var _v$ = cs('grow flex relative', (props.placement === 'top' || props.placement === 'bottom') && 'gap-32px', (props.placement === 'left' || props.placement === 'right') && 'flex-col gap-16px'),
+                    _v$2 = cs('absolute bg-[var(--ant-color-primary)] transition-left,top', props.placement === 'top' && '-bottom-1px', props.placement === 'bottom' && '-top-1px', props.placement === 'left' && '-right-1px', props.placement === 'right' && '-left-1px', (props.placement === 'top' || props.placement === 'bottom') && 'h-2px', (props.placement === 'left' || props.placement === 'right') && 'w-2px'),
+                    _v$3 = selectedBarStyle();
+                  _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
+                  _v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
+                  _p$.a = style(_el$4, _v$3, _p$.a);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined
+                });
+                return _el$3;
+              }
+            }), createComponent(Match, {
+              get when() {
+                return props.type === 'segment';
+              },
+              get children() {
+                return createComponent(Segmented, {
+                  "class": "grow",
+                  block: true,
+                  get size() {
+                    return size();
+                  },
+                  get disabled() {
+                    return props.disabled;
+                  },
+                  get value() {
+                    return activeKey();
+                  },
+                  onChange: key => {
+                    setActiveKey(key);
+                  },
+                  get options() {
+                    return props.items.map(item => ({
+                      label: item.label,
+                      value: item.key
+                    }));
+                  }
+                });
+              }
+            }), createComponent(Match, {
+              get when() {
+                return props.type === 'card';
+              },
+              get children() {
+                var _el$5 = _tmpl$();
+                insert(_el$5, createComponent(For, {
+                  get each() {
+                    return props.items;
+                  },
+                  children: item => (() => {
+                    var _el$8 = _tmpl$();
+                    _el$8.$$click = () => {
+                      setActiveKey(item.key);
+                      updateSelectedBarStyle();
+                    };
+                    insert(_el$8, () => unwrapStringOrJSXElement(item.label));
+                    effect(() => className(_el$8, cs({
+                      small: 'py-6px',
+                      middle: 'py-8px',
+                      large: 'py-8px'
+                    }[size()], 'px-16px cursor-pointer border-solid border-[var(--ant-color-border-secondary)] border-1px relative', 'hover:text-[var(--ant-color-primary)]', props.placement === 'top' && 'rounded-t-[var(--ant-border-radius-lg)] !border-b-0px', props.placement === 'bottom' && 'rounded-b-[var(--ant-border-radius-lg)] !border-t-0px', props.placement === 'left' && 'rounded-l-[var(--ant-border-radius-lg)] !border-r-0px', props.placement === 'right' && 'rounded-r-[var(--ant-border-radius-lg)] !border-l-0px', props.navItemClass, isSelectedItem(item.key) ? ['text-[var(--ant-color-primary)] bg-[var(--ant-color-bg-container)]', ['after:content-empty after:block after:absolute after:bg-inherit', props.placement === 'top' && 'after:bottom--1px', props.placement === 'bottom' && 'after:top--1px', props.placement === 'left' && 'after:right--1px', props.placement === 'right' && 'after:left--1px', (props.placement === 'top' || props.placement === 'bottom') && 'after:left-0 after:right-0 after:h-1px', (props.placement === 'left' || props.placement === 'right') && 'after:top-0 after:bottom-0 after:w-1px']] : 'bg-[var(--ant-tabs-card-bg)]')));
+                    return _el$8;
+                  })()
+                }));
+                effect(() => className(_el$5, cs('grow flex gap-2px relative', (props.placement === 'left' || props.placement === 'right') && 'flex-col')));
+                return _el$5;
+              }
+            })];
+          }
+        }), null);
+        insert(_el$, createComponent(Show, {
+          get when() {
+            return resolvedAddonAfter();
+          },
+          get children() {
+            var _el$6 = _tmpl$();
+            insert(_el$6, resolvedAddonAfter);
+            return _el$6;
+          }
+        }), null);
+        effect(_p$ => {
+          var _v$4 = cs('shrink-0 flex items-center gap-16px', props.navClass, props.type === 'segment' ? 'mb-[--ant-tabs-gap]' : ['border-solid border-[var(--ant-color-border-secondary)] border-0', props.placement === 'top' && '!border-b-1px mb-[--ant-tabs-gap]', props.placement === 'bottom' && '!border-t-1px mt-[--ant-tabs-gap]', props.placement === 'left' && '!border-r-1px mr-[--ant-tabs-gap]', props.placement === 'right' && '!border-l-1px ml-[--ant-tabs-gap]', (props.placement === 'left' || props.placement === 'right') && 'flex-col'], {
+              small: '[font-size:var(--ant-font-size)]',
+              middle: '[font-size:var(--ant-font-size)]',
+              large: '[font-size:var(--ant-font-size-lg)]'
+            }[size()]),
+            _v$5 = props.tabBarStyle;
+          _v$4 !== _p$.e && className(_el$, _p$.e = _v$4);
+          _p$.t = style(_el$, _v$5, _p$.t);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$;
+      })(), createComponent(For, {
         get each() {
           return props.items;
         },
@@ -141,12 +232,25 @@ const Tabs = _props => {
             return isSelectedItem(item.key);
           },
           get children() {
-            return ssr(_tmpl$4, ssrHydrationKey() + ssrAttribute("class", escape(cs(props.contentClass, 'grow'), true), false), "display:" + (isSelectedItem(item.key) ? "block" : "none"), escape(unwrapStringOrJSXElement(item.children)));
+            var _el$9 = _tmpl$();
+            insert(_el$9, () => unwrapStringOrJSXElement(item.children));
+            effect(_p$ => {
+              var _v$8 = cs(props.contentClass, 'grow'),
+                _v$9 = isSelectedItem(item.key) ? 'block' : 'none';
+              _v$8 !== _p$.e && className(_el$9, _p$.e = _v$8);
+              _v$9 !== _p$.t && ((_p$.t = _v$9) != null ? _el$9.style.setProperty("display", _v$9) : _el$9.style.removeProperty("display"));
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$9;
           }
         })
       })];
     }
   });
 };
+delegateEvents(["click"]);
 
 export { Tabs as default };

package/es/Timeline/index.js

@@ -1,9 +1,9 @@
-import { createComponent, ssr, ssrHydrationKey, escape } from 'solid-js/web';
+import { createComponent, insert, memo, template } from 'solid-js/web';
 import { For } from 'solid-js';
 import Element from '../Element/index.js';
 
-var _tmpl$ = ["<div", " class=\"flex relative\"><!--$-->", "<!--/--><div class=\"w-[10px] h-[10px] border-solid border-width-[3px] border-[var(--ant-color-primary)] bg-white rounded-[50%] mt-[8px]\"></div><div class=\"ml-[8px]\">", "</div></div>"],
-  _tmpl$2 = ["<div", " class=\"absolute top-[8px] bottom-[-24px] left-[4px] w-[2px] bg-[rgba(5,5,5,.06)]\"></div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div class="flex relative"><div class="w-[10px] h-[10px] border-solid border-width-[3px] border-[var(--ant-color-primary)] bg-white rounded-[50%] mt-[8px]"></div><div class=ml-[8px]>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class="absolute top-[8px] bottom-[-24px] left-[4px] w-[2px] bg-[rgba(5,5,5,.06)]">`);
 const Timeline = props => {
   return createComponent(Element, {
     "class": "flex flex-col gap-[16px]",
@@ -12,7 +12,17 @@ const Timeline = props => {
         get each() {
           return props.items;
         },
-        children: (item, i) => ssr(_tmpl$, ssrHydrationKey(), i() !== props.items.length - 1 && _tmpl$2[0] + ssrHydrationKey() + _tmpl$2[1], escape(item.children?.()))
+        children: (item, i) => (() => {
+          var _el$ = _tmpl$(),
+            _el$2 = _el$.firstChild,
+            _el$3 = _el$2.nextSibling;
+          insert(_el$, (() => {
+            var _c$ = memo(() => i() !== props.items.length - 1);
+            return () => _c$() && _tmpl$2();
+          })(), _el$2);
+          insert(_el$3, () => item.children?.());
+          return _el$;
+        })()
       });
     }
   });

package/es/Tooltip/index.js

@@ -1,4 +1,4 @@
-import { createComponent, Dynamic, Portal, ssr, ssrHydrationKey, ssrAttribute, escape, ssrStyle } from 'solid-js/web';
+import { createComponent, memo, Dynamic, Portal, insert, effect, className, style, template } from 'solid-js/web';
 import { isEqual, compact } from 'lodash-es';
 import { mergeProps, createSignal, useContext, children, createMemo, createEffect, onCleanup, createRenderEffect, on, Show } from 'solid-js';
 import cs from 'classnames';
@@ -10,10 +10,8 @@ import DelayShow from '../DelayShow/index.js';
 import useHover from '../hooks/useHover.js';
 import Element$1 from '../Element/index.js';
 import TooltipContext from './context.js';
-import { DOMRect } from '../utils/DOMRect.js';
 
-var _tmpl$ = ["<div", " style=\"", "\">", "</div>"],
-  _tmpl$2 = ["<div", " style=\"", "\"></div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div>`);
 const unwrapContent = (content, close) => {
   return typeof content === 'function' ? content(close) : content;
 };
@@ -166,7 +164,7 @@ const Tooltip = _props => {
     }
   };
   // =========================== Tooltip ============================
-  nanoid();
+  const id = nanoid();
   const resolvedChildren = children(() => createComponent(TooltipContext.Provider, {
     value: context,
     get children() {
@@ -174,6 +172,10 @@ const Tooltip = _props => {
     }
   }));
   const [contentRef, setContentRef] = createSignal();
+  const setPopupRef = node => {
+    setContentRef(node);
+    parentContext?.registerSubPopup(id, node);
+  };
   const [_open, setOpen] = createControllableValue(_props, {
     defaultValue: false,
     defaultValuePropName: 'defaultOpen',
@@ -416,7 +418,7 @@ const Tooltip = _props => {
       _contentRef.style.setProperty('--inner-translate-y', `${innerTranslateY}px`);
     }
   });
-  return [resolvedChildren(), createComponent(Dynamic, {
+  return [memo(resolvedChildren), createComponent(Dynamic, {
     get component() {
       return props.destroyOnClose ? Show : DelayShow;
     },
@@ -430,6 +432,7 @@ const Tooltip = _props => {
         },
         get children() {
           return createComponent(Element$1, {
+            ref: setPopupRef,
             get ["class"]() {
               return cs('z-1000 fixed left-0 top-0 [font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', open() ? 'block' : 'hidden');
             },
@@ -440,24 +443,49 @@ const Tooltip = _props => {
               e.stopPropagation();
             },
             get children() {
-              return [ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('px-8px py-6px [box-shadow:var(--ant-box-shadow)] rounded-[var(--ant-border-radius-lg)] overflow-auto', props.plain ? 'text-[var(--ant-color-text)] bg-[var(--ant-color-bg-container-tertiary)]' : 'text-[var(--ant-color-text-light-solid)] bg-[var(--ant-color-bg-spotlight)]'), true), false), ssrStyle({
-                transform: 'translate(var(--inner-translate-x), var(--inner-translate-y))',
-                ...props.contentStyle
-              }), escape(createComponent(TooltipContext.Provider, {
-                value: context,
-                get children() {
-                  return unwrapContent(props.content, () => setOpen(false));
-                }
-              }))), createComponent(Show, {
+              return [(() => {
+                var _el$ = _tmpl$();
+                insert(_el$, createComponent(TooltipContext.Provider, {
+                  value: context,
+                  get children() {
+                    return unwrapContent(props.content, () => setOpen(false));
+                  }
+                }));
+                effect(_p$ => {
+                  var _v$ = cs('px-8px py-6px [box-shadow:var(--ant-box-shadow)] rounded-[var(--ant-border-radius-lg)] overflow-auto', props.plain ? 'text-[var(--ant-color-text)] bg-[var(--ant-color-bg-container-tertiary)]' : 'text-[var(--ant-color-text-light-solid)] bg-[var(--ant-color-bg-spotlight)]'),
+                    _v$2 = {
+                      transform: 'translate(var(--inner-translate-x), var(--inner-translate-y))',
+                      ...props.contentStyle
+                    };
+                  _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+                  _p$.t = style(_el$, _v$2, _p$.t);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined
+                });
+                return _el$;
+              })(), createComponent(Show, {
                 get when() {
                   return props.arrow;
                 },
                 get children() {
-                  return ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", escape(cs('w-8px h-8px absolute border-transparent [box-shadow:var(--ant-box-shadow)]'), true), false), ssrStyle({
-                    'clip-path': 'polygon(-100% -100%, 200% -100%, 200% 200%)',
-                    'background-color': props.plain ? 'var(--ant-color-bg-container-tertiary)' : 'var(--ant-color-bg-spotlight)',
-                    ...ARROW_STYLE_DICT[mergePlacement(reversedMainPlacement(), reversedMinorPlacement())]
-                  }));
+                  var _el$2 = _tmpl$();
+                  effect(_p$ => {
+                    var _v$3 = cs('w-8px h-8px absolute border-transparent [box-shadow:var(--ant-box-shadow)]'),
+                      _v$4 = {
+                        'clip-path': 'polygon(-100% -100%, 200% -100%, 200% 200%)',
+                        'background-color': props.plain ? 'var(--ant-color-bg-container-tertiary)' : 'var(--ant-color-bg-spotlight)',
+                        ...ARROW_STYLE_DICT[mergePlacement(reversedMainPlacement(), reversedMinorPlacement())]
+                      };
+                    _v$3 !== _p$.e && className(_el$2, _p$.e = _v$3);
+                    _p$.t = style(_el$2, _v$4, _p$.t);
+                    return _p$;
+                  }, {
+                    e: undefined,
+                    t: undefined
+                  });
+                  return _el$2;
                 }
               })];
             }