sag_components 2.0.0-beta125 → 2.0.0-beta127

package/dist/index.d.ts

@@ -1424,7 +1424,7 @@ declare function Execute({ width, height, fill }: {
     fill?: string;
 }): react_jsx_runtime.JSX.Element;
 
-declare function Table(props: any): react_jsx_runtime.JSX.Element;
+declare const Table: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 
 declare function FilterPop(props: any): react_jsx_runtime.JSX.Element;
 

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React$1, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import React$1, { useState, useRef, useEffect, useMemo, useCallback, forwardRef, useImperativeHandle } from 'react';
 import styled, { keyframes, css } from 'styled-components';
 import { ResponsiveContainer, PieChart as PieChart$1, Pie, Cell, Tooltip as Tooltip$3, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Bar, LabelList, ReferenceLine, LineChart, Line, AreaChart as AreaChart$1, Legend, Area, ScatterChart, ZAxis, Scatter, Brush, ComposedChart } from 'recharts';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
@@ -34419,7 +34419,11 @@ const ModalWithOverlay = props => {
     leftIcon: cancelButtonLeftIcon,
     rightIcon: cancelButtonRightIcon,
     text: cancelButtonText,
-    onClick: onCancel
+    onClick: onCancel,
+    borderColor: "#D3D3D3",
+    hoverTextColor: "#212121",
+    hoverBackgroundColor: "#E6F0F0",
+    hoverBorderColor: "#D3D3D3"
   }), showOkButton && (disableOkButton && tooltipContent !== '' ? /*#__PURE__*/React$1.createElement(Tooltip$2, {
     direction: "top",
     topFactor: -0.85,
@@ -37599,11 +37603,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;
     }
@@ -37878,15 +37893,46 @@ const DisabledTrashIcon = ({
 };
 
 // TableBody.jsx
-const TableBody = ({
+const TableBody = /*#__PURE__*/forwardRef(({
   columns,
   data,
   onRowClick,
   onSendClick,
   buttonColor,
-  onDeleteClick
-}) => {
+  onDeleteClick,
+  resetFocus = false,
+  onFocusChange
+}, ref) => {
   const [hoveredRowIndex, setHoveredRowIndex] = useState(null);
+  const [focusedRowIndex, setFocusedRowIndex] = useState(null);
+
+  // Expose methods to parent components via ref
+  useImperativeHandle(ref, () => ({
+    clearFocus: () => setFocusedRowIndex(null),
+    getFocusedRowIndex: () => focusedRowIndex
+  }));
+
+  // Handle resetFocus prop
+  useEffect(() => {
+    if (resetFocus) {
+      setFocusedRowIndex(null);
+    }
+  }, [resetFocus]);
+
+  // Notify parent of focus changes
+  useEffect(() => {
+    if (onFocusChange) {
+      onFocusChange(focusedRowIndex);
+    }
+  }, [focusedRowIndex, onFocusChange]);
+
+  // 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 +38032,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 +38045,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 +38135,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,11 +38162,13 @@ const TableBody = ({
       $fieldType: column.fieldType?.toLowerCase(),
       $color: column.color,
       $minWidth: column.minWidth,
-      $maxWidth: column.maxWidth,
-      onClick: onRowClick ? () => onRowClick(row) : undefined
+      $maxWidth: column.maxWidth
     }, formattedValue);
   }))));
-};
+});
+
+// Add displayName for better debugging
+TableBody.displayName = 'TableBody';
 
 var nm$1 = "calendar_lottie";
 var ddd$1 = 0;
@@ -41287,7 +41337,7 @@ var Lottie = function Lottie(props) {
 };
 
 // Table.jsx
-const Table = props => {
+const Table = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     width = '100%',
     height = 'auto',
@@ -41318,10 +41368,34 @@ const Table = props => {
     onDeleteClick = () => {},
     showNoDataInSearch = false,
     noDataInSearchTitle = "No Results Found",
-    noDataInSearchMessage = "Try to refine your query and search again"
+    noDataInSearchMessage = "Try to refine your query and search again",
+    // New props for focus management
+    resetTableFocus = false,
+    onTableFocusChange = () => {},
+    clearFocusOnOutsideClick = true
   } = props;
   const scrollWrapperRef = useRef(null);
+  const tableBodyRef = useRef(null);
+  const tableContainerRef = useRef(null);
   const [hasTriggered, setHasTriggered] = useState(false);
+
+  // Expose method to clear table focus to parent components
+  const clearTableFocus = () => {
+    if (tableBodyRef.current) {
+      tableBodyRef.current.clearFocus();
+    }
+  };
+
+  // Handle focus change from TableBody
+  const handleTableFocusChange = focusedRowIndex => {
+    onTableFocusChange(focusedRowIndex);
+  };
+
+  // Expose methods to parent components via ref
+  useImperativeHandle(ref, () => ({
+    clearTableFocus,
+    getTableBodyRef: () => tableBodyRef.current
+  }));
   useEffect(() => {
     const scrollWrapper = scrollWrapperRef.current;
     if (!scrollWrapper || !onLastRowsReached) return;
@@ -41350,6 +41424,23 @@ const Table = props => {
     scrollWrapper.addEventListener('scroll', handleScroll);
     return () => scrollWrapper.removeEventListener('scroll', handleScroll);
   }, [onLastRowsReached, data.length, lastRowsThreshold, hasTriggered]);
+
+  // Handle outside click to clear focus
+  useEffect(() => {
+    if (!clearFocusOnOutsideClick) return;
+    const handleOutsideClick = event => {
+      if (tableContainerRef.current && !tableContainerRef.current.contains(event.target)) {
+        // Click is outside the table container
+        if (tableBodyRef.current) {
+          tableBodyRef.current.clearFocus();
+        }
+      }
+    };
+    document.addEventListener('mousedown', handleOutsideClick);
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, [clearFocusOnOutsideClick]);
   return /*#__PURE__*/React$1.createElement(TableWrapper, {
     width: width,
     height: height
@@ -41364,7 +41455,8 @@ const Table = props => {
     hoverBackgroundColor: sideButtonHoverColor,
     onClick: onSideButtonClick
   })), children, /*#__PURE__*/React$1.createElement(TableContainer, {
-    showHorizontalScroll: showHorizontalScroll
+    showHorizontalScroll: showHorizontalScroll,
+    ref: tableContainerRef
   }, /*#__PURE__*/React$1.createElement(TableBodyScrollWrapper, {
     tableBodyHeight: tableBodyHeight,
     showHorizontalScroll: showHorizontalScroll,
@@ -41375,12 +41467,15 @@ const Table = props => {
     onFilter: onFilter,
     onSelectAll: onSelectAll
   }), columns.length > 0 && data.length > 0 && /*#__PURE__*/React$1.createElement(TableBody, {
+    ref: tableBodyRef,
     columns: columns,
     data: data,
     onRowClick: onRowClick,
     onSendClick: onSendClick,
     onDeleteClick: onDeleteClick,
-    buttonColor: buttonColor
+    buttonColor: buttonColor,
+    resetFocus: resetTableFocus,
+    onFocusChange: handleTableFocusChange
   })), 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",
@@ -41399,7 +41494,10 @@ const Table = props => {
     animationData: LoadingAnimation,
     loop: true
   }), /*#__PURE__*/React$1.createElement(LoadingText, null, isLoadingText)))));
-};
+});
+
+// Add displayName for better debugging
+Table.displayName = 'Table';
 
 const Card = styled.div`
   background: ${props => props.backgroundColor};
@@ -42169,7 +42267,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: () => {
@@ -42315,7 +42417,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,
@@ -42323,9 +42430,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, {
@@ -51036,7 +51145,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, {