sag_components 2.0.0-beta143 → 2.0.0-beta144

package/dist/index.esm.js

@@ -10317,24 +10317,23 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = _ref => {
-  let {
-    availableQuarters,
-    // ["Q1-2024"]
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue,
-    startYear
-  } = _ref;
+const QuarterPicker = ({
+  availableQuarters,
+  // ["Q1-2024"]
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue,
+  startYear
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -10776,23 +10775,22 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = _ref => {
-  let {
-    availableMonths,
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue,
-    startYear
-  } = _ref;
+const MonthPicker = ({
+  availableMonths,
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue,
+  startYear
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -23903,22 +23901,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("");
@@ -24315,24 +24312,23 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    required,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    labelColor,
-    xIconShow,
-    checkBoxColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownMultiSelection = ({
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  required,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  labelColor,
+  xIconShow,
+  checkBoxColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -35564,9 +35560,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 {
@@ -38307,21 +38303,6 @@ const DisabledTrashIconWrapper = styled.div`
     color: #d9d9d9;
   }
 `;
-const StatusCell = styled.div`
-    font-size: 12px;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    color: ${props => props.color || "#000"};
-`;
-const StatusCellCircle = styled.div`
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    border: 1px solid white;
-    background-color: ${props => props.backgroundColor};
-`;
 
 // CommentModal.styles.js
 const ModalOverlay$1 = styled.div`
@@ -38692,22 +38673,10 @@ const TableBody = ({
   buttonColor,
   onDeleteClick,
   selectedColor,
-  resetFocus = false,
+  resetFocusIndex,
+  changeFocusIndex,
   onFocusChange,
   indexToShimmer = 0,
-  statuses = [{
-    status: 'Pending',
-    palette: ['#F5C9A7', '#8B4513']
-  }, {
-    status: 'Received',
-    palette: ['#B9D5D5', '#2F4F4F']
-  }, {
-    status: 'Approved',
-    palette: ['#BEDDC3', '#2D5016']
-  }, {
-    status: 'Cancelled',
-    palette: ['#EBA6AF', '#8B1538']
-  }],
   onCommentSave = () => {},
   ref = null
 }) => {
@@ -38716,24 +38685,16 @@ const TableBody = ({
   const [isCommentModalOpen, setIsCommentModalOpen] = useState(false);
   const [currentCommentRow, setCurrentCommentRow] = useState(null); // Track which row is being edited
 
-  // Expose methods to parent components via ref (if ref is provided)
-  // useImperativeHandle(ref, () => ({
-  //     clearFocus: () => setFocusedRowIndex(null),
-  //     getFocusedRowIndex: () => focusedRowIndex
-  // }), [focusedRowIndex]);
-
   useEffect(() => {
-    if (resetFocus) {
+    if (resetFocusIndex) {
       setFocusedRowIndex(null);
     }
-  }, [resetFocus]);
-
-  // Notify parent of focus changes
-  // useEffect(() => {
-  //     if (onFocusChange) {
-  //         onFocusChange(focusedRowIndex);
-  //     }
-  // }, [focusedRowIndex, onFocusChange]);
+  }, [resetFocusIndex]);
+  useEffect(() => {
+    if (changeFocusIndex) {
+      setFocusedRowIndex(changeFocusIndex);
+    }
+  }, [changeFocusIndex]);
 
   // Handle row click for focus state
   const handleRowClick = (row, rowIndex) => {
@@ -38893,14 +38854,6 @@ const TableBody = ({
           }), /*#__PURE__*/React$1.createElement("span", null, "All Sent"));
         }
         return value;
-      case 'status':
-        const statusObj = statuses.find(status => status.status === value) || {};
-        const [palette0, palette1] = statusObj.palette;
-        return /*#__PURE__*/React$1.createElement(StatusCell, {
-          color: palette1
-        }, /*#__PURE__*/React$1.createElement(StatusCellCircle, {
-          backgroundColor: palette0
-        }), /*#__PURE__*/React$1.createElement("span", null, value));
       case 'comments':
         const commentText = value || '';
         const hasComments = commentText.trim().length > 0;
@@ -42264,8 +42217,8 @@ const Table = props => {
     noDataInSearchTitle = "No Results Found",
     noDataInSearchMessage = "Try to refine your query and search again",
     indexToShimmer = -1,
-    // New props for focus management
-    resetTableFocus = false,
+    resetFocusIndex,
+    changeFocusIndex,
     onTableFocusChange = () => {},
     clearFocusOnOutsideClick = true,
     // NEW: Props for edit mode focus management
@@ -42385,7 +42338,8 @@ const Table = props => {
     onDeleteClick: onDeleteClick,
     onCommentSave: handleCommentSave,
     buttonColor: buttonColor,
-    resetFocus: resetTableFocus,
+    resetFocusIndex: resetFocusIndex,
+    changeFocusIndex: changeFocusIndex,
     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",