sag_components 2.0.0-beta126 → 2.0.0-beta127

package/dist/index.js

@@ -23907,21 +23907,22 @@ const DeleteIcon = styled__default["default"].div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = ({
-  label,
-  hoverColor,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownSingle = _ref => {
+  let {
+    label,
+    hoverColor,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    xIconShow,
+    labelColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState("");
@@ -34428,7 +34429,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__default["default"].createElement(Tooltip$2, {
     direction: "top",
     topFactor: -0.85,
@@ -37898,17 +37903,39 @@ const DisabledTrashIcon = ({
 };
 
 // TableBody.jsx
-const TableBody = ({
+const TableBody = /*#__PURE__*/React$1.forwardRef(({
   columns,
   data,
   onRowClick,
   onSendClick,
   buttonColor,
-  onDeleteClick
-}) => {
+  onDeleteClick,
+  resetFocus = false,
+  onFocusChange
+}, ref) => {
   const [hoveredRowIndex, setHoveredRowIndex] = React$1.useState(null);
   const [focusedRowIndex, setFocusedRowIndex] = React$1.useState(null);
 
+  // Expose methods to parent components via ref
+  React$1.useImperativeHandle(ref, () => ({
+    clearFocus: () => setFocusedRowIndex(null),
+    getFocusedRowIndex: () => focusedRowIndex
+  }));
+
+  // Handle resetFocus prop
+  React$1.useEffect(() => {
+    if (resetFocus) {
+      setFocusedRowIndex(null);
+    }
+  }, [resetFocus]);
+
+  // Notify parent of focus changes
+  React$1.useEffect(() => {
+    if (onFocusChange) {
+      onFocusChange(focusedRowIndex);
+    }
+  }, [focusedRowIndex, onFocusChange]);
+
   // Handle row click for focus state
   const handleRowClick = (row, rowIndex) => {
     setFocusedRowIndex(rowIndex);
@@ -38148,7 +38175,10 @@ const TableBody = ({
       $maxWidth: column.maxWidth
     }, formattedValue);
   }))));
-};
+});
+
+// Add displayName for better debugging
+TableBody.displayName = 'TableBody';
 
 var nm$1 = "calendar_lottie";
 var ddd$1 = 0;
@@ -41317,7 +41347,7 @@ var Lottie = function Lottie(props) {
 };
 
 // Table.jsx
-const Table = props => {
+const Table = /*#__PURE__*/React$1.forwardRef((props, ref) => {
   const {
     width = '100%',
     height = 'auto',
@@ -41348,10 +41378,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 = React$1.useRef(null);
+  const tableBodyRef = React$1.useRef(null);
+  const tableContainerRef = React$1.useRef(null);
   const [hasTriggered, setHasTriggered] = React$1.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
+  React$1.useImperativeHandle(ref, () => ({
+    clearTableFocus,
+    getTableBodyRef: () => tableBodyRef.current
+  }));
   React$1.useEffect(() => {
     const scrollWrapper = scrollWrapperRef.current;
     if (!scrollWrapper || !onLastRowsReached) return;
@@ -41380,6 +41434,23 @@ const Table = props => {
     scrollWrapper.addEventListener('scroll', handleScroll);
     return () => scrollWrapper.removeEventListener('scroll', handleScroll);
   }, [onLastRowsReached, data.length, lastRowsThreshold, hasTriggered]);
+
+  // Handle outside click to clear focus
+  React$1.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__default["default"].createElement(TableWrapper, {
     width: width,
     height: height
@@ -41394,7 +41465,8 @@ const Table = props => {
     hoverBackgroundColor: sideButtonHoverColor,
     onClick: onSideButtonClick
   })), children, /*#__PURE__*/React__default["default"].createElement(TableContainer, {
-    showHorizontalScroll: showHorizontalScroll
+    showHorizontalScroll: showHorizontalScroll,
+    ref: tableContainerRef
   }, /*#__PURE__*/React__default["default"].createElement(TableBodyScrollWrapper, {
     tableBodyHeight: tableBodyHeight,
     showHorizontalScroll: showHorizontalScroll,
@@ -41405,12 +41477,15 @@ const Table = props => {
     onFilter: onFilter,
     onSelectAll: onSelectAll
   }), columns.length > 0 && data.length > 0 && /*#__PURE__*/React__default["default"].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__default["default"].createElement(NoEventsParent, null, /*#__PURE__*/React__default["default"].createElement(NoEventsWrapper, null, showNoDataInSearch ? /*#__PURE__*/React__default["default"].createElement(NoDataInSearchIcon, null) : /*#__PURE__*/React__default["default"].createElement(NoEvents, null)), /*#__PURE__*/React__default["default"].createElement(NoEventsMessage, null, showNoDataInSearch ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("strong", null, noDataInSearchTitle), /*#__PURE__*/React__default["default"].createElement("br", null), noDataInSearchMessage) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("strong", null, "You haven't created any events yet"), /*#__PURE__*/React__default["default"].createElement("br", null), "Let's get started and create your first one!")), !showNoDataInSearch && /*#__PURE__*/React__default["default"].createElement(Button$1, {
     height: "45px",
     leftIcon: "Plus",
@@ -41429,7 +41504,10 @@ const Table = props => {
     animationData: LoadingAnimation,
     loop: true
   }), /*#__PURE__*/React__default["default"].createElement(LoadingText, null, isLoadingText)))));
-};
+});
+
+// Add displayName for better debugging
+Table.displayName = 'Table';
 
 const Card = styled__default["default"].div`
   background: ${props => props.backgroundColor};