sag_components 2.0.0-beta293 → 2.0.0-beta294

package/dist/index.esm.js

@@ -42574,6 +42574,7 @@ const Dropdown = ({
   isOpen,
   options,
   selectedValue,
+  // Can now be an array for multi-select
   displayText,
   onToggle,
   onOptionSelect,
@@ -42583,16 +42584,79 @@ const Dropdown = ({
   selectedColor,
   dropdownOptionsWidth,
   dropdownOptionsAlignment = 'right',
-  placeholder = 'Select...'
+  placeholder = 'Select...',
+  multiSelect = true,
+  // New prop to enable/disable multi-select
+  showSelectAll = true // New prop to show/hide "Select All" option
 }) => {
   const [isDropdownHovered, setIsDropdownHovered] = useState(false);
 
+  // Normalize selectedValue to always be an array for consistency
+  const selectedValues = Array.isArray(selectedValue) ? selectedValue : selectedValue ? [selectedValue] : [];
+
   // Reset dropdown hover state when dropdown closes
   useEffect(() => {
     if (!isOpen) {
       setIsDropdownHovered(false);
     }
   }, [isOpen]);
+
+  // Check if an option is selected
+  const isOptionSelected = optionValue => {
+    return selectedValues.includes(optionValue);
+  };
+
+  // Check if all options are selected
+  const areAllSelected = () => {
+    return options.length > 0 && options.every(option => isOptionSelected(option.value));
+  };
+
+  // Handle option click
+  const handleOptionClick = (option, e) => {
+    e.stopPropagation();
+    if (!multiSelect) {
+      // Single select mode - close dropdown after selection
+      onOptionSelect(option, e);
+      return;
+    }
+
+    // Multi-select mode - keep dropdown open
+    onOptionSelect(option, e);
+  };
+
+  // Handle "Select All" click
+  const handleSelectAllClick = e => {
+    e.stopPropagation();
+    if (areAllSelected()) {
+      // Deselect all
+      onOptionSelect({
+        value: 'none',
+        label: 'Deselect All',
+        isSelectAll: true
+      }, e);
+    } else {
+      // Select all
+      onOptionSelect({
+        value: 'all',
+        label: 'Select All',
+        isSelectAll: true
+      }, e);
+    }
+  };
+
+  // Generate display text based on selections
+  const getDisplayText = () => {
+    if (selectedValues.length === 0) {
+      return placeholder;
+    }
+
+    // if (selectedValues.length === 1) {
+    //     const selectedOption = options.find(opt => opt.value === selectedValues[0]);
+    //     return selectedOption ? selectedOption.label : displayText;
+    // }
+
+    return `${selectedValues.map(val => options.find(opt => opt.value === val).label).join(', ')}`;
+  };
   return /*#__PURE__*/React$1.createElement(DropdownContainer$1, {
     onMouseEnter: () => setIsDropdownHovered(true),
     onMouseLeave: () => setIsDropdownHovered(false)
@@ -42602,7 +42666,7 @@ const Dropdown = ({
     $isRowFocused: isRowFocused,
     $isRowHovered: isRowHovered,
     $selectedColor: selectedColor
-  }, /*#__PURE__*/React$1.createElement("span", null, displayText), /*#__PURE__*/React$1.createElement(DropdownIcon, {
+  }, /*#__PURE__*/React$1.createElement("span", null, displayText || getDisplayText()), /*#__PURE__*/React$1.createElement(DropdownIcon, {
     $isOpen: isOpen,
     $isRowFocused: isRowFocused,
     $isRowHovered: isRowHovered,
@@ -42615,11 +42679,22 @@ const Dropdown = ({
     $maxDropdownHeight: maxDropdownHeight,
     $dropdownOptionsWidth: dropdownOptionsWidth,
     $dropdownOptionsAlignment: dropdownOptionsAlignment
-  }, options.map((option, index) => /*#__PURE__*/React$1.createElement(DropdownOption, {
+  }, multiSelect && showSelectAll && options.length > 0 && /*#__PURE__*/React$1.createElement(DropdownOption, {
+    onClick: handleSelectAllClick,
+    $isSelected: areAllSelected(),
+    style: {
+      borderBottom: '1px solid #E5E7EB',
+      fontWeight: '500'
+    }
+  }, /*#__PURE__*/React$1.createElement("span", null, areAllSelected() ? 'Deselect All' : 'Select All'), areAllSelected() && /*#__PURE__*/React$1.createElement(OkIcon, {
+    width: "24",
+    height: "24",
+    color: "#066768"
+  })), options.map((option, index) => /*#__PURE__*/React$1.createElement(DropdownOption, {
     key: index,
-    onClick: e => onOptionSelect(option, e),
-    $isSelected: option.value === selectedValue
-  }, /*#__PURE__*/React$1.createElement("span", null, option.label), option.value === selectedValue && /*#__PURE__*/React$1.createElement(OkIcon, {
+    onClick: e => handleOptionClick(option, e),
+    $isSelected: isOptionSelected(option.value)
+  }, /*#__PURE__*/React$1.createElement("span", null, option.label), isOptionSelected(option.value) && /*#__PURE__*/React$1.createElement(OkIcon, {
     width: "24",
     height: "24",
     color: "#066768"
@@ -42631,8 +42706,8 @@ Dropdown.propTypes = {
     value: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired
   })).isRequired,
-  selectedValue: PropTypes.string,
-  displayText: PropTypes.string.isRequired,
+  selectedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  displayText: PropTypes.string,
   onToggle: PropTypes.func.isRequired,
   onOptionSelect: PropTypes.func.isRequired,
   maxDropdownHeight: PropTypes.string,
@@ -42641,7 +42716,9 @@ Dropdown.propTypes = {
   selectedColor: PropTypes.string,
   dropdownOptionsWidth: PropTypes.string,
   dropdownOptionsAlignment: PropTypes.oneOf(['left', 'right']),
-  placeholder: PropTypes.string
+  placeholder: PropTypes.string,
+  multiSelect: PropTypes.bool,
+  showSelectAll: PropTypes.bool
 };
 
 const HeroIcon = ({
@@ -42797,44 +42874,31 @@ const TableBody = /*#__PURE__*/forwardRef(({
   isEditMode = false,
   editRowIndex = -1
 }, ref) => {
-  // MOVE ALL VALIDATION TO THE VERY TOP BEFORE ANY HOOKS
   if (!Array.isArray(data) || !Array.isArray(columns)) {
     console.warn("TableBody: Invalid data or columns prop");
     return null;
   }
-
-  // NOW ALL THE HOOKS CAN BE CALLED SAFELY
   const [hoveredRowIndex, setHoveredRowIndex] = useState(null);
   const [focusedRowIndex, setFocusedRowIndex] = useState(null);
   const [isCommentModalOpen, setIsCommentModalOpen] = useState(false);
   const [currentCommentRow, setCurrentCommentRow] = useState(null);
   const [openDropdowns, setOpenDropdowns] = useState({});
-
-  // TextArea logic states
   const [commentText, setCommentText] = useState("");
   const [isFocused, setIsFocused] = useState(false);
   const [hasUserInteracted, setHasUserInteracted] = useState(false);
   const [hasInitialValue, setHasInitialValue] = useState(false);
-
-  // Shimmer state - manage shimmer effect at the top level
   const [shimmerRowIndex, setShimmerRowIndex] = useState(-1);
   const [shimmerStartTime, setShimmerStartTime] = useState(null);
-
-  // Helper function to get nested values from objects (e.g., "status.PackageStatusDescription")
   const getNestedValue = (obj, path) => {
     if (!path || typeof path !== 'string') return undefined;
     return path.split('.').reduce((current, key) => {
       return current && current[key] !== undefined ? current[key] : undefined;
     }, obj);
   };
-
-  // Handle shimmer effect changes
   useEffect(() => {
     if (indexToShimmer >= 0) {
       setShimmerRowIndex(indexToShimmer);
       setShimmerStartTime(Date.now());
-
-      // Auto-stop shimmer after 5 seconds
       const timeout = setTimeout(() => {
         setShimmerRowIndex(-1);
         setShimmerStartTime(null);
@@ -42845,8 +42909,6 @@ const TableBody = /*#__PURE__*/forwardRef(({
       setShimmerStartTime(null);
     }
   }, [indexToShimmer]);
-
-  // Expose methods to parent component via ref
   useImperativeHandle(ref, () => ({
     clearFocus: () => {
       setFocusedRowIndex(null);
@@ -42882,8 +42944,6 @@ const TableBody = /*#__PURE__*/forwardRef(({
       setFocusedRowIndex(changeFocusIndex);
     }
   }, [changeFocusIndex]);
-
-  // Close all dropdowns when clicking outside
   useEffect(() => {
     const handleClickOutside = () => {
       setOpenDropdowns({});
@@ -42893,8 +42953,6 @@ const TableBody = /*#__PURE__*/forwardRef(({
       document.removeEventListener("click", handleClickOutside);
     };
   }, []);
-
-  // HANDLE SPECIAL CASE: EMPTY DATA AFTER ALL HOOKS
   if (data.length === 0) {
     return /*#__PURE__*/React$1.createElement(StyledTableBody, {
       ref: ref
@@ -42902,8 +42960,6 @@ const TableBody = /*#__PURE__*/forwardRef(({
       colSpan: columns.length
     }, "No data available")));
   }
-
-  // Handle row click for focus state
   const handleRowClick = (row, rowIndex) => {
     if (isEditMode && editRowIndex !== -1) {
       return;
@@ -42913,8 +42969,6 @@ const TableBody = /*#__PURE__*/forwardRef(({
       onRowClick(row, rowIndex);
     }
   };
-
-  // TextArea handlers
   const handleTextChange = e => {
     const text = e.target.value;
     if (text.length <= commentTextLimit) {
@@ -42930,16 +42984,12 @@ const TableBody = /*#__PURE__*/forwardRef(({
   const handleBlur = () => {
     setIsFocused(false);
   };
-
-  // Handle comment save
   const handleCommentSave = () => {
     if (currentCommentRow !== null) {
       onCommentSave(currentCommentRow, commentText);
     }
     handleCommentModalClose();
   };
-
-  // Handle comment modal close
   const handleCommentModalClose = () => {
     setCommentText("");
     setHasUserInteracted(false);
@@ -42947,17 +42997,12 @@ const TableBody = /*#__PURE__*/forwardRef(({
     setCurrentCommentRow(null);
     setIsCommentModalOpen(false);
   };
-
-  // Determine if save button should be enabled
   const isSaveEnabled = hasUserInteracted && (commentText.length > 0 || hasInitialValue);
-
-  // Helper function to format tag text
   const formatTagText = tag => {
     if (typeof tag !== "string") return String(tag || "");
     return tag.replace(/-/g, " ").replace(/\b\w/g, l => l.toUpperCase());
   };
   const formatValue = (value, column, row, rowIndex) => {
-    // Add safety checks at the start
     if (!column) {
       console.warn('formatValue called with null/undefined column');
       return "";
@@ -42966,8 +43011,6 @@ const TableBody = /*#__PURE__*/forwardRef(({
       if ((value === null || value === undefined) && column?.fieldType?.toLowerCase() !== "comments" && column?.fieldType?.toLowerCase() !== "editable") {
         return "";
       }
-
-      // Find the tooltip text for the current value - can be used for different fieldTypes
       const getTooltipText = value => {
         try {
           if (column?.tooltipText && Array.isArray(column.tooltipText)) {
@@ -43020,8 +43063,6 @@ const TableBody = /*#__PURE__*/forwardRef(({
             } else {
               formattedDate = String(value || "");
             }
-
-            // Check if this column should check for expiration
             if (column.checkExpiration !== false && value && isDateExpired(value)) {
               return /*#__PURE__*/React$1.createElement("span", {
                 style: {
@@ -43091,15 +43132,12 @@ const TableBody = /*#__PURE__*/forwardRef(({
           }
         case "dotindicator":
           try {
-            // Check if value is an object with show and color properties
             if (!value || typeof value !== 'object') return null;
             const {
               show,
               color,
               tooltip
             } = value;
-
-            // Only show the dot if show is true
             if (!show) return null;
             return /*#__PURE__*/React$1.createElement(DotIndicatorWrapper, {
               ref: el => {
@@ -43179,7 +43217,6 @@ const TableBody = /*#__PURE__*/forwardRef(({
               }
             };
             const tooltipText = getTooltipText(value);
-            // Handle array values (like PackageStatusName)
             const processedValue = Array.isArray(value) ? value[0] : value;
             const lowerValue = String(processedValue || "").toLowerCase();
             if (lowerValue === "empty") {
@@ -43392,12 +43429,24 @@ const TableBody = /*#__PURE__*/forwardRef(({
             const dropdownOptionsWidth = column.dropdownOptionsWidth;
             const dropdownOptionsAlignment = column.dropdownOptionsAlignment || "right";
             const placeholder = column.placeholder || "Select...";
-            const currentOption = dropdownOptions.find(option => option && option.value === value);
-            const displayText = currentOption ? currentOption.label : value || placeholder;
+            const isMultiSelect = column.multiSelect !== false;
+            const showSelectAll = column.showSelectAll !== false;
+            const normalizedValue = Array.isArray(value) ? value : value ? [value] : [];
+            let displayText;
+            if (normalizedValue.length === 0) {
+              displayText = placeholder;
+            } else if (normalizedValue.length === dropdownOptions.length && dropdownOptions.length > 0) {
+              displayText = 'All Selected';
+            } else if (normalizedValue.length === 1) {
+              const selectedOption = dropdownOptions.find(opt => opt.value === normalizedValue[0]);
+              displayText = selectedOption ? selectedOption.label : placeholder;
+            } else {
+              displayText = `${normalizedValue.map(val => dropdownOptions.find(opt => opt.value === val).label).join(', ')}`;
+            }
             return /*#__PURE__*/React$1.createElement(Dropdown, {
               isOpen: isOpen,
               options: dropdownOptions,
-              selectedValue: value,
+              selectedValue: normalizedValue,
               displayText: displayText,
               onToggle: e => handleDropdownClick(rowIndex, column.key, e),
               onOptionSelect: (option, e) => handleDropdownOptionClick(row, rowIndex, column.key, option, e),
@@ -43407,7 +43456,9 @@ const TableBody = /*#__PURE__*/forwardRef(({
               placeholder: placeholder,
               isRowFocused: focusedRowIndex === rowIndex,
               isRowHovered: hoveredRowIndex === rowIndex,
-              selectedColor: selectedColor
+              selectedColor: selectedColor,
+              multiSelect: isMultiSelect,
+              showSelectAll: showSelectAll
             });
           } catch (e) {
             console.warn('Error formatting dropdown:', e);
@@ -43416,8 +43467,6 @@ const TableBody = /*#__PURE__*/forwardRef(({
         case "checkbox":
           try {
             const isChecked = Boolean(value);
-            // Check if this specific checkbox should be disabled
-            // Format: checkboxDisabled_{columnKey} or checkboxDisabled (for backward compatibility)
             const isDisabled = row[`checkboxDisabled_${column.key}`] === true || column.key && row[`checkboxDisabled_${column.key}`] === true;
             return /*#__PURE__*/React$1.createElement("div", {
               style: {
@@ -43470,8 +43519,6 @@ const TableBody = /*#__PURE__*/forwardRef(({
   const shouldShowTooltip = (element, content) => {
     return element && element.scrollWidth > element.clientWidth;
   };
-
-  // Handle expand click
   const handleExpandClick = (row, rowIndex, event) => {
     event.stopPropagation();
     if (onExpandRow) {
@@ -43479,8 +43526,6 @@ const TableBody = /*#__PURE__*/forwardRef(({
       onExpandRow(row, rowIndex, expandStatus);
     }
   };
-
-  // Handle checkbox click
   const handleCheckboxClick = (row, columnKey, event) => {
     event.stopPropagation();
     const currentValue = row[columnKey];
@@ -43497,8 +43542,6 @@ const TableBody = /*#__PURE__*/forwardRef(({
       });
     }
   };
-
-  // Handle dropdown click
   const handleDropdownClick = (rowIndex, columnKey, event) => {
     event.stopPropagation();
     const dropdownKey = `${rowIndex}-${columnKey}`;
@@ -43507,17 +43550,66 @@ const TableBody = /*#__PURE__*/forwardRef(({
       [dropdownKey]: !prev[dropdownKey]
     }));
   };
-
-  // Handle dropdown option selection
   const handleDropdownOptionClick = (row, rowIndex, columnKey, selectedOption, event) => {
     event.stopPropagation();
+    const column = columns.find(col => col.key === columnKey);
+    const isMultiSelect = column?.multiSelect !== false;
+    if (selectedOption.isSelectAll) {
+      const dropdownKey = `${rowIndex}-${columnKey}`;
+      if (selectedOption.value === 'all') {
+        const allValues = column.dropdownOptions.map(opt => opt.value);
+        if (onDropdownSelected) {
+          onDropdownSelected(row, {
+            value: allValues,
+            label: 'All Selected',
+            isSelectAll: true
+          }, columnKey);
+        }
+      } else {
+        if (onDropdownSelected) {
+          onDropdownSelected(row, {
+            value: [],
+            label: 'None Selected',
+            isSelectAll: true
+          }, columnKey);
+        }
+      }
+      if (isMultiSelect) {
+        setOpenDropdowns(prev => ({
+          ...prev,
+          [dropdownKey]: true
+        }));
+      } else {
+        setOpenDropdowns(prev => ({
+          ...prev,
+          [dropdownKey]: false
+        }));
+      }
+      return;
+    }
     const dropdownKey = `${rowIndex}-${columnKey}`;
-    setOpenDropdowns(prev => ({
-      ...prev,
-      [dropdownKey]: false
-    }));
-    if (onDropdownSelected) {
-      onDropdownSelected(row, selectedOption, columnKey);
+    if (isMultiSelect) {
+      const currentValues = Array.isArray(row[columnKey]) ? row[columnKey] : row[columnKey] ? [row[columnKey]] : [];
+      const newValues = currentValues.includes(selectedOption.value) ? currentValues.filter(v => v !== selectedOption.value) : [...currentValues, selectedOption.value];
+      if (onDropdownSelected) {
+        onDropdownSelected(row, {
+          ...selectedOption,
+          value: newValues,
+          selectedValues: newValues
+        }, columnKey);
+      }
+      setOpenDropdowns(prev => ({
+        ...prev,
+        [dropdownKey]: true
+      }));
+    } else {
+      setOpenDropdowns(prev => ({
+        ...prev,
+        [dropdownKey]: false
+      }));
+      if (onDropdownSelected) {
+        onDropdownSelected(row, selectedOption, columnKey);
+      }
     }
   };
   const handleEditableClick = (row, columnKey, currentValue, rowIndex) => {
@@ -43530,15 +43622,13 @@ const TableBody = /*#__PURE__*/forwardRef(({
       });
     }
   };
-
-  // 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
+      today.setHours(0, 0, 0, 0);
       date.setHours(0, 0, 0, 0);
       return date < today;
     } catch (error) {
@@ -43548,7 +43638,6 @@ const TableBody = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(StyledTableBody, {
     ref: ref
   }, data.map((row, rowIndex) => {
-    // Skip invalid rows
     if (!row || typeof row !== 'object') {
       console.warn(`Invalid row at index ${rowIndex}:`, row);
       return null;
@@ -43592,18 +43681,13 @@ const TableBody = /*#__PURE__*/forwardRef(({
       }
       let value, formattedValue;
       try {
-        // Support nested keys like "status.PackageStatusDescription"
         value = column.key.includes('.') ? getNestedValue(row, column.key) : row[column.key];
         formattedValue = formatValue(value, column, row, rowIndex) || "";
       } catch (e) {
         console.error("Error formatting value:", e);
         formattedValue = "";
       }
-
-      // Check if this is a text-based field for shimmer rendering
       const isTextBasedField = column.fieldType?.toLowerCase() === "text" || column.fieldType?.toLowerCase() === "currency" || column.fieldType?.toLowerCase() === "number" || column.fieldType?.toLowerCase() === "percentage" || column.fieldType?.toLowerCase() === "date" || !column.fieldType;
-
-      // Determine if shimmer should be applied
       const shouldShimmer = isTextBasedField && rowIndex === shimmerRowIndex && shimmerStartTime !== null;
       return /*#__PURE__*/React$1.createElement(TableCell, {
         key: `${column.key}-${rowIndex}`,