sag_components 2.0.0-beta183 → 2.0.0-beta185

package/dist/index.esm.js

@@ -8946,6 +8946,8 @@ const DropdownSingleNew = ({
   const [hoverOptionsContainer, setHoverOptionsContainer] = useState(false);
   const inputRef = useRef(null);
   const containerRef = useRef(null);
+  const dropdownRef = useRef(null); // Add ref for the entire dropdown
+
   let filteredOptions = options?.filter(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
   switch (orderBy) {
     case "asc":
@@ -8964,18 +8966,37 @@ const DropdownSingleNew = ({
       break;
   }
 
+  // Add click outside event listener
+  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
   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]);
@@ -8991,14 +9012,14 @@ const DropdownSingleNew = ({
       inputRef?.current?.focus();
     }
   }, [isFocused]);
+
+  // Modified hover effect - reduced delay and made it conditional
   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 => {
@@ -9084,6 +9105,8 @@ const DropdownSingleNew = ({
   };
   return /*#__PURE__*/React$1.createElement(DropdownWrapper$2, {
     className: "DropdownWrapper",
+    ref: dropdownRef // Add ref to the wrapper
+    ,
     width: width,
     height: height,
     onMouseEnter: () => setHoverInputContainer(true),
@@ -10545,23 +10568,24 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = ({
-  availableQuarters,
-  // ["Q1-2024"]
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const QuarterPicker = _ref => {
+  let {
+    availableQuarters,
+    // ["Q1-2024"]
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -11003,22 +11027,23 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = ({
-  availableMonths,
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const MonthPicker = _ref => {
+  let {
+    availableMonths,
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -24129,21 +24154,22 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = ({
-  label,
-  hoverColor,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownSingle = _ref => {
+  let {
+    label,
+    hoverColor,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    xIconShow,
+    labelColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24540,23 +24566,24 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  labelColor,
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownMultiSelection = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    labelColor,
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -35577,6 +35604,7 @@ const Input$2 = _ref => {
     selectedValue,
     placeHolder,
     onChange,
+    onClick,
     onBlur,
     required,
     disabled,
@@ -35592,10 +35620,8 @@ const Input$2 = _ref => {
     leftIconOnClick,
     rightIconOnClick,
     multiline = false,
-    // New prop to enable textarea mode
     rows = 3,
-    // New prop for textarea rows
-    maxLength // New prop for character limit
+    maxLength
   } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -35768,6 +35794,7 @@ Input$2.propTypes = {
   errorMessage: PropTypes.string,
   selectedValue: PropTypes.string,
   onChange: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
   leftIconOnClick: PropTypes.func,
   rightIconOnClick: PropTypes.func,
   onBlur: PropTypes.func,
@@ -35795,6 +35822,7 @@ Input$2.defaultProps = {
   leftIconOnClick: () => {},
   rightIconOnClick: () => {},
   onBlur: () => {},
+  onClick: () => {},
   password: false,
   multiline: false,
   rows: 3,
@@ -35872,9 +35900,9 @@ const ToggleSlider = styled.span`
   }
 `;
 
-/**
- * ToggleSwitch component for on/off states.
- * Supports small/large sizes and disabled state.
+/**
+ * ToggleSwitch component for on/off states.
+ * Supports small/large sizes and disabled state.
  */
 function ToggleSwitch(_ref) {
   let {