sag_components 2.0.0-beta210 → 2.0.0-beta211

package/dist/index.js

@@ -2104,7 +2104,7 @@ const NoDataFoundMessage = props => {
   }, noDataText));
 };
 
-const scrollableStyles$f = `
+const scrollableStyles$g = `
   overflow-y: auto;
 
   &::-webkit-scrollbar {
@@ -2133,7 +2133,7 @@ const ControlsContainer$e = styled__default["default"].div`
   display: flex;
   align-items: center;
   @media (max-width: 1536px) {
-    ${scrollableStyles$f}
+    ${scrollableStyles$g}
   }
 
   > * {
@@ -3815,7 +3815,7 @@ const SearchInput$1 = props => {
   }));
 };
 
-const scrollableStyles$e = `
+const scrollableStyles$f = `
   overflow-y: auto;
 
   &::-webkit-scrollbar {
@@ -3898,7 +3898,7 @@ const PresentationSlider = styled__default["default"].div`
 `;
 const Body = styled__default["default"].div`
   width: 100%;
-  ${scrollableStyles$e}
+  ${scrollableStyles$f}
   position: relative;
   overflow-x: hidden;
   box-sizing: border-box;
@@ -8752,7 +8752,7 @@ const MenuItemUpIcon = _ref => {
 };
 
 /* eslint-disable no-nested-ternary */
-const scrollableStyles$d = `
+const scrollableStyles$e = `
   overflow-y: auto;
 
   &::-webkit-scrollbar {
@@ -8896,7 +8896,7 @@ const OptionsSubContainer$3 = styled__default["default"].ul`
   z-index: 101;
   top: 100%;
   /* left: 0; */
-  ${scrollableStyles$d}
+  ${scrollableStyles$e}
   list-style: none;
   font-weight: 400;
   margin: 0;
@@ -9246,7 +9246,7 @@ const CheckBoxNotCheckedIcon = _ref => {
 };
 
 /* eslint-disable no-nested-ternary */
-const scrollableStyles$c = `
+const scrollableStyles$d = `
   overflow-y: auto;
 
   &::-webkit-scrollbar {
@@ -9391,7 +9391,7 @@ const OptionsSubContainer$2 = styled__default["default"].ul`
   z-index: 101;
   top: 100%;
   /* left: 0; */
-  ${scrollableStyles$c}
+  ${scrollableStyles$d}
   list-style: none;
   font-weight: 400;
   margin: 0;
@@ -10590,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] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState('');
@@ -11048,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] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState('');
@@ -11990,7 +11992,7 @@ const SortIcon$1 = _ref => {
   }))));
 };
 
-const scrollableStyles$b = `
+const scrollableStyles$c = `
   overflow-y: auto;
 
   &::-webkit-scrollbar {
@@ -12225,7 +12227,7 @@ const TableWrapper$3 = styled__default["default"].div`
   border: 1px solid #dddddd;
   border-radius: ${props => props.columnsNumber > props.maxColumnsNumber ? ' 12px 12px 6px 6px' : '12px'};
   overflow-x: ${props => props.columnsNumber > props.maxColumnsNumber ? 'auto' : 'hidden'};
-  ${scrollableStyles$b}
+  ${scrollableStyles$c}
 `;
 const Table$3 = styled__default["default"].table`
   font-family: "Poppins", sans-serif;
@@ -13302,7 +13304,7 @@ const BannerEventBoxList = props => {
   })), showDraft && /*#__PURE__*/React__default["default"].createElement(DraftTag$1, null, "DRAFT")) : children));
 };
 
-const scrollableStyles$a = `
+const scrollableStyles$b = `
   overflow-y: auto;
 
   &::-webkit-scrollbar {
@@ -13339,7 +13341,7 @@ const Modal$1 = styled__default["default"].div`
     width: 79%;
     max-width: 1500px;
     margin: 0 auto;
-    ${scrollableStyles$a}
+    ${scrollableStyles$b}
 `;
 const ModalHeader$2 = styled__default["default"].div`
     display: flex;
@@ -13348,7 +13350,7 @@ const ModalHeader$2 = styled__default["default"].div`
     margin-bottom: 32px;
 `;
 const ModalBody$1 = styled__default["default"].div`
-    ${scrollableStyles$a}
+    ${scrollableStyles$b}
     max-height: 80vh;
 `;
 const ModalTitle$2 = styled__default["default"].h5`
@@ -24174,21 +24176,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("");
@@ -24405,101 +24408,98 @@ QuickFilterDropdownSingle.defaultProps = {
   showLabelOnTop: true
 };
 
+const scrollableStyles$a = `
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-track {
+    background: #E8E8E8;
+    border-radius: 5px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #D0D0D0;
+    border-radius: 5px;
+  }
+`;
 const DropdownWrapper = styled__default["default"].div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-content: center;
-  justify-content: center;
-  align-items: flex-start;
-  width: ${props => props.width || '300px'};  
-  font-family: "Poppins", sans-serif;
-  font-weight: 400;
+position: relative;
+display: flex;
+flex-direction: column;
+align-content: center;
+justify-content: center;
+align-items: flex-start;
+width: ${props => props.width || '300px'};
+min-width: ${props => props.width || '300px'};
+max-width: ${props => props.width || '300px'};
+font-family: "Poppins", sans-serif;
+font-weight: 400;
   font-size: 14px;
   border-radius: 10px;
 `;
 const Label$5 = styled__default["default"].label`
-  font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
-  font-weight: 400;
-  padding-inline-end: 5px;
-  padding-inline-start: 5px;
-  margin-right: 10px;
-  z-index: 2;
-  color: ${props => props.error ? 'red' : props.disabled ? '#888' : props.labelColor};
-  background-color: ${props => props.showLabelOnTop ? 'white' : 'transparent'} ;
-  position: absolute;
-  top: ${props => props.isFocused || props.hasValue ? '0px' : '27px'};
-  left: ${props => props.isFocused || props.hasValue ? '23px' : '10px'};
-  font-family: Poppins;  
-  transform: translateY(-50%);
-  transition: ${props => props.showLabelOnTop ? 'top 0.3s ease, font-size 0.3s ease, color 0.3s ease' : ''} ;
+  font-size: 14px;
+  font-weight: 500;
+  color: ${props => props.disabled ? '#D0D0D0' : '212121'};
+  white-space: nowrap;
+`;
+const InputContainer$2 = styled__default["default"].div`
   display: flex;
+  justify-content: space-between;
+  align-content: center;
+  white-space: pre-wrap;
   align-items: center;
+  overflow: hidden;
+  padding: 6px 16px;
+  margin-bottom: 8px;
+  height: ${props => props.height || '38px'};
+  min-height: ${props => props.height || '38px'};
+  max-height: ${props => props.height || '38px'};
+  width: 100%;
   box-sizing: border-box;
-  gap: 4px;
-  &:hover {
-    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
-  }
-`;
-const InputContainer$2 = styled__default["default"].div`
-    display: flex;       
-    flex-direction: row;
-    flex-wrap: nowrap; 
-    justify-content: flex-start;
-    align-content: center;     
-    white-space: pre-wrap;
-    align-items: center;
-    overflow: hidden;
-    padding: 0 5px 0 0;
-    margin-bottom: 8px;
-    gap: 4px;
-    width: 100%;
-    height: 100%;    
-    box-sizing: border-box;
-    background-color: transparent;    
-    border:  1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1'};
-    font-family: "Poppins", sans-serif;
-    font-weight: 400;
-    font-size: 14px;
-    border-radius: 12px;
-    outline: none;
-    color: ${props => props.disabled ? '#888' : '#212121'};
+  border: 1px solid
+    ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1'};
+  font-family: "Poppins", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  border-radius: 9px;
+  outline: none;
+  color: ${props => props.disabled ? '#888' : '#212121'};
+
   &:hover {
-    border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'};
+    border: 1px solid
+      ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.hoverColor || '#212121'};
     cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
   }
-  &:focus {  
-    border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'}; 
+
+  &:focus {
+    border: 1px solid
+      ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'};
   }
 `;
 const InputSubContainer$1 = styled__default["default"].div`
-    display: flex;       
-    flex-direction: column;
-    flex-wrap: nowrap;     
-    align-content: center; 
-    align-items: flex-start;
-    justify-content: center;
-    white-space: pre-wrap;
-    overflow: hidden;
-    padding: 10px 4px 10px 10px;
-    width: 100%;
-    height: 50px;
-    box-sizing: border-box;
-    background-color: transparent;    
-    border-radius: 12px;
-    outline: none;
-    color: ${props => props.disabled ? '#888' : '#212121'};     
+  display: flex;
+  align-items: center;
+  color: ${props => props.disabled ? '#888' : '#212121'};
+  gap: 4px;
+  flex: 1;
+  overflow: hidden;
+  min-width: 0;
+  max-width: calc(100% - 40px);
 `;
 const StyledInput$2 = styled__default["default"].input`
-  width: calc(100% - 20px);
-  height: 25px;
-  font-family: Poppins;
+  width: 100%;
+  height: 20px;
+  font-family: "Poppins";
   font-weight: 400;
   font-size: 14px;
-  outline: none;  
-  background-color: transparent;    
-  color: ${props => props.disabled ? '#888' : '#212121'};    
-  border: none;  
+  outline: none;
+  color: ${props => props.disabled ? '#888' : '#212121'};
+  border: none;
+  background-color: transparent;
+  &::placeholder {
+    color: ${props => props.disabled ? '#D0D0D0' : '#b1b1b1'};
+  }
 `;
 const OptionsContainer$1 = styled__default["default"].div`  
   margin: 0;   
@@ -24526,10 +24526,12 @@ const OptionsSubContainer = styled__default["default"].ul`
   background-color: #fff;  
   display: ${props => props.showoptions && props.filteredoptions?.length > 0 ? 'block' : 'none'};
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
-  max-height: 400px;
-  overflow: auto;
+  max-height: ${props => props.dropdownHeight || '400px'};
+  ${scrollableStyles$a}
 `;
 const OptionItem = styled__default["default"].li`  
+  display: flex;
+  align-items: center;
   gap: 8px;
   padding: 10px;
   cursor: pointer;
@@ -24550,34 +24552,34 @@ const ErrorMessage$1 = styled__default["default"].div`
   margin-top: 5px;
 `;
 const SelectedOptionsContainer = styled__default["default"].div`
-    display: flex;   
-    flex-direction: row;
-    flex-wrap: nowrap; 
-    justify-content: flex-start;
-    align-content: center; 
-    align-items: center;
-    white-space: pre-wrap;
-    overflow: hidden;
-    padding: 0;
-    font-weight: 400;
-    border-top: none;
-    border-radius: 4px; 
-    background-color: #fff;    
-    gap: 4px;   
-`;
-const SelectedOptionItem = styled__default["default"].div`  
-  display: flex;  
-  margin: 0;
-  flex-wrap: nowrap; 
-  white-space: pre-wrap;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: nowrap;
   overflow: hidden;
+  flex-shrink: 0;
+  min-width: 0;
+  max-width: 170px;
+`;
+const SelectedOptionItem = styled__default["default"].div`
+  display: flex;
+  align-items: center;
   cursor: pointer;
   color: #212121;
   background-color: #E3E4E5;
-  border-radius: 4px; 
-  align-items: center;
-  padding: 4px 6px;
+  border-radius: 4px;
+  padding: 2px 4px;
   font-size: 12px;
+  height: 20px;
+  white-space: nowrap;
+  flex-shrink: 0;
+  width: 65px;
+  max-width: 65px;
+  min-width: 65px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
 `;
 const IconContainer$2 = styled__default["default"].div`  
   display: flex;  
@@ -24585,23 +24587,26 @@ const IconContainer$2 = styled__default["default"].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,
+    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('');
@@ -24712,33 +24717,35 @@ const QuickFilterDropdownMultiSelection = ({
   const displaySelectedOptions = () => {
     const content = /*#__PURE__*/React__default["default"].createElement(SelectedOptionsContainer, {
       className: "SelectedOptionsContainer"
-    }, selectedOptions?.map((option, index) => index < 2 ? /*#__PURE__*/React__default["default"].createElement(SelectedOptionItem, {
-      className: "SelectedOptionItem",
-      key: option.value,
-      onClick: () => {
-        toggleOption(option);
-        setIsFocused(true);
-        if (inputRef?.current) {
-          inputRef?.current?.focus();
-        }
+    }, selectedOptions?.map((option, index) => {
+      if (index < 2) {
+        return /*#__PURE__*/React__default["default"].createElement(SelectedOptionItem, {
+          className: "SelectedOptionItem",
+          key: option.value,
+          onClick: () => {
+            toggleOption(option);
+            setIsFocused(true);
+            if (inputRef?.current) {
+              inputRef?.current?.focus();
+            }
+          }
+        }, option.label && option.label?.length > 5 ? `${option.label?.substring(0, 5)}...` : option.label, /*#__PURE__*/React__default["default"].createElement(CloseXIcon, {
+          width: "8px",
+          height: "8px",
+          fill: "#212121"
+        }));
       }
-    }, option.label && option.label?.length > 10 ? `${option.label?.substring(0, 10)}...  ` : `${option.label}  `, /*#__PURE__*/React__default["default"].createElement(CloseXIcon, {
-      width: "8px",
-      height: "8px",
-      fill: "#212121"
-    })) : ' '), selectedOptions.length > 2 ? /*#__PURE__*/React__default["default"].createElement(SelectedOptionItem, {
+      return null;
+    }), selectedOptions.length > 2 && /*#__PURE__*/React__default["default"].createElement(SelectedOptionItem, {
       className: "SelectedOptionItem"
-    }, selectedOptions.length - 2, "+") : '');
+    }, "+", selectedOptions.length - 2));
     return content;
   };
   const getLabel = () => {
     if (!showLabelOnTop && isFocused) {
       return '';
     }
-    if (selectedOptions?.length > 0) {
-      return label;
-    }
-    return labelEmptyValue;
+    return label;
   };
   const getRequired = () => {
     if (!showLabelOnTop && isFocused) {
@@ -24747,18 +24754,12 @@ const QuickFilterDropdownMultiSelection = ({
     if (!showLabelOnTop && !label && selectedOptions?.length > 0) {
       return '';
     }
-    if (required) {
-      return /*#__PURE__*/React__default["default"].createElement("span", {
-        style: {
-          color: 'red'
-        }
-      }, "*");
-    }
     return '';
   };
   return /*#__PURE__*/React__default["default"].createElement(DropdownWrapper, {
     className: "DropdownWrapper",
     width: width,
+    height: height,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
   }, /*#__PURE__*/React__default["default"].createElement(InputContainer$2, {
@@ -24766,7 +24767,8 @@ const QuickFilterDropdownMultiSelection = ({
     labelColor: labelColor,
     disabled: disabled,
     error: error,
-    isFocused: isFocused
+    isFocused: isFocused,
+    height: height
   }, /*#__PURE__*/React__default["default"].createElement(InputSubContainer$1, {
     className: "InputSubContainer",
     ref: containerRef,
@@ -24784,7 +24786,7 @@ const QuickFilterDropdownMultiSelection = ({
     errorMessage: errorMessage,
     onClick: handleLabelClick,
     showLabelOnTop: showLabelOnTop
-  }, getLabel(), getRequired()), displaySelectedOptions(), showOptions ? /*#__PURE__*/React__default["default"].createElement(StyledInput$2, {
+  }, getLabel(), getRequired()), displaySelectedOptions(), /*#__PURE__*/React__default["default"].createElement(StyledInput$2, {
     className: "StyledInput",
     ref: inputRef,
     value: inputValue,
@@ -24793,10 +24795,10 @@ const QuickFilterDropdownMultiSelection = ({
     onClick: handleLabelClick,
     type: "search",
     disabled: disabled,
-    placeholder: isFocused ? placeHolder || 'Type to search...' : '',
+    placeholder: placeHolder,
     error: error,
     isFocused: isFocused
-  }) : ' '), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/React__default["default"].createElement(IconContainer$2, {
+  })), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/React__default["default"].createElement(IconContainer$2, {
     className: "IconContainer",
     onClick: handleClearClick
   }, /*#__PURE__*/React__default["default"].createElement(CloseXIcon, {
@@ -24825,13 +24827,14 @@ const QuickFilterDropdownMultiSelection = ({
     className: "OptionsSubContainer",
     showoptions: showOptions,
     disabled: disabled,
-    filteredoptions: filteredoptions
+    filteredoptions: filteredoptions,
+    dropdownHeight: dropdownHeight
   }, filteredoptions.map(option => /*#__PURE__*/React__default["default"].createElement(OptionItem, {
     className: "OptionItem",
     key: option.value,
     onClick: () => toggleOption(option),
     selected: isDropdowned(option)
-  }, highlightText(option.label, inputValue), /*#__PURE__*/React__default["default"].createElement(IconContainer$2, {
+  }, /*#__PURE__*/React__default["default"].createElement(IconContainer$2, {
     className: "IconContainer"
   }, selectedOptions.find(itemSelectedOptions => option.value === itemSelectedOptions.value) ? /*#__PURE__*/React__default["default"].createElement(CheckBoxCheckedIcon, {
     width: "14px",
@@ -24841,7 +24844,7 @@ const QuickFilterDropdownMultiSelection = ({
     width: "14px",
     height: "14px",
     color: disabled ? '#888' : '#212121'
-  })), option.label)))));
+  })), highlightText(option.label, inputValue))))));
 };
 QuickFilterDropdownMultiSelection.propTypes = {
   placeHolder: PropTypes.string,
@@ -24851,6 +24854,8 @@ QuickFilterDropdownMultiSelection.propTypes = {
   checkBoxColor: PropTypes.string,
   required: PropTypes.bool,
   width: PropTypes.string,
+  height: PropTypes.string,
+  dropdownHeight: PropTypes.string,
   disabled: PropTypes.bool,
   error: PropTypes.bool,
   errorMessage: '',
@@ -24874,6 +24879,8 @@ QuickFilterDropdownMultiSelection.defaultProps = {
   checkBoxColor: '#229E38',
   required: true,
   width: '300px',
+  height: '38px',
+  dropdownHeight: '500px',
   disabled: false,
   error: false,
   errorMessage: '',
@@ -24910,7 +24917,9 @@ const QuickFilter = _ref => {
     labelColor = "#066768",
     placeHolder = "Select From List",
     width = "auto",
+    height = "38px",
     checkBoxColor = "#229E38",
+    dropdownHeight = "500px",
     onChange = value => {},
     options = [],
     selectedValue = []
@@ -24926,6 +24935,8 @@ const QuickFilter = _ref => {
     checkBoxColor: checkBoxColor,
     options: options,
     width: width,
+    height: height,
+    dropdownHeight: dropdownHeight,
     disabled: disabled,
     error: error,
     errorMessage: errorMessage,
@@ -36043,9 +36054,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 {