sag_components 2.0.0-beta253 → 2.0.0-beta254

package/dist/index.js

@@ -10591,24 +10591,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] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState('');
@@ -11050,23 +11049,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] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState('');
@@ -24177,22 +24175,21 @@ const DeleteIcon = styled__default["default"].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] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState("");
@@ -24649,26 +24646,25 @@ const IconContainer$2 = styled__default["default"].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] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState('');
@@ -36178,9 +36174,9 @@ const ToggleSlider = styled__default["default"].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 {
@@ -37754,23 +37750,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] = React$1.useState("");
-
-  // CRITICAL FIX: Use internal state for selected attributes
   const [selectedAttributes, setSelectedAttributes] = React$1.useState({});
+  const [scrollTop, setScrollTop] = React$1.useState(0);
   const isInitialMount = React$1.useRef(true);
-
-  // Add hardcoded "Select All" as first item
+  const scrollContainerRef = React$1.useRef(null);
   const fullList = React$1.useMemo(() => [{
     value: "All",
     label: "Select All"
   }, ...list], [list]);
-
-  // Create initial state - all items selected by default
   const createInitialState = () => {
     const initialState = {};
     fullList.forEach(item => {
@@ -37778,11 +37770,8 @@ const FilterPop = props => {
     });
     return initialState;
   };
-
-  // CRITICAL: Initialize and sync with props only when necessary
   React$1.useEffect(() => {
     if (isInitialMount.current) {
-      // First mount: use props or create initial state
       if (Object.keys(propSelectedAttributes).length > 0) {
         setSelectedAttributes(propSelectedAttributes);
       } else {
@@ -37790,8 +37779,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);
@@ -37800,9 +37787,7 @@ const FilterPop = props => {
         }
       }
     }
-  }, [propSelectedAttributes]); // Only depend on props
-
-  // Update selected attributes when list changes to include new items
+  }, [propSelectedAttributes]);
   React$1.useEffect(() => {
     if (!isInitialMount.current && list.length > 0) {
       setSelectedAttributes(prev => {
@@ -37810,38 +37795,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 = React$1.useMemo(() => {
     if (!searchTerm.trim()) {
       return fullList;
@@ -37853,22 +37828,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 = React$1.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
+  } = React$1.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");
   };
@@ -37883,8 +37870,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]);
@@ -37963,8 +37948,6 @@ const FilterPop = props => {
       allItems: resetState
     });
   };
-
-  // Function to determine checkbox state for "Select All"
   const getSelectAllCheckboxProps = () => {
     const visibleItems = getVisibleNonAllItems();
     if (visibleItems.length === 0) {
@@ -37995,9 +37978,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__default["default"].createElement(FilterPopContainer, {
     width: width,
@@ -38010,19 +38004,39 @@ const FilterPop = props => {
     value: searchTerm,
     onChange: handleSearchChange,
     accentColor: color
-  }), /*#__PURE__*/React__default["default"].createElement(CheckboxGroup, {
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: scrollContainerRef,
+    onScroll: handleScroll,
+    style: {
+      maxHeight: maxHeight,
+      overflowY: "auto",
+      position: "relative"
+    }
+  }, sortedList.length === 1 ? /*#__PURE__*/React__default["default"].createElement(NoResultsMessage, null, "No items match your search") : /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      height: `${totalHeight}px`,
+      position: "relative"
+    }
+  }, /*#__PURE__*/React__default["default"].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__default["default"].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__default["default"].createElement(CheckboxLabel, {
       width: !doubleColumn ?? width,
-      key: item.value
+      key: item.value,
+      style: {
+        height: `${itemHeight}px`
+      }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         width: "20px",
@@ -38045,7 +38059,7 @@ const FilterPop = props => {
         handleCheckboxChange(item.value);
       }
     })), /*#__PURE__*/React__default["default"].createElement("span", null, item.label));
-  })), /*#__PURE__*/React__default["default"].createElement(ButtonWrapper$2, null, showSearch && searchTerm && /*#__PURE__*/React__default["default"].createElement(ResetButton$1, {
+  })))), /*#__PURE__*/React__default["default"].createElement(ButtonWrapper$2, null, showSearch && searchTerm && /*#__PURE__*/React__default["default"].createElement(ResetButton$1, {
     onClick: clearSearch,
     style: {
       marginRight: "8px"