sag_components 2.0.0-beta275 → 2.0.0-beta277

package/dist/index.d.ts

@@ -1578,29 +1578,29 @@ declare function ModalDrawer({ open, height, onClose, children, widthPercent }:
     widthPercent?: number;
 }): react_jsx_runtime.JSX.Element;
 
-declare function OverlayDropdown({ data, value, onSelectClick, disabled, isDarkerBackground, required, selectedColor, hoverColor, dropdownMaxHeight, width, minWidth, height, label, labelEmptyValue, showLabelOnTop, placeHolder, labelColor, placeHolderColor, margin, dropdownWidth, editableDigitalCoupon, ...props }: {
+declare function OverlayDropdown({ data, value, onSelectClick, label, labelEmptyValue, showLabelOnTop, labelColor, placeHolder, placeHolderColor, required, disabled, isDarkerBackground, editableDigitalCoupon, selectedColor, hoverColor, width, minWidth, dropdownWidth, dropdownMaxHeight, height, margin, ...props }: {
     [x: string]: any;
     data?: any[];
     value: any;
     onSelectClick: any;
+    label: any;
+    labelEmptyValue: any;
+    showLabelOnTop: any;
+    labelColor: any;
+    placeHolder: any;
+    placeHolderColor: any;
+    required?: boolean;
     disabled?: boolean;
     isDarkerBackground?: boolean;
-    required?: boolean;
+    editableDigitalCoupon?: boolean;
     selectedColor?: string;
     hoverColor?: string;
-    dropdownMaxHeight?: string;
     width?: string;
     minWidth?: string;
+    dropdownWidth?: string;
+    dropdownMaxHeight?: string;
     height?: string;
-    label: any;
-    labelEmptyValue: any;
-    showLabelOnTop: any;
-    placeHolder: any;
-    labelColor: any;
-    placeHolderColor: any;
     margin?: string;
-    dropdownWidth?: string;
-    editableDigitalCoupon?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
 declare function MessageBox({ isOpen, isDisabled, onClose, onConfirm, title, primaryText, secondaryText, width, height, color, hoverColor, opacity, secondaryColor, seperateSectionBorder, children, tooltipContent, }: {

package/dist/index.esm.js

@@ -9292,7 +9292,6 @@ const Label$7 = styled.label`
   return props.isFocused || props.hasValue ? '0px' : `${height / 2 - 4}px`;
 }};
   left: ${props => props.isFocused || props.hasValue ? '23px' : '10px'};
-  font-family: Poppins;  
   transform: translateY(-50%);
   transition: ${props => props.showLabelOnTop ? 'top 0.3s ease, font-size 0.3s ease, color 0.3s ease' : ''} ;
   display: flex;
@@ -24543,7 +24542,6 @@ const OptionsContainer$1 = styled.div`
   width: 100%;  
   background-color: #fff;  
   display: ${props => props.showoptions && props.filteredoptions?.length > 0 ? 'block' : 'none'};  
-
 `;
 const OptionsSubContainer = styled.ul`
   list-style: none;
@@ -24555,7 +24553,6 @@ const OptionsSubContainer = styled.ul`
   left: 0;
   z-index: 101;
   width: calc(100% - 23px);
-  font-family: Poppins; 
   border-radius: 4px; 
   background-color: #fff;  
   display: ${props => props.showoptions && props.filteredoptions?.length > 0 ? 'block' : 'none'};
@@ -24566,13 +24563,10 @@ const OptionsSubContainer = styled.ul`
 const OptionItem = styled.li`  
   display: flex;
   align-items: center;
-  gap: 8px;
   padding: 10px;
   cursor: pointer;
   color: #212121;
-  font-family: Poppins;
   font-size: 14px;
-  font-style: normal;
   font-weight: 400;
   transition: background-color 0.3s;
 
@@ -24587,7 +24581,6 @@ const ErrorMessage$1 = styled.div`
 `;
 const SelectedOptionsContainer = styled.div`
   display: flex;
-  flex-direction: row;
   align-items: center;
   gap: 4px;
   flex-wrap: nowrap;
@@ -24636,7 +24629,8 @@ const SelectedOptionCount = styled.div`
 const IconContainer$2 = styled.div`  
   display: flex;  
   padding: 2px;
-  cursor:  pointer;  
+  margin-right: 8px;
+  cursor:  pointer;
 `;
 
 const QuickFilterDropdownMultiSelection = _ref => {
@@ -35687,7 +35681,7 @@ const Label$3 = styled.label`
   if (props.multiline) {
     return props.isFocused || props.hasValue ? '0px' : '20px';
   }
-  return props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '27px' : '17px';
+  return props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '50%' : '17px';
 }};
   left: ${props => {
   if (props.multiline) {
@@ -35695,7 +35689,6 @@ const Label$3 = styled.label`
   }
   return props.isFocused || props.hasValue ? '23px' : props.leftIcon && props.leftIcon !== 'none' ? '42px' : '16px';
 }};
-  font-family: Poppins;  
   transform: translateY(-50%);
   transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
   display: flex;
@@ -37428,8 +37421,8 @@ const ColumnContent = styled.div`
     min-height: 20px;
 `;
 const ColumnCheckbox = styled.input`
-    width: 16px;
-    height: 16px;
+    width: 18px;
+    height: 18px;
     cursor: pointer;
     margin: 0;
 `;
@@ -40413,6 +40406,7 @@ const Radio = styled.input`
 `;
 const Actions$1 = styled.div`
   display: flex;
+  align-items: center;
   justify-content: space-between;
   padding-top: 12px;
 `;
@@ -41341,14 +41335,7 @@ const TableHeader = ({
     onChange: e => handleHeaderCheckboxClick(column.key, e),
     "data-column": column.key,
     style: {
-      width: '18px',
-      height: '18px',
-      marginLeft: '10px',
-      cursor: 'pointer',
-      accentColor: '#066768',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
+      accentColor: '#066768'
     }
   }), column.title && /*#__PURE__*/React$1.createElement(ColumnLabel, null, column.title), (column.filter || column.sort) && /*#__PURE__*/React$1.createElement(ColumnActions, null, column.sort && /*#__PURE__*/React$1.createElement(IconButton, {
     ref: el => iconRefs.current[`sort-${column.key}`] = el,
@@ -42106,6 +42093,18 @@ styled.div`
     }
   `}
 `;
+const CheckboxInput = styled.input`
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  accent-color: ${props => props.buttonColor || '#066768'};
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
 const HeroButton = styled.button`
   display: flex;
   align-items: center;
@@ -42749,6 +42748,7 @@ const TableBody = /*#__PURE__*/forwardRef(({
   onDropdownSelected = () => {},
   onCheckboxClick = () => {},
   onHeaderCheckboxClick = () => {},
+  disableCheckboxTooltipText = "",
   onHeroClick = () => {},
   onEditableClick = () => {},
   isEditMode = false,
@@ -43152,12 +43152,12 @@ const TableBody = /*#__PURE__*/forwardRef(({
                 hoverTextColor: "#B1B1B1",
                 hoverBackgroundColor: "#E6F0F0",
                 hoverBorderColor: "#D9D9D9",
+                disabled: true,
                 disabledTextColor: "#B1B1B1",
-                disabledBackgroundColor: focusedRowIndex === rowIndex ? "#D1E7E7" : hoveredRowIndex === rowIndex ? "#E6F0F0" : "#FFF",
                 disabledBorderColor: "#D9D9D9",
+                disabledBackgroundColor: focusedRowIndex === rowIndex ? "#D1E7E7" : hoveredRowIndex === rowIndex ? "#E6F0F0" : "#FFF",
                 width: "100px",
-                height: "32px",
-                disabled: true
+                height: "32px"
               }));
             } else if (lowerValue === "draft") {
               return /*#__PURE__*/React$1.createElement(ButtonWrapper, {
@@ -43379,24 +43379,15 @@ const TableBody = /*#__PURE__*/forwardRef(({
             return /*#__PURE__*/React$1.createElement("div", {
               style: {
                 display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: "100%",
-                height: "100%"
+                alignItems: "center"
               }
-            }, /*#__PURE__*/React$1.createElement("input", {
+            }, /*#__PURE__*/React$1.createElement(CheckboxInput, {
               type: "checkbox",
               checked: isChecked,
               disabled: isDisabled,
+              buttonColor: buttonColor,
               onChange: e => handleCheckboxClick(row, column.key, e),
-              onClick: e => e.stopPropagation(),
-              style: {
-                width: "18px",
-                height: "18px",
-                cursor: isDisabled ? "not-allowed" : "pointer",
-                accentColor: buttonColor,
-                opacity: isDisabled ? 0.5 : 1
-              }
+              onClick: e => e.stopPropagation()
             }));
           } catch (e) {
             console.warn('Error formatting checkbox:', e);
@@ -47026,6 +47017,7 @@ const Table = props => {
     onCheckboxClick = () => {},
     onHeaderCheckboxClick = () => {},
     headerCheckboxStates = {},
+    disableCheckboxTooltipText = "",
     onHeroClick = () => {},
     dotIndicatorColor = '#34D399',
     onEditableClick = () => {},
@@ -47170,6 +47162,7 @@ const Table = props => {
     onDropdownSelected: onDropdownSelected,
     onCheckboxClick: onCheckboxClick,
     onHeaderCheckboxClick: onHeaderCheckboxClick,
+    disableCheckboxTooltipText: disableCheckboxTooltipText,
     onHeroClick: onHeroClick,
     onEditableClick: onEditableClick,
     isEditMode: isEditMode,
@@ -47603,25 +47596,52 @@ styled.span`
   font-weight: 600;
 `;
 
+let FixedSizeList = null;
+try {
+  FixedSizeList = require('react-window').FixedSizeList;
+} catch (e) {
+  console.error('react-window not found:', e);
+}
+const VENDOR_ITEM_HEIGHT = 72;
 const NewItemList = ({
   onBack,
   onVendorClick,
   itemAndPackage
 }) => {
-  const [search, setSearch] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
   const [headerHeight, setHeaderHeight] = useState(0);
   const headerRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const timerRef = useRef(null);
   useEffect(() => {
     if (headerRef.current) {
       setHeaderHeight(headerRef.current.offsetHeight);
     }
   }, []);
-  const searchLower = search.toLowerCase();
-  const startsWithMatches = itemAndPackage.filter(i => i.name.toLowerCase().startsWith(searchLower));
-  const includesMatches = itemAndPackage.filter(i => !i.name.toLowerCase().startsWith(searchLower) && i.name.toLowerCase().includes(searchLower));
-  const filteredItems = [...startsWithMatches, ...includesMatches];
-
-  // Helper to highlight matched portions
+  const handleSearchChange = e => {
+    const value = e.target.value;
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      setDebouncedSearch(value);
+    }, 100);
+  };
+  const filteredItems = useMemo(() => {
+    if (!debouncedSearch) return itemAndPackage;
+    const searchLower = debouncedSearch.toLowerCase();
+    const results = [];
+    const startsWithResults = [];
+    for (let i = 0; i < itemAndPackage.length; i++) {
+      const nameLower = itemAndPackage[i].name.toLowerCase();
+      if (nameLower.startsWith(searchLower)) {
+        startsWithResults.push(itemAndPackage[i]);
+      } else if (nameLower.includes(searchLower)) {
+        results.push(itemAndPackage[i]);
+      }
+    }
+    return [...startsWithResults, ...results];
+  }, [debouncedSearch, itemAndPackage]);
   const highlightMatch = (text, query) => {
     if (!query) return text;
     const regex = new RegExp(`(${query})`, "ig");
@@ -47631,18 +47651,51 @@ const NewItemList = ({
   };
   const hasValidStatus = pkg => pkg.hasOwnProperty("status") && pkg.status != null && pkg.status !== undefined && pkg.status !== "";
   const draftPackages = pkg => pkg.status === 1;
+  const VendorRow = ({
+    index,
+    style
+  }) => {
+    const item = filteredItems[index];
+    let packagesLength = 0;
+    let sentPackagesLength = 0;
+    if (item.packages !== null) {
+      packagesLength = item.packages.length;
+      sentPackagesLength = item.packages.filter(pkg => hasValidStatus(pkg) && !draftPackages(pkg)).length;
+    }
+    return /*#__PURE__*/React$1.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React$1.createElement(VendorItem, {
+      onClick: e => {
+        if (onVendorClick) {
+          onVendorClick(item);
+        }
+      }
+    }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer, null, /*#__PURE__*/React$1.createElement(VendorName$1, null, highlightMatch(item.name, debouncedSearch.toLowerCase())), packagesLength > 0 && /*#__PURE__*/React$1.createElement(VendorPackages, null, (() => {
+      const noPackagesSent = sentPackagesLength === 0;
+      if (noPackagesSent) {
+        return `0/${packagesLength} Packages Sent`;
+      } else {
+        return `${sentPackagesLength}/${packagesLength} Packages Sent`;
+      }
+    })())), /*#__PURE__*/React$1.createElement(VendorChevron, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))));
+  };
   return /*#__PURE__*/React$1.createElement(VendorSelectionContainer, null, /*#__PURE__*/React$1.createElement(VendorHeader$1, {
     ref: headerRef
   }, /*#__PURE__*/React$1.createElement(VendorRoute, null, /*#__PURE__*/React$1.createElement(VendorBackButton, {
     onClick: onBack
   }, /*#__PURE__*/React$1.createElement(ArrowLeftIcon, null)), /*#__PURE__*/React$1.createElement(VendorBackTitle, null, "Selected Vendors")), /*#__PURE__*/React$1.createElement(VendorSelectionTitle, null, "Add New Vendor"), /*#__PURE__*/React$1.createElement(VendorSearch, {
+    ref: searchInputRef,
     type: "search",
     placeholder: "Search",
-    value: search,
-    onChange: e => setSearch(e.target.value)
-  }), /*#__PURE__*/React$1.createElement(VendorSearchResult, null, search !== "" ? `${filteredItems.length === 0 ? "No" : filteredItems.length} Vendors Found` : " ")), /*#__PURE__*/React$1.createElement(VendorListWrapper$1, {
+    onChange: handleSearchChange
+  }), /*#__PURE__*/React$1.createElement(VendorSearchResult, null, debouncedSearch !== "" ? `${filteredItems.length === 0 ? "No" : filteredItems.length} Vendors Found` : " ")), /*#__PURE__*/React$1.createElement(VendorListWrapper$1, {
     headerHeight: headerHeight
-  }, /*#__PURE__*/React$1.createElement(VendorList$1, null, filteredItems.map((item, idx) => {
+  }, FixedSizeList ? /*#__PURE__*/React$1.createElement(FixedSizeList, {
+    height: window.innerHeight - headerHeight - 48,
+    itemCount: filteredItems.length,
+    itemSize: VENDOR_ITEM_HEIGHT,
+    width: "100%"
+  }, VendorRow) : /*#__PURE__*/React$1.createElement(VendorList$1, null, filteredItems.map((item, idx) => {
     let packagesLength = 0;
     let sentPackagesLength = 0;
     if (item.packages !== null) {
@@ -47652,12 +47705,11 @@ const NewItemList = ({
     return /*#__PURE__*/React$1.createElement(VendorItem, {
       key: idx,
       onClick: e => {
-        // Always call onVendorClick - it will handle the conversion from null to []
         if (onVendorClick) {
           onVendorClick(item);
         }
       }
-    }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer, null, /*#__PURE__*/React$1.createElement(VendorName$1, null, highlightMatch(item.name, searchLower)), packagesLength > 0 && /*#__PURE__*/React$1.createElement(VendorPackages, null, (() => {
+    }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer, null, /*#__PURE__*/React$1.createElement(VendorName$1, null, highlightMatch(item.name, debouncedSearch.toLowerCase())), packagesLength > 0 && /*#__PURE__*/React$1.createElement(VendorPackages, null, (() => {
       const noPackagesSent = sentPackagesLength === 0;
       if (noPackagesSent) {
         return `0/${packagesLength} Packages Sent`;
@@ -57798,27 +57850,32 @@ OverlayTemplateDialog.propTypes = {
 // Main Component
 const OverlayDropdown = _ref => {
   let {
+    // Data / selection
     data = [],
     value,
     onSelectClick,
+    // Label / placeholder
+    label,
+    labelEmptyValue,
+    showLabelOnTop,
+    labelColor,
+    placeHolder,
+    placeHolderColor,
+    // Behavior
+    required = false,
     disabled = false,
     isDarkerBackground = false,
-    required = false,
+    editableDigitalCoupon = false,
+    // Appearance
     selectedColor = "#066768",
     hoverColor = "#E6F0F0",
-    dropdownMaxHeight = "600px",
+    // Sizing
     width = "100%",
     minWidth = "unset",
+    dropdownWidth = "100%",
+    dropdownMaxHeight = "600px",
     height = "auto",
-    label,
-    labelEmptyValue,
-    showLabelOnTop,
-    placeHolder,
-    labelColor,
-    placeHolderColor,
     margin = "8px",
-    dropdownWidth = "100%",
-    editableDigitalCoupon = false,
     ...props
   } = _ref;
   const [open, setOpen] = useState(false);