sag_components 2.0.0-beta134 → 2.0.0-beta136

package/dist/index.esm.js

@@ -23903,22 +23903,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("");
@@ -38206,6 +38205,18 @@ const TableBody = /*#__PURE__*/forwardRef(({
     }, formattedValue);
   }))));
 });
+TableBody.propTypes = {
+  columns: PropTypes.array.isRequired,
+  data: PropTypes.array.isRequired,
+  onRowClick: PropTypes.func,
+  onSendClick: PropTypes.func,
+  buttonColor: PropTypes.string,
+  onDeleteClick: PropTypes.func,
+  resetFocus: PropTypes.bool,
+  onFocusChange: PropTypes.func,
+  indexToShimmer: PropTypes.number
+};
+TableBody.displayName = 'TableBody';
 
 var nm$1 = "calendar_lottie";
 var ddd$1 = 0;
@@ -41376,15 +41387,15 @@ var Lottie = function Lottie(props) {
 // Table.jsx
 const Table = /*#__PURE__*/forwardRef((props, ref) => {
   const {
-    width = "100%",
-    height = "auto",
-    tableTitle = "All Events",
+    width = '100%',
+    height = 'auto',
+    tableTitle = 'All Events',
     data = [],
     counter = 0,
     hideRowsCounter = false,
     onButtonClick = () => {},
-    buttonColor = "#066768",
-    buttonHoverColor = "#388586",
+    buttonColor = '#066768',
+    buttonHoverColor = '#388586',
     // Updated props for new table structure
     columns = [],
     onRowClick = () => {},
@@ -41393,12 +41404,12 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
     onSelectAll,
     showSideButton = true,
     onSideButtonClick = () => {},
-    sideButtonColor = "#066768",
-    sideButtonHoverColor = "#388586",
+    sideButtonColor = '#066768',
+    sideButtonHoverColor = '#388586',
     children = null,
-    tableBodyHeight = "728px",
+    tableBodyHeight = '728px',
     isLoading = false,
-    isLoadingText = "Loading Events...",
+    isLoadingText = 'Loading Events...',
     onLastRowsReached = () => {},
     lastRowsThreshold = 3,
     onSendClick = () => {},
@@ -41412,10 +41423,9 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
     resetTableFocus = false,
     onTableFocusChange = () => {},
     clearFocusOnOutsideClick = true,
-    //NEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEW
+    // NEW: Props for edit mode focus management
     isEditMode = false,
     editRowIndex = -1
-    //NEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEW
   } = props;
   const scrollWrapperRef = useRef(null);
   const tableBodyRef = useRef(null);
@@ -41464,16 +41474,13 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
         }
       }
     };
-    scrollWrapper.addEventListener("scroll", handleScroll);
-    return () => scrollWrapper.removeEventListener("scroll", handleScroll);
+    scrollWrapper.addEventListener('scroll', handleScroll);
+    return () => scrollWrapper.removeEventListener('scroll', handleScroll);
   }, [onLastRowsReached, data.length, lastRowsThreshold, hasTriggered]);
 
   // Handle outside click to clear focus - UPDATED to respect edit mode
   useEffect(() => {
-    // if (!clearFocusOnOutsideClick) return;
-    //NEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEW
     if (!clearFocusOnOutsideClick || isEditMode) return; // Don't clear focus during edit mode
-    //NEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEW
 
     const handleOutsideClick = event => {
       if (tableContainerRef.current && !tableContainerRef.current.contains(event.target)) {
@@ -41483,18 +41490,16 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
         }
       }
     };
-    document.addEventListener("mousedown", handleOutsideClick);
+    document.addEventListener('mousedown', handleOutsideClick);
     return () => {
-      document.removeEventListener("mousedown", handleOutsideClick);
+      document.removeEventListener('mousedown', handleOutsideClick);
     };
-    //NEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEW
   }, [clearFocusOnOutsideClick, isEditMode]); // Added isEditMode to dependency array
-  //NEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEW
 
   return /*#__PURE__*/React$1.createElement(TableWrapper, {
     width: width,
     height: height
-  }, /*#__PURE__*/React$1.createElement(NoInfoFound, null, /*#__PURE__*/React$1.createElement(TableTop, null, /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Title$7, null, tableTitle), !hideRowsCounter && /*#__PURE__*/React$1.createElement(SubTitle, null, data.length === 0 ? "No Events" : `${counter} Events`)), showSideButton && /*#__PURE__*/React$1.createElement(Button$1, {
+  }, /*#__PURE__*/React$1.createElement(NoInfoFound, null, /*#__PURE__*/React$1.createElement(TableTop, null, /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Title$7, null, tableTitle), !hideRowsCounter && /*#__PURE__*/React$1.createElement(SubTitle, null, data.length === 0 ? 'No Events' : `${counter} Events`)), showSideButton && /*#__PURE__*/React$1.createElement(Button$1, {
     height: "45px",
     leftIcon: "Plus",
     text: "New Event",
@@ -41527,11 +41532,6 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
     buttonColor: buttonColor,
     resetFocus: resetTableFocus,
     onFocusChange: handleTableFocusChange
-    //NEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEW
-    ,
-    isEditMode: isEditMode,
-    editRowIndex: editRowIndex
-    //NEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEW
   })), data.length === 0 && /*#__PURE__*/React$1.createElement(NoEventsParent, null, /*#__PURE__*/React$1.createElement(NoEventsWrapper, null, showNoDataInSearch ? /*#__PURE__*/React$1.createElement(NoDataInSearchIcon, null) : /*#__PURE__*/React$1.createElement(NoEvents, null)), /*#__PURE__*/React$1.createElement(NoEventsMessage, null, showNoDataInSearch ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("strong", null, noDataInSearchTitle), /*#__PURE__*/React$1.createElement("br", null), noDataInSearchMessage) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("strong", null, "You haven't created any events yet"), /*#__PURE__*/React$1.createElement("br", null), "Let's get started and create your first one!")), !showNoDataInSearch && /*#__PURE__*/React$1.createElement(Button$1, {
     height: "45px",
     leftIcon: "Plus",
@@ -41553,7 +41553,7 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
 });
 
 // Add displayName for better debugging
-Table.displayName = "Table";
+Table.displayName = 'Table';
 
 const Card = styled.div`
   background: ${props => props.backgroundColor};
@@ -41670,7 +41670,8 @@ const VendorNameAndPackagesContainer$1 = styled.div`
   align-items: flex-start;
 `;
 const DotContainer = styled.div`
-  display: flex;
+  text-align: center;
+  margin-top: 10px;
   width: 40px;
   height: 100%;
 `;
@@ -41897,7 +41898,10 @@ const NewItemList = ({
   }, /*#__PURE__*/React$1.createElement(VendorList$1, null, filteredItems.map((item, idx) => /*#__PURE__*/React$1.createElement(VendorItem, {
     key: idx,
     onClick: e => {
-      if (onVendorClick) onVendorClick(item);
+      // Always call onVendorClick - it will handle the conversion from null to []
+      if (onVendorClick) {
+        onVendorClick(item);
+      }
     }
   }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer, null, /*#__PURE__*/React$1.createElement(VendorName$1, null, highlightMatch(item.name, searchLower)), item.packages && /*#__PURE__*/React$1.createElement(VendorPackages, null, `0/${item.packages.length} Packages Sent`)), /*#__PURE__*/React$1.createElement(VendorChevron, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null)))))));
 };
@@ -51019,6 +51023,10 @@ const ItemManagerPanel = _ref => {
   const [isEditingExisting, setIsEditingExisting] = useState(false);
   const [headerHeight, setHeaderHeight] = useState(0);
   const headerRef = useRef(null);
+  useEffect(() => {
+    console.log("Screen changed to:", screen);
+    console.log("Selected Vendor:", selectedVendor);
+  }, [screen, selectedVendor]);
   useEffect(() => {
     if (headerRef.current) {
       setHeaderHeight(headerRef.current.offsetHeight);
@@ -51028,7 +51036,11 @@ const ItemManagerPanel = _ref => {
     return itemAndPackage.some(item => item.packages !== null && Array.isArray(item.packages) && item.packages.length > 0);
   };
   const handleVendorClick = vendor => {
-    setSelectedVendor(vendor);
+    const modifiedVendor = {
+      ...vendor,
+      packages: vendor.packages || []
+    };
+    setSelectedVendor(modifiedVendor);
     setScreen("subitem");
   };
   const addNewPackage = (vendorName, packageName, component) => {
@@ -51111,16 +51123,25 @@ const ItemManagerPanel = _ref => {
       setItemAndPackage: setItemAndPackage,
       vendor: selectedVendor,
       itemAndPackage: itemAndPackage,
-      onBack: () => setScreen("initial"),
+      onBack: () => {
+        // Check if selected vendor originally had packages: null
+        const currentVendor = itemAndPackage.find(v => v.name === selectedVendor.name);
+        if (currentVendor && currentVendor.packages === null) {
+          // User visited vendor but didn't add packages - convert to empty array to show red dot
+          setItemAndPackage(prev => prev.map(item => item.name === selectedVendor.name ? {
+            ...item,
+            packages: []
+          } : item));
+        }
+        setScreen("initial");
+      },
       onTrashClick: () => onDeleteInner(selectedVendor),
       handleSubitemDetail: function () {
         let pkg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
         if (pkg) {
-          // Editing existing package
           setSelectedPackage(pkg);
           setIsEditingExisting(true);
         } else {
-          // Adding new package
           setSelectedPackage(null);
           setIsEditingExisting(false);
         }
@@ -51230,11 +51251,11 @@ const ItemManagerPanel = _ref => {
       const allHaveStatus = packagesWithStatus.length === item.packages.length;
       const noneHaveStatus = packagesWithStatus.length === 0;
       if (noneHaveStatus) {
-        return 'No Packages sent';
+        return `0/${item.packages.length} sent`;
       } else if (allHaveStatus) {
-        return `${item.packages.length} Package${item.packages.length !== 1 ? 's' : ''} Sent`;
+        return `${item.packages.length}/${item.packages.length} sent`;
       } else {
-        return `${item.packages.length} Package${item.packages.length !== 1 ? 's' : ''}`;
+        return `${packagesWithStatus.length}/${item.packages.length} sent`;
       }
     })())), /*#__PURE__*/React$1.createElement(VendorChevron$1, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), /*#__PURE__*/React$1.createElement(Trash$1, {
       className: "trash-icon",