sag_components 2.0.0-beta214 → 2.0.0-beta216

package/dist/index.esm.js

@@ -24166,22 +24166,21 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = _ref => {
-  let {
-    label,
-    hoverColor,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    xIconShow,
-    labelColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownSingle = ({
+  label,
+  hoverColor,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  xIconShow,
+  labelColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24424,9 +24423,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.div`
+  width: 100%;
+  --tooltip-arrow-size: 15px;
+`;
+const TooltipContentWrapper = styled.div`
+  padding: 10px;
+  font-family: Poppins, sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 22px;
+`;
+const TooltipItem = styled.div`
+  /* Each item on its own line */
 `;
+const EmptyDiv = styled.div``;
 const Label$5 = styled.label`
   font-size: 14px;
   font-weight: 500;
@@ -24445,7 +24485,9 @@ const InputContainer$2 = styled.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'};
@@ -24551,6 +24593,8 @@ const SelectedOptionsContainer = styled.div`
   flex-shrink: 0;
   min-width: 0;
   max-width: 170px;
+  pointer-events: auto;
+  cursor: pointer;
 `;
 const SelectedOptionItem = styled.div`
   display: flex;
@@ -24571,36 +24615,52 @@ const SelectedOptionItem = styled.div`
   text-overflow: ellipsis;
   box-sizing: border-box;
 `;
+const SelectedOptionCount = styled.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.div`  
   display: flex;  
   padding: 2px;
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    required,
-    disabled,
-    width,
-    height,
-    error,
-    errorMessage,
-    labelColor,
-    xIconShow,
-    checkBoxColor,
-    showLabelOnTop,
-    dropdownHeight
-  } = _ref;
+const QuickFilterDropdownMultiSelection = ({
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  required,
+  disabled,
+  width,
+  height,
+  error,
+  errorMessage,
+  labelColor,
+  xIconShow,
+  checkBoxColor,
+  showLabelOnTop,
+  dropdownHeight
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
   const [selectedOptions, setSelectedOptions] = useState([]);
+  const [hoverSelectedOptions, setHoverSelectedOptions] = useState(false);
   const [hoverInputContainer, setHoverInputContainer] = useState(false);
   const [hoverOptionsContainer, setHoverOptionsContainer] = useState(false);
   const inputRef = useRef(null);
@@ -24706,7 +24766,15 @@ const QuickFilterDropdownMultiSelection = _ref => {
   };
   const displaySelectedOptions = () => {
     const content = /*#__PURE__*/React$1.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$1.createElement(SelectedOptionItem, {
@@ -24726,8 +24794,8 @@ const QuickFilterDropdownMultiSelection = _ref => {
         }));
       }
       return null;
-    }), selectedOptions.length > 2 && /*#__PURE__*/React$1.createElement(SelectedOptionItem, {
-      className: "SelectedOptionItem"
+    }), selectedOptions.length > 2 && /*#__PURE__*/React$1.createElement(SelectedOptionCount, {
+      className: "SelectedOptionCount"
     }, "+", selectedOptions.length - 2));
     return content;
   };
@@ -24752,13 +24820,27 @@ const QuickFilterDropdownMultiSelection = _ref => {
     height: height,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
+  }, /*#__PURE__*/React$1.createElement(TooltipWrapperContainer, {
+    className: "TooltipWrapperContainer"
+  }, /*#__PURE__*/React$1.createElement(Tooltip$2, {
+    content: selectedOptions.length > 0 && hoverSelectedOptions ? /*#__PURE__*/React$1.createElement(TooltipContentWrapper, null, selectedOptions.map((option, index) => {
+      console.log('Rendering tooltip for:', option.label);
+      return /*#__PURE__*/React$1.createElement(TooltipItem, {
+        key: option.value
+      }, option.label);
+    })) : /*#__PURE__*/React$1.createElement(EmptyDiv, null),
+    direction: "bottom",
+    delay: 0,
+    showTooltip: true,
+    hideTooltip: !hoverSelectedOptions || showOptions || inputValue.length > 0
   }, /*#__PURE__*/React$1.createElement(InputContainer$2, {
     className: "InputContainer",
     labelColor: labelColor,
     disabled: disabled,
     error: error,
     isFocused: isFocused,
-    height: height
+    height: height,
+    width: width
   }, /*#__PURE__*/React$1.createElement(InputSubContainer$1, {
     className: "InputSubContainer",
     ref: containerRef,
@@ -24806,7 +24888,7 @@ const QuickFilterDropdownMultiSelection = _ref => {
     width: "12px",
     height: "12px",
     color: "#B1B1B1"
-  }))), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage$1, null, errorMessage), /*#__PURE__*/React$1.createElement(OptionsContainer$1, {
+  }))))), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage$1, null, errorMessage), /*#__PURE__*/React$1.createElement(OptionsContainer$1, {
     className: "OptionsContainer",
     onMouseEnter: () => setHoverOptionsContainer(true),
     onMouseLeave: () => setHoverOptionsContainer(false),
@@ -34886,17 +34968,18 @@ css`
  * • onApply(start,end) — callback, both numbers (inclusive)
  * • onCancel()         — callback
  */
-const WeeksCalendar = ({
-  year,
-  defaultStartWeek = null,
-  defaultEndWeek = null,
-  backgroundColor = "#066768",
-  hoverBackgroundColor = "#E6F0F0",
-  allowedWeekRange = null,
-  // New prop for range restriction
-  onApply,
-  onCancel
-}) => {
+const WeeksCalendar = _ref => {
+  let {
+    year,
+    defaultStartWeek = null,
+    defaultEndWeek = null,
+    backgroundColor = "#066768",
+    hoverBackgroundColor = "#E6F0F0",
+    allowedWeekRange = null,
+    // New prop for range restriction
+    onApply,
+    onCancel
+  } = _ref;
   // state -------------------------------------------------
   const [startWeek, setStartWeek] = useState(defaultStartWeek);
   const [endWeek, setEndWeek] = useState(defaultEndWeek);
@@ -35991,9 +36074,12 @@ const ToggleSwitchLabel = styled.label`
   position: relative;
   cursor: pointer;
   user-select: none;
-  opacity: ${({
-  disabled
-}) => disabled ? 0.5 : 1};
+  opacity: ${_ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled ? 0.5 : 1;
+}};
 `;
 const ToggleInput = styled.input`
   display: none;
@@ -36001,15 +36087,19 @@ const ToggleInput = styled.input`
 const ToggleSlider = styled.span`
   display: block;
   position: relative;
-  background: ${({
-  checked,
-  disabled
-}) => checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc"};
+  background: ${_ref2 => {
+  let {
+    checked,
+    disabled
+  } = _ref2;
+  return checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc";
+}};
   border-radius: 999px;
   transition: background 0.2s;
-  ${({
-  size
-}) => {
+  ${_ref3 => {
+  let {
+    size
+  } = _ref3;
   switch (size) {
     case "s":
       return css`width: 40px; height: 20px;`;
@@ -36028,9 +36118,10 @@ const ToggleSlider = styled.span`
     background: #fff;
     border-radius: 50%;
     transition: left 0.2s, width 0.2s, height 0.2s;
-    ${({
-  size
-}) => {
+    ${_ref4 => {
+  let {
+    size
+  } = _ref4;
   switch (size) {
     case "s":
       return css`width: 14px; height: 14px;`;
@@ -36040,10 +36131,11 @@ const ToggleSlider = styled.span`
       return css`width: 20px; height: 20px;`;
   }
 }}
-    left: ${({
-  checked,
-  size
-}) => {
+    left: ${_ref5 => {
+  let {
+    checked,
+    size
+  } = _ref5;
   if (!checked) return "3px";
   switch (size) {
     case "s":
@@ -36057,9 +36149,9 @@ const ToggleSlider = styled.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 {
@@ -38671,6 +38763,7 @@ const TableHeader = ({
   const showColumnFilter = column => {
     const {
       key,
+      doubleColumn,
       title,
       filterOptions,
       freeTextFilter,
@@ -38730,6 +38823,7 @@ const TableHeader = ({
         color: "#066768",
         isAsc: true,
         list: filterOptions,
+        doubleColumn: doubleColumn,
         menuName: title,
         selectedAttributes: filterSelections[key] || {},
         onCheck: event => handleFilterSelectionChange(key, event),
@@ -40113,7 +40207,7 @@ const TableBody = /*#__PURE__*/forwardRef(({
 
   // Handle shimmer effect changes
   useEffect(() => {
-    if (indexToShimmer >= 0 && indexToShimmer !== shimmerRowIndex) {
+    if (indexToShimmer >= 0) {
       setShimmerRowIndex(indexToShimmer);
       setShimmerStartTime(Date.now());
 
@@ -40123,8 +40217,11 @@ const TableBody = /*#__PURE__*/forwardRef(({
         setShimmerStartTime(null);
       }, 5000);
       return () => clearTimeout(timeout);
+    } else if (indexToShimmer === -1) {
+      setShimmerRowIndex(-1);
+      setShimmerStartTime(null);
     }
-  }, [indexToShimmer, shimmerRowIndex]);
+  }, [indexToShimmer]);
 
   // Expose methods to parent component via ref
   useImperativeHandle(ref, () => ({
@@ -40718,7 +40815,7 @@ const TableBody = /*#__PURE__*/forwardRef(({
       key: row.id || `row-${rowIndex}`
     }, /*#__PURE__*/React$1.createElement(TableRow, {
       "data-row-index": rowIndex,
-      className: indexToShimmer === rowIndex ? "shimmer-row" : "",
+      className: shimmerRowIndex === rowIndex ? "shimmer-row" : "",
       isFocused: focusedRowIndex === rowIndex,
       selectedColor: selectedColor,
       onMouseEnter: () => setHoveredRowIndex(rowIndex),
@@ -45450,7 +45547,8 @@ const NewSubitem = ({
   onBack,
   addNewPackage,
   updateExistingPackage,
-  componentText = "Scale"
+  componentText = "Scale",
+  itemAndPackage
 }) => {
   const [negotiatedBrands, setNegotiatedBrands] = useState("");
   const [negotiatedComponent, setNegotiatedComponent] = useState(componentText);
@@ -45465,7 +45563,9 @@ const NewSubitem = ({
   }, [packageObject]);
   useEffect(() => {
     if (packageObject && packageObject.brands === negotiatedBrands) return;
-    setIsPackageDuplicated(vendor.packages.some(pkg => pkg.brands === negotiatedBrands));
+    setIsPackageDuplicated(itemAndPackage.some(obj => {
+      obj.name === vendor && obj.packages.some(pkg => pkg.brands === negotiatedBrands);
+    }));
     setIsApplyEnabled(negotiatedBrands.trim().length > 2 && vendor.packages.some(pkg => pkg.brands === negotiatedBrands) === false);
   }, [negotiatedBrands]);
   return /*#__PURE__*/React$1.createElement(NewSubitemContainer, null, /*#__PURE__*/React$1.createElement(Header, null, /*#__PURE__*/React$1.createElement(BackButton, {