@rovula/ui 0.0.64 → 0.0.66

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/components/Dropdown/Dropdown.js

@@ -17,7 +17,7 @@ import { customInputVariant, dropdownIconVariant, iconWrapperVariant, } from "./
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
 const Dropdown = forwardRef((_a, ref) => {
-    var { id, options = [], value, label, size = "md", rounded = "normal", variant = "outline", helperText, errorMessage, fullwidth = true, disabled = false, error = false, filterMode = false, required = true, onChangeText, onSelect, renderOptions: customRenderOptions, optionContainerClassName, optionItemClassName, optionNotFoundItemClassName } = _a, props = __rest(_a, ["id", "options", "value", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "filterMode", "required", "onChangeText", "onSelect", "renderOptions", "optionContainerClassName", "optionItemClassName", "optionNotFoundItemClassName"]);
+    var { id, options = [], value, label, size = "md", rounded = "normal", variant = "outline", helperText, errorMessage, fullwidth = true, disabled = false, error = false, filterMode = false, required = true, modal = false, onChangeText, onSelect, renderOptions: customRenderOptions, optionContainerClassName, optionItemClassName, optionNotFoundItemClassName } = _a, props = __rest(_a, ["id", "options", "value", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "filterMode", "required", "modal", "onChangeText", "onSelect", "renderOptions", "optionContainerClassName", "optionItemClassName", "optionNotFoundItemClassName"]);
     const _id = id || `${label}-select`;
     const [isFocused, setIsFocused] = useState(false);
     const [selectedOption, setSelectedOption] = useState(null);
@@ -26,12 +26,26 @@ const Dropdown = forwardRef((_a, ref) => {
     const dropdownRef = useRef(null);
     const inputRef = useRef(null);
     const [dropdownStyles, setDropdownStyles] = useState({});
+    const [isAbove, setIsAbove] = useState(false);
+    const [isInsideDialog, setIsInsideDialog] = useState(false);
     useImperativeHandle(ref, () => inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
     useEffect(() => {
         var _a;
         setSelectedOption(value);
         setTextValue((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
     }, [value]);
+    /** ✅ Auto-detect if inside a Dialog */
+    useEffect(() => {
+        let node = inputRef.current;
+        while (node) {
+            if (node.getAttribute("role") === "dialog") {
+                setIsInsideDialog(true);
+                return;
+            }
+            node = node.parentElement;
+        }
+        setIsInsideDialog(false);
+    }, []);
     const handleOnChangeText = useCallback((event) => {
         onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(event);
         setTextValue(event.target.value);
@@ -43,6 +57,7 @@ const Dropdown = forwardRef((_a, ref) => {
         setSelectedOption(option);
         setTextValue(option.label);
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
+        setIsFocused(false);
     }, [onSelect]);
     const optionsFiltered = useMemo(() => {
         return options.filter((option) => {
@@ -51,36 +66,44 @@ const Dropdown = forwardRef((_a, ref) => {
                 ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(textValue === null || textValue === void 0 ? void 0 : textValue.toLowerCase()));
         });
     }, [options, filterMode, textValue]);
+    const usePortal = isInsideDialog ? false : modal;
     const updateDropdownPosition = useCallback(() => {
-        var _a;
-        if (inputRef.current) {
+        if (inputRef.current && dropdownRef.current) {
             const rect = inputRef.current.getBoundingClientRect();
-            const dropdownHeight = ((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.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`,
+            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`,
-                };
-            setDropdownStyles(position);
+                    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]);
     const renderOptions = () => {
@@ -93,7 +116,7 @@ const Dropdown = forwardRef((_a, ref) => {
                 dropdownRef,
             });
         }
-        return (_jsxs("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", optionContainerClassName), style: dropdownStyles, ref: dropdownRef, children: [optionsFiltered.map((option) => {
+        return (_jsxs("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", !usePortal && (isAbove ? "bottom-full mb-1" : "top-full mt-1"), optionContainerClassName), style: dropdownStyles, ref: dropdownRef, children: [optionsFiltered.map((option) => {
                     if (option.renderLabel) {
                         return (_jsx(Fragment, { children: option.renderLabel({
                                 value: option.value,
@@ -104,7 +127,9 @@ const Dropdown = forwardRef((_a, ref) => {
                                 }),
                             }) }, option.value));
                     }
-                    return (_jsx("li", { onMouseDown: () => handleOptionClick(option), className: cn(`px-4 py-2 hover:bg-primary-hover-bg cursor-pointer`, optionItemClassName, {
+                    return (_jsx("li", { onMouseDown: () => {
+                            handleOptionClick(option);
+                        }, className: cn(`px-4 py-2 hover:bg-primary-hover-bg cursor-pointer`, optionItemClassName, {
                             "bg-base-popup-highligh": (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value,
                         }), children: option.label }, option.value));
                 }), optionsFiltered.length === 0 && (_jsx("li", { className: cn("px-4 py-14 text-center text-input-text", optionNotFoundItemClassName), children: "Not found" }))] }));
@@ -136,7 +161,7 @@ const Dropdown = forwardRef((_a, ref) => {
     }, [optionsFiltered, textValue]);
     const handleOnBlur = useCallback((e) => {
         var _a;
-        setIsFocused(false);
+        setTimeout(() => setIsFocused(false), 200);
         clearMismatchValue(e);
         (_a = props === null || props === void 0 ? void 0 : props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     }, [props === null || props === void 0 ? void 0 : props.onBlur, clearMismatchValue]);
@@ -145,6 +170,7 @@ const Dropdown = forwardRef((_a, ref) => {
         keyCode.current = e.code;
         (_a = props === null || props === void 0 ? void 0 : props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
     }, [props === null || props === void 0 ? void 0 : props.onKeyDown]);
-    return (_jsxs("div", { className: `relative ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx("div", { className: iconWrapperVariant({ size }), children: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ size, isFocus: isFocused }) }) }) }, props, { ref: inputRef, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", autoComplete: "off", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size }), onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: handleOnKeyDown })), isFocused && _jsx(Portal.Root, { children: renderOptions() })] }));
+    return (_jsxs("div", { className: `relative  ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx("div", { className: iconWrapperVariant({ size }), children: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ size, isFocus: isFocused }) }) }) }, props, { ref: inputRef, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", autoComplete: "off", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size }), onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: handleOnKeyDown })), isFocused &&
+                (usePortal ? (_jsx(Portal.Root, { container: document.body, children: renderOptions() })) : (renderOptions()))] }));
 });
 export default Dropdown;

package/dist/esm/bundle.css

@@ -599,6 +599,9 @@ input[type=number] {
 .bottom-\[40px\]{
   bottom: 40px;
 }
+.bottom-full{
+  bottom: 100%;
+}
 .left-0{
   left: 0px;
 }
@@ -638,6 +641,9 @@ input[type=number] {
 .top-\[50\%\]{
   top: 50%;
 }
+.top-full{
+  top: 100%;
+}
 .z-0{
   z-index: 0;
 }
@@ -650,6 +656,9 @@ input[type=number] {
 .z-\[100\]{
   z-index: 100;
 }
+.z-\[9999\]{
+  z-index: 9999;
+}
 .col-span-3{
   grid-column: span 3 / span 3;
 }
@@ -678,6 +687,9 @@ input[type=number] {
 .-mt-\[30px\]{
   margin-top: -30px;
 }
+.mb-1{
+  margin-bottom: 0.25rem;
+}
 .ml-2{
   margin-left: 0.5rem;
 }