sag_components 2.0.0-beta202 → 2.0.0-beta203

package/dist/index.js

@@ -2397,19 +2397,19 @@ const TooltipTip$1 = styled__default["default"].div`
   }
 `;
 
-const Tooltip$2 = props => {
+const Tooltip$3 = props => {
   const {
     children,
-    content = 'Tooltip content',
-    showToolTip = true,
-    direction = 'top',
-    delay = '400',
+    content = "Tooltip content",
+    showTooltip = true,
+    direction = "top",
+    delay = "400",
     topFactor = -1.8,
     hideTooltip = false,
     className
   } = props;
   let timeout;
-  const [active, setActive] = React$1.useState(showToolTip);
+  const [active, setActive] = React$1.useState(showTooltip);
   const showTip = () => {
     timeout = setTimeout(() => {
       setActive(true);
@@ -2423,12 +2423,12 @@ const Tooltip$2 = props => {
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(TooltipWrapper$2, {
     className: "tooltip-wrapper",
-    onMouseEnter: showToolTip && showTip,
-    onMouseLeave: showToolTip && hideTip
+    onMouseEnter: showTooltip && showTip,
+    onMouseLeave: showTooltip && hideTip
   }, children, active && !hideTooltip && /*#__PURE__*/React__default["default"].createElement(TooltipTip$1, {
-    className: `controls ${direction || 'top'}`,
+    className: `controls ${direction || "top"}`,
     topFactor: topFactor
-  }, typeof content === 'string' ? /*#__PURE__*/React__default["default"].createElement("span", {
+  }, typeof content === "string" ? /*#__PURE__*/React__default["default"].createElement("span", {
     dangerouslySetInnerHTML: {
       __html: content
     }
@@ -2508,7 +2508,7 @@ const Benchmark = props => {
     id: "ControlsContainer",
     height: height,
     width: width
-  }, /*#__PURE__*/React__default["default"].createElement(Tooltip$2, {
+  }, /*#__PURE__*/React__default["default"].createElement(Tooltip$3, {
     id: "Tooltip",
     content: getTooltipText(),
     direction: tooltipDirection
@@ -11664,7 +11664,7 @@ const FilterPanel = props => {
         });
         break;
       default:
-        content = /*#__PURE__*/React__default["default"].createElement(Tooltip$2, {
+        content = /*#__PURE__*/React__default["default"].createElement(Tooltip$3, {
           className: "Tooltip",
           content: getTooltipTextDates(),
           direction: "top",
@@ -11808,7 +11808,7 @@ const FilterPanel = props => {
   const displayGoButton = () => {
     let content;
     if (tooltipTextGoButton) {
-      content = /*#__PURE__*/React__default["default"].createElement(Tooltip$2, {
+      content = /*#__PURE__*/React__default["default"].createElement(Tooltip$3, {
         className: "Tooltip",
         content: getTooltipTextGoButton(),
         direction: "top",
@@ -12572,7 +12572,7 @@ const ReportTable = props => {
   }, displaySelectButton(rowData)) : /*#__PURE__*/React__default["default"].createElement(Td$1, {
     className: "cell",
     key: dataIndex
-  }, value && value.length > 30 ? /*#__PURE__*/React__default["default"].createElement(Tooltip$2, {
+  }, value && value.length > 30 ? /*#__PURE__*/React__default["default"].createElement(Tooltip$3, {
     content: getTooltipText(value),
     direction: "top",
     topFactor: value !== null ? -getTopFactor(Math.ceil(value.length / 50)) : -getTopFactor(1)
@@ -26575,7 +26575,7 @@ const TooltipTip = styled__default["default"].div`
   }
 `;
 
-const Tooltip$1 = props => {
+const Tooltip$2 = props => {
   const {
     className,
     top,
@@ -26591,14 +26591,14 @@ const Tooltip$1 = props => {
     className: `controls ${direction || 'top'}`
   }, content)));
 };
-Tooltip$1.propTypes = {
+Tooltip$2.propTypes = {
   className: PropTypes.string,
   top: PropTypes.number,
   left: PropTypes.number,
   direction: PropTypes.string,
   content: PropTypes.string
 };
-Tooltip$1.defaultProps = {
+Tooltip$2.defaultProps = {
   className: '',
   top: 0,
   left: 0,
@@ -26872,7 +26872,7 @@ const TotalHorizontalCharts = props => {
   React__default["default"].createElement(recharts.Cell, {
     key: `cell-${index}`,
     fill: barBackgrounds[index % 20]
-  }))), showLegendTooltip && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+  }))), showLegendTooltip && /*#__PURE__*/React__default["default"].createElement(Tooltip$2, {
     direction: "top",
     content: tooltipText.content,
     top: tooltipText.clientY,
@@ -34628,7 +34628,7 @@ const ModalBody = styled__default["default"].div`
   width: 100%;
   height: 100%;
 `;
-const TooltipContent = styled__default["default"].span`
+const TooltipContent$1 = styled__default["default"].span`
   color: #212121;
   font-family: Poppins;
   font-size: 14px;
@@ -34698,10 +34698,10 @@ const ModalWithOverlay = props => {
     hoverTextColor: "#212121",
     hoverBackgroundColor: "#E6F0F0",
     hoverBorderColor: "#D3D3D3"
-  }), showOkButton && (disableOkButton && tooltipContent !== '' ? /*#__PURE__*/React__default["default"].createElement(Tooltip$2, {
+  }), showOkButton && (disableOkButton && tooltipContent !== '' ? /*#__PURE__*/React__default["default"].createElement(Tooltip$3, {
     direction: "top",
     topFactor: -0.85,
-    content: /*#__PURE__*/React__default["default"].createElement(TooltipContent, {
+    content: /*#__PURE__*/React__default["default"].createElement(TooltipContent$1, {
       dangerouslySetInnerHTML: {
         __html: tooltipContent
       }
@@ -36047,9 +36047,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 {
@@ -39517,26 +39517,26 @@ styled__default["default"].div`
 
 // MessageBox.styles.js
 const ModalOverlay = styled__default["default"].div`
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-    font-family: 'Poppins', sans-serif;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, ${props => props.opacity || 0.5});
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  font-family: "Poppins", sans-serif;
 `;
 const ModalContainer = styled__default["default"].div`
-    background-color: white;
-    border-radius: 12px;
-    width: ${props => props.$width || '400px'};
-    height: ${props => props.$height || 'auto'};
-    position: relative;
-    font-family: 'Poppins', sans-serif;
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+  background-color: white;
+  border-radius: 12px;
+  width: ${props => props.$width || "400px"};
+  height: ${props => props.$height || "auto"};
+  position: relative;
+  font-family: "Poppins", sans-serif;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 `;
 const CloseButton = styled__default["default"].button`
   background: none;
@@ -39559,6 +39559,14 @@ const CloseButton = styled__default["default"].button`
     transform: scale(0.95);
   }
 `;
+const TooltipContent = styled__default["default"].span`
+  color: #212121;
+  font-family: Poppins;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
 const ModalHeader = styled__default["default"].div`
   display: flex;
   justify-content: space-between;
@@ -39574,15 +39582,15 @@ const ModalTitle = styled__default["default"].h5`
   margin: 0;
 `;
 const ModalContent = styled__default["default"].div`
-    padding: 24px;
-    border-top: ${props => props.showBorders ? '1px solid #D9D9D9' : 'none'};
-    border-bottom: ${props => props.showBorders ? '1px solid #D9D9D9' : 'none'};
+  padding: 24px;
+  border-top: ${props => props.showBorders ? "1px solid #D9D9D9" : "none"};
+  border-bottom: ${props => props.showBorders ? "1px solid #D9D9D9" : "none"};
 `;
 const ButtonContainer$1 = styled__default["default"].div`
-    display: flex;
-    gap: 16px;
-    justify-content: flex-end;
-    padding: 16px 24px;
+  display: flex;
+  gap: 16px;
+  justify-content: flex-end;
+  padding: 16px 24px;
 `;
 
 // MessageBox.jsx
@@ -39599,9 +39607,11 @@ const MessageBox = _ref => {
     height = "auto",
     color = "#F00021",
     hoverColor = "#ff7875",
+    opacity = 0.5,
     secondaryColor = "#ffffff",
     seperateSectionBorder = false,
-    children
+    children,
+    tooltipContent = "Please fill in all required details"
   } = _ref;
   if (!isOpen) return null;
   const handleOverlayClick = e => {
@@ -39610,7 +39620,8 @@ const MessageBox = _ref => {
     }
   };
   return /*#__PURE__*/React__default["default"].createElement(ModalOverlay, {
-    onClick: handleOverlayClick
+    onClick: handleOverlayClick,
+    opacity: opacity
   }, /*#__PURE__*/React__default["default"].createElement(ModalContainer, {
     $width: width,
     $height: height
@@ -39633,7 +39644,16 @@ const MessageBox = _ref => {
     width: "auto",
     minWidth: "60px",
     onClick: onClose
-  }), /*#__PURE__*/React__default["default"].createElement(Button$1, {
+  }), tooltipContent !== "" && /*#__PURE__*/React__default["default"].createElement(Tooltip, {
+    direction: "top",
+    showTooltip: isDisabled,
+    topFactor: -0.85,
+    content: /*#__PURE__*/React__default["default"].createElement(TooltipContent, {
+      dangerouslySetInnerHTML: {
+        __html: tooltipContent
+      }
+    })
+  }, /*#__PURE__*/React__default["default"].createElement(Button$1, {
     text: primaryText,
     size: "medium",
     backgroundColor: color,
@@ -39649,7 +39669,7 @@ const MessageBox = _ref => {
     width: "auto",
     minWidth: "60px",
     onClick: onConfirm
-  }))));
+  })))));
 };
 
 // OkIcon.jsx
@@ -44511,7 +44531,7 @@ const ButtonContainer = styled.styled.div`
     }
   }
 `;
-const CustomTooltip$1 = styled.styled(Tooltip$2)`
+const CustomTooltip$1 = styled.styled(Tooltip$3)`
   .controls {
     padding: 12px 16px;
     font-size: 14px;
@@ -45006,7 +45026,7 @@ styled__default["default"].div`
     }
   }
 `;
-const CustomTooltip = styled__default["default"](Tooltip$2)`
+const CustomTooltip = styled__default["default"](Tooltip$3)`
   .controls {
     padding: 12px 16px;
     font-size: 14px;
@@ -45678,7 +45698,7 @@ const DividerLine = styled__default["default"].div`
   background: #BEE3C7;
   margin: 0 auto;
 `;
-const Tooltip = styled__default["default"].div`
+const Tooltip$1 = styled__default["default"].div`
   visibility: hidden;
   background: #ffffff;
   color: #212121;
@@ -45715,8 +45735,8 @@ const ExpandButtonWrapper = styled__default["default"].div`
   display: flex;
   justify-content: center;
   align-items: center;
-  &:hover ${Tooltip},
-  &:focus-within ${Tooltip} {
+  &:hover ${Tooltip$1},
+  &:focus-within ${Tooltip$1} {
     visibility: visible;
     opacity: 1;
   }
@@ -54103,7 +54123,7 @@ const SuccessScreen = ({
     key: idx
   }, vendor))), hiddenVendors.length > 0 && /*#__PURE__*/React__default["default"].createElement(ExpandButtonWrapper, null, /*#__PURE__*/React__default["default"].createElement(ExpandButton, {
     tabIndex: 0
-  }, "\u2022\u2022\u2022"), /*#__PURE__*/React__default["default"].createElement(Tooltip, null, vendors.map((vendor, idx) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+  }, "\u2022\u2022\u2022"), /*#__PURE__*/React__default["default"].createElement(Tooltip$1, null, vendors.map((vendor, idx) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
     key: idx
   }, vendor, /*#__PURE__*/React__default["default"].createElement("br", null)))))));
 };
@@ -55619,7 +55639,7 @@ exports.Table = Table;
 exports.Tag = Tag;
 exports.ToasterMessageBox = ToasterMessageBox;
 exports.ToggleSwitch = ToggleSwitch;
-exports.Tooltip = Tooltip$2;
+exports.Tooltip = Tooltip$3;
 exports.TopToggleList = TopToggleList;
 exports.TotalDoughnutChart = TotalDoughnutChart;
 exports.TotalHorizontalCharts = TotalHorizontalCharts;