sag_components 2.0.0-beta253 → 2.0.0-beta255

package/dist/index.js

@@ -36120,15 +36120,19 @@ const ToggleInput = styled__default["default"].input`
 const ToggleSlider = styled__default["default"].span`
   display: block;
   position: relative;
-  background: ${({
-  checked,
-  disabled
-}) => checked ? "#006d6a" : disabled ? "#B1B1B1" : "#D0D0D0"};
+  background: ${_ref => {
+  let {
+    checked,
+    disabled
+  } = _ref;
+  return checked ? "#006d6a" : disabled ? "#B1B1B1" : "#D0D0D0";
+}};
   border-radius: 999px;
   transition: background 0.2s;
-  ${({
-  size
-}) => {
+  ${_ref2 => {
+  let {
+    size
+  } = _ref2;
   switch (size) {
     case "s":
       return styled.css`width: 40px; height: 20px;`;
@@ -36144,14 +36148,18 @@ const ToggleSlider = styled__default["default"].span`
     left: 3px;
     top: 50%;
     transform: translateY(-50%);
-    background: ${({
-  disabled
-}) => disabled ? "#D0D0D0" : "#fff"};
+    background: ${_ref3 => {
+  let {
+    disabled
+  } = _ref3;
+  return disabled ? "#D0D0D0" : "#fff";
+}};
     border-radius: 50%;
     transition: left 0.2s, width 0.2s, height 0.2s;
-    ${({
-  size
-}) => {
+    ${_ref4 => {
+  let {
+    size
+  } = _ref4;
   switch (size) {
     case "s":
       return styled.css`width: 14px; height: 14px;`;
@@ -36161,10 +36169,11 @@ const ToggleSlider = styled__default["default"].span`
       return styled.css`width: 20px; height: 20px;`;
   }
 }}
-    left: ${({
-  checked,
-  size
-}) => {
+    left: ${_ref5 => {
+  let {
+    checked,
+    size
+  } = _ref5;
   if (!checked) return "3px";
   switch (size) {
     case "s":
@@ -36992,13 +37001,13 @@ const NoEventsWrapper = styled__default["default"].div`
     margin-bottom: 14px;
 `;
 const NoEventsMessage = styled__default["default"].span`
-    font-size: 18px;
+    font-size: ${props => props.subTitleSize ? props.subTitleSize : '18px'};
     font-weight: 400;
     margin-bottom: 14px;
     text-align: center;
     display: block;
     > strong {
-        font-size: 24px;
+        font-size: ${props => props.titleSize ? props.titleSize : '24px'};
         font-weight: 500;
     }
 `;
@@ -37218,8 +37227,8 @@ const NoEvents = ({
 }));
 
 const NoUpcIcon = ({
-  width = "251",
-  height = "250"
+  width = "178",
+  height = "171"
 }) => /*#__PURE__*/React__default["default"].createElement("svg", {
   width: width,
   height: height,
@@ -37754,23 +37763,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 +37783,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 +37792,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 +37800,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 +37808,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 +37841,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 +37883,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 +37961,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 +37991,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 +38017,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 +38072,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"
@@ -46907,6 +46934,7 @@ const Table = props => {
     noEventsSubtitle = "Let's get started and create your first one!",
     noEventsButtonText = "New Event",
     noEventsButtonIcon = "Plus",
+    noEventsButtonHeight,
     disableNoEventsButton = false,
     showNoEventsButton = true,
     indexToShimmer = -1,
@@ -46931,7 +46959,9 @@ const Table = props => {
     onEditableClick = () => {},
     resetFiltersKey = 0,
     // NEW: Add this prop
-    ref = null
+    ref = null,
+    titleSize,
+    subTitleSize
   } = props;
   const scrollWrapperRef = React$1.useRef(null);
   const tableBodyRef = React$1.useRef(null);
@@ -47070,8 +47100,11 @@ const Table = props => {
     onEditableClick: onEditableClick,
     isEditMode: isEditMode,
     editRowIndex: editRowIndex
-  })), data.length === 0 && /*#__PURE__*/React__default["default"].createElement(NoEventsParent, null, /*#__PURE__*/React__default["default"].createElement(NoEventsWrapper, null, showNoDataInSearch ? getNoDataSearchIcon(noDataSearchIcon) : getNoDataIcon(noDataIcon)), /*#__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, noEventsTitle), /*#__PURE__*/React__default["default"].createElement("br", null), noEventsSubtitle)), !showNoDataInSearch && showNoEventsButton && /*#__PURE__*/React__default["default"].createElement(Button$1, {
-    height: "45px",
+  })), data.length === 0 && /*#__PURE__*/React__default["default"].createElement(NoEventsParent, null, /*#__PURE__*/React__default["default"].createElement(NoEventsWrapper, null, showNoDataInSearch ? getNoDataSearchIcon(noDataSearchIcon) : getNoDataIcon(noDataIcon)), /*#__PURE__*/React__default["default"].createElement(NoEventsMessage, {
+    titleSize: titleSize,
+    subTitleSize: subTitleSize
+  }, 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, noEventsTitle), /*#__PURE__*/React__default["default"].createElement("br", null), noEventsSubtitle)), !showNoDataInSearch && showNoEventsButton && /*#__PURE__*/React__default["default"].createElement(Button$1, {
+    height: noEventsButtonHeight ? noEventsButtonHeight : "45px",
     leftIcon: noEventsButtonIcon,
     text: noEventsButtonText,
     disabled: disableNoEventsButton,
@@ -58338,7 +58371,7 @@ const QuickFilterCards = _ref => {
 const StatusCell = styled__default["default"].div`
     display: inline-flex;
     height: ${props => props.height};
-    padding: 8px 12px;
+    padding: 6px 14px;
     justify-content: center;
     align-items: center;
     gap: 14px;