@unicitylabs/sphere-ui 0.1.7 → 0.1.8

package/dist/index.js

@@ -474,7 +474,8 @@ function EmptyState({ title, description, action }) {
 }
 
 // src/components/CustomSelect.tsx
-import { useState as useState2, useRef, useEffect as useEffect3 } from "react";
+import { useState as useState2, useRef, useEffect as useEffect3, useCallback } from "react";
+import { createPortal as createPortal3 } from "react-dom";
 import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function CustomSelect({
   options,
@@ -485,13 +486,23 @@ function CustomSelect({
   size = "md"
 }) {
   const [open, setOpen] = useState2(false);
-  const ref = useRef(null);
+  const btnRef = useRef(null);
+  const dropRef = useRef(null);
+  const [pos, setPos] = useState2({ top: 0, left: 0, width: 0 });
   const selected = options.find((o) => o.value === value);
   const label = selected?.label ?? placeholder ?? "Select...";
+  const updatePos = useCallback(() => {
+    if (!btnRef.current) return;
+    const rect = btnRef.current.getBoundingClientRect();
+    setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width });
+  }, []);
   useEffect3(() => {
     if (!open) return;
     const handler = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+      const target = e.target;
+      if (btnRef.current?.contains(target)) return;
+      if (dropRef.current?.contains(target)) return;
+      setOpen(false);
     };
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
@@ -504,13 +515,27 @@ function CustomSelect({
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
   }, [open]);
+  useEffect3(() => {
+    if (!open) return;
+    updatePos();
+    window.addEventListener("scroll", updatePos, true);
+    window.addEventListener("resize", updatePos);
+    return () => {
+      window.removeEventListener("scroll", updatePos, true);
+      window.removeEventListener("resize", updatePos);
+    };
+  }, [open, updatePos]);
   const textSize = size === "sm" ? "text-xs" : "text-sm";
-  return /* @__PURE__ */ jsxs10("div", { ref, className: `relative ${className}`, children: [
+  return /* @__PURE__ */ jsxs10("div", { className, children: [
     /* @__PURE__ */ jsxs10(
       "button",
       {
+        ref: btnRef,
         type: "button",
-        onClick: () => setOpen((o) => !o),
+        onClick: () => {
+          updatePos();
+          setOpen((o) => !o);
+        },
         className: `admin-input w-full flex items-center justify-between gap-2 ${textSize} text-left`,
         style: { color: selected ? "var(--text-primary)" : "var(--text-muted)" },
         children: [
@@ -537,40 +562,50 @@ function CustomSelect({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx11(
-      "div",
-      {
-        className: "absolute left-0 right-0 top-full mt-1 z-30 py-1 max-h-48 overflow-y-auto",
-        style: {
-          background: "var(--bg-elevated)",
-          border: "1px solid var(--border)",
-          borderRadius: "var(--radius-md)",
-          boxShadow: "0 8px 24px rgba(0,0,0,0.4)"
-        },
-        children: options.map((opt) => /* @__PURE__ */ jsx11(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              onChange(opt.value);
-              setOpen(false);
-            },
-            className: `block w-full text-left px-3 py-1.5 ${textSize} transition-colors`,
-            style: {
-              color: opt.value === value ? "var(--accent-text)" : "var(--text-primary)",
-              background: opt.value === value ? "var(--accent-glow)" : "transparent"
-            },
-            onMouseEnter: (e) => {
-              if (opt.value !== value) e.currentTarget.style.background = "var(--bg-hover)";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.background = opt.value === value ? "var(--accent-glow)" : "transparent";
-            },
-            children: opt.label
+    open && createPortal3(
+      /* @__PURE__ */ jsx11(
+        "div",
+        {
+          ref: dropRef,
+          className: "py-1 max-h-48 overflow-y-auto",
+          style: {
+            position: "fixed",
+            top: pos.top,
+            left: pos.left,
+            width: pos.width,
+            minWidth: 120,
+            zIndex: 9999,
+            background: "var(--bg-elevated)",
+            border: "1px solid var(--border)",
+            borderRadius: "var(--radius-md)",
+            boxShadow: "0 8px 24px rgba(0,0,0,0.4)"
           },
-          opt.value
-        ))
-      }
+          children: options.map((opt) => /* @__PURE__ */ jsx11(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                onChange(opt.value);
+                setOpen(false);
+              },
+              className: `block w-full text-left px-3 py-1.5 ${textSize} transition-colors`,
+              style: {
+                color: opt.value === value ? "var(--accent-text)" : "var(--text-primary)",
+                background: opt.value === value ? "var(--accent-glow)" : "transparent"
+              },
+              onMouseEnter: (e) => {
+                if (opt.value !== value) e.currentTarget.style.background = "var(--bg-hover)";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.background = opt.value === value ? "var(--accent-glow)" : "transparent";
+              },
+              children: opt.label
+            },
+            opt.value
+          ))
+        }
+      ),
+      document.body
     )
   ] });
 }
@@ -703,7 +738,7 @@ function AlertBanner({ type, title, children }) {
 }
 
 // src/components/AddressDisplay.tsx
-import { useState as useState4, useCallback } from "react";
+import { useState as useState4, useCallback as useCallback2 } from "react";
 import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 function truncateAddress(address) {
   const prefix = "DIRECT://";
@@ -720,7 +755,7 @@ function truncateAddress(address) {
 }
 function AddressDisplay({ address, nametag, truncate = true }) {
   const [copied, setCopied] = useState4(false);
-  const handleCopy = useCallback(() => {
+  const handleCopy = useCallback2(() => {
     navigator.clipboard.writeText(address).then(() => {
       setCopied(true);
       setTimeout(() => setCopied(false), 1500);
@@ -774,7 +809,7 @@ function AddressDisplay({ address, nametag, truncate = true }) {
 }
 
 // src/components/JsonPanel.tsx
-import { useState as useState5, useEffect as useEffect4, useRef as useRef2, useCallback as useCallback2 } from "react";
+import { useState as useState5, useEffect as useEffect4, useRef as useRef2, useCallback as useCallback3 } from "react";
 import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 function JsonPanel({
   value,
@@ -796,7 +831,7 @@ function JsonPanel({
     setText(JSON.stringify(clean, null, 2));
     setParseError(null);
   }, [value, isEditing, excludeKeys]);
-  const handleChange = useCallback2((newText) => {
+  const handleChange = useCallback3((newText) => {
     setText(newText);
     try {
       const parsed = JSON.parse(newText);
@@ -806,10 +841,10 @@ function JsonPanel({
       setParseError(e instanceof Error ? e.message : "Invalid JSON");
     }
   }, [onChange]);
-  const handleFocus = useCallback2(() => setIsEditing(true), []);
-  const handleBlur = useCallback2(() => setIsEditing(false), []);
+  const handleFocus = useCallback3(() => setIsEditing(true), []);
+  const handleBlur = useCallback3(() => setIsEditing(false), []);
   const [copied, setCopied] = useState5(false);
-  const handleCopy = useCallback2(async () => {
+  const handleCopy = useCallback3(async () => {
     await navigator.clipboard.writeText(text);
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unicitylabs/sphere-ui",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",