infinity-ui-elements 1.8.21 → 1.8.23

package/dist/index.js

@@ -3226,6 +3226,7 @@ const SearchableDropdown = React__namespace.forwardRef(({ className, items = [],
     const [uncontrolledSearchValue, setUncontrolledSearchValue] = React__namespace.useState(defaultSearchValue);
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const [focusedIndex, setFocusedIndex] = React__namespace.useState(-1);
+    const [isInsideModal, setIsInsideModal] = React__namespace.useState(false);
     const dropdownRef = React__namespace.useRef(null);
     const inputRef = React__namespace.useRef(null);
     const menuRef = React__namespace.useRef(null);
@@ -3235,6 +3236,27 @@ const SearchableDropdown = React__namespace.forwardRef(({ className, items = [],
         width: 0,
     });
     React__namespace.useImperativeHandle(ref, () => inputRef.current);
+    // Check if dropdown is inside a modal
+    React__namespace.useEffect(() => {
+        if (isOpen && dropdownRef.current) {
+            let element = dropdownRef.current;
+            let foundModal = false;
+            while (element && !foundModal) {
+                const styles = window.getComputedStyle(element);
+                const zIndex = parseInt(styles.zIndex, 10);
+                // Check if element has modal z-index (10000) or is a modal container
+                if (zIndex === 10000 || element.getAttribute('role') === 'dialog') {
+                    foundModal = true;
+                    setIsInsideModal(true);
+                    break;
+                }
+                element = element.parentElement;
+            }
+            if (!foundModal) {
+                setIsInsideModal(false);
+            }
+        }
+    }, [isOpen]);
     // Update position when dropdown opens or window resizes
     React__namespace.useEffect(() => {
         if (isOpen && dropdownRef.current) {
@@ -3394,7 +3416,7 @@ const SearchableDropdown = React__namespace.forwardRef(({ className, items = [],
             top: `${position.top + 8}px`,
             left: `${position.left}px`,
             width: dropdownWidth === "full" ? `${position.width}px` : "auto",
-            zIndex: 9999,
+            zIndex: isInsideModal ? 10001 : 9999,
         }, children: jsxRuntime.jsx(DropdownMenu, { items: itemsWithHandlers, sectionHeading: sectionHeading, isLoading: isLoading, isEmpty: itemsWithAddNew.length === 0 && !showAddNew, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyLinkText: emptyLinkText, onEmptyLinkClick: onEmptyLinkClick, primaryButtonText: primaryButtonText, secondaryButtonText: secondaryButtonText, onPrimaryClick: onPrimaryClick, onSecondaryClick: onSecondaryClick, showChevron: showChevron, emptyIcon: emptyIcon, disableFooter: disableFooter, showFooter: (primaryButtonText || secondaryButtonText) && !disableFooter
                 ? true
                 : false, footerLayout: footerLayout, onClose: () => setIsOpen(false), focusedIndex: focusedIndex, className: dropdownClassName, width: dropdownWidth === "full" ? "full" : "auto" }) }));