coinley-test 0.0.34 → 0.0.36

package/dist/index.esm.js

@@ -2032,7 +2032,7 @@ const ModernDropdown = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
-  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
+  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0, maxHeight: 400 });
   const dropdownRef = useRef(null);
   const buttonRef = useRef(null);
   const filteredOptions = options.filter((option) => {
@@ -2045,11 +2045,35 @@ const ModernDropdown = ({
       const rect = buttonRef.current.getBoundingClientRect();
       const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
       const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+      const viewportHeight = window.innerHeight;
+      const dropdownHeight = 400;
+      const gap = 8;
+      const spaceBelow = viewportHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      let top, maxHeight;
+      if (spaceBelow >= dropdownHeight + gap) {
+        top = rect.bottom + scrollTop + gap;
+        maxHeight = Math.min(dropdownHeight, spaceBelow - gap - 20);
+      } else if (spaceAbove >= dropdownHeight + gap) {
+        top = rect.top + scrollTop - dropdownHeight - gap;
+        maxHeight = Math.min(dropdownHeight, spaceAbove - gap - 20);
+      } else {
+        if (spaceBelow > spaceAbove) {
+          top = rect.bottom + scrollTop + gap;
+          maxHeight = spaceBelow - gap - 20;
+        } else {
+          const constrainedHeight = spaceAbove - gap - 20;
+          top = rect.top + scrollTop - constrainedHeight - gap;
+          maxHeight = constrainedHeight;
+        }
+      }
+      maxHeight = Math.max(maxHeight, 200);
       setDropdownPosition({
-        top: rect.bottom + scrollTop + 8,
-        // 8px gap
+        top: Math.max(top, scrollTop + 10),
+        // Ensure it's not too high
         left: rect.left + scrollLeft,
-        width: rect.width
+        width: rect.width,
+        maxHeight
       });
     }
   };
@@ -2094,15 +2118,16 @@ const ModernDropdown = ({
     "div",
     {
       ref: dropdownRef,
-      className: "fixed z-[9999] bg-white border-2 border-gray-200 rounded-2xl shadow-2xl overflow-hidden",
+      className: "fixed bg-white border-2 border-gray-200 rounded-2xl shadow-2xl overflow-hidden",
       style: {
         top: dropdownPosition.top,
         left: dropdownPosition.left,
         width: dropdownPosition.width,
-        maxHeight: "400px",
-        // Increased max height
-        minWidth: "300px"
+        maxHeight: dropdownPosition.maxHeight || 400,
+        minWidth: "300px",
         // Ensure minimum width
+        zIndex: 999999
+        // Very high z-index to appear above modal
       },
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 border-b border-gray-200 bg-gray-50", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -2117,34 +2142,45 @@ const ModernDropdown = ({
             autoFocus: true
           }
         ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-h-80 min-h-32 overflow-y-auto custom-scrollbar", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6 text-gray-500 text-center", style: { fontFamily: "Bricolage Grotesque, sans-serif" }, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-gray-400 mb-2", children: "🔍" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "No options found" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-400 mt-1", children: "Try a different search term" })
-        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-2 bg-gray-50 border-b border-gray-100 text-xs text-gray-600", style: { fontFamily: "Bricolage Grotesque, sans-serif" }, children: [
-            filteredOptions.length,
-            " option",
-            filteredOptions.length !== 1 ? "s" : "",
-            " available"
-          ] }),
-          filteredOptions.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                onChange(getOptionValue(option));
-                setIsOpen(false);
-                setSearchTerm("");
-              },
-              className: `w-full p-4 text-left hover:bg-[#7042D2]/10 transition-colors duration-200 border-b border-gray-100 last:border-b-0 ${getOptionValue(option) === value ? "bg-[#7042D2]/20 text-[#7042D2]" : "text-gray-800"}`,
-              style: { fontFamily: "Bricolage Grotesque, sans-serif" },
-              children: renderOption(option)
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "overflow-y-auto custom-scrollbar",
+            style: {
+              maxHeight: `${(dropdownPosition.maxHeight || 400) - 120}px`,
+              // Subtract header and footer
+              minHeight: "120px"
             },
-            getOptionKey(option)
-          ))
-        ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 bg-gray-50 border-t border-gray-200 text-xs text-gray-500 text-center", style: { fontFamily: "Bricolage Grotesque, sans-serif" }, children: filteredOptions.length > 5 ? "Scroll to see more options" : "Select an option above" })
+            children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6 text-gray-500 text-center", style: { fontFamily: "Bricolage Grotesque, sans-serif" }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-gray-400 mb-2", children: "🔍" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "No options found" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-400 mt-1", children: "Try a different search term" })
+            ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-2 bg-gray-50 border-b border-gray-100 text-xs text-gray-600", style: { fontFamily: "Bricolage Grotesque, sans-serif" }, children: [
+                filteredOptions.length,
+                " option",
+                filteredOptions.length !== 1 ? "s" : "",
+                " available"
+              ] }),
+              filteredOptions.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    onChange(getOptionValue(option));
+                    setIsOpen(false);
+                    setSearchTerm("");
+                  },
+                  className: `w-full p-4 text-left hover:bg-[#7042D2]/10 transition-colors duration-200 border-b border-gray-100 last:border-b-0 ${getOptionValue(option) === value ? "bg-[#7042D2]/20 text-[#7042D2]" : "text-gray-800"}`,
+                  style: { fontFamily: "Bricolage Grotesque, sans-serif" },
+                  children: renderOption(option)
+                },
+                getOptionKey(option)
+              ))
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 bg-gray-50 border-t border-gray-200 text-xs text-gray-500 text-center", style: { fontFamily: "Bricolage Grotesque, sans-serif" }, children: filteredOptions.length > 3 ? "Scroll to see more options" : "Select an option above" })
       ]
     }
   );
@@ -2756,7 +2792,7 @@ const EnhancedSimpleCoinleyPayment = ({
   if (!isOpen) return null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-50", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 transition-opacity", onClick: onClose, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed inset-0 overflow-y-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex min-h-screen items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative pt-6 w-full max-w-md mx-auto shadow-xl bg-gray-100 rounded-3xl overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed inset-0 overflow-y-auto", style: { zIndex: 51 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex min-h-screen items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative pt-6 w-full max-w-md mx-auto shadow-xl bg-gray-100 rounded-3xl overflow-hidden", style: { zIndex: 52 }, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white flex justify-between items-center mb-6 mr-3 ml-3 py-4 px-2 rounded-full", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex items-center gap-2 px-4", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white font-bold text-sm", children: "C" }) }),