sag_components 2.0.0-beta280 → 2.0.0-beta282

package/dist/index.js

@@ -8778,6 +8778,7 @@ const DropdownWrapper$2 = styled__default["default"].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;
@@ -8788,7 +8789,7 @@ const DropdownWrapper$2 = styled__default["default"].div`
     top: 100%;
     left: 0;
     right: 0;
-    height: 2px;           // Creates invisible bridge for hover
+    height: 2px;
     z-index: 99;
     pointer-events: none;
   }
@@ -8949,6 +8950,7 @@ const DropdownSingleNew = ({
   disabled,
   width,
   height,
+  minHeight,
   withMarginBottom = true,
   error,
   errorMessage,
@@ -9127,10 +9129,10 @@ const DropdownSingleNew = ({
   };
   return /*#__PURE__*/React__default["default"].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__default["default"].createElement(InputContainer$8, {
@@ -9272,6 +9274,7 @@ const DropdownWrapper$1 = styled__default["default"].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;
@@ -9282,7 +9285,7 @@ const DropdownWrapper$1 = styled__default["default"].div`
     top: 100%;
     left: 0;
     right: 0;
-    height: 2px;           // Creates invisible bridge for hover
+    height: 2px;
     z-index: 99;
     pointer-events: none;
   }
@@ -9472,6 +9475,7 @@ const DropdownMultiNew = ({
   disabled,
   width,
   height,
+  minHeight,
   withMarginBottom = true,
   error,
   errorMessage,
@@ -9648,6 +9652,7 @@ const DropdownMultiNew = ({
     className: "DropdownWrapper",
     width: width,
     height: height,
+    minHeight: minHeight,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
   }, /*#__PURE__*/React__default["default"].createElement(InputContainer$7, {
@@ -9746,6 +9751,7 @@ const DropdownMain = styled__default["default"].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;
@@ -9767,6 +9773,7 @@ const DropdownNew = props => {
     disabled = false,
     width = "300px",
     height = "52px",
+    minHeight = "",
     withMarginBottom = true,
     error = false,
     showLabelOnTop = true,
@@ -9786,7 +9793,8 @@ const DropdownNew = props => {
   return /*#__PURE__*/React__default["default"].createElement(DropdownMain, {
     className: "DropdownMain",
     width: width,
-    height: height
+    height: height,
+    minHeight: minHeight
   }, isMulti ? /*#__PURE__*/React__default["default"].createElement(DropdownMultiNew, {
     className: "DropdownMultiNew",
     placeHolder: placeHolder,
@@ -9798,6 +9806,7 @@ const DropdownNew = props => {
     options: options,
     width: width,
     height: height,
+    minHeight: minHeight,
     withMarginBottom: withMarginBottom,
     disabled: disabled,
     error: error,
@@ -9819,6 +9828,7 @@ const DropdownNew = props => {
     options: options,
     width: width,
     height: height,
+    minHeight: minHeight,
     withMarginBottom: withMarginBottom,
     disabled: disabled,
     error: error,
@@ -10590,23 +10600,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] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState('');
@@ -11048,22 +11059,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] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState('');
@@ -12263,13 +12275,16 @@ const Td$1 = styled__default["default"].td`
 `;
 const Tr = styled__default["default"].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__default["default"].div`
   font-weight: 400;
@@ -24171,21 +24186,22 @@ const DeleteIcon = styled__default["default"].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] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState("");
@@ -24637,25 +24653,26 @@ const IconContainer$2 = styled__default["default"].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] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState('');
@@ -35662,7 +35679,7 @@ const MainContainer = styled__default["default"].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;
@@ -35684,7 +35701,10 @@ const Label$3 = styled__default["default"].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) {
@@ -35851,6 +35871,7 @@ const Input$2 = _ref => {
     width,
     minWidth,
     height = "50px",
+    minHeight,
     error,
     errorMessage,
     labelColor,
@@ -35970,6 +35991,7 @@ const Input$2 = _ref => {
     className: "MainContainer",
     width: width,
     height: calculateHeight(),
+    minHeight: minHeight,
     size: size,
     disabled: disabled,
     isDarkerBackground: isDarkerBackground,
@@ -36056,6 +36078,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,
@@ -36083,6 +36106,7 @@ Input$2.defaultProps = {
   required: true,
   width: "300px",
   minWidth: "unset",
+  minHeight: undefined,
   disabled: false,
   error: false,
   errorMessage: "",
@@ -36171,9 +36195,9 @@ const ToggleSlider = styled__default["default"].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 {
@@ -37850,7 +37874,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]);