@epoch32/visage 1.1.1 → 1.1.3

package/dist/api/index.js

@@ -988,7 +988,7 @@ function createContext(defaultValue) {
       }
       scope.context.set(id, props.value);
       return runInScope(scope, () => {
-        const content = typeof props.children === "function" ? untrack(() => props.children()) : props.children;
+        const content = typeof props.children === "function" ? props.children() : props.children;
         if (typeof document !== "undefined") {
           const frag = document.createDocumentFragment();
           insertChild(frag, content);

package/dist/charts/index.js

@@ -724,7 +724,7 @@ function createContext(defaultValue) {
       }
       scope.context.set(id, props.value);
       return runInScope(scope, () => {
-        const content = typeof props.children === "function" ? untrack(() => props.children()) : props.children;
+        const content = typeof props.children === "function" ? props.children() : props.children;
         if (typeof document !== "undefined") {
           const frag = document.createDocumentFragment();
           insertChild(frag, content);
@@ -1498,11 +1498,11 @@ function Show(props) {
     }
     return props.fallback ?? null;
   }
-  const marker = document.createTextNode("");
+  const marker = document.createComment("visage-show");
   const initialFrag = document.createDocumentFragment();
+  initialFrag.appendChild(marker);
   let currentScope = null;
   let currentContent = [];
-  let isMounted = false;
   effect(() => {
     const condition = resolveValue(props.when);
     if (currentScope) {
@@ -1528,23 +1528,29 @@ function Show(props) {
       currentScope = new Scope(getActiveScope());
       untrack(() => {
         runInScope(currentScope, () => {
-          insertChild(frag, props.fallback);
+          const fallbackRes = typeof props.fallback === "function" ? props.fallback() : props.fallback;
+          insertChild(frag, fallbackRes);
         });
       });
     }
     currentContent = Array.from(frag.childNodes);
-    if (marker.parentNode) {
-      marker.parentNode.insertBefore(frag, marker);
-    } else if (!isMounted) {
-      initialFrag.appendChild(frag);
+    const parent = marker.parentNode;
+    if (parent) {
+      parent.insertBefore(frag, marker);
     }
   });
-  isMounted = true;
-  initialFrag.appendChild(marker);
   onCleanup(() => {
     if (currentScope) {
       currentScope.dispose();
     }
+    for (const node of currentContent) {
+      if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    }
+    if (marker.parentNode) {
+      marker.parentNode.removeChild(marker);
+    }
   });
   return initialFrag;
 }

package/dist/devtools/index.js

@@ -724,7 +724,7 @@ function createContext(defaultValue) {
       }
       scope.context.set(id, props.value);
       return runInScope(scope, () => {
-        const content = typeof props.children === "function" ? untrack(() => props.children()) : props.children;
+        const content = typeof props.children === "function" ? props.children() : props.children;
         if (typeof document !== "undefined") {
           const frag = document.createDocumentFragment();
           insertChild(frag, content);
@@ -1947,11 +1947,11 @@ function Show(props) {
     }
     return props.fallback ?? null;
   }
-  const marker = document.createTextNode("");
+  const marker = document.createComment("visage-show");
   const initialFrag = document.createDocumentFragment();
+  initialFrag.appendChild(marker);
   let currentScope = null;
   let currentContent = [];
-  let isMounted = false;
   effect(() => {
     const condition = resolveValue(props.when);
     if (currentScope) {
@@ -1977,23 +1977,29 @@ function Show(props) {
       currentScope = new Scope(getActiveScope());
       untrack(() => {
         runInScope(currentScope, () => {
-          insertChild(frag, props.fallback);
+          const fallbackRes = typeof props.fallback === "function" ? props.fallback() : props.fallback;
+          insertChild(frag, fallbackRes);
         });
       });
     }
     currentContent = Array.from(frag.childNodes);
-    if (marker.parentNode) {
-      marker.parentNode.insertBefore(frag, marker);
-    } else if (!isMounted) {
-      initialFrag.appendChild(frag);
+    const parent = marker.parentNode;
+    if (parent) {
+      parent.insertBefore(frag, marker);
     }
   });
-  isMounted = true;
-  initialFrag.appendChild(marker);
   onCleanup(() => {
     if (currentScope) {
       currentScope.dispose();
     }
+    for (const node of currentContent) {
+      if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    }
+    if (marker.parentNode) {
+      marker.parentNode.removeChild(marker);
+    }
   });
   return initialFrag;
 }
@@ -2503,7 +2509,12 @@ function TabsTrigger(props) {
     "data-value": value,
     tabIndex: () => isSelected() ? 0 : -1,
     disabled,
-    class: className,
+    class: [
+      className,
+      {
+        active: isSelected
+      }
+    ],
     style,
     onClick: handleClick,
     ...rest,

package/dist/dom/index.js

@@ -724,7 +724,7 @@ function createContext(defaultValue) {
       }
       scope.context.set(id, props.value);
       return runInScope(scope, () => {
-        const content = typeof props.children === "function" ? untrack(() => props.children()) : props.children;
+        const content = typeof props.children === "function" ? props.children() : props.children;
         if (typeof document !== "undefined") {
           const frag = document.createDocumentFragment();
           insertChild(frag, content);
@@ -1385,11 +1385,11 @@ function Show(props) {
     }
     return props.fallback ?? null;
   }
-  const marker = document.createTextNode("");
+  const marker = document.createComment("visage-show");
   const initialFrag = document.createDocumentFragment();
+  initialFrag.appendChild(marker);
   let currentScope = null;
   let currentContent = [];
-  let isMounted = false;
   effect(() => {
     const condition = resolveValue(props.when);
     if (currentScope) {
@@ -1415,23 +1415,29 @@ function Show(props) {
       currentScope = new Scope(getActiveScope());
       untrack(() => {
         runInScope(currentScope, () => {
-          insertChild(frag, props.fallback);
+          const fallbackRes = typeof props.fallback === "function" ? props.fallback() : props.fallback;
+          insertChild(frag, fallbackRes);
         });
       });
     }
     currentContent = Array.from(frag.childNodes);
-    if (marker.parentNode) {
-      marker.parentNode.insertBefore(frag, marker);
-    } else if (!isMounted) {
-      initialFrag.appendChild(frag);
+    const parent = marker.parentNode;
+    if (parent) {
+      parent.insertBefore(frag, marker);
     }
   });
-  isMounted = true;
-  initialFrag.appendChild(marker);
   onCleanup(() => {
     if (currentScope) {
       currentScope.dispose();
     }
+    for (const node of currentContent) {
+      if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    }
+    if (marker.parentNode) {
+      marker.parentNode.removeChild(marker);
+    }
   });
   return initialFrag;
 }

package/dist/form/index.js

@@ -724,7 +724,7 @@ function createContext(defaultValue) {
       }
       scope.context.set(id, props.value);
       return runInScope(scope, () => {
-        const content = typeof props.children === "function" ? untrack(() => props.children()) : props.children;
+        const content = typeof props.children === "function" ? props.children() : props.children;
         if (typeof document !== "undefined") {
           const frag = document.createDocumentFragment();
           insertChild(frag, content);

package/dist/index.js

@@ -988,7 +988,7 @@ function createContext(defaultValue) {
       }
       scope.context.set(id, props.value);
       return runInScope(scope, () => {
-        const content = typeof props.children === "function" ? untrack(() => props.children()) : props.children;
+        const content = typeof props.children === "function" ? props.children() : props.children;
         if (typeof document !== "undefined") {
           const frag = document.createDocumentFragment();
           insertChild(frag, content);
@@ -4220,11 +4220,11 @@ function Show(props) {
     }
     return props.fallback ?? null;
   }
-  const marker = document.createTextNode("");
+  const marker = document.createComment("visage-show");
   const initialFrag = document.createDocumentFragment();
+  initialFrag.appendChild(marker);
   let currentScope = null;
   let currentContent = [];
-  let isMounted = false;
   effect(() => {
     const condition = resolveValue(props.when);
     if (currentScope) {
@@ -4250,23 +4250,29 @@ function Show(props) {
       currentScope = new Scope(getActiveScope());
       untrack(() => {
         runInScope(currentScope, () => {
-          insertChild(frag, props.fallback);
+          const fallbackRes = typeof props.fallback === "function" ? props.fallback() : props.fallback;
+          insertChild(frag, fallbackRes);
         });
       });
     }
     currentContent = Array.from(frag.childNodes);
-    if (marker.parentNode) {
-      marker.parentNode.insertBefore(frag, marker);
-    } else if (!isMounted) {
-      initialFrag.appendChild(frag);
+    const parent = marker.parentNode;
+    if (parent) {
+      parent.insertBefore(frag, marker);
     }
   });
-  isMounted = true;
-  initialFrag.appendChild(marker);
   onCleanup(() => {
     if (currentScope) {
       currentScope.dispose();
     }
+    for (const node of currentContent) {
+      if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    }
+    if (marker.parentNode) {
+      marker.parentNode.removeChild(marker);
+    }
   });
   return initialFrag;
 }
@@ -6550,7 +6556,12 @@ function TabsTrigger(props) {
     "data-value": value,
     tabIndex: () => isSelected() ? 0 : -1,
     disabled,
-    class: className,
+    class: [
+      className,
+      {
+        active: isSelected
+      }
+    ],
     style,
     onClick: handleClick,
     ...rest,

package/dist/jsx-runtime/index.js

@@ -724,7 +724,7 @@ function createContext(defaultValue) {
       }
       scope.context.set(id, props.value);
       return runInScope(scope, () => {
-        const content = typeof props.children === "function" ? untrack(() => props.children()) : props.children;
+        const content = typeof props.children === "function" ? props.children() : props.children;
         if (typeof document !== "undefined") {
           const frag = document.createDocumentFragment();
           insertChild(frag, content);
@@ -1385,11 +1385,11 @@ function Show(props) {
     }
     return props.fallback ?? null;
   }
-  const marker = document.createTextNode("");
+  const marker = document.createComment("visage-show");
   const initialFrag = document.createDocumentFragment();
+  initialFrag.appendChild(marker);
   let currentScope = null;
   let currentContent = [];
-  let isMounted = false;
   effect(() => {
     const condition = resolveValue(props.when);
     if (currentScope) {
@@ -1415,23 +1415,29 @@ function Show(props) {
       currentScope = new Scope(getActiveScope());
       untrack(() => {
         runInScope(currentScope, () => {
-          insertChild(frag, props.fallback);
+          const fallbackRes = typeof props.fallback === "function" ? props.fallback() : props.fallback;
+          insertChild(frag, fallbackRes);
         });
       });
     }
     currentContent = Array.from(frag.childNodes);
-    if (marker.parentNode) {
-      marker.parentNode.insertBefore(frag, marker);
-    } else if (!isMounted) {
-      initialFrag.appendChild(frag);
+    const parent = marker.parentNode;
+    if (parent) {
+      parent.insertBefore(frag, marker);
     }
   });
-  isMounted = true;
-  initialFrag.appendChild(marker);
   onCleanup(() => {
     if (currentScope) {
       currentScope.dispose();
     }
+    for (const node of currentContent) {
+      if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    }
+    if (marker.parentNode) {
+      marker.parentNode.removeChild(marker);
+    }
   });
   return initialFrag;
 }

package/dist/query/index.js

@@ -724,7 +724,7 @@ function createContext(defaultValue) {
       }
       scope.context.set(id, props.value);
       return runInScope(scope, () => {
-        const content = typeof props.children === "function" ? untrack(() => props.children()) : props.children;
+        const content = typeof props.children === "function" ? props.children() : props.children;
         if (typeof document !== "undefined") {
           const frag = document.createDocumentFragment();
           insertChild(frag, content);

package/dist/router/index.js

@@ -724,7 +724,7 @@ function createContext(defaultValue) {
       }
       scope.context.set(id, props.value);
       return runInScope(scope, () => {
-        const content = typeof props.children === "function" ? untrack(() => props.children()) : props.children;
+        const content = typeof props.children === "function" ? props.children() : props.children;
         if (typeof document !== "undefined") {
           const frag = document.createDocumentFragment();
           insertChild(frag, content);
@@ -1385,11 +1385,11 @@ function Show(props) {
     }
     return props.fallback ?? null;
   }
-  const marker = document.createTextNode("");
+  const marker = document.createComment("visage-show");
   const initialFrag = document.createDocumentFragment();
+  initialFrag.appendChild(marker);
   let currentScope = null;
   let currentContent = [];
-  let isMounted = false;
   effect(() => {
     const condition = resolveValue(props.when);
     if (currentScope) {
@@ -1415,23 +1415,29 @@ function Show(props) {
       currentScope = new Scope(getActiveScope());
       untrack(() => {
         runInScope(currentScope, () => {
-          insertChild(frag, props.fallback);
+          const fallbackRes = typeof props.fallback === "function" ? props.fallback() : props.fallback;
+          insertChild(frag, fallbackRes);
         });
       });
     }
     currentContent = Array.from(frag.childNodes);
-    if (marker.parentNode) {
-      marker.parentNode.insertBefore(frag, marker);
-    } else if (!isMounted) {
-      initialFrag.appendChild(frag);
+    const parent = marker.parentNode;
+    if (parent) {
+      parent.insertBefore(frag, marker);
     }
   });
-  isMounted = true;
-  initialFrag.appendChild(marker);
   onCleanup(() => {
     if (currentScope) {
       currentScope.dispose();
     }
+    for (const node of currentContent) {
+      if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    }
+    if (marker.parentNode) {
+      marker.parentNode.removeChild(marker);
+    }
   });
   return initialFrag;
 }

package/dist/rpc/index.js

@@ -934,7 +934,7 @@ function createContext(defaultValue) {
       }
       scope.context.set(id, props.value);
       return runInScope(scope, () => {
-        const content = typeof props.children === "function" ? untrack(() => props.children()) : props.children;
+        const content = typeof props.children === "function" ? props.children() : props.children;
         if (typeof document !== "undefined") {
           const frag = document.createDocumentFragment();
           insertChild(frag, content);

package/dist/server/index.js

@@ -307,7 +307,7 @@ function createContext(defaultValue) {
       }
       scope.context.set(id, props.value);
       return runInScope(scope, () => {
-        const content = typeof props.children === "function" ? untrack(() => props.children()) : props.children;
+        const content = typeof props.children === "function" ? props.children() : props.children;
         if (typeof document !== "undefined") {
           const frag = document.createDocumentFragment();
           insertChild(frag, content);

package/dist/signals/index.js

@@ -724,7 +724,7 @@ function createContext(defaultValue) {
       }
       scope.context.set(id, props.value);
       return runInScope(scope, () => {
-        const content = typeof props.children === "function" ? untrack(() => props.children()) : props.children;
+        const content = typeof props.children === "function" ? props.children() : props.children;
         if (typeof document !== "undefined") {
           const frag = document.createDocumentFragment();
           insertChild(frag, content);

package/dist/style/index.js

@@ -724,7 +724,7 @@ function createContext(defaultValue) {
       }
       scope.context.set(id, props.value);
       return runInScope(scope, () => {
-        const content = typeof props.children === "function" ? untrack(() => props.children()) : props.children;
+        const content = typeof props.children === "function" ? props.children() : props.children;
         if (typeof document !== "undefined") {
           const frag = document.createDocumentFragment();
           insertChild(frag, content);
@@ -1818,11 +1818,11 @@ function Show(props) {
     }
     return props.fallback ?? null;
   }
-  const marker = document.createTextNode("");
+  const marker = document.createComment("visage-show");
   const initialFrag = document.createDocumentFragment();
+  initialFrag.appendChild(marker);
   let currentScope = null;
   let currentContent = [];
-  let isMounted = false;
   effect(() => {
     const condition = resolveValue(props.when);
     if (currentScope) {
@@ -1848,23 +1848,29 @@ function Show(props) {
       currentScope = new Scope(getActiveScope());
       untrack(() => {
         runInScope(currentScope, () => {
-          insertChild(frag, props.fallback);
+          const fallbackRes = typeof props.fallback === "function" ? props.fallback() : props.fallback;
+          insertChild(frag, fallbackRes);
         });
       });
     }
     currentContent = Array.from(frag.childNodes);
-    if (marker.parentNode) {
-      marker.parentNode.insertBefore(frag, marker);
-    } else if (!isMounted) {
-      initialFrag.appendChild(frag);
+    const parent = marker.parentNode;
+    if (parent) {
+      parent.insertBefore(frag, marker);
     }
   });
-  isMounted = true;
-  initialFrag.appendChild(marker);
   onCleanup(() => {
     if (currentScope) {
       currentScope.dispose();
     }
+    for (const node of currentContent) {
+      if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    }
+    if (marker.parentNode) {
+      marker.parentNode.removeChild(marker);
+    }
   });
   return initialFrag;
 }

package/dist/template/index.js

@@ -307,7 +307,7 @@ function createContext(defaultValue) {
       }
       scope.context.set(id, props.value);
       return runInScope(scope, () => {
-        const content = typeof props.children === "function" ? untrack(() => props.children()) : props.children;
+        const content = typeof props.children === "function" ? props.children() : props.children;
         if (typeof document !== "undefined") {
           const frag = document.createDocumentFragment();
           insertChild(frag, content);

package/dist/ui/index.js

@@ -724,7 +724,7 @@ function createContext(defaultValue) {
       }
       scope.context.set(id, props.value);
       return runInScope(scope, () => {
-        const content = typeof props.children === "function" ? untrack(() => props.children()) : props.children;
+        const content = typeof props.children === "function" ? props.children() : props.children;
         if (typeof document !== "undefined") {
           const frag = document.createDocumentFragment();
           insertChild(frag, content);
@@ -1142,11 +1142,11 @@ function Show(props) {
     }
     return props.fallback ?? null;
   }
-  const marker = document.createTextNode("");
+  const marker = document.createComment("visage-show");
   const initialFrag = document.createDocumentFragment();
+  initialFrag.appendChild(marker);
   let currentScope = null;
   let currentContent = [];
-  let isMounted = false;
   effect(() => {
     const condition = resolveValue(props.when);
     if (currentScope) {
@@ -1172,23 +1172,29 @@ function Show(props) {
       currentScope = new Scope(getActiveScope());
       untrack(() => {
         runInScope(currentScope, () => {
-          insertChild(frag, props.fallback);
+          const fallbackRes = typeof props.fallback === "function" ? props.fallback() : props.fallback;
+          insertChild(frag, fallbackRes);
         });
       });
     }
     currentContent = Array.from(frag.childNodes);
-    if (marker.parentNode) {
-      marker.parentNode.insertBefore(frag, marker);
-    } else if (!isMounted) {
-      initialFrag.appendChild(frag);
+    const parent = marker.parentNode;
+    if (parent) {
+      parent.insertBefore(frag, marker);
     }
   });
-  isMounted = true;
-  initialFrag.appendChild(marker);
   onCleanup(() => {
     if (currentScope) {
       currentScope.dispose();
     }
+    for (const node of currentContent) {
+      if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    }
+    if (marker.parentNode) {
+      marker.parentNode.removeChild(marker);
+    }
   });
   return initialFrag;
 }
@@ -3768,7 +3774,12 @@ function TabsTrigger(props) {
     "data-value": value,
     tabIndex: () => isSelected() ? 0 : -1,
     disabled,
-    class: className,
+    class: [
+      className,
+      {
+        active: isSelected
+      }
+    ],
     style,
     onClick: handleClick,
     ...rest,

package/dist/virtual/index.js

@@ -724,7 +724,7 @@ function createContext(defaultValue) {
       }
       scope.context.set(id, props.value);
       return runInScope(scope, () => {
-        const content = typeof props.children === "function" ? untrack(() => props.children()) : props.children;
+        const content = typeof props.children === "function" ? props.children() : props.children;
         if (typeof document !== "undefined") {
           const frag = document.createDocumentFragment();
           insertChild(frag, content);
@@ -1142,11 +1142,11 @@ function Show(props) {
     }
     return props.fallback ?? null;
   }
-  const marker = document.createTextNode("");
+  const marker = document.createComment("visage-show");
   const initialFrag = document.createDocumentFragment();
+  initialFrag.appendChild(marker);
   let currentScope = null;
   let currentContent = [];
-  let isMounted = false;
   effect(() => {
     const condition = resolveValue(props.when);
     if (currentScope) {
@@ -1172,23 +1172,29 @@ function Show(props) {
       currentScope = new Scope(getActiveScope());
       untrack(() => {
         runInScope(currentScope, () => {
-          insertChild(frag, props.fallback);
+          const fallbackRes = typeof props.fallback === "function" ? props.fallback() : props.fallback;
+          insertChild(frag, fallbackRes);
         });
       });
     }
     currentContent = Array.from(frag.childNodes);
-    if (marker.parentNode) {
-      marker.parentNode.insertBefore(frag, marker);
-    } else if (!isMounted) {
-      initialFrag.appendChild(frag);
+    const parent = marker.parentNode;
+    if (parent) {
+      parent.insertBefore(frag, marker);
     }
   });
-  isMounted = true;
-  initialFrag.appendChild(marker);
   onCleanup(() => {
     if (currentScope) {
       currentScope.dispose();
     }
+    for (const node of currentContent) {
+      if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    }
+    if (marker.parentNode) {
+      marker.parentNode.removeChild(marker);
+    }
   });
   return initialFrag;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epoch32/visage",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "Lightning-fast, zero-VDOM, fine-grained reactive UI library with full TypeScript support",
   "type": "module",
   "main": "./dist/index.js",

package/src/dom/control-flow.ts

@@ -33,11 +33,12 @@ export function Show<T>(props: ShowProps<T>): any {
     return props.fallback ?? null;
   }
 
-  const marker = document.createTextNode("");
+  const marker = document.createComment("visage-show");
   const initialFrag = document.createDocumentFragment();
+  initialFrag.appendChild(marker);
+
   let currentScope: Scope | null = null;
   let currentContent: Node[] = [];
-  let isMounted = false;
 
   effect(() => {
     const condition = resolveValue(props.when);
@@ -75,27 +76,35 @@ export function Show<T>(props: ShowProps<T>): any {
       currentScope = new Scope(getActiveScope());
       untrack(() => {
         runInScope(currentScope, () => {
-          insertChild(frag, props.fallback);
+          const fallbackRes =
+            typeof props.fallback === "function"
+              ? (props.fallback as () => Child)()
+              : props.fallback;
+          insertChild(frag, fallbackRes);
         });
       });
     }
 
     currentContent = Array.from(frag.childNodes);
 
-    if (marker.parentNode) {
-      marker.parentNode.insertBefore(frag, marker);
-    } else if (!isMounted) {
-      initialFrag.appendChild(frag);
+    const parent = marker.parentNode;
+    if (parent) {
+      parent.insertBefore(frag, marker);
     }
   });
 
-  isMounted = true;
-  initialFrag.appendChild(marker);
-
   onCleanup(() => {
     if (currentScope) {
       currentScope.dispose();
     }
+    for (const node of currentContent) {
+      if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    }
+    if (marker.parentNode) {
+      marker.parentNode.removeChild(marker);
+    }
   });
 
   return initialFrag;

package/src/signals/context.ts

@@ -1,6 +1,5 @@
 import { type Child, insertChild } from "../dom/render";
 import { getActiveScope, runInScope, Scope } from "./scope";
-import { untrack } from "./system";
 
 export interface Context<T> {
   id: symbol;
@@ -54,7 +53,7 @@ export function createContext<T>(defaultValue?: T): Context<T | undefined> {
       return runInScope(scope, () => {
         const content =
           typeof props.children === "function"
-            ? untrack(() => (props.children as (...args: any[]) => any)())
+            ? (props.children as (...args: any[]) => any)()
             : props.children;
         if (typeof document !== "undefined") {
           const frag = document.createDocumentFragment();

package/src/ui/tabs.tsx

@@ -227,7 +227,12 @@ export function TabsTrigger(props: TabsTriggerProps): Child {
       data-value={value}
       tabIndex={() => (isSelected() ? 0 : -1)}
       disabled={disabled}
-      class={className}
+      class={[
+        className,
+        {
+          active: isSelected
+        }
+      ]}
       style={style}
       onClick={handleClick}
       {...rest}