sag_components 2.0.0-beta214 → 2.0.0-beta215

package/dist/index.js

@@ -24434,9 +24434,50 @@ 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;
+font-size: 14px;
+border-radius: 10px;
+
+.tooltip-wrapper {
+  width: 100%;
+  display: block;
+}
+
+.controls.bottom {
+  bottom: auto !important;
+  top: calc(100% + 15px) !important;
+  left: 0 !important;
+  transform: none !important;
+  box-shadow: none !important;
+  filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.25));
+}
+
+.controls.bottom::before {
+  bottom: 100% !important;
+  top: auto !important;
+  left: 40px !important;
+  margin-left: 0 !important;
+  border-width: 12px !important;
+  border-bottom-color: var(--tooltip-background-color) !important;
+  border-top-color: transparent !important;
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+}
+`;
+const TooltipWrapperContainer = styled__default["default"].div`
+  width: 100%;
+  --tooltip-arrow-size: 15px;
+`;
+const TooltipContentWrapper = styled__default["default"].div`
+  padding: 10px;
+  font-family: Poppins, sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 22px;
 `;
+const TooltipItem = styled__default["default"].div`
+  /* Each item on its own line */
+`;
+const EmptyDiv = styled__default["default"].div``;
 const Label$5 = styled__default["default"].label`
   font-size: 14px;
   font-weight: 500;
@@ -24455,7 +24496,9 @@ const InputContainer$2 = styled__default["default"].div`
   height: ${props => props.height || '38px'};
   min-height: ${props => props.height || '38px'};
   max-height: ${props => props.height || '38px'};
-  width: 100%;
+  width: ${props => props.width || '300px'};
+  min-width: ${props => props.width || '300px'};
+  max-width: ${props => props.width || '300px'};
   box-sizing: border-box;
   border: 1px solid
     ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1'};
@@ -24561,6 +24604,8 @@ const SelectedOptionsContainer = styled__default["default"].div`
   flex-shrink: 0;
   min-width: 0;
   max-width: 170px;
+  pointer-events: auto;
+  cursor: pointer;
 `;
 const SelectedOptionItem = styled__default["default"].div`
   display: flex;
@@ -24581,6 +24626,22 @@ const SelectedOptionItem = styled__default["default"].div`
   text-overflow: ellipsis;
   box-sizing: border-box;
 `;
+const SelectedOptionCount = styled__default["default"].div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #212121;
+  background-color: #E3E4E5;
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-size: 12px;
+  height: 20px;
+  white-space: nowrap;
+  flex-shrink: 0;
+  width: auto;
+  box-sizing: border-box;
+`;
 const IconContainer$2 = styled__default["default"].div`  
   display: flex;  
   padding: 2px;
@@ -24611,6 +24672,7 @@ const QuickFilterDropdownMultiSelection = _ref => {
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState('');
   const [selectedOptions, setSelectedOptions] = React$1.useState([]);
+  const [hoverSelectedOptions, setHoverSelectedOptions] = React$1.useState(false);
   const [hoverInputContainer, setHoverInputContainer] = React$1.useState(false);
   const [hoverOptionsContainer, setHoverOptionsContainer] = React$1.useState(false);
   const inputRef = React$1.useRef(null);
@@ -24716,7 +24778,15 @@ const QuickFilterDropdownMultiSelection = _ref => {
   };
   const displaySelectedOptions = () => {
     const content = /*#__PURE__*/React__default["default"].createElement(SelectedOptionsContainer, {
-      className: "SelectedOptionsContainer"
+      className: "SelectedOptionsContainer",
+      onMouseEnter: () => {
+        console.log('Mouse entered selected options');
+        setHoverSelectedOptions(true);
+      },
+      onMouseLeave: () => {
+        console.log('Mouse left selected options');
+        setHoverSelectedOptions(false);
+      }
     }, selectedOptions?.map((option, index) => {
       if (index < 2) {
         return /*#__PURE__*/React__default["default"].createElement(SelectedOptionItem, {
@@ -24736,8 +24806,8 @@ const QuickFilterDropdownMultiSelection = _ref => {
         }));
       }
       return null;
-    }), selectedOptions.length > 2 && /*#__PURE__*/React__default["default"].createElement(SelectedOptionItem, {
-      className: "SelectedOptionItem"
+    }), selectedOptions.length > 2 && /*#__PURE__*/React__default["default"].createElement(SelectedOptionCount, {
+      className: "SelectedOptionCount"
     }, "+", selectedOptions.length - 2));
     return content;
   };
@@ -24762,13 +24832,27 @@ const QuickFilterDropdownMultiSelection = _ref => {
     height: height,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
+  }, /*#__PURE__*/React__default["default"].createElement(TooltipWrapperContainer, {
+    className: "TooltipWrapperContainer"
+  }, /*#__PURE__*/React__default["default"].createElement(Tooltip$2, {
+    content: selectedOptions.length > 0 && hoverSelectedOptions ? /*#__PURE__*/React__default["default"].createElement(TooltipContentWrapper, null, selectedOptions.map((option, index) => {
+      console.log('Rendering tooltip for:', option.label);
+      return /*#__PURE__*/React__default["default"].createElement(TooltipItem, {
+        key: option.value
+      }, option.label);
+    })) : /*#__PURE__*/React__default["default"].createElement(EmptyDiv, null),
+    direction: "bottom",
+    delay: 0,
+    showTooltip: true,
+    hideTooltip: !hoverSelectedOptions || showOptions || inputValue.length > 0
   }, /*#__PURE__*/React__default["default"].createElement(InputContainer$2, {
     className: "InputContainer",
     labelColor: labelColor,
     disabled: disabled,
     error: error,
     isFocused: isFocused,
-    height: height
+    height: height,
+    width: width
   }, /*#__PURE__*/React__default["default"].createElement(InputSubContainer$1, {
     className: "InputSubContainer",
     ref: containerRef,
@@ -24816,7 +24900,7 @@ const QuickFilterDropdownMultiSelection = _ref => {
     width: "12px",
     height: "12px",
     color: "#B1B1B1"
-  }))), error && errorMessage?.length > 0 && /*#__PURE__*/React__default["default"].createElement(ErrorMessage$1, null, errorMessage), /*#__PURE__*/React__default["default"].createElement(OptionsContainer$1, {
+  }))))), error && errorMessage?.length > 0 && /*#__PURE__*/React__default["default"].createElement(ErrorMessage$1, null, errorMessage), /*#__PURE__*/React__default["default"].createElement(OptionsContainer$1, {
     className: "OptionsContainer",
     onMouseEnter: () => setHoverOptionsContainer(true),
     onMouseLeave: () => setHoverOptionsContainer(false),