sag_components 2.0.0-beta182 → 2.0.0-beta184

package/dist/index.js

@@ -8956,6 +8956,8 @@ const DropdownSingleNew = ({
   const [hoverOptionsContainer, setHoverOptionsContainer] = React$1.useState(false);
   const inputRef = React$1.useRef(null);
   const containerRef = React$1.useRef(null);
+  const dropdownRef = React$1.useRef(null); // Add ref for the entire dropdown
+
   let filteredOptions = options?.filter(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
   switch (orderBy) {
     case "asc":
@@ -8974,18 +8976,37 @@ const DropdownSingleNew = ({
       break;
   }
 
+  // Add click outside event listener
+  React$1.useEffect(() => {
+    const handleClickOutside = event => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setShowOptions(false);
+        setIsFocused(false);
+        setInputValue("");
+      }
+    };
+
+    // Add event listener when dropdown is open
+    if (showOptions) {
+      document.addEventListener('mousedown', handleClickOutside);
+      document.addEventListener('touchstart', handleClickOutside);
+    }
+
+    // Cleanup event listeners
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+    };
+  }, [showOptions]);
+
   // Calculate position when showOptions changes
   React$1.useEffect(() => {
     if (showOptions && containerRef.current) {
       const rect = containerRef.current.getBoundingClientRect();
       const windowHeight = window.innerHeight;
-      const dropdownHeight = Math.min(filteredOptions.length * 40 + 20, 240); // Estimate dropdown height
-
-      // Check if dropdown would go off-screen at bottom
+      const dropdownHeight = Math.min(filteredOptions.length * 40 + 20, 240);
       const spaceBelow = windowHeight - rect.bottom;
       const spaceAbove = rect.top;
-
-      // Show above if there's not enough space below and there's more space above
       setShowAbove(spaceBelow < dropdownHeight && spaceAbove > spaceBelow);
     }
   }, [showOptions, filteredOptions.length]);
@@ -9001,14 +9022,14 @@ const DropdownSingleNew = ({
       inputRef?.current?.focus();
     }
   }, [isFocused]);
+
+  // Modified hover effect - reduced delay and made it conditional
   React$1.useEffect(() => {
-    // Add a small delay to prevent dropdown from closing when moving between input and options
     const timer = setTimeout(() => {
       if (!hoverInputContainer && !hoverOptionsContainer && !isFocused) {
         setShowOptions(false);
       }
-    }, 100); // 100ms delay allows smooth transition
-
+    }, 100);
     return () => clearTimeout(timer);
   }, [hoverInputContainer, hoverOptionsContainer, isFocused]);
   const toggleOption = option => {
@@ -9094,6 +9115,8 @@ const DropdownSingleNew = ({
   };
   return /*#__PURE__*/React__default["default"].createElement(DropdownWrapper$2, {
     className: "DropdownWrapper",
+    ref: dropdownRef // Add ref to the wrapper
+    ,
     width: width,
     height: height,
     onMouseEnter: () => setHoverInputContainer(true),
@@ -40061,7 +40084,7 @@ const TableBody = ({
     width: "12",
     height: "12",
     fill: "#666"
-  }))) : null, columns.map(column => {
+  }))) : expandable === true ? /*#__PURE__*/React__default["default"].createElement("div", null) : null, columns.map(column => {
     const value = row[column.key];
     const formattedValue = formatValue(value, column, row, rowIndex);
     return /*#__PURE__*/React__default["default"].createElement(TableCell, {