antd-solid 0.0.20 → 0.0.22

package/es/Transformer/index.js

@@ -1,4 +1,4 @@
-import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape, Portal, ssrElement, mergeProps } from 'solid-js/web';
+import { delegateEvents, createComponent, insert, memo, Portal, effect, setAttribute, spread, mergeProps, template } from 'solid-js/web';
 import { createMemo, createSignal, Show } from 'solid-js';
 import { inRange } from 'lodash-es';
 import NP from 'number-precision';
@@ -13,12 +13,17 @@ import { setRef } from '../utils/solid.js';
 import { setupGlobalDrag } from '../utils/setupGlobalDrag.js';
 import { subDOMPoint } from '../utils/domPoint.js';
 
-var _tmpl$ = ["<foreignObject", " class=\"overflow-visible\">", "</foreignObject>"],
-  _tmpl$2 = ["<svg", "><path class=\"pointer-events-initial\"", " opacity=\"0\"></path><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></svg>"],
-  _tmpl$3 = ["<path", " d=\"", "\" stroke=\"var(--ant-color-primary)\" stroke-width=\"1\"></path>"];
+var _tmpl$ = /*#__PURE__*/template(`<svg><foreignObject class=overflow-visible></svg>`, false, true),
+  _tmpl$2 = /*#__PURE__*/template(`<svg><path class=pointer-events-initial opacity=0>`),
+  _tmpl$3 = /*#__PURE__*/template(`<svg><path stroke=var(--ant-color-primary) stroke-width=1></svg>`, false, true),
+  _tmpl$4 = /*#__PURE__*/template(`<svg><path class="pointer-events-initial cursor-none"opacity=0 stroke=var(--ant-color-primary) stroke-width=3></svg>`, false, true),
+  _tmpl$5 = /*#__PURE__*/template(`<svg><path class="pointer-events-initial cursor-none"opacity=0 fill=red></svg>`, false, true),
+  _tmpl$6 = /*#__PURE__*/template(`<svg><path class="pointer-events-initial cursor-none"fill=var(--ant-color-white) stroke=var(--ant-color-primary)></svg>`, false, true),
+  _tmpl$7 = /*#__PURE__*/template(`<svg><path class="pointer-events-initial cursor-none"opacity=0 fill=blue></svg>`, false, true);
 // 判断是否鼠标左键触发
 const isMainButton = e => e.button === 0;
 const Transformer = props => {
+  let ref;
   const adsorbGap = createMemo(() => props.adsorb ? props.adsorb.gap ?? 5 : 0);
   const getTransform = (value, transformOrigin) => new DOMMatrix().translate(value.x, value.y).translate(transformOrigin.x, transformOrigin.y).rotate(value.rotate).translate(-transformOrigin.x, -transformOrigin.y);
   const [_value, setValue] = createControllableValue(props);
@@ -45,6 +50,10 @@ const Transformer = props => {
     return point.matrixTransform(getTransform(transformValue, transformOrigin));
   };
   const worldToParent = point => {
+    if (ref) {
+      const rect = ref.getBoundingClientRect();
+      point = new DOMPoint(point.x - rect.x, point.y - rect.y);
+    }
     if (props.worldToParentPoint) return props.worldToParentPoint(point);
     return point;
   };
@@ -381,9 +390,16 @@ const Transformer = props => {
     return [x, y, width, height].join(' ');
   });
   return createComponent(Element, {
+    ref(r$) {
+      var _ref$ = ref;
+      typeof _ref$ === "function" ? _ref$(r$) : ref = r$;
+    },
     "class": "relative",
     get children() {
-      return ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", escape(cs('absolute pointer-events-none', !props.viewBox && 'overflow-visible w-1px h-1px'), true), false) + ssrAttribute("viewBox", escape(viewBoxStr(), true), false), ssrAttribute("d", escape(pathD(), true), false), escape(createComponent(Edge, {
+      var _el$ = _tmpl$2(),
+        _el$2 = _el$.firstChild;
+      _el$2.$$mousedown = onMoveMouseDown;
+      insert(_el$, createComponent(Edge, {
         direction: "top",
         get layout() {
           return layoutInWorld();
@@ -392,7 +408,8 @@ const Transformer = props => {
           return layoutInWorld().yCenterLine;
         },
         getResizeHandlerProps: getResizeHandlerProps
-      })), escape(createComponent(Edge, {
+      }), null);
+      insert(_el$, createComponent(Edge, {
         direction: "bottom",
         get layout() {
           return layoutInWorld();
@@ -401,7 +418,8 @@ const Transformer = props => {
           return layoutInWorld().yCenterLine;
         },
         getResizeHandlerProps: getResizeHandlerProps
-      })), escape(createComponent(Edge, {
+      }), null);
+      insert(_el$, createComponent(Edge, {
         direction: "left",
         get layout() {
           return layoutInWorld();
@@ -410,7 +428,8 @@ const Transformer = props => {
           return layoutInWorld().xCenterLine;
         },
         getResizeHandlerProps: getResizeHandlerProps
-      })), escape(createComponent(Edge, {
+      }), null);
+      insert(_el$, createComponent(Edge, {
         direction: "right",
         get layout() {
           return layoutInWorld();
@@ -419,7 +438,8 @@ const Transformer = props => {
           return layoutInWorld().xCenterLine;
         },
         getResizeHandlerProps: getResizeHandlerProps
-      })), escape(createComponent(Show, {
+      }), null);
+      insert(_el$, createComponent(Show, {
         get when() {
           return layoutInWorld().topLeftPoint instanceof DOMPoint;
         },
@@ -433,7 +453,8 @@ const Transformer = props => {
             getRotateHandlerProps: getRotateHandlerProps
           });
         }
-      })), escape(createComponent(Show, {
+      }), null);
+      insert(_el$, createComponent(Show, {
         get when() {
           return layoutInWorld().topRightPoint instanceof DOMPoint;
         },
@@ -447,7 +468,8 @@ const Transformer = props => {
             getRotateHandlerProps: getRotateHandlerProps
           });
         }
-      })), escape(createComponent(Show, {
+      }), null);
+      insert(_el$, createComponent(Show, {
         get when() {
           return layoutInWorld().bottomLeftPoint instanceof DOMPoint;
         },
@@ -461,7 +483,8 @@ const Transformer = props => {
             getRotateHandlerProps: getRotateHandlerProps
           });
         }
-      })), escape(createComponent(Show, {
+      }), null);
+      insert(_el$, createComponent(Show, {
         get when() {
           return layoutInWorld().bottomRightPoint instanceof DOMPoint;
         },
@@ -475,7 +498,8 @@ const Transformer = props => {
             getRotateHandlerProps: getRotateHandlerProps
           });
         }
-      })), escape(createComponent(Show, {
+      }), null);
+      insert(_el$, createComponent(Show, {
         get when() {
           return adsorbLine()?.top;
         },
@@ -487,7 +511,8 @@ const Transformer = props => {
             }
           });
         }
-      })), escape(createComponent(Show, {
+      }), null);
+      insert(_el$, createComponent(Show, {
         get when() {
           return adsorbLine()?.bottom;
         },
@@ -499,7 +524,8 @@ const Transformer = props => {
             }
           });
         }
-      })), escape(createComponent(Show, {
+      }), null);
+      insert(_el$, createComponent(Show, {
         get when() {
           return adsorbLine()?.left;
         },
@@ -511,7 +537,8 @@ const Transformer = props => {
             }
           });
         }
-      })), escape(createComponent(Show, {
+      }), null);
+      insert(_el$, createComponent(Show, {
         get when() {
           return adsorbLine()?.right;
         },
@@ -523,7 +550,8 @@ const Transformer = props => {
             }
           });
         }
-      })), escape(createComponent(Show, {
+      }), null);
+      insert(_el$, createComponent(Show, {
         get when() {
           return adsorbLine()?.centerX;
         },
@@ -534,7 +562,8 @@ const Transformer = props => {
             }
           });
         }
-      })), escape(createComponent(Show, {
+      }), null);
+      insert(_el$, createComponent(Show, {
         get when() {
           return adsorbLine()?.centerY;
         },
@@ -545,12 +574,14 @@ const Transformer = props => {
             }
           });
         }
-      })), escape(createComponent(Show, {
+      }), null);
+      insert(_el$, createComponent(Show, {
         get when() {
-          return props.transformOriginIcon && transformOrigin();
+          return memo(() => !!props.transformOriginIcon)() && transformOrigin();
         },
         get children() {
-          return ssr(_tmpl$, ssrHydrationKey(), escape(createComponent(CrosshairSvg, {
+          var _el$3 = _tmpl$();
+          insert(_el$3, createComponent(CrosshairSvg, {
             "class": "absolute [font-size:var(--size)] text-black pointer-events-none",
             get style() {
               return {
@@ -561,11 +592,13 @@ const Transformer = props => {
             },
             innerColor: "white",
             outerColor: "black"
-          })));
+          }));
+          return _el$3;
         }
-      })), escape(createComponent(Show, {
+      }), null);
+      insert(_el$, createComponent(Show, {
         get when() {
-          return !resizeDirection() && rotateDirection();
+          return memo(() => !!!resizeDirection())() && rotateDirection();
         },
         get children() {
           return createComponent(Portal, {
@@ -583,7 +616,8 @@ const Transformer = props => {
             }
           });
         }
-      })), escape(createComponent(Show, {
+      }), null);
+      insert(_el$, createComponent(Show, {
         get when() {
           return resizeDirection();
         },
@@ -603,7 +637,21 @@ const Transformer = props => {
             }
           });
         }
-      })));
+      }), null);
+      effect(_p$ => {
+        var _v$ = cs('absolute pointer-events-none', !props.viewBox && 'overflow-visible w-1px h-1px'),
+          _v$2 = viewBoxStr(),
+          _v$3 = pathD();
+        _v$ !== _p$.e && setAttribute(_el$, "class", _p$.e = _v$);
+        _v$2 !== _p$.t && setAttribute(_el$, "viewBox", _p$.t = _v$2);
+        _v$3 !== _p$.a && setAttribute(_el$2, "d", _p$.a = _v$3);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined
+      });
+      return _el$;
     }
   });
 };
@@ -644,15 +692,19 @@ const Edge = props => {
     }
     return getAngleOfDOMPoint(subDOMPoint(endPoint(), startPoint()));
   };
-  return [ssr(_tmpl$3, ssrHydrationKey(), `M ${escape(startPoint().x, true)},${escape(startPoint().y, true)} L ${escape(endPoint().x, true)},${escape(endPoint().y, true)}`), ssrElement("path", mergeProps({
-    "class": "pointer-events-initial cursor-none",
-    get d() {
-      return `M ${startPoint().x},${startPoint().y} L ${endPoint().x},${endPoint().y}`;
-    },
-    opacity: 0,
-    stroke: "var(--ant-color-primary)",
-    "stroke-width": 3
-  }, () => props.getResizeHandlerProps(props.direction, getMouseRotate)), undefined, true)];
+  return [(() => {
+    var _el$4 = _tmpl$3();
+    effect(() => setAttribute(_el$4, "d", `M ${startPoint().x},${startPoint().y} L ${endPoint().x},${endPoint().y}`));
+    return _el$4;
+  })(), (() => {
+    var _el$5 = _tmpl$4();
+    spread(_el$5, mergeProps({
+      get d() {
+        return `M ${startPoint().x},${startPoint().y} L ${endPoint().x},${endPoint().y}`;
+      }
+    }, () => props.getResizeHandlerProps(props.direction, getMouseRotate)), true, false);
+    return _el$5;
+  })()];
 };
 const Vertex = props => {
   const prevPoint = createMemo(() => {
@@ -765,28 +817,31 @@ const Vertex = props => {
     }
     return centerAngle() + Math.PI / 2;
   };
-  return [ssrElement("path", mergeProps({
-    "class": "pointer-events-initial cursor-none",
-    get d() {
-      return layoutToPathD(rotateLayout());
-    },
-    opacity: 0,
-    fill: "red"
-  }, () => props.getRotateHandlerProps(props.direction, getMouseRotate)), undefined, true), ssrElement("path", mergeProps({
-    "class": "pointer-events-initial cursor-none",
-    get d() {
-      return layoutToPathD(displayLayout());
-    },
-    fill: "var(--ant-color-white)",
-    stroke: "var(--ant-color-primary)"
-  }, () => props.getResizeHandlerProps(props.direction, getMouseRotate)), undefined, true), ssrElement("path", mergeProps({
-    "class": "pointer-events-initial cursor-none",
-    get d() {
-      return layoutToPathD(reseizLayout());
-    },
-    opacity: 0,
-    fill: "blue"
-  }, () => props.getResizeHandlerProps(props.direction, getMouseRotate)), undefined, true)];
+  return [(() => {
+    var _el$6 = _tmpl$5();
+    spread(_el$6, mergeProps({
+      get d() {
+        return layoutToPathD(rotateLayout());
+      }
+    }, () => props.getRotateHandlerProps(props.direction, getMouseRotate)), true, false);
+    return _el$6;
+  })(), (() => {
+    var _el$7 = _tmpl$6();
+    spread(_el$7, mergeProps({
+      get d() {
+        return layoutToPathD(displayLayout());
+      }
+    }, () => props.getResizeHandlerProps(props.direction, getMouseRotate)), true, false);
+    return _el$7;
+  })(), (() => {
+    var _el$8 = _tmpl$7();
+    spread(_el$8, mergeProps({
+      get d() {
+        return layoutToPathD(reseizLayout());
+      }
+    }, () => props.getResizeHandlerProps(props.direction, getMouseRotate)), true, false);
+    return _el$8;
+  })()];
 };
 const ParentEdge = props => {
   const startPoint = createMemo(() => {
@@ -809,10 +864,19 @@ const ParentEdge = props => {
     }[props.direction];
     return (Array.isArray(p) ? p[0] : p) ?? new DOMPoint();
   });
-  return ssr(_tmpl$3, ssrHydrationKey(), `M ${escape(startPoint().x, true)},${escape(startPoint().y, true)} L ${escape(endPoint().x, true)},${escape(endPoint().y, true)}`);
+  return (() => {
+    var _el$9 = _tmpl$3();
+    effect(() => setAttribute(_el$9, "d", `M ${startPoint().x},${startPoint().y} L ${endPoint().x},${endPoint().y}`));
+    return _el$9;
+  })();
 };
 const ParentCenterLine = props => {
-  return props.line ? ssr(_tmpl$3, ssrHydrationKey(), `M ${escape(props.line[0].x, true)},${escape(props.line[0].y, true)} L ${escape(props.line[1].x, true)},${escape(props.line[1].y, true)}`) : null;
+  return memo(() => memo(() => !!props.line)() ? (() => {
+    var _el$10 = _tmpl$3();
+    effect(() => setAttribute(_el$10, "d", `M ${props.line[0].x},${props.line[0].y} L ${props.line[1].x},${props.line[1].y}`));
+    return _el$10;
+  })() : null);
 };
+delegateEvents(["mousedown"]);
 
 export { Transformer as default };

package/es/Tree/SingleLevelTree.js

@@ -1,12 +1,12 @@
-import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape, mergeProps } from 'solid-js/web';
+import { delegateEvents, createComponent, insert, effect, className, setAttribute, memo, mergeProps, template, use } from 'solid-js/web';
 import { isEmpty, last, uniq } from 'lodash-es';
 import { For, createMemo, createSignal, untrack, Show } from 'solid-js';
 import cs from 'classnames';
 import Checkbox from '../Checkbox/index.js';
 
-var _tmpl$ = ["<span", " class=\"i-ant-design:caret-down-outlined\"></span>"],
-  _tmpl$2 = ["<div", " style=\"", "\"", "><div", "><div class=\"flex-shrink-0\" aria-label=\"indent\" style=\"", "\"></div><div", ">", "</div><!--$-->", "<!--/--><div", ">", "</div></div></div>"],
-  _tmpl$3 = ["<span", " class=\"i-ant-design:caret-right-outlined\"></span>"];
+var _tmpl$ = /*#__PURE__*/template(`<span class=i-ant-design:caret-down-outlined>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div><div><div class=flex-shrink-0 aria-label=indent></div><div></div><div>`),
+  _tmpl$3 = /*#__PURE__*/template(`<span class=i-ant-design:caret-right-outlined>`);
 const SingleLevelTree = props => {
   return createComponent(For, {
     get each() {
@@ -84,38 +84,198 @@ const SingleLevelTree = props => {
           props.setCheckedKeys(keys => keys.filter(k => !deleteChildDict.has(k)));
         }
       };
+      let dragEnterClientX = 0;
       const [targetIndexes, setTargetIndexes] = createSignal(untrack(indexes));
       const [isTarget, setIsTarget] = createSignal(false);
       const [targetPosition, setTargetPosition] = createSignal('before');
-      return [ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", escape(cs('p-[var(--ant-tree-node-wrapper-padding)] relative', props.draggableNode() && 'child[]:pointer-events-none', isTarget() && ['before:content-empty before:inline-block before:w-8px before:h-8px before:absolute before:left-[var(--ant-tree-target-node-left)] before:-translate-x-full before:rounded-1/2 before:[border:2px_solid_var(--ant-color-primary)]', 'after:content-empty after:inline-block after:h-2px after:absolute after:left-[var(--ant-tree-target-node-left)] after:right-0 after:bg-[var(--ant-color-primary)]', targetPosition() === 'before' ? 'before:top-0 before:translate-y--1/2 after:top--1px' : 'before:bottom-0 before:translate-y-1/2 after:bottom--1px']), true), false), "--ant-tree-target-node-left:" + `calc(${escape(contentRef?.offsetLeft, true) ?? 0}px + ${"0px"} + ${(escape(targetIndexes().length, true) - escape(indexes().length, true)) * escape(props.indentSize, true)}px)`, ssrAttribute("draggable", escape(props.draggable, true), false), ssrAttribute("class", escape(cs('flex items-center relative', props.isDraggable(item) && 'after:content-empty after:absolute after:inset--1px after:[border:1px_solid_var(--ant-color-primary)]'), true), false), "width:" + `${escape(props.indent, true) * escape(props.indentSize, true)}px`, ssrAttribute("class", escape(cs('flex-shrink-0 w-[var(--ant-tree-expand-icon-width)] flex items-center justify-center cursor-pointer', isEndNode() && 'opacity-0'), true), false), escape(createComponent(Show, {
-        get when() {
-          return isExpanded();
-        },
-        get fallback() {
-          return ssr(_tmpl$3, ssrHydrationKey());
-        },
-        get children() {
-          return ssr(_tmpl$, ssrHydrationKey());
+      const setTargetPositionAndLevelOffset = e => {
+        const middleY = e.target.getBoundingClientRect().top + e.target.clientHeight / 2;
+        const position = e.clientY < middleY ? 'before' : 'after';
+        setTargetPosition(position);
+        if (position === 'after') {
+          if (isExpanded()) {
+            setTargetIndexes([...indexes(), 0]);
+            return;
+          }
+          let isLastNode = props.treeData?.length === i() + 1;
+          if (isLastNode && e.clientX < dragEnterClientX) {
+            const levelOffset = Math.ceil((e.clientX - dragEnterClientX) / props.indentSize);
+            if (levelOffset < 0) {
+              setTargetIndexes(() => {
+                const _indexes = [...indexes()];
+                for (let _i = 0; _i < -levelOffset; _i++) {
+                  if (_i > 0) {
+                    if (_indexes.length < 2) break;
+                    const grandfatherNode = props.getNodeByIndexes(_indexes.slice(0, -1));
+                    isLastNode = grandfatherNode ? props.getChildren(grandfatherNode)?.length === last(_indexes) + 1 : false;
+                    if (!isLastNode) break;
+                  }
+                  _indexes.pop();
+                }
+                _indexes[_indexes.length - 1] = _indexes[_indexes.length - 1] + 1;
+                return _indexes;
+              });
+              return;
+            }
+          }
+          if (isEndNode() && e.clientX > dragEnterClientX) {
+            const levelOffset = (e.clientX - dragEnterClientX) / props.indentSize;
+            if (levelOffset >= 1) {
+              setTargetIndexes([...indexes(), 0]);
+              return;
+            }
+          }
+        } else {
+          // 上一个兄弟节点
+          let prevNode = i() > 0 ? props.treeData?.[i() - 1] : undefined;
+          let isPrevNodeExpanded = prevNode ? !isEmpty(props.getChildren(prevNode)) && props.expandedKeys().includes(props.getKey(prevNode)) : false;
+          if (isPrevNodeExpanded && e.clientX > dragEnterClientX) {
+            const levelOffset = Math.floor((e.clientX - dragEnterClientX) / props.indentSize);
+            if (levelOffset > 0) {
+              setTargetIndexes(() => {
+                const _indexes = [...indexes().slice(0, -1), i() - 1];
+                for (let _i = 0; _i < levelOffset; _i++) {
+                  if (_i > 0) {
+                    prevNode = props.getNodeByIndexes(_indexes);
+                    isPrevNodeExpanded = prevNode ? !isEmpty(props.getChildren(prevNode)) && props.expandedKeys().includes(props.getKey(prevNode)) : false;
+                    if (!isPrevNodeExpanded) break;
+                  }
+                  _indexes.push(props.getChildren(prevNode).length);
+                }
+                return _indexes;
+              });
+              return;
+            }
+          }
         }
-      })), escape(createComponent(Show, {
-        get when() {
-          return props.checkable;
-        },
-        get children() {
-          return createComponent(Checkbox, {
-            "class": "mr-8px mt-2px",
-            get checked() {
-              return props.checkedMap().get(props.getKey(item))?.checked;
-            },
-            get indeterminate() {
-              return props.checkedMap().get(props.getKey(item))?.indeterminate;
-            },
-            onChange: onCheck
+        setTargetIndexes(position === 'before' ? indexes() : [...indexes().slice(0, -1), last(indexes()) + 1]);
+      };
+      return [(() => {
+        var _el$ = _tmpl$2(),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.firstChild,
+          _el$4 = _el$3.nextSibling,
+          _el$6 = _el$4.nextSibling;
+        _el$.addEventListener("drop", () => {
+          setIsTarget(false);
+          props.onDrop?.({
+            dragNode: props.draggableNode(),
+            dragIndexes: props.draggableIndexes(),
+            targetIndexes: targetIndexes()
           });
-        }
-      })), ssrAttribute("class", escape(cs('rounded-[var(--ant-border-radius-sm)] px-[var(--ant-padding-xxs)] cursor-pointer relative min-w-0', props.blockNode && 'w-full', props.isDraggable(item) || props.selectedKeys()?.includes(props.getKey(item)) ? 'bg-[var(--ant-tree-node-selected-bg)]' : 'hover:bg-[var(--ant-tree-node-hover-bg)]'), true), false), escape(props.getTitle(item))), createComponent(Show, {
+        });
+        _el$.addEventListener("dragleave", () => {
+          setIsTarget(false);
+        });
+        _el$.addEventListener("dragenter", e => {
+          dragEnterClientX = e.clientX;
+          setIsTarget(true);
+          setTargetPositionAndLevelOffset(e);
+        });
+        _el$.addEventListener("dragover", e => {
+          e.preventDefault();
+          setTargetPositionAndLevelOffset(e);
+        });
+        _el$.addEventListener("dragend", () => {
+          props.setDraggableNode(null);
+          props.setDraggableIndexes(null);
+        });
+        _el$.addEventListener("dragstart", () => {
+          props.setDraggableNode(item);
+          props.setDraggableIndexes(indexes());
+        });
+        insert(_el$4, createComponent(Show, {
+          get when() {
+            return isExpanded();
+          },
+          get fallback() {
+            return (() => {
+              var _el$7 = _tmpl$3();
+              _el$7.$$click = () => {
+                const key = props.getKey(item);
+                props.setExpandedKeys(l => [...l, key]);
+              };
+              return _el$7;
+            })();
+          },
+          get children() {
+            var _el$5 = _tmpl$();
+            _el$5.$$click = () => {
+              const key = props.getKey(item);
+              props.setExpandedKeys(l => l.filter(k => k !== key));
+            };
+            return _el$5;
+          }
+        }));
+        insert(_el$2, createComponent(Show, {
+          get when() {
+            return props.checkable;
+          },
+          get children() {
+            return createComponent(Checkbox, {
+              "class": "mr-8px mt-2px",
+              get checked() {
+                return props.checkedMap().get(props.getKey(item))?.checked;
+              },
+              get indeterminate() {
+                return props.checkedMap().get(props.getKey(item))?.indeterminate;
+              },
+              onChange: onCheck
+            });
+          }
+        }), _el$6);
+        _el$6.$$click = () => {
+          const key = props.getKey(item);
+          if (!props.selectable) return;
+          if (props.multiple) {
+            props.setSelectedKeys(keys => {
+              keys = keys ?? [];
+              if (keys.includes(key)) {
+                return keys.filter(n => n !== key);
+              }
+              return [...keys, key];
+            });
+          } else {
+            props.setSelectedKeys(keys => {
+              return keys?.includes(key) ? [] : [key];
+            });
+          }
+          if (props.checkOnClick) {
+            onCheck();
+          }
+        };
+        var _ref$ = contentRef;
+        typeof _ref$ === "function" ? use(_ref$, _el$6) : contentRef = _el$6;
+        insert(_el$6, () => props.getTitle(item));
+        effect(_p$ => {
+          var _v$ = cs('p-[var(--ant-tree-node-wrapper-padding)] relative', props.draggableNode() && 'child[]:pointer-events-none', isTarget() && ['before:content-empty before:inline-block before:w-8px before:h-8px before:absolute before:left-[var(--ant-tree-target-node-left)] before:-translate-x-full before:rounded-1/2 before:[border:2px_solid_var(--ant-color-primary)]', 'after:content-empty after:inline-block after:h-2px after:absolute after:left-[var(--ant-tree-target-node-left)] after:right-0 after:bg-[var(--ant-color-primary)]', targetPosition() === 'before' ? 'before:top-0 before:translate-y--1/2 after:top--1px' : 'before:bottom-0 before:translate-y-1/2 after:bottom--1px']),
+            _v$2 = `calc(${contentRef?.offsetLeft ?? 0}px + ${contentRef && window.getComputedStyle(contentRef).paddingLeft || '0px'} + ${(targetIndexes().length - indexes().length) * props.indentSize}px)`,
+            _v$3 = props.draggable,
+            _v$4 = cs('flex items-center relative', props.isDraggable(item) && 'after:content-empty after:absolute after:inset--1px after:[border:1px_solid_var(--ant-color-primary)]'),
+            _v$5 = `${props.indent * props.indentSize}px`,
+            _v$6 = cs('flex-shrink-0 w-[var(--ant-tree-expand-icon-width)] flex items-center justify-center cursor-pointer', isEndNode() && 'opacity-0'),
+            _v$7 = cs('rounded-[var(--ant-border-radius-sm)] px-[var(--ant-padding-xxs)] cursor-pointer relative min-w-0', props.blockNode && 'w-full', props.isDraggable(item) || props.selectedKeys()?.includes(props.getKey(item)) ? 'bg-[var(--ant-tree-node-selected-bg)]' : 'hover:bg-[var(--ant-tree-node-hover-bg)]');
+          _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+          _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("--ant-tree-target-node-left", _v$2) : _el$.style.removeProperty("--ant-tree-target-node-left"));
+          _v$3 !== _p$.a && setAttribute(_el$, "draggable", _p$.a = _v$3);
+          _v$4 !== _p$.o && className(_el$2, _p$.o = _v$4);
+          _v$5 !== _p$.i && ((_p$.i = _v$5) != null ? _el$3.style.setProperty("width", _v$5) : _el$3.style.removeProperty("width"));
+          _v$6 !== _p$.n && className(_el$4, _p$.n = _v$6);
+          _v$7 !== _p$.s && className(_el$6, _p$.s = _v$7);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined,
+          i: undefined,
+          n: undefined,
+          s: undefined
+        });
+        return _el$;
+      })(), createComponent(Show, {
         get when() {
-          return isExpanded() && !isEndNode();
+          return memo(() => !!isExpanded())() && !isEndNode();
         },
         get children() {
           return createComponent(SingleLevelTree, mergeProps(props, {
@@ -134,5 +294,6 @@ const SingleLevelTree = props => {
     }
   });
 };
+delegateEvents(["click"]);
 
 export { SingleLevelTree as default };

package/es/TreeFor/index.js

@@ -1,4 +1,4 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, memo } from 'solid-js/web';
 import { isEmpty, remove } from 'lodash-es';
 import { For, createMemo, createSignal, untrack, Show } from 'solid-js';
 
@@ -42,9 +42,9 @@ function TreeFor(props) {
         onChildChange: props.onChildChange
       };
       const isExpanded = createMemo(() => props.expanded ? props.expanded(item, options) : true);
-      return [props.children(item, options), createComponent(Show, {
+      return [memo(() => props.children(item, options)), createComponent(Show, {
         get when() {
-          return isParent() && isExpanded();
+          return memo(() => !!isParent())() && isExpanded();
         },
         get children() {
           return createComponent(TreeFor, {

package/es/TreeSelect/index.js

@@ -1,4 +1,4 @@
-import { createComponent, mergeProps, ssr, ssrHydrationKey, escape } from 'solid-js/web';
+import { createComponent, mergeProps, insert, template } from 'solid-js/web';
 import { splitProps, untrack, createMemo, Show } from 'solid-js';
 import { isNil, isEmpty, get } from 'lodash-es';
 import createControllableValue from '../hooks/createControllableValue.js';
@@ -7,7 +7,7 @@ import SelectInput from '../SelectInput/index.js';
 import { unwrapStringOrJSXElement } from '../utils/solid.js';
 import Empty from '../Empty/index.js';
 
-var _tmpl$ = ["<div", " class=\"px-4px py-8px\">", "</div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div class="px-4px py-8px">`);
 const TreeSelect = props => {
   const [selectInputProps] = splitProps(props, ['multiple', 'allowClear', 'class', 'disabled', 'placeholder', 'status', 'size']);
   const [treeProps] = splitProps(props, ['treeData', 'checkable', 'checkStrategy']);
@@ -62,7 +62,8 @@ const TreeSelect = props => {
         return createComponent(Empty.PRESENTED_IMAGE_SIMPLE, {});
       },
       get children() {
-        return ssr(_tmpl$, ssrHydrationKey(), escape(createComponent(Tree, mergeProps({
+        var _el$ = _tmpl$();
+        insert(_el$, createComponent(Tree, mergeProps({
           get multiple() {
             return props.multiple;
           },
@@ -87,7 +88,8 @@ const TreeSelect = props => {
             setValueArr(selectedKeys);
             if (!props.multiple) close();
           }
-        }, treeProps))));
+        }, treeProps)));
+        return _el$;
       }
     })
   }));