sag_components 2.0.0-beta124 → 2.0.0-beta126

package/dist/index.esm.js

@@ -23897,22 +23897,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("");
@@ -37599,11 +37598,22 @@ const TableRow = styled.tr`
     border-bottom: 1px solid #F2F2F2;
     transition: background-color 0.2s;
     font-family: 'Poppins', sans-serif;
+    cursor: pointer;
        
     &:hover {
         background-color: #E6F0F0;
     }
     
+    /* Focus state - persistent until another row is clicked */
+    ${props => props.$isFocused && css`
+        background-color: #D1E7E7;
+        border-left: 3px solid #066768;
+        
+        &:hover {
+            background-color: #C1D7D7;
+        }
+    `}
+    
     &:last-child {
         border-bottom: none;
     }
@@ -37887,6 +37897,15 @@ const TableBody = ({
   onDeleteClick
 }) => {
   const [hoveredRowIndex, setHoveredRowIndex] = useState(null);
+  const [focusedRowIndex, setFocusedRowIndex] = useState(null);
+
+  // Handle row click for focus state
+  const handleRowClick = (row, rowIndex) => {
+    setFocusedRowIndex(rowIndex);
+    if (onRowClick) {
+      onRowClick(row);
+    }
+  };
 
   // Function to calculate tooltip height based on text length
   const calculateTooltipOffset = (text, isRegularCell = false) => {
@@ -37986,7 +38005,7 @@ const TableBody = ({
             hoverBackgroundColor: "#E6F0F0",
             hoverBorderColor: "#D9D9D9",
             disabledTextColor: "#B1B1B1",
-            disabledBackgroundColor: hoveredRowIndex === rowIndex ? "#E6F0F0" : "#FFF",
+            disabledBackgroundColor: focusedRowIndex === rowIndex ? "#D1E7E7" : hoveredRowIndex === rowIndex ? "#E6F0F0" : "#FFF",
             disabledBorderColor: "#D9D9D9",
             width: "100px",
             height: "32px",
@@ -37999,7 +38018,7 @@ const TableBody = ({
             leftIcon: "Fly",
             text: "Send",
             borderRadius: "8px",
-            backgroundColor: hoveredRowIndex === rowIndex ? "#E6F0F0" : "#FFF",
+            backgroundColor: focusedRowIndex === rowIndex ? "#D1E7E7" : hoveredRowIndex === rowIndex ? "#E6F0F0" : "#FFF",
             textColor: buttonColor,
             borderColor: buttonColor,
             hoverTextColor: buttonColor,
@@ -38089,8 +38108,10 @@ const TableBody = ({
   return /*#__PURE__*/React$1.createElement(StyledTableBody, null, data.map((row, rowIndex) => /*#__PURE__*/React$1.createElement(TableRow, {
     key: rowIndex,
     "data-row-index": rowIndex,
+    $isFocused: focusedRowIndex === rowIndex,
     onMouseEnter: () => setHoveredRowIndex(rowIndex),
-    onMouseLeave: () => setHoveredRowIndex(null)
+    onMouseLeave: () => setHoveredRowIndex(null),
+    onClick: () => handleRowClick(row, rowIndex)
   }, columns.map(column => {
     const value = row[column.key];
     const formattedValue = formatValue(value, column, row, rowIndex);
@@ -38114,8 +38135,7 @@ const TableBody = ({
       $fieldType: column.fieldType?.toLowerCase(),
       $color: column.color,
       $minWidth: column.minWidth,
-      $maxWidth: column.maxWidth,
-      onClick: onRowClick ? () => onRowClick(row) : undefined
+      $maxWidth: column.maxWidth
     }, formattedValue);
   }))));
 };
@@ -41688,6 +41708,7 @@ const VendorPackages = styled.div`
   color: #8b8989;
   font-size: 14px;
   font-weight: 400;
+  text-align: left;
 `;
 const VendorChevron = styled.div`
   font-size: 22px;
@@ -42168,7 +42189,11 @@ const NewSubitem = ({
     size: "small",
     text: "Cancel",
     type: "secondary",
-    borderRadius: "8px"
+    borderRadius: "8px",
+    borderColor: "#D3D3D3",
+    hoverTextColor: "#212121",
+    hoverBackgroundColor: "#E6F0F0",
+    hoverBorderColor: "#D3D3D3"
   }), /*#__PURE__*/React$1.createElement(Button$1, {
     leftIcon: "none",
     onClick: () => {
@@ -42314,7 +42339,12 @@ const ConfirmationDialog = ({
     rightIcon: "none",
     size: "",
     text: "Cancel",
-    type: "secondary"
+    type: "secondary",
+    borderRadius: "8px",
+    borderColor: "#D3D3D3",
+    hoverTextColor: "#212121",
+    hoverBackgroundColor: "#E6F0F0",
+    hoverBorderColor: "#D3D3D3"
   }), /*#__PURE__*/React$1.createElement(Button$1, {
     leftIcon: "none",
     onClick: onConfirm,
@@ -42322,9 +42352,11 @@ const ConfirmationDialog = ({
     size: "",
     text: "Confirm & Send",
     type: "primary",
+    borderRadius: "8px",
     borderColor: linkColor,
     backgroundColor: linkColor,
-    hoverTextColor: "#212121"
+    hoverBackgroundColor: "#388586",
+    hoverBorderColor: "#388586"
   }))), /*#__PURE__*/React$1.createElement(Dialog, null, vendors.map((vendor, idx) => /*#__PURE__*/React$1.createElement(VendorSection, {
     key: vendor.name
   }, /*#__PURE__*/React$1.createElement(VendorHeader, null, /*#__PURE__*/React$1.createElement(VendorName, null, vendor.name), /*#__PURE__*/React$1.createElement(NewBadge, null, vendor.newPackages.length, " New")), /*#__PURE__*/React$1.createElement(PackageList, null, vendor.newPackages.map((pkg, i) => /*#__PURE__*/React$1.createElement(Item, {
@@ -51035,7 +51067,10 @@ const ItemManagerPanel = _ref => {
       type: "secondary",
       borderRadius: "8px",
       borderColor: linkColor,
-      textColor: linkColor
+      textColor: linkColor,
+      hoverTextColor: "#ffffff",
+      hoverBackgroundColor: linkColor,
+      hoverBorderColor: linkColor
     })), /*#__PURE__*/React$1.createElement(Subtitle$1, {
       color: actuallyAllFormsSent ? "#90CE9C" : "#8b8989"
     }, actuallyAllFormsSent ? '✔ All Forms Sent' : itemAndPackage.filter(item => item.packages !== null).length > 0 ? `${itemAndPackage.filter(item => item.packages !== null).length.toString()} New Forms` : ''))), /*#__PURE__*/React$1.createElement(AddButtonContainer$1, null, /*#__PURE__*/React$1.createElement(LinkButton, {
@@ -51055,9 +51090,18 @@ const ItemManagerPanel = _ref => {
       onClick: e => {
         handleVendorClick(item);
       }
-    }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer$1, null, /*#__PURE__*/React$1.createElement(VendorName$2, null, item.name), item.packages.length === 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, "No Packages"), item.packages.length > 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, item.packages.length, " Package", item.packages.length !== 1 ? 's' : '',
-    // Check if all packages have a status
-    item.packages.every(pkg => pkg.hasOwnProperty('status') && pkg.status != null && pkg.status !== undefined && pkg.status !== '') ? ' Sent' : '')), /*#__PURE__*/React$1.createElement(VendorChevron$1, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), /*#__PURE__*/React$1.createElement(Trash$1, {
+    }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer$1, null, /*#__PURE__*/React$1.createElement(VendorName$2, null, item.name), item.packages.length === 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, "No Packages"), item.packages.length > 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, (() => {
+      const packagesWithStatus = item.packages.filter(pkg => pkg.hasOwnProperty('status') && pkg.status != null && pkg.status !== undefined && pkg.status !== '');
+      const allHaveStatus = packagesWithStatus.length === item.packages.length;
+      const noneHaveStatus = packagesWithStatus.length === 0;
+      if (noneHaveStatus) {
+        return 'No Packages sent';
+      } else if (allHaveStatus) {
+        return `${item.packages.length} Package${item.packages.length !== 1 ? 's' : ''} Sent`;
+      } else {
+        return `${item.packages.length} Package${item.packages.length !== 1 ? 's' : ''}`;
+      }
+    })())), /*#__PURE__*/React$1.createElement(VendorChevron$1, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), /*#__PURE__*/React$1.createElement(Trash$1, {
       className: "trash-icon",
       onClick: () => {
         onDeleteVendor(item);