sag_components 2.0.0-beta280 → 2.0.0-beta282

package/dist/index.d.ts

@@ -1305,7 +1305,7 @@ declare function WeeksPicker({ label, disabled, borderColor, borderColorFocus, t
     restrictToRange?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-declare function Input({ label, labelEmptyValue, size, selectedValue, placeHolder, inputType, onChange, onClick, onBlur, required, disabled, isDarkerBackground, width, minWidth, height, error, errorMessage, labelColor, leftIcon, rightIcon, password, leftIconOnClick, rightIconOnClick, multiline, rows, maxLength, regex, onKeyDown, }: {
+declare function Input({ label, labelEmptyValue, size, selectedValue, placeHolder, inputType, onChange, onClick, onBlur, required, disabled, isDarkerBackground, width, minWidth, height, minHeight, error, errorMessage, labelColor, leftIcon, rightIcon, password, leftIconOnClick, rightIconOnClick, multiline, rows, maxLength, regex, onKeyDown, }: {
     label: any;
     labelEmptyValue: any;
     size: any;
@@ -1321,6 +1321,7 @@ declare function Input({ label, labelEmptyValue, size, selectedValue, placeHolde
     width: any;
     minWidth: any;
     height?: string;
+    minHeight: any;
     error: any;
     errorMessage: any;
     labelColor: any;
@@ -1345,6 +1346,7 @@ declare namespace Input {
         const required: PropTypes.Requireable<boolean>;
         const width: PropTypes.Requireable<string>;
         const minWidth: PropTypes.Requireable<string>;
+        const minHeight: PropTypes.Requireable<string>;
         const disabled: PropTypes.Requireable<boolean>;
         const error: PropTypes.Requireable<boolean>;
         const errorMessage: PropTypes.Requireable<string>;
@@ -1380,6 +1382,8 @@ declare namespace Input {
         export { width_1 as width };
         const minWidth_1: string;
         export { minWidth_1 as minWidth };
+        const minHeight_1: any;
+        export { minHeight_1 as minHeight };
         const disabled_1: boolean;
         export { disabled_1 as disabled };
         const error_1: boolean;

package/dist/index.esm.js

@@ -8768,6 +8768,7 @@ const DropdownWrapper$2 = styled.div`
   align-items: flex-start;
   width: ${props => props.width || '300px'};  
   height: ${props => props.height || '40px'};
+  min-height: ${props => props.minHeight || 'auto'};
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
@@ -8778,7 +8779,7 @@ const DropdownWrapper$2 = styled.div`
     top: 100%;
     left: 0;
     right: 0;
-    height: 2px;           // Creates invisible bridge for hover
+    height: 2px;
     z-index: 99;
     pointer-events: none;
   }
@@ -8939,6 +8940,7 @@ const DropdownSingleNew = ({
   disabled,
   width,
   height,
+  minHeight,
   withMarginBottom = true,
   error,
   errorMessage,
@@ -9117,10 +9119,10 @@ const DropdownSingleNew = ({
   };
   return /*#__PURE__*/React$1.createElement(DropdownWrapper$2, {
     className: "DropdownWrapper",
-    ref: dropdownRef // Add ref to the wrapper
-    ,
+    ref: dropdownRef,
     width: width,
     height: height,
+    minHeight: minHeight,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
   }, /*#__PURE__*/React$1.createElement(InputContainer$8, {
@@ -9262,6 +9264,7 @@ const DropdownWrapper$1 = styled.div`
   align-items: flex-start;
   width: ${props => props.width || '300px'};  
   height: ${props => props.height || '50px'};
+  min-height: ${props => props.minHeight || 'auto'};
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
@@ -9272,7 +9275,7 @@ const DropdownWrapper$1 = styled.div`
     top: 100%;
     left: 0;
     right: 0;
-    height: 2px;           // Creates invisible bridge for hover
+    height: 2px;
     z-index: 99;
     pointer-events: none;
   }
@@ -9462,6 +9465,7 @@ const DropdownMultiNew = ({
   disabled,
   width,
   height,
+  minHeight,
   withMarginBottom = true,
   error,
   errorMessage,
@@ -9638,6 +9642,7 @@ const DropdownMultiNew = ({
     className: "DropdownWrapper",
     width: width,
     height: height,
+    minHeight: minHeight,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
   }, /*#__PURE__*/React$1.createElement(InputContainer$7, {
@@ -9736,6 +9741,7 @@ const DropdownMain = styled.div`
   align-items: flex-start;
   width: ${props => props.width || '300px'};  
   height: ${props => props.height || '50px'};
+  min-height: ${props => props.minHeight || 'auto'};
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
@@ -9757,6 +9763,7 @@ const DropdownNew = props => {
     disabled = false,
     width = "300px",
     height = "52px",
+    minHeight = "",
     withMarginBottom = true,
     error = false,
     showLabelOnTop = true,
@@ -9776,7 +9783,8 @@ const DropdownNew = props => {
   return /*#__PURE__*/React$1.createElement(DropdownMain, {
     className: "DropdownMain",
     width: width,
-    height: height
+    height: height,
+    minHeight: minHeight
   }, isMulti ? /*#__PURE__*/React$1.createElement(DropdownMultiNew, {
     className: "DropdownMultiNew",
     placeHolder: placeHolder,
@@ -9788,6 +9796,7 @@ const DropdownNew = props => {
     options: options,
     width: width,
     height: height,
+    minHeight: minHeight,
     withMarginBottom: withMarginBottom,
     disabled: disabled,
     error: error,
@@ -9809,6 +9818,7 @@ const DropdownNew = props => {
     options: options,
     width: width,
     height: height,
+    minHeight: minHeight,
     withMarginBottom: withMarginBottom,
     disabled: disabled,
     error: error,
@@ -10580,23 +10590,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('');
@@ -11038,22 +11049,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('');
@@ -12253,13 +12265,16 @@ const Td$1 = styled.td`
 `;
 const Tr = styled.tr`
   border-bottom: 1px solid #f3f4f6;
-  ${({
-  enableHover,
-  selectHoverColor
-}) => enableHover && `&:hover {
+  ${_ref => {
+  let {
+    enableHover,
+    selectHoverColor
+  } = _ref;
+  return enableHover && `&:hover {
       background-color: ${selectHoverColor};
       cursor: pointer;
-    }`}
+    }`;
+}}
 `;
 const InfoText = styled.div`
   font-weight: 400;
@@ -24161,21 +24176,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("");
@@ -24627,25 +24643,26 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;
 `;
 
-const QuickFilterDropdownMultiSelection = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  height,
-  error,
-  errorMessage,
-  labelColor,
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop,
-  dropdownHeight
-}) => {
+const QuickFilterDropdownMultiSelection = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    height,
+    error,
+    errorMessage,
+    labelColor,
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop,
+    dropdownHeight
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -35652,7 +35669,7 @@ const MainContainer = styled.div`
   width: ${props => props.width || '300px'};
   min-width: ${props => props.minWidth || 'unset'};
   height: ${props => props.height || '45px'};  
-  min-height: ${props => props.multiline ? '80px' : 'auto'};
+  min-height: ${props => props.minHeight || (props.multiline ? '80px' : 'auto')};
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
@@ -35674,7 +35691,10 @@ const Label$3 = styled.label`
   if (props.multiline) {
     return props.isFocused || props.hasValue ? '0px' : '20px';
   }
-  return props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '50%' : '17px';
+  if (props.isFocused || props.hasValue) {
+    return '0px';
+  }
+  return props.size === 'medium' ? '26px' : '17px';
 }};
   left: ${props => {
   if (props.multiline) {
@@ -35841,6 +35861,7 @@ const Input$2 = _ref => {
     width,
     minWidth,
     height = "50px",
+    minHeight,
     error,
     errorMessage,
     labelColor,
@@ -35960,6 +35981,7 @@ const Input$2 = _ref => {
     className: "MainContainer",
     width: width,
     height: calculateHeight(),
+    minHeight: minHeight,
     size: size,
     disabled: disabled,
     isDarkerBackground: isDarkerBackground,
@@ -36046,6 +36068,7 @@ Input$2.propTypes = {
   required: PropTypes.bool,
   width: PropTypes.string,
   minWidth: PropTypes.string,
+  minHeight: PropTypes.string,
   disabled: PropTypes.bool,
   error: PropTypes.bool,
   errorMessage: PropTypes.string,
@@ -36073,6 +36096,7 @@ Input$2.defaultProps = {
   required: true,
   width: "300px",
   minWidth: "unset",
+  minHeight: undefined,
   disabled: false,
   error: false,
   errorMessage: "",
@@ -36161,9 +36185,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 {
@@ -37840,7 +37864,7 @@ const FilterPop = props => {
     }));
     return {
       visibleItems: visible,
-      totalHeight: sortedList.length * itemHeight,
+      totalHeight: (sortedList.length + 1) * (itemHeight + 8),
       offsetY: startIndex * itemHeight
     };
   }, [sortedList, scrollTop, itemHeight, overscan, maxHeight]);