@rovula/ui 0.0.65 → 0.0.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.65",
+  "version": "0.0.66",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Dropdown/Dropdown.tsx

@@ -82,7 +82,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       error = false,
       filterMode = false,
       required = true,
-      modal = true,
+      modal = false,
       onChangeText,
       onSelect,
       renderOptions: customRenderOptions,
@@ -158,6 +158,8 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       );
     }, [options, filterMode, textValue]);
 
+    const usePortal = isInsideDialog ? false : modal;
+
     const updateDropdownPosition = useCallback(() => {
       if (inputRef.current && dropdownRef.current) {
         const rect = inputRef.current.getBoundingClientRect();
@@ -169,8 +171,6 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
           spaceBelow < dropdownHeight && spaceAbove > spaceBelow;
         setIsAbove(shouldOpenAbove);
 
-        const usePortal = isInsideDialog ? false : modal;
-
         if (usePortal) {
           setDropdownStyles({
             position: "absolute",
@@ -179,7 +179,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
               : `${rect.bottom}px`,
             left: `${rect.left}px`,
             width: `${rect.width}px`,
-            zIndex: 9999, // Ensure it's above everything
+            zIndex: 9999,
           });
         } else {
           setDropdownStyles({
@@ -187,22 +187,20 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
             top: shouldOpenAbove ? `-${dropdownHeight}px` : "100%",
             left: "0",
             width: "100%",
-            zIndex: 10,
+            zIndex: 9999,
           });
         }
       }
-    }, [modal, isInsideDialog]);
+    }, [modal, isInsideDialog, usePortal]);
 
     useEffect(() => {
       if (isFocused) {
         updateDropdownPosition();
         window.addEventListener("resize", updateDropdownPosition);
-        window.addEventListener("scroll", updateDropdownPosition, true);
       }
 
       return () => {
         window.removeEventListener("resize", updateDropdownPosition);
-        window.removeEventListener("scroll", updateDropdownPosition, true);
       };
     }, [isFocused, updateDropdownPosition]);
 
@@ -221,7 +219,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
         <ul
           className={cn(
             "absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-[9999] max-h-60 overflow-y-auto",
-            isAbove ? "bottom-full mb-1" : "top-full mt-1",
+            !usePortal && (isAbove ? "bottom-full mb-1" : "top-full mt-1"),
             optionContainerClassName
           )}
           style={dropdownStyles}
@@ -337,7 +335,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
     );
 
     return (
-      <div className={`relative ${fullwidth ? "w-full" : ""}`}>
+      <div className={`relative  ${fullwidth ? "w-full" : ""}`}>
         <TextInput
           hasClearIcon={false}
           endIcon={
@@ -372,7 +370,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
           onKeyDown={handleOnKeyDown}
         />
         {isFocused &&
-          ((isInsideDialog ? false : modal) ? (
+          (usePortal ? (
             <Portal.Root container={document.body}>
               {renderOptions()}
             </Portal.Root>