sag_components 2.0.0-beta304 → 2.0.0-beta306

package/dist/index.d.ts

@@ -422,7 +422,7 @@ declare namespace CollapseHeader {
     }
 }
 
-declare function QuickFilter({ hoverColor, multipleSelection, xIconShow, disabled, error, errorMessage, label, labelColor, placeHolder, width, height, checkBoxColor, dropdownHeight, onChange, options, selectedValue, }: {
+declare function QuickFilter({ hoverColor, multipleSelection, xIconShow, disabled, error, errorMessage, label, labelColor, placeHolder, optionHoverColor, selectedOptionColor, width, height, checkBoxColor, dropdownHeight, onChange, options, selectedValue, }: {
     hoverColor?: string;
     multipleSelection?: boolean;
     xIconShow?: boolean;
@@ -432,6 +432,8 @@ declare function QuickFilter({ hoverColor, multipleSelection, xIconShow, disable
     label?: string;
     labelColor?: string;
     placeHolder?: string;
+    optionHoverColor?: string;
+    selectedOptionColor?: string;
     width?: string;
     height?: string;
     checkBoxColor?: string;

package/dist/index.esm.js

@@ -3796,11 +3796,14 @@ const SearchInput$1 = props => {
     position = 'left',
     iconColor = '#212121',
     onTyping = () => {},
+    onClear = () => {},
+    clearTrigger,
     className
   } = props;
 
   // Use internal state for uncontrolled mode
   const [internalValue, setInternalValue] = useState(defaultValue);
+  const previousValueRef = useRef(defaultValue);
 
   // Determine if component is controlled
   const isControlled = controlledValue !== undefined;
@@ -3812,12 +3815,33 @@ const SearchInput$1 = props => {
       setInternalValue(defaultValue);
     }
   }, [defaultValue, isControlled]);
+
+  // Clear the input when clearTrigger changes (external clear trigger)
+  useEffect(() => {
+    if (clearTrigger !== undefined) {
+      setInternalValue('');
+    }
+  }, [clearTrigger]);
   const handleInputChange = e => {
+    const newValue = e.target.value;
+
+    // Detect native clear button click (value was non-empty, now empty, via input event)
+    if (previousValueRef.current && newValue === '') {
+      onClear();
+    }
+    previousValueRef.current = newValue;
     if (!isControlled) {
-      setInternalValue(e.target.value);
+      setInternalValue(newValue);
     }
     onTyping(e);
   };
+
+  // Handle the 'search' event which fires when native clear button is clicked
+  const handleSearch = e => {
+    if (e.target.value === '') {
+      onClear();
+    }
+  };
   return /*#__PURE__*/React$1.createElement(TextFieldContainer, {
     className: className,
     width: width
@@ -3832,6 +3856,7 @@ const SearchInput$1 = props => {
     height: height,
     placeholder: placeholder,
     onChange: handleInputChange,
+    onSearch: handleSearch,
     position: position
   }));
 };
@@ -24185,9 +24210,9 @@ const OptionItem$1 = styled.li`
   font-size: 14px;
   font-weight: 400;
   transition: background-color 0.3s;
-  background-color: ${props => props.selected ? '#C7E4FF' : '#fff'};
+  background-color: ${props => props.selected ? props.selectedOptionColor : '#fff'};
   &:hover {
-    background-color: #edf6ff;
+    background-color: ${props => props.optionHoverColor};
   }
   .highlight {
     color: #229e38;
@@ -24214,6 +24239,8 @@ const QuickFilterDropdownSingle = _ref => {
     options,
     selectedValue,
     placeHolder,
+    optionHoverColor = '#edf6ff',
+    selectedOptionColor = "#C7E4FF",
     onChange,
     disabled,
     width,
@@ -24399,7 +24426,9 @@ const QuickFilterDropdownSingle = _ref => {
     className: "OptionItem",
     key: option.value,
     onClick: () => toggleOption(option),
-    selected: isDropdowned(option)
+    selected: isDropdowned(option),
+    selectedOptionColor: selectedOptionColor,
+    optionHoverColor: optionHoverColor
   }, highlightText(option.label, inputValue))))));
 };
 QuickFilterDropdownSingle.propTypes = {
@@ -24407,6 +24436,8 @@ QuickFilterDropdownSingle.propTypes = {
   label: PropTypes.string,
   labelColor: PropTypes.string,
   hoverColor: PropTypes.string,
+  optionHoverColor: PropTypes.string,
+  selectedOptionColor: PropTypes.string,
   width: PropTypes.string,
   disabled: PropTypes.bool,
   error: PropTypes.bool,
@@ -24428,6 +24459,8 @@ QuickFilterDropdownSingle.defaultProps = {
   label: "Label",
   labelColor: "#066768",
   hoverColor: "#066768",
+  optionHoverColor: '#edf6ff',
+  selectedOptionColor: "#C7E4FF",
   width: "auto",
   disabled: false,
   error: false,
@@ -24612,7 +24645,7 @@ const OptionItem = styled.li`
   transition: background-color 0.3s;
 
   &:hover {
-    background-color: #EDF6FF;
+    background-color: ${props => props.optionHoverColor};
   }
 `;
 const ErrorMessage$1 = styled.div`
@@ -24689,6 +24722,7 @@ const QuickFilterDropdownMultiSelection = _ref => {
     error,
     errorMessage,
     labelColor,
+    optionHoverColor = '#edf6ff',
     xIconShow,
     checkBoxColor,
     showLabelOnTop,
@@ -24943,7 +24977,8 @@ const QuickFilterDropdownMultiSelection = _ref => {
     className: "OptionItem",
     key: option.value,
     onClick: () => toggleOption(option),
-    selected: isDropdowned(option)
+    selected: isDropdowned(option),
+    optionHoverColor: optionHoverColor
   }, /*#__PURE__*/React$1.createElement(IconContainer$2, {
     className: "IconContainer"
   }, selectedOptions.find(itemSelectedOptions => option.value === itemSelectedOptions.value) ? /*#__PURE__*/React$1.createElement(CheckBoxCheckedIcon, {
@@ -25026,6 +25061,8 @@ const QuickFilter = _ref => {
     label = "Unit Type:",
     labelColor = "#066768",
     placeHolder = "Select From List",
+    optionHoverColor = '#edf6ff',
+    selectedOptionColor = "#C7E4FF",
     width = "auto",
     height = "38px",
     checkBoxColor = "#229E38",
@@ -25043,6 +25080,7 @@ const QuickFilter = _ref => {
     label: label,
     labelColor: labelColor,
     checkBoxColor: checkBoxColor,
+    optionHoverColor: optionHoverColor,
     options: options,
     width: width,
     height: height,
@@ -25057,6 +25095,8 @@ const QuickFilter = _ref => {
     placeHolder: placeHolder,
     label: label,
     labelColor: labelColor,
+    optionHoverColor: optionHoverColor,
+    selectedOptionColor: selectedOptionColor,
     checkBoxColor: checkBoxColor,
     options: options,
     width: width,
@@ -35742,7 +35782,7 @@ const Label$3 = styled.label`
   if (props.isFocused || props.hasValue) {
     return '0px';
   }
-  return props.size === 'medium' ? '26px' : '17px';
+  return props.size === 'medium' ? '50%' : '17px';
 }};
   left: ${props => {
   if (props.multiline) {
@@ -37699,8 +37739,16 @@ const SearchInput = styled.input`
     }
 `;
 const ListWrapper = styled.div`
-    max-height: ${props => props.maxHeight || 'unset'};
-    overflow-y: auto;
+    max-height: ${props => {
+  const maxH = parseInt(props.maxHeight) || 400;
+  const actualH = (props.actualHeight || maxH) + 16;
+  return actualH < maxH ? `${actualH}px` : props.maxHeight;
+}};
+    overflow-y: ${props => {
+  const maxH = parseInt(props.maxHeight) || 400;
+  const actualH = (props.actualHeight || maxH) + 16;
+  return actualH < maxH ? 'hidden' : 'auto';
+}};
     position: relative;
 `;
 const CheckboxGroup = styled.div`
@@ -37745,6 +37793,7 @@ const CheckboxLabel = styled.label`
     color: #212121;
     cursor: pointer;
     flex-shrink: 0;
+    box-sizing: border-box;
     
     &:hover {
         background-color: #E6F0F0;   
@@ -37817,7 +37866,7 @@ const FilterPop = props => {
     selectedAttributes: propSelectedAttributes = {},
     showSearch = true,
     searchPlaceholder = "Search...",
-    itemHeight = 32,
+    itemHeight = 40,
     overscan = 5,
     hasActiveFilter = false // NEW: Indicates if this column has an active filter
   } = props;
@@ -37906,16 +37955,18 @@ const FilterPop = props => {
     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 gap = 8;
+    const itemWithGap = itemHeight + gap;
+    const startIndex = Math.max(0, Math.floor(scrollTop / itemWithGap) - overscan);
+    const endIndex = Math.min(sortedList.length, Math.ceil((scrollTop + containerHeight) / itemWithGap) + overscan);
     const visible = sortedList.slice(startIndex, endIndex).map((item, idx) => ({
       ...item,
       index: startIndex + idx
     }));
     return {
       visibleItems: visible,
-      totalHeight: (sortedList.length + 1) * (itemHeight + 8),
-      offsetY: startIndex * itemHeight
+      totalHeight: sortedList.length * itemHeight + Math.max(0, sortedList.length - 1) * gap,
+      offsetY: startIndex * itemWithGap
     };
   }, [sortedList, scrollTop, itemHeight, overscan, maxHeight]);
   const areAllNonAllItemsSelected = function () {
@@ -38115,7 +38166,8 @@ const FilterPop = props => {
   }), /*#__PURE__*/React$1.createElement(ListWrapper, {
     ref: scrollContainerRef,
     onScroll: handleScroll,
-    maxHeight: maxHeight
+    maxHeight: maxHeight,
+    actualHeight: totalHeight
   }, sortedList.length === 1 ? /*#__PURE__*/React$1.createElement(NoResultsMessage, null, "No items match your search") : /*#__PURE__*/React$1.createElement("div", {
     style: {
       height: `${totalHeight}px`,
@@ -40967,10 +41019,12 @@ const TableHeader = ({
   const debouncedFilterState = useDebounce(filterState, debounceDelay);
   const iconRefs = useRef({});
   const popupRef = useRef(null);
+  const prevResetKeyRef = useRef(resetFiltersKey);
 
-  // Reset internal state when resetFiltersKey changes
+  // Reset internal state when resetFiltersKey changes (not when columns change)
   useEffect(() => {
-    if (resetFiltersKey > 0) {
+    // Only run reset when resetFiltersKey actually changed
+    if (resetFiltersKey !== prevResetKeyRef.current && resetFiltersKey > 0) {
       const resetSelections = {};
       columns.forEach(column => {
         if (column.filter && column.filterOptions) {
@@ -40992,6 +41046,7 @@ const TableHeader = ({
       setVisibleFilterPopWrapper(null);
       setVisibleSortPopWrapper(null);
     }
+    prevResetKeyRef.current = resetFiltersKey;
   }, [resetFiltersKey, columns]);
 
   // Track if we've already initialized from saved state