@rovula/ui 0.0.64 → 0.0.66

package/dist/esm/types/components/Dropdown/Dropdown.d.ts

@@ -24,6 +24,7 @@ export type DropdownProps = {
     disabled?: boolean;
     error?: boolean;
     required?: boolean;
+    modal?: boolean;
     className?: string;
     optionContainerClassName?: string;
     optionItemClassName?: string;
@@ -53,6 +54,7 @@ declare const Dropdown: React.ForwardRefExoticComponent<{
     disabled?: boolean | undefined;
     error?: boolean | undefined;
     required?: boolean | undefined;
+    modal?: boolean | undefined;
     className?: string | undefined;
     optionContainerClassName?: string | undefined;
     optionItemClassName?: string | undefined;

package/dist/esm/types/components/Dropdown/Dropdown.stories.d.ts

@@ -15,6 +15,7 @@ declare const meta: {
         disabled?: boolean | undefined;
         error?: boolean | undefined;
         required?: boolean | undefined;
+        modal?: boolean | undefined;
         className?: string | undefined;
         optionContainerClassName?: string | undefined;
         optionItemClassName?: string | undefined;
@@ -48,6 +49,7 @@ declare const meta: {
         disabled?: boolean | undefined;
         error?: boolean | undefined;
         required?: boolean | undefined;
+        modal?: boolean | undefined;
         className?: string | undefined;
         optionContainerClassName?: string | undefined;
         optionItemClassName?: string | undefined;

package/dist/esm/types/components/Search/Search.stories.d.ts

@@ -317,6 +317,7 @@ declare const meta: {
         renderEndIcon?: (() => React.ReactNode) | undefined;
         onClickStartIcon?: (() => void) | undefined;
         options: Options[];
+        modal?: boolean | undefined;
         onChangeText?: React.ChangeEventHandler<HTMLInputElement> | undefined;
         renderOptions?: ((value: {
             optionsFiltered: Options[];

package/dist/esm/types/components/Toast/Toast.stories.d.ts

@@ -15,7 +15,7 @@ declare const meta: {
         id?: string | undefined;
         lang?: string | undefined;
         style?: React.CSSProperties | undefined;
-        type?: "foreground" | "background" | undefined;
+        type?: "background" | "foreground" | undefined;
         role?: React.AriaRole | undefined;
         tabIndex?: number | undefined;
         "aria-activedescendant"?: string | undefined;

package/dist/index.d.ts

@@ -165,6 +165,7 @@ type DropdownProps = {
     disabled?: boolean;
     error?: boolean;
     required?: boolean;
+    modal?: boolean;
     className?: string;
     optionContainerClassName?: string;
     optionItemClassName?: string;
@@ -194,6 +195,7 @@ declare const Dropdown: React__default.ForwardRefExoticComponent<{
     disabled?: boolean | undefined;
     error?: boolean | undefined;
     required?: boolean | undefined;
+    modal?: boolean | undefined;
     className?: string | undefined;
     optionContainerClassName?: string | undefined;
     optionItemClassName?: string | undefined;

package/dist/src/theme/global.css

@@ -2260,6 +2260,10 @@ input[type=number] {
   bottom: 40px;
 }
 
+.bottom-full {
+  bottom: 100%;
+}
+
 .left-0 {
   left: 0px;
 }
@@ -2312,6 +2316,10 @@ input[type=number] {
   top: 50%;
 }
 
+.top-full {
+  top: 100%;
+}
+
 .z-0 {
   z-index: 0;
 }
@@ -2328,6 +2336,10 @@ input[type=number] {
   z-index: 100;
 }
 
+.z-\[9999\] {
+  z-index: 9999;
+}
+
 .col-span-3 {
   grid-column: span 3 / span 3;
 }
@@ -2364,6 +2376,10 @@ input[type=number] {
   margin-top: -30px;
 }
 
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.64",
+  "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

@@ -47,6 +47,7 @@ export type DropdownProps = {
   disabled?: boolean;
   error?: boolean;
   required?: boolean;
+  modal?: boolean;
   className?: string;
   optionContainerClassName?: string;
   optionItemClassName?: string;
@@ -81,6 +82,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       error = false,
       filterMode = false,
       required = true,
+      modal = false,
       onChangeText,
       onSelect,
       renderOptions: customRenderOptions,
@@ -102,7 +104,9 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
 
     const dropdownRef = useRef<HTMLUListElement>(null);
     const inputRef = useRef<HTMLInputElement>(null);
-    const [dropdownStyles, setDropdownStyles] = useState({});
+    const [dropdownStyles, setDropdownStyles] = useState<CSSProperties>({});
+    const [isAbove, setIsAbove] = useState(false);
+    const [isInsideDialog, setIsInsideDialog] = useState(false);
 
     useImperativeHandle(ref, () => inputRef?.current as HTMLInputElement);
 
@@ -111,6 +115,19 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       setTextValue(value?.label ?? "");
     }, [value]);
 
+    /** ✅ Auto-detect if inside a Dialog */
+    useEffect(() => {
+      let node: HTMLElement | null = inputRef.current;
+      while (node) {
+        if (node.getAttribute("role") === "dialog") {
+          setIsInsideDialog(true);
+          return;
+        }
+        node = node.parentElement;
+      }
+      setIsInsideDialog(false);
+    }, []);
+
     const handleOnChangeText = useCallback(
       (event: React.ChangeEvent<HTMLInputElement>) => {
         onChangeText?.(event);
@@ -128,6 +145,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
         setSelectedOption(option);
         setTextValue(option.label);
         onSelect?.(option);
+        setIsFocused(false);
       },
       [onSelect]
     );
@@ -140,40 +158,49 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       );
     }, [options, filterMode, textValue]);
 
+    const usePortal = isInsideDialog ? false : modal;
+
     const updateDropdownPosition = useCallback(() => {
-      if (inputRef.current) {
+      if (inputRef.current && dropdownRef.current) {
         const rect = inputRef.current.getBoundingClientRect();
-        const dropdownHeight = dropdownRef.current?.offsetHeight || 0;
+        const dropdownHeight = dropdownRef.current.offsetHeight;
         const spaceBelow = window.innerHeight - rect.bottom;
         const spaceAbove = rect.top;
 
-        const position =
-          spaceBelow >= dropdownHeight || spaceBelow > spaceAbove
-            ? {
-                top: `${rect.bottom + window.scrollY}px`,
-                left: `${rect.left + window.scrollX}px`,
-                width: `${rect.width}px`,
-              }
-            : {
-                top: `${rect.top - dropdownHeight + window.scrollY}px`,
-                left: `${rect.left + window.scrollX}px`,
-                width: `${rect.width}px`,
-              };
-
-        setDropdownStyles(position);
+        const shouldOpenAbove =
+          spaceBelow < dropdownHeight && spaceAbove > spaceBelow;
+        setIsAbove(shouldOpenAbove);
+
+        if (usePortal) {
+          setDropdownStyles({
+            position: "absolute",
+            top: shouldOpenAbove
+              ? `${rect.top - dropdownHeight}px`
+              : `${rect.bottom}px`,
+            left: `${rect.left}px`,
+            width: `${rect.width}px`,
+            zIndex: 9999,
+          });
+        } else {
+          setDropdownStyles({
+            position: "absolute",
+            top: shouldOpenAbove ? `-${dropdownHeight}px` : "100%",
+            left: "0",
+            width: "100%",
+            zIndex: 9999,
+          });
+        }
       }
-    }, []);
+    }, [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]);
 
@@ -191,7 +218,8 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       return (
         <ul
           className={cn(
-            "absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-50 max-h-60 overflow-y-auto",
+            "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",
+            !usePortal && (isAbove ? "bottom-full mb-1" : "top-full mt-1"),
             optionContainerClassName
           )}
           style={dropdownStyles}
@@ -220,7 +248,9 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
             return (
               <li
                 key={option.value}
-                onMouseDown={() => handleOptionClick(option)}
+                onMouseDown={() => {
+                  handleOptionClick(option);
+                }}
                 className={cn(
                   `px-4 py-2 hover:bg-primary-hover-bg cursor-pointer`,
                   optionItemClassName,
@@ -289,7 +319,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
 
     const handleOnBlur = useCallback(
       (e: React.FocusEvent<HTMLInputElement, Element>) => {
-        setIsFocused(false);
+        setTimeout(() => setIsFocused(false), 200);
         clearMismatchValue(e);
         props?.onBlur?.(e);
       },
@@ -305,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={
@@ -339,7 +369,14 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
           onBlur={handleOnBlur}
           onKeyDown={handleOnKeyDown}
         />
-        {isFocused && <Portal.Root>{renderOptions()}</Portal.Root>}
+        {isFocused &&
+          (usePortal ? (
+            <Portal.Root container={document.body}>
+              {renderOptions()}
+            </Portal.Root>
+          ) : (
+            renderOptions()
+          ))}
       </div>
     );
   }