sag_components 2.0.0-beta184 → 2.0.0-beta186

package/dist/index.esm.js

@@ -10568,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('');
@@ -11026,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('');
@@ -24152,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("");
@@ -24563,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('');
@@ -35600,12 +35604,13 @@ const Input$2 = _ref => {
     selectedValue,
     placeHolder,
     onChange,
+    onClick,
     onBlur,
     required,
     disabled,
     isDarkerBackground = false,
     width,
-    height = '50px',
+    height = "50px",
     error,
     errorMessage,
     labelColor,
@@ -35615,13 +35620,11 @@ 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('');
+  const [inputValue, setInputValue] = useState("");
   const [showPassword, setShowPassword] = useState(false);
   const inputRef = useRef(null);
   const containerRef = useRef(null);
@@ -35642,7 +35645,7 @@ const Input$2 = _ref => {
       inputRef?.current?.focus();
     }
     onChange({
-      newValue: e.target.value || ''
+      newValue: e.target.value || ""
     });
   };
   const handleFocus = () => {
@@ -35668,18 +35671,18 @@ const Input$2 = _ref => {
     });
   };
   const getLeftIcon = () => {
-    if (!leftIcon || leftIcon === 'none') return '';
-    return getIcon(leftIcon, '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', leftIconOnClickHandler);
+    if (!leftIcon || leftIcon === "none") return "";
+    return getIcon(leftIcon, "14px", "14px", error ? "red" : labelColor, disabled, "pointer", leftIconOnClickHandler);
   };
   const getRightIcon = () => {
-    if (!rightIcon || rightIcon === 'none') return '';
-    return getIcon(rightIcon, '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', rightIconOnClickHandler);
+    if (!rightIcon || rightIcon === "none") return "";
+    return getIcon(rightIcon, "14px", "14px", error ? "red" : labelColor, disabled, "pointer", rightIconOnClickHandler);
   };
   const toggleShowPassword = () => {
     setShowPassword(!showPassword);
   };
   const getPasswordIcon = () => {
-    if (!password) return '';
+    if (!password) return "";
     if (showPassword) {
       return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
         className: "passwordEyeSlash",
@@ -35687,16 +35690,16 @@ const Input$2 = _ref => {
         onClick: toggleShowPassword
       }, /*#__PURE__*/React$1.createElement(FaEyeSlash, {
         onClick: toggleShowPassword,
-        color: error ? 'red' : labelColor
+        color: error ? "red" : labelColor
       }));
     }
-    return getIcon('eye', '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', toggleShowPassword);
+    return getIcon("eye", "14px", "14px", error ? "red" : labelColor, disabled, "pointer", toggleShowPassword);
   };
 
   // Calculate dynamic height for multiline inputs
   const calculateHeight = () => {
     if (!multiline) return height;
-    const baseHeight = size === 'small' ? 32 : 52;
+    const baseHeight = size === "small" ? 32 : 52;
     const lineHeight = 20;
     const padding = 10;
     return `${baseHeight + (rows - 1) * lineHeight + padding}px`;
@@ -35709,7 +35712,8 @@ const Input$2 = _ref => {
     size: size,
     disabled: disabled,
     isDarkerBackground: isDarkerBackground,
-    multiline: multiline
+    multiline: multiline,
+    onClick: onClick
   }, /*#__PURE__*/React$1.createElement(InputContainer, {
     className: "InputContainer",
     labelColor: labelColor,
@@ -35735,7 +35739,7 @@ const Input$2 = _ref => {
     isFocused: isFocused,
     labelColor: labelColor,
     hasValue: inputValue,
-    leftIcon: !multiline ? leftIcon : 'none',
+    leftIcon: !multiline ? leftIcon : "none",
     disabled: disabled,
     isDarkerBackground: isDarkerBackground,
     error: error,
@@ -35745,13 +35749,13 @@ const Input$2 = _ref => {
     multiline: multiline
   }, inputValue ? label : labelEmptyValue || label, required && /*#__PURE__*/React$1.createElement("span", {
     style: {
-      color: disabled ? '#D0D0D0' : 'red',
-      height: '16px'
+      color: disabled ? "#D0D0D0" : "red",
+      height: "16px"
     }
   }, "*")), /*#__PURE__*/React$1.createElement(InputElement, {
     className: multiline ? "StyledTextarea" : "StyledInput",
     ref: inputRef,
-    type: password && !showPassword ? 'password' : 'text',
+    type: password && !showPassword ? "password" : "text",
     value: inputValue,
     onChange: handleInputChange,
     onClick: handleLabelClick,
@@ -35759,7 +35763,7 @@ const Input$2 = _ref => {
     onBlur: handleBlur,
     disabled: disabled,
     isDarkerBackground: isDarkerBackground,
-    placeholder: isFocused ? placeHolder : '',
+    placeholder: isFocused ? placeHolder : "",
     error: error,
     height: calculateHeight(),
     isFocused: isFocused,
@@ -35771,10 +35775,10 @@ const Input$2 = _ref => {
     width: width
   }, errorMessage), multiline && maxLength && /*#__PURE__*/React$1.createElement("div", {
     style: {
-      fontSize: '12px',
-      color: inputValue.length > maxLength * 0.9 ? 'orange' : '#666',
-      textAlign: 'right',
-      marginTop: '4px'
+      fontSize: "12px",
+      color: inputValue.length > maxLength * 0.9 ? "orange" : "#666",
+      textAlign: "right",
+      marginTop: "4px"
     }
   }, inputValue.length, "/", maxLength));
 };
@@ -35791,6 +35795,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,
@@ -35802,22 +35807,23 @@ Input$2.propTypes = {
   maxLength: PropTypes.number
 };
 Input$2.defaultProps = {
-  placeHolder: 'Type...',
-  label: '',
-  labelEmptyValue: '',
-  size: 'medium',
-  labelColor: '#066768',
+  placeHolder: "Type...",
+  label: "",
+  labelEmptyValue: "",
+  size: "medium",
+  labelColor: "#066768",
   required: true,
-  width: '300px',
+  width: "300px",
   disabled: false,
   error: false,
-  errorMessage: '',
-  selectedValue: '',
-  leftIcon: 'none',
-  rightIcon: 'none',
+  errorMessage: "",
+  selectedValue: "",
+  leftIcon: "none",
+  rightIcon: "none",
   leftIconOnClick: () => {},
   rightIconOnClick: () => {},
   onBlur: () => {},
+  onClick: () => {},
   password: false,
   multiline: false,
   rows: 3,
@@ -35895,9 +35901,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 {