sag_components 2.0.0-beta314 → 2.0.0-beta316

package/dist/index.esm.js

@@ -36215,19 +36215,15 @@ const ToggleInput = styled.input`
 const ToggleSlider = styled.span`
   display: block;
   position: relative;
-  background: ${_ref => {
-  let {
-    checked,
-    disabled
-  } = _ref;
-  return checked ? "#006d6a" : disabled ? "#B1B1B1" : "#D0D0D0";
-}};
+  background: ${({
+  checked,
+  disabled
+}) => checked ? "#006d6a" : disabled ? "#B1B1B1" : "#D0D0D0"};
   border-radius: 999px;
   transition: background 0.2s;
-  ${_ref2 => {
-  let {
-    size
-  } = _ref2;
+  ${({
+  size
+}) => {
   switch (size) {
     case "s":
       return css`width: 40px; height: 20px;`;
@@ -36243,18 +36239,14 @@ const ToggleSlider = styled.span`
     left: 3px;
     top: 50%;
     transform: translateY(-50%);
-    background: ${_ref3 => {
-  let {
-    disabled
-  } = _ref3;
-  return disabled ? "#D0D0D0" : "#fff";
-}};
+    background: ${({
+  disabled
+}) => disabled ? "#D0D0D0" : "#fff"};
     border-radius: 50%;
     transition: left 0.2s, width 0.2s, height 0.2s;
-    ${_ref4 => {
-  let {
-    size
-  } = _ref4;
+    ${({
+  size
+}) => {
   switch (size) {
     case "s":
       return css`width: 14px; height: 14px;`;
@@ -36264,11 +36256,10 @@ const ToggleSlider = styled.span`
       return css`width: 20px; height: 20px;`;
   }
 }}
-    left: ${_ref5 => {
-  let {
-    checked,
-    size
-  } = _ref5;
+    left: ${({
+  checked,
+  size
+}) => {
   if (!checked) return "3px";
   switch (size) {
     case "s":
@@ -36282,9 +36273,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 {
@@ -42649,6 +42640,16 @@ const DropdownButton$1 = styled.button`
     white-space: nowrap;
     text-align: left;
     flex: 1;
+
+    /* Map --cell-* variables (set by Dropdown.jsx) to --tooltip-* variables (expected by tooltipStyles) */
+    --tooltip-top: var(--cell-top);
+    --tooltip-left: var(--cell-left);
+    --tooltip-width: var(--cell-width);
+    --tooltip-offset: calc(var(--cell-offset) + 20px); /* Add 20px to move tooltip up */
+    --tooltip-height: var(--cell-height);
+
+    /* Import shared tooltip styles from TableBody */
+    ${tooltipStyles$1}
   }
 `;
 const DropdownIcon = styled.div`
@@ -42770,10 +42771,19 @@ const Dropdown = ({
   showSelectAll = true // New prop to show/hide "Select All" option
 }) => {
   const [isDropdownHovered, setIsDropdownHovered] = useState(false);
+  const displayTextRef = useRef(null);
 
   // Normalize selectedValue to always be an array for consistency
   const selectedValues = Array.isArray(selectedValue) ? selectedValue : selectedValue ? [selectedValue] : [];
 
+  // Generate display text based on selections
+  const getDisplayText = () => {
+    if (selectedValues.length === 0) {
+      return placeholder;
+    }
+    return `${selectedValues.map(val => options.find(opt => opt.value === val).label).join(', ')}`;
+  };
+
   // Reset dropdown hover state when dropdown closes
   useEffect(() => {
     if (!isOpen) {
@@ -42781,6 +42791,46 @@ const Dropdown = ({
     }
   }, [isOpen]);
 
+  // Apply tooltip when text overflows
+  useEffect(() => {
+    const element = displayTextRef.current;
+    if (element) {
+      const fullText = displayText || getDisplayText();
+
+      // Check if text overflows
+      if (element.scrollWidth > element.clientWidth && fullText && fullText.trim() !== "") {
+        try {
+          const rect = element.getBoundingClientRect();
+          if (rect.width > 0 && rect.height > 0) {
+            const tooltipInfo = calculateTooltipOffset(fullText, true);
+            if (tooltipInfo) {
+              const {
+                offset,
+                height
+              } = tooltipInfo;
+              element.style.setProperty("--cell-top", `${rect.top}px`);
+              element.style.setProperty("--cell-left", `${rect.left}px`);
+              element.style.setProperty("--cell-width", `${rect.width}px`);
+              element.style.setProperty("--cell-offset", `${offset}px`);
+              element.style.setProperty("--cell-height", `${height}px`);
+              element.setAttribute("data-tooltip", fullText);
+            }
+          }
+        } catch (e) {
+          console.warn("Error applying dropdown tooltip:", e);
+        }
+      } else {
+        // Remove tooltip if text doesn't overflow
+        element.removeAttribute("data-tooltip");
+        element.style.removeProperty("--cell-top");
+        element.style.removeProperty("--cell-left");
+        element.style.removeProperty("--cell-width");
+        element.style.removeProperty("--cell-offset");
+        element.style.removeProperty("--cell-height");
+      }
+    }
+  }, [displayText, selectedValues, options, placeholder]);
+
   // Check if an option is selected
   const isOptionSelected = optionValue => {
     return selectedValues.includes(optionValue);
@@ -42823,20 +42873,6 @@ const Dropdown = ({
       }, e);
     }
   };
-
-  // Generate display text based on selections
-  const getDisplayText = () => {
-    if (selectedValues.length === 0) {
-      return placeholder;
-    }
-
-    // if (selectedValues.length === 1) {
-    //     const selectedOption = options.find(opt => opt.value === selectedValues[0]);
-    //     return selectedOption ? selectedOption.label : displayText;
-    // }
-
-    return `${selectedValues.map(val => options.find(opt => opt.value === val).label).join(', ')}`;
-  };
   return /*#__PURE__*/React$1.createElement(DropdownContainer$1, {
     onMouseEnter: () => setIsDropdownHovered(true),
     onMouseLeave: () => setIsDropdownHovered(false)
@@ -42846,7 +42882,9 @@ const Dropdown = ({
     $isRowFocused: isRowFocused,
     $isRowHovered: isRowHovered,
     $selectedColor: selectedColor
-  }, /*#__PURE__*/React$1.createElement("span", null, displayText || getDisplayText()), /*#__PURE__*/React$1.createElement(DropdownIcon, {
+  }, /*#__PURE__*/React$1.createElement("span", {
+    ref: displayTextRef
+  }, displayText || getDisplayText()), /*#__PURE__*/React$1.createElement(DropdownIcon, {
     $isOpen: isOpen,
     $isRowFocused: isRowFocused,
     $isRowHovered: isRowHovered,
@@ -47992,23 +48030,19 @@ const NewItemList = ({
   // - When searching with external/server-side search: show searchResults (can change length)
   // - When searching with internal search: filter itemAndPackage locally
   const filteredItems = useMemo(() => {
-    // Safety check
     if (!itemAndPackage || !Array.isArray(itemAndPackage)) {
       return [];
     }
-
-    // No search value = show static itemAndPackage list
     if (!currentSearchValue) {
       return itemAndPackage;
     }
-
-    // Has search value - determine which source to use
-    if (isExternalSearch && serverSearchResults !== null) {
-      // Server-side search: use separate searchResults array (can have different length)
-      return serverSearchResults;
+    if (isExternalSearch) {
+      if (serverSearchResults !== null) {
+        return serverSearchResults;
+      } else {
+        return [];
+      }
     }
-
-    // Internal/client-side filtering of itemAndPackage
     const searchLower = currentSearchValue.toLowerCase();
     const results = [];
     const startsWithResults = [];
@@ -48020,7 +48054,8 @@ const NewItemList = ({
         results.push(itemAndPackage[i]);
       }
     }
-    return [...startsWithResults, ...results];
+    const finalResults = [...startsWithResults, ...results];
+    return finalResults;
   }, [currentSearchValue, itemAndPackage, serverSearchResults, isExternalSearch]);
 
   // ONLY ONE scroll detection useEffect
@@ -48094,7 +48129,7 @@ const NewItemList = ({
     type: "search",
     placeholder: "Search",
     onChange: handleSearchChange
-  }), /*#__PURE__*/React$1.createElement(VendorSearchResult, null, isSearchLoading ? "Searching..." : currentSearchValue !== "" ? `${filteredItems.length === 0 ? "No" : filteredItems.length} Vendors Found` : " ")), /*#__PURE__*/React$1.createElement(VendorListWrapper$1, {
+  }), /*#__PURE__*/React$1.createElement(VendorSearchResult, null, currentSearchValue === "" ? " " : isSearchLoading ? "Searching..." : serverSearchResults === null ? "..." : `${filteredItems.length === 0 ? "No" : filteredItems.length} Vendors Found`)), /*#__PURE__*/React$1.createElement(VendorListWrapper$1, {
     ref: scrollWrapperRef,
     headerHeight: headerHeight
   }, FixedSizeList ? /*#__PURE__*/React$1.createElement(FixedSizeList, {