sag_components 2.0.0-beta283 → 2.0.0-beta285

package/dist/index.esm.js

@@ -2322,7 +2322,7 @@ const TooltipContainer$4 = styled.div`
 `;
 
 /* Wrapping */
-const TooltipWrapper$2 = styled.div`
+const TooltipWrapper$3 = styled.div`
   display: inline-block;
   position: relative;
 `;
@@ -2429,7 +2429,7 @@ const Tooltip$2 = props => {
   };
   return /*#__PURE__*/React$1.createElement(TooltipContainer$4, {
     className: className
-  }, /*#__PURE__*/React$1.createElement(TooltipWrapper$2, {
+  }, /*#__PURE__*/React$1.createElement(TooltipWrapper$3, {
     className: "tooltip-wrapper",
     onMouseEnter: showTooltip ? showTip : () => {},
     onMouseLeave: showTooltip ? hideTip : () => {}
@@ -12165,7 +12165,7 @@ const PaginationContainer = styled.div`
     cursor: default;
   }
 `;
-const TooltipWrapper$1 = styled.div`
+const TooltipWrapper$2 = styled.div`
   width: max-content;
   max-width: 330px;
   /* white-space: wrap; */
@@ -12483,7 +12483,7 @@ const ReportTable = props => {
     }
     return colNumber;
   };
-  const getTooltipText = value => /*#__PURE__*/React$1.createElement(TooltipWrapper$1, null, value);
+  const getTooltipText = value => /*#__PURE__*/React$1.createElement(TooltipWrapper$2, null, value);
   const truncateString = (str, maxLength) => {
     let val = str.length > maxLength ? str.slice(0, maxLength) + "..." : str;
     return val;
@@ -24643,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('');
@@ -26572,7 +26573,7 @@ const TooltipContainer$3 = styled.div`
   top: ${props => props.top};
   left: ${props => props.left};
 `;
-const TooltipWrapper = styled.div`
+const TooltipWrapper$1 = styled.div`
   display: inline-block;
   position: relative;
 `;
@@ -26672,7 +26673,7 @@ const Tooltip$1 = props => {
     className: className,
     top: `${top}px`,
     left: `${left}px`
-  }, /*#__PURE__*/React$1.createElement(TooltipWrapper, null, /*#__PURE__*/React$1.createElement(TooltipTip, {
+  }, /*#__PURE__*/React$1.createElement(TooltipWrapper$1, null, /*#__PURE__*/React$1.createElement(TooltipTip, {
     className: `controls ${direction || 'top'}`
   }, content)));
 };
@@ -57447,6 +57448,9 @@ const scrollableStyles = `
     border-radius: 4px;
   }
 `;
+const TooltipWrapper = styled(Tooltip$2)`
+  width: 100%;
+`;
 const DropdownContainer = styled.div`
   position: relative;
   width: ${props => props.width || '100%'};
@@ -57480,7 +57484,7 @@ const DropdownList = styled.ul`
   border-radius: 10px;
   margin: 0;
   padding: 8px 0;
-  width: ${props => props.width || '100%'};
+  min-width: ${props => props.width || '100%'};
   max-height: ${props => props.dropdownMaxHeight || '420px'}; 
   overflow-y: auto;
   left: 0;
@@ -57521,12 +57525,12 @@ const SectionTitle = styled.li`
   list-style: none;
 `;
 const DropdownItem = styled.li`
-  padding: 8px 12px;
+  padding: 8px 20px;
   cursor: pointer; 
   display: flex;
   align-items: center;
+  gap: 8px;
   justify-content: space-between;
-  margin: 0 12px;
   background: ${props => props.selected ? props.selectedColor || '#066768' : 'transparent'};
   font-weight: ${props => props.selected ? '500' : '400'};
   color: ${props => props.disabled ? '#D0D0D0' : props.selected ? '#fff' : '#212121'};
@@ -57555,21 +57559,6 @@ const TruncatedText = styled.span`
   font-weight: 400;
   color: ${props => props.color}; 
 `;
-styled.div`
-  position: absolute;
-  left: 0;           // <- Align with left edge of parent
-  bottom: 100%;      // <- Position ABOVE the element
-  margin-bottom: 8px; // <- Add space between tooltip and element
-  background: #fff;
-  color: #222;
-  border: 1px solid #e0e0e0;
-  border-radius: 6px;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
-  padding: 8px 12px;
-  font-size: 13px;
-  /* max-width: 320px; */
-  white-space: pre-line;
-`;
 const Label$1 = styled.label`
   font-size: 14px;
   font-weight: 400;
@@ -57875,8 +57864,6 @@ OverlayTemplateDialog.propTypes = {
 };
 
 // OverlayDropdown.jsx
-
-// Main Component
 const OverlayDropdown = _ref => {
   let {
     // Data / selection
@@ -58126,7 +58113,12 @@ const OverlayDropdown = _ref => {
     isDarkerBackground: isDarkerBackground,
     height: height,
     type: "button"
+  }, /*#__PURE__*/React$1.createElement(TooltipWrapper, {
+    topFactor: -0.7,
+    content: selected?.label,
+    showTooltip: !!selected
   }, /*#__PURE__*/React$1.createElement(Wrapper, null, /*#__PURE__*/React$1.createElement(TruncatedText, {
+    className: "selected",
     onMouseEnter: () => setHoveredText(selected?.label),
     onMouseLeave: () => setHoveredText(null),
     color: !selected && open ? placeHolderColor : "inherit"
@@ -58138,7 +58130,7 @@ const OverlayDropdown = _ref => {
     width: "12px",
     height: "12px",
     color: "#B1B1B1"
-  }))), open && /*#__PURE__*/React$1.createElement(DropdownList, {
+  })))), open && /*#__PURE__*/React$1.createElement(DropdownList, {
     ref: dropdownRef,
     role: "listbox",
     dropdownMaxHeight: dropdownMaxHeight,