sag_components 2.0.0-beta252 → 2.0.0-beta254

package/dist/index.esm.js

@@ -10581,24 +10581,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('');
@@ -11040,23 +11039,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('');
@@ -24167,22 +24165,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("");
@@ -24639,26 +24636,25 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    required,
-    disabled,
-    width,
-    height,
-    error,
-    errorMessage,
-    labelColor,
-    xIconShow,
-    checkBoxColor,
-    showLabelOnTop,
-    dropdownHeight
-  } = _ref;
+const QuickFilterDropdownMultiSelection = ({
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  required,
+  disabled,
+  width,
+  height,
+  error,
+  errorMessage,
+  labelColor,
+  xIconShow,
+  checkBoxColor,
+  showLabelOnTop,
+  dropdownHeight
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -36168,9 +36164,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 {
@@ -37744,23 +37740,19 @@ const FilterPop = props => {
     isAsc = true,
     selectedAttributes: propSelectedAttributes = {},
     showSearch = true,
-    searchPlaceholder = "Search..."
+    searchPlaceholder = "Search...",
+    itemHeight = 32,
+    overscan = 5
   } = props;
-
-  // State for search term
   const [searchTerm, setSearchTerm] = useState("");
-
-  // CRITICAL FIX: Use internal state for selected attributes
   const [selectedAttributes, setSelectedAttributes] = useState({});
+  const [scrollTop, setScrollTop] = useState(0);
   const isInitialMount = useRef(true);
-
-  // Add hardcoded "Select All" as first item
+  const scrollContainerRef = useRef(null);
   const fullList = useMemo(() => [{
     value: "All",
     label: "Select All"
   }, ...list], [list]);
-
-  // Create initial state - all items selected by default
   const createInitialState = () => {
     const initialState = {};
     fullList.forEach(item => {
@@ -37768,11 +37760,8 @@ const FilterPop = props => {
     });
     return initialState;
   };
-
-  // CRITICAL: Initialize and sync with props only when necessary
   useEffect(() => {
     if (isInitialMount.current) {
-      // First mount: use props or create initial state
       if (Object.keys(propSelectedAttributes).length > 0) {
         setSelectedAttributes(propSelectedAttributes);
       } else {
@@ -37780,8 +37769,6 @@ const FilterPop = props => {
       }
       isInitialMount.current = false;
     } else {
-      // After mount: only update if props explicitly changed and are non-empty
-      // This prevents reset when parent re-renders
       if (Object.keys(propSelectedAttributes).length > 0) {
         const propsString = JSON.stringify(propSelectedAttributes);
         const currentString = JSON.stringify(selectedAttributes);
@@ -37790,9 +37777,7 @@ const FilterPop = props => {
         }
       }
     }
-  }, [propSelectedAttributes]); // Only depend on props
-
-  // Update selected attributes when list changes to include new items
+  }, [propSelectedAttributes]);
   useEffect(() => {
     if (!isInitialMount.current && list.length > 0) {
       setSelectedAttributes(prev => {
@@ -37800,38 +37785,28 @@ const FilterPop = props => {
           ...prev
         };
         let hasChanges = false;
-
-        // Add any new items from the list that aren't in current selection
         fullList.forEach(item => {
           if (item.value !== "All" && !(item.value in updated)) {
-            updated[item.value] = true; // New items default to selected
+            updated[item.value] = true;
             hasChanges = true;
           }
         });
-
-        // Remove items that no longer exist in the list
         Object.keys(updated).forEach(key => {
           if (key !== "All" && !fullList.find(item => item.value === key)) {
             delete updated[key];
             hasChanges = true;
           }
         });
-
-        // Update "Select All" state
         if (hasChanges) {
           updated.All = areAllNonAllItemsSelected(updated);
         }
         return hasChanges ? updated : prev;
       });
     }
-  }, [list]); // Only when list changes
-
-  // Helper function to get non-"All" items
+  }, [list]);
   const getNonAllItems = () => {
     return fullList.filter(item => item.value !== "All");
   };
-
-  // Filter items based on search term
   const filteredList = useMemo(() => {
     if (!searchTerm.trim()) {
       return fullList;
@@ -37843,22 +37818,34 @@ const FilterPop = props => {
     });
     return [fullList.find(item => item.value === "All"), ...filteredNonAllItems];
   }, [fullList, searchTerm]);
-
-  // Sort the filtered list based on the `isAsc` prop
   const sortedList = useMemo(() => {
     return [...filteredList.filter(item => item.value === "All"), ...filteredList.filter(item => item.value !== "All").sort((a, b) => {
       return isAsc ? a.label.localeCompare(b.label) : b.label.localeCompare(a.label);
     })];
   }, [filteredList, isAsc]);
-
-  // Helper functions for "Select All" logic
+  const {
+    visibleItems,
+    totalHeight,
+    offsetY
+  } = useMemo(() => {
+    const containerHeight = parseInt(maxHeight) || 400;
+    const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+    const endIndex = Math.min(sortedList.length, Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan);
+    const visible = sortedList.slice(startIndex, endIndex).map((item, idx) => ({
+      ...item,
+      index: startIndex + idx
+    }));
+    return {
+      visibleItems: visible,
+      totalHeight: sortedList.length * itemHeight,
+      offsetY: startIndex * itemHeight
+    };
+  }, [sortedList, scrollTop, itemHeight, overscan, maxHeight]);
   const areAllNonAllItemsSelected = function () {
     let attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : selectedAttributes;
     const nonAllItems = getNonAllItems();
     return nonAllItems.every(item => attributes[item.value]);
   };
-
-  // Helper functions for visible filtered items
   const getVisibleNonAllItems = () => {
     return sortedList.filter(item => item.value !== "All");
   };
@@ -37873,8 +37860,6 @@ const FilterPop = props => {
     const visibleItems = getVisibleNonAllItems();
     return visibleItems.some(item => attributes[item.value]);
   };
-
-  // Create the efficient data structure
   const createFilterData = attributes => {
     const nonAllItems = getNonAllItems();
     const selectedItems = nonAllItems.filter(item => attributes[item.value]);
@@ -37953,8 +37938,6 @@ const FilterPop = props => {
       allItems: resetState
     });
   };
-
-  // Function to determine checkbox state for "Select All"
   const getSelectAllCheckboxProps = () => {
     const visibleItems = getVisibleNonAllItems();
     if (visibleItems.length === 0) {
@@ -37985,9 +37968,20 @@ const FilterPop = props => {
   };
   const handleSearchChange = e => {
     setSearchTerm(e.target.value);
+    setScrollTop(0); // Reset scroll on search
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTop = 0;
+    }
   };
   const clearSearch = () => {
     setSearchTerm("");
+    setScrollTop(0);
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTop = 0;
+    }
+  };
+  const handleScroll = e => {
+    setScrollTop(e.target.scrollTop);
   };
   return /*#__PURE__*/React$1.createElement(FilterPopContainer, {
     width: width,
@@ -38000,19 +37994,39 @@ const FilterPop = props => {
     value: searchTerm,
     onChange: handleSearchChange,
     accentColor: color
-  }), /*#__PURE__*/React$1.createElement(CheckboxGroup, {
+  }), /*#__PURE__*/React$1.createElement("div", {
+    ref: scrollContainerRef,
+    onScroll: handleScroll,
+    style: {
+      maxHeight: maxHeight,
+      overflowY: "auto",
+      position: "relative"
+    }
+  }, sortedList.length === 1 ? /*#__PURE__*/React$1.createElement(NoResultsMessage, null, "No items match your search") : /*#__PURE__*/React$1.createElement("div", {
+    style: {
+      height: `${totalHeight}px`,
+      position: "relative"
+    }
+  }, /*#__PURE__*/React$1.createElement(CheckboxGroup, {
     style: {
       display: doubleColumn ? "grid" : "flex",
       gridTemplateColumns: doubleColumn ? "1fr 1fr" : "none",
-      gap: "8px"
+      gap: "8px",
+      position: "absolute",
+      top: `${offsetY}px`,
+      left: 0,
+      right: 0
     }
-  }, sortedList.length === 1 ? /*#__PURE__*/React$1.createElement(NoResultsMessage, null, "No items match your search") : sortedList.map(item => {
+  }, visibleItems.map(item => {
     const isSelectAll = item.value === "All";
     const checkboxProps = isSelectAll ? getSelectAllCheckboxProps() : {};
     const isChecked = isSelectAll ? checkboxProps.checked : selectedAttributes[item.value] || false;
     return /*#__PURE__*/React$1.createElement(CheckboxLabel, {
       width: !doubleColumn ?? width,
-      key: item.value
+      key: item.value,
+      style: {
+        height: `${itemHeight}px`
+      }
     }, /*#__PURE__*/React$1.createElement("div", {
       style: {
         width: "20px",
@@ -38035,7 +38049,7 @@ const FilterPop = props => {
         handleCheckboxChange(item.value);
       }
     })), /*#__PURE__*/React$1.createElement("span", null, item.label));
-  })), /*#__PURE__*/React$1.createElement(ButtonWrapper$2, null, showSearch && searchTerm && /*#__PURE__*/React$1.createElement(ResetButton$1, {
+  })))), /*#__PURE__*/React$1.createElement(ButtonWrapper$2, null, showSearch && searchTerm && /*#__PURE__*/React$1.createElement(ResetButton$1, {
     onClick: clearSearch,
     style: {
       marginRight: "8px"
@@ -42862,14 +42876,27 @@ const TableBody = /*#__PURE__*/forwardRef(({
           return `${value || 0}%`;
         case "date":
           try {
+            let formattedDate = value;
             if (column.format === "MM/DD/YYYY" && value) {
               const date = new Date(value);
               if (isNaN(date.getTime())) {
                 return String(value);
               }
-              return `${(date.getMonth() + 1).toString().padStart(2, "0")}/${date.getDate().toString().padStart(2, "0")}/${date.getFullYear()}`;
+              formattedDate = `${(date.getMonth() + 1).toString().padStart(2, "0")}/${date.getDate().toString().padStart(2, "0")}/${date.getFullYear()}`;
+            } else {
+              formattedDate = String(value || "");
             }
-            return String(value || "");
+
+            // Check if this column should check for expiration
+            if (column.checkExpiration !== false && value && isDateExpired(value)) {
+              return /*#__PURE__*/React$1.createElement("span", {
+                style: {
+                  color: "#D23630",
+                  textDecoration: "line-through"
+                }
+              }, formattedDate);
+            }
+            return formattedDate;
           } catch (e) {
             console.warn('Error formatting date:', e);
             return String(value || "");
@@ -43373,7 +43400,21 @@ const TableBody = /*#__PURE__*/forwardRef(({
         rowIndex: rowIndex
       });
     }
-    console.log('handler--------', row, columnKey, currentValue, rowIndex);
+  };
+
+  // Helper function to check if date is expired (past current date)
+  const isDateExpired = dateString => {
+    if (!dateString) return false;
+    try {
+      const date = new Date(dateString);
+      if (isNaN(date.getTime())) return false;
+      const today = new Date();
+      today.setHours(0, 0, 0, 0); // Reset time to start of day for fair comparison
+      date.setHours(0, 0, 0, 0);
+      return date < today;
+    } catch (error) {
+      return false;
+    }
   };
   return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(StyledTableBody, {
     ref: ref