sag_components 2.0.0-beta194 → 2.0.0-beta196

package/dist/index.esm.js

@@ -3772,7 +3772,7 @@ const TextFieldInput = styled.input`
   }
 `;
 
-const SearchInput = props => {
+const SearchInput$1 = props => {
   const {
     value,
     placeholder = 'Search',
@@ -3917,7 +3917,7 @@ const ActionsWrapper = styled.div`
   gap: 10px;
   width: 100%;
 `;
-const SearchInputWrap = styled(SearchInput)`
+const SearchInputWrap = styled(SearchInput$1)`
   margin-left: auto;
 `;
 
@@ -10579,24 +10579,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] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -11038,23 +11037,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] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -24165,22 +24163,21 @@ const DeleteIcon = styled.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] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24577,24 +24574,23 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    required,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    labelColor,
-    xIconShow,
-    checkBoxColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownMultiSelection = ({
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  required,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  labelColor,
+  xIconShow,
+  checkBoxColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -34726,6 +34722,8 @@ const ModalWithOverlay = props => {
   }, children)));
 };
 
+// src/components/WeeksPicker/WeeksCalendar.styles.js
+
 /* ──────────────────────────────────────────
    COLORS  – map to your design-system tokens
    Change only here if the palette shifts
@@ -34737,7 +34735,9 @@ const c = {
   primary: "#016672",
   // apply / highlight
   primaryLight: "#d1e7ea",
-  border: "#e0e0e0"
+  border: "#e0e0e0",
+  disabled: "#f5f5f5",
+  disabledText: "#bdbdbd"
 };
 
 /* ───────────────────────── wrapper */
@@ -34777,34 +34777,56 @@ const WeekCell = styled.div`
   text-align: center;
   cursor: pointer;
   color: ${c.textSecondary};
-  transition: background 0.15s ease;
-      border-radius: 4px;
+  transition: background 0.15s ease, opacity 0.15s ease, color 0.15s ease;
+  border-radius: 4px;
 
+  /* Disabled state - highest priority */
   ${({
-  $selected
-}) => $selected && css`
+  $disabled
+}) => $disabled && css`
+      opacity: 0.3;
+      cursor: not-allowed;
+      background: ${c.disabled} !important;
+      color: ${c.disabledText} !important;
+      
+      &:hover {
+        background: ${c.disabled} !important;
+        color: ${c.disabledText} !important;
+      }
+    `}
 
+  /* Selected state - only if not disabled */
+  ${({
+  $selected,
+  $disabled
+}) => $selected && !$disabled && css`
       background: ${c.primary};
       color: #FFFFFF;
     `}
 
-  /* highlight range interior lighter */
+  /* Range middle highlighting - only if not disabled */
   ${({
-  $isRangeMiddle
-}) => $isRangeMiddle && css`
+  $isRangeMiddle,
+  $disabled
+}) => $isRangeMiddle && !$disabled && css`
       background: ${c.primaryLight};
       border-radius: 0px;
       color: ${c.text};
     `}
 
-  &:hover {
-    background: ${c.primaryLight};
-    color: ${c.text};
-  }
+  /* Hover state - only if not disabled */
+  ${({
+  $disabled
+}) => !$disabled && css`
+      &:hover {
+        background: ${c.primaryLight};
+        color: ${c.text};
+      }
+    `}
+
+  /* Typography */
   text-align: center;
   font-feature-settings: "liga" off;
-
-  /* Content/P3 Regular */
   font-family: Poppins;
   font-size: 12px;
   font-style: normal;
@@ -34837,15 +34859,20 @@ css`
   }
 `;
 
+// src/components/WeeksPicker/WeeksCalendar.jsx
+
 /**
  * WeeksCalendar
  * -------------
  * Props
- * • year               – four-digit year (required)
- * • defaultStartWeek   – number | null
- * • defaultEndWeek     – number | null
- * • onApply(start,end) – callback, both numbers (inclusive)
- * • onCancel()         – callback
+ * • year               — four-digit year (required)
+ * • defaultStartWeek   — number | null
+ * • defaultEndWeek     — number | null
+ * • backgroundColor    — string (default: "#066768")
+ * • hoverBackgroundColor — string (default: "#E6F0F0")
+ * • allowedWeekRange   — { startWeek: number, endWeek: number } | null
+ * • onApply(start,end) — callback, both numbers (inclusive)
+ * • onCancel()         — callback
  */
 const WeeksCalendar = ({
   year,
@@ -34853,6 +34880,8 @@ const WeeksCalendar = ({
   defaultEndWeek = null,
   backgroundColor = "#066768",
   hoverBackgroundColor = "#E6F0F0",
+  allowedWeekRange = null,
+  // New prop for range restriction
   onApply,
   onCancel
 }) => {
@@ -34870,14 +34899,29 @@ const WeeksCalendar = ({
   const hasSelection = startWeek !== null;
   const isRange = hasSelection && endWeek !== null && endWeek !== startWeek;
   const weeks = useMemo(() => [...Array(53)].map((_, i) => i + 1), []);
+
+  // Check if a week is disabled based on allowed range
+  const isWeekDisabled = week => {
+    if (!allowedWeekRange) return false;
+    const {
+      startWeek: allowedStart,
+      endWeek: allowedEnd
+    } = allowedWeekRange;
+    return week < allowedStart || week > allowedEnd;
+  };
   const handleCellClick = week => {
-    // first click → start
+    // Don't allow selection of disabled weeks
+    if (isWeekDisabled(week)) {
+      return;
+    }
 
+    // first click → start
     if (!hasSelection) {
       setStartWeek(week);
       setEndWeek(null);
       return;
     }
+
     // second click → decide range or single
     if (hasSelection && endWeek === null) {
       // second click on same cell turns it to single selection
@@ -34890,6 +34934,7 @@ const WeeksCalendar = ({
       setStartWeek(week < startWeek ? week : startWeek);
       return;
     }
+
     // any later click resets selection and starts over
     setStartWeek(week);
     setEndWeek(null);
@@ -34905,11 +34950,14 @@ const WeeksCalendar = ({
     columns: 6
   }, weeks.map(wk => {
     const selected = wk === startWeek || isRange && wk >= startWeek && wk <= endWeek;
+    const disabled = isWeekDisabled(wk);
+    const isRangeMiddle = selected && wk !== startWeek && wk !== endWeek;
     return /*#__PURE__*/React$1.createElement(WeekCell, {
       key: wk,
       "data-week": wk,
       $selected: selected,
-      $isRangeMiddle: selected && wk !== startWeek && wk !== endWeek,
+      $isRangeMiddle: isRangeMiddle,
+      $disabled: disabled,
       onClick: () => handleCellClick(wk)
     }, wk);
   })), /*#__PURE__*/React$1.createElement(Footer, null, /*#__PURE__*/React$1.createElement(Button$1, {
@@ -34943,6 +34991,12 @@ WeeksCalendar.propTypes = {
   year: PropTypes.number.isRequired,
   defaultStartWeek: PropTypes.number,
   defaultEndWeek: PropTypes.number,
+  backgroundColor: PropTypes.string,
+  hoverBackgroundColor: PropTypes.string,
+  allowedWeekRange: PropTypes.shape({
+    startWeek: PropTypes.number.isRequired,
+    endWeek: PropTypes.number.isRequired
+  }),
   onApply: PropTypes.func.isRequired,
   onCancel: PropTypes.func
 };
@@ -34969,22 +35023,28 @@ const StyledInput$1 = styled.input`
   box-sizing: border-box;
   color: ${props => props.disabled ? '#888' : (props.isFocused || props.value ? props.textColor : '#757575') || '#333'};
   cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
+  
+  &:disabled {
+    background-color: #f5f5f5;
+    cursor: not-allowed;
+  }
 `;
 const StyledLabel = styled.label`
   font-size: 14px;
-  /* width: ${props => props.isFocused || props.hasValue ? 'auto' : '150px'}; */
   color: ${props => props.disabled ? '#888' : (props.isFocused || props.hasValue ? props.borderColorFocus : '#757575') || '#333'};
   position: absolute;
   top: ${props => props.isFocused || props.hasValue ? '0px' : '50%'};
   left: 15px;
   background-color: ${props => props.isFocused || props.hasValue ? 'white' : 'transparent'};
   transform: translateY(-50%);
-  transition: top 0.3s ease, font-size 0.3s ease;
+  transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
   display: flex;
   font-weight: 400;
   align-items: center;
   box-sizing: border-box;
-  cursor: pointer;
+  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+  padding: 0 4px;
+  z-index: 1;
 `;
 const RequiredIndicator = styled.span`
   color: red;
@@ -35000,9 +35060,13 @@ const OptionsContainer = styled.div`
   z-index: 999;
   ${props => props.showAbove ? `
     bottom: 100%;
+    margin-bottom: 4px;
   ` : `
     top: 100%;
+    margin-top: 4px;
   `}
+  left: 0;
+  right: 0;
 `;
 const InputContainer$1 = styled.div`
   display: flex;       
@@ -35015,20 +35079,22 @@ const InputContainer$1 = styled.div`
   width: 100%;
   height: 100%;    
   box-sizing: border-box;
-  background-color: transparent;    
-  border:  1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1'};
+  background-color: ${props => props.disabled ? '#f5f5f5' : 'transparent'};    
+  border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1'};
   font-weight: 400;
   font-size: 14px;
   border-radius: 12px;
   outline: none;
   color: ${props => props.disabled ? '#888' : '#212121'};
+  position: relative;
+  transition: border-color 0.3s ease, background-color 0.3s ease;
    
   &:hover {
     border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColorFocus || '#212121'};
     cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
   }
 
-  &:focus {  
+  &:focus-within {  
     border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColorFocus || '#212121'}; 
   }
 `;
@@ -35038,6 +35104,11 @@ const CalendarDiv = styled.div`
   right: 10px;
   display: flex;
   align-items: center;
+  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+  
+  svg {
+    transition: fill 0.3s ease;
+  }
 `;
 
 // src/components/WeeksPicker/WeeksPicker.jsx
@@ -35057,7 +35128,11 @@ const WeeksPicker = _ref => {
     height,
     withMarginBottom = true,
     onChange,
-    selectedValue
+    selectedValue,
+    // New props for range restriction
+    allowedWeekRange = null,
+    // { startWeek: number, endWeek: number } or null
+    restrictToRange = false // boolean to enable/disable restriction
   } = _ref;
   const [value, setValue] = useState("");
   const inputRef = useRef(null);
@@ -35100,6 +35175,18 @@ const WeeksPicker = _ref => {
     };
   };
 
+  // Validate if selected weeks are within allowed range
+  const validateWeekSelection = (startWeek, endWeek) => {
+    if (!restrictToRange || !allowedWeekRange) {
+      return true;
+    }
+    const {
+      startWeek: allowedStart,
+      endWeek: allowedEnd
+    } = allowedWeekRange;
+    return startWeek >= allowedStart && endWeek <= allowedEnd && startWeek <= endWeek;
+  };
+
   // Get current parsed weeks from value
   const {
     startWeek: currentStartWeek,
@@ -35140,15 +35227,43 @@ const WeeksPicker = _ref => {
       }
     }
   }, [isOpen]);
+
+  // Validate and clear invalid selections when allowedWeekRange changes
+  useEffect(() => {
+    if (restrictToRange && allowedWeekRange && value) {
+      const {
+        startWeek,
+        endWeek
+      } = parseValueToWeeks(value);
+      if (startWeek && endWeek && !validateWeekSelection(startWeek, endWeek)) {
+        // Clear invalid selection
+        setValue("");
+        onChange("");
+      }
+    }
+  }, [allowedWeekRange, restrictToRange]);
   const handleToggle = () => {
     setIsOpen(!isOpen);
   };
   const onChangeEvent = e => {
-    onChange(e.target.value);
-    setValue(e.target.value);
+    const newValue = e.target.value;
+
+    // If restriction is enabled, validate the manual input
+    if (restrictToRange && allowedWeekRange && newValue) {
+      const {
+        startWeek,
+        endWeek
+      } = parseValueToWeeks(newValue);
+      if (startWeek && endWeek && !validateWeekSelection(startWeek, endWeek)) {
+        // Don't update if selection is outside allowed range
+        return;
+      }
+    }
+    onChange(newValue);
+    setValue(newValue);
   };
   useEffect(() => {
-    if (selectedValue) {
+    if (selectedValue !== undefined) {
       setValue(selectedValue);
     }
   }, [selectedValue]);
@@ -35223,8 +35338,17 @@ const WeeksPicker = _ref => {
     defaultStartWeek: currentStartWeek,
     defaultEndWeek: currentEndWeek,
     backgroundColor: borderColorFocus,
-    hoverBackgroundColor: hoverColor,
+    hoverBackgroundColor: hoverColor
+    // Pass restriction parameters to WeeksCalendar
+    ,
+    allowedWeekRange: restrictToRange ? allowedWeekRange : null,
     onApply: (start, end) => {
+      // Validate selection before applying
+      if (restrictToRange && allowedWeekRange && !validateWeekSelection(start, end)) {
+        // Show error or prevent selection
+        console.warn('Selected weeks are outside the allowed range');
+        return;
+      }
       const tempValue = end === start ? `Week ${start}` : `Weeks ${start} - ${end}`;
       onChange(tempValue);
       setValue(tempValue);
@@ -35925,9 +36049,9 @@ const ToggleSlider = styled.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 {
@@ -37335,11 +37459,15 @@ const FilterPopContainer = styled.div`
     font-family: 'Poppins', sans-serif;
     width: ${props => props.width || '300px'};
     height: ${props => props.height || 'auto'};
+    max-height: ${props => props.maxHeight || '400px'};
     padding: 8px;
     color: #212121;
     background-color: #fff;
     border-radius: 4px;
     box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.10);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
     
     /* Add this CSS for checkbox styling */
     input[type="checkbox"] {
@@ -37354,52 +37482,133 @@ const Title$5 = styled.h6`
     padding: 4px 12px;
     margin: 0 0 10px;
     text-align: left;
+    flex-shrink: 0;
+`;
+const SearchInput = styled.input`
+    width: 100%;
+    padding: 8px 12px;
+    margin: 0 0 12px;
+    font-size: 14px;
+    font-family: 'Poppins', sans-serif;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    background-color: #fff;
+    color: #212121;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    
+    &::placeholder {
+        color: #999;
+        font-style: italic;
+    }
+    
+    &:focus {
+        outline: none;
+        border-color: ${props => props.accentColor || '#066768'};
+        box-shadow: 0 0 0 2px ${props => props.accentColor || '#066768'}20;
+    }
+    
+    &:hover {
+        border-color: #c0c0c0;
+    }
 `;
 const CheckboxGroup = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-bottom: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 16px;
+    overflow-y: auto;
+    flex: 1;
+    min-height: 0;
+    
+    /* Custom scrollbar styling */
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+    
+    &::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 3px;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+        background: #c1c1c1;
+        border-radius: 3px;
+    }
+    
+    &::-webkit-scrollbar-thumb:hover {
+        background: #a8a8a8;
+    }
+    
+    /* For Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: #c1c1c1 #f1f1f1;
 `;
 const CheckboxLabel = styled.label`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  font-size: 14px;
-  font-weight: 400;
-  color: #212121;
-  cursor: pointer;
-  
-  &:hover {
-    background-color: #E6F0F0;   
-  }
-  
-  > span {
-    width: ${props => props.width};
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #212121;
+    cursor: pointer;
+    flex-shrink: 0;
+    
+    &:hover {
+        background-color: #E6F0F0;   
+    }
+    
+    > span {
+        width: ${props => props.width};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+`;
+const NoResultsMessage = styled.div`
+    padding: 16px 12px;
+    text-align: center;
+    color: #999;
+    font-size: 14px;
+    font-style: italic;
 `;
 const ButtonWrapper$2 = styled.div`
     text-align: right;
+    flex-shrink: 0;
+    padding-top: 8px;
+    border-top: 1px solid #e0e0e0;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
 `;
 const ResetButton$1 = styled.button`
     font-size: 14px;
     font-weight: 400;
-    padding: 2px 8px;
+    padding: 4px 8px;
     background-color: transparent;
     border: none;
     cursor: pointer;
+    border-radius: 3px;
+    
+    &:hover {
+        background-color: #f0f0f0;
+        color: #066768;
+    }
 
-  &:hover {
-    // color: #066768;
-  }
-
-  &:active {
-    // color: #066768;
-  }
+    &:active {
+        color: #066768;
+    }
+    
+    &:disabled {
+        color: #ccc;
+        cursor: not-allowed;
+        
+        &:hover {
+            background-color: transparent;
+            color: #ccc;
+        }
+    }
 `;
 
 const FilterPop = props => {
@@ -37407,15 +37616,22 @@ const FilterPop = props => {
     menuName = '',
     width = 'auto',
     height = 'auto',
+    maxHeight = '400px',
     list = [],
     color = '#007bff',
     onCheck = () => {},
     onReset = () => {},
     doubleColumn = false,
     isAsc = true,
-    selectedAttributes: propSelectedAttributes = {} // Receive from parent
+    selectedAttributes: propSelectedAttributes = {},
+    showSearch = true,
+    // New prop to enable/disable search
+    searchPlaceholder = 'Search...' // New prop for search placeholder
   } = props;
 
+  // State for search term
+  const [searchTerm, setSearchTerm] = useState('');
+
   // Add hardcoded "Select All" as first item
   const fullList = [{
     value: 'All',
@@ -37439,18 +37655,49 @@ const FilterPop = props => {
     return fullList.filter(item => item.value !== 'All');
   };
 
-  // Helper function to check if all non-"All" items are selected
+  // Filter items based on search term
+  const filteredList = useMemo(() => {
+    if (!searchTerm.trim()) {
+      return fullList;
+    }
+    const searchLower = searchTerm.toLowerCase().trim();
+    const filteredNonAllItems = fullList.filter(item => {
+      if (item.value === 'All') return false; // Don't filter out "Select All" in search
+      return item.label.toLowerCase().includes(searchLower);
+    });
+
+    // Always include "Select All" at the top when searching
+    return [fullList.find(item => item.value === 'All'), ...filteredNonAllItems];
+  }, [fullList, searchTerm]);
+
+  // Sort the filtered list based on the `isAsc` prop, keeping 'All' as the first option
+  const sortedList = 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 based on ALL items (not just filtered)
   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 function to check if any non-"All" items are selected
-  const areAnyNonAllItemsSelected = function () {
+  // Helper functions for visible filtered items
+  const getVisibleNonAllItems = () => {
+    return sortedList.filter(item => item.value !== 'All');
+  };
+  const areAllVisibleItemsSelected = function () {
     let attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : selectedAttributes;
-    const nonAllItems = getNonAllItems();
-    return nonAllItems.some(item => attributes[item.value]);
+    const visibleItems = getVisibleNonAllItems();
+    if (visibleItems.length === 0) return false;
+    return visibleItems.every(item => attributes[item.value]);
+  };
+  const areAnyVisibleItemsSelected = function () {
+    let attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : selectedAttributes;
+    const visibleItems = getVisibleNonAllItems();
+    return visibleItems.some(item => attributes[item.value]);
   };
 
   // New helper function to create the efficient data structure
@@ -37474,14 +37721,12 @@ const FilterPop = props => {
         isSelectAll: false
       };
     } else if (mostSelected) {
-      // More items selected than unselected - use exclude approach
       return {
         excluded: unselectedItems.map(item => item.value),
         included: [],
         isSelectAll: true
       };
     } else {
-      // Fewer items selected than unselected - use include approach
       return {
         excluded: [],
         included: selectedItems.map(item => item.value),
@@ -37491,47 +37736,50 @@ const FilterPop = props => {
   };
   const handleCheckboxChange = attribute => {
     if (attribute === 'All') {
-      // If "Select All" is clicked - determine new state based on current "Select All" state
-      const currentSelectAllState = selectedAttributes.All || false;
-      const newState = !currentSelectAllState;
-      const updatedAttributes = {};
+      // "Select All" behavior - affects ALL visible filtered items
+      const visibleNonAllItems = getVisibleNonAllItems();
+      const allVisibleSelected = areAllVisibleItemsSelected();
 
-      // Set all items to the same state as "Select All"
-      fullList.forEach(item => {
-        updatedAttributes[item.value] = newState;
+      // Toggle all visible items
+      const updatedAttributes = {
+        ...selectedAttributes
+      };
+      visibleNonAllItems.forEach(item => {
+        updatedAttributes[item.value] = !allVisibleSelected;
       });
 
-      // Call onCheck callback with new efficient structure
+      // Update "Select All" state based on all items (not just visible)
+      updatedAttributes.All = areAllNonAllItemsSelected(updatedAttributes);
       const filterData = createFilterData(updatedAttributes);
       onCheck({
         changedItem: attribute,
         filterData: filterData,
-        allItems: updatedAttributes // Keep for backward compatibility if needed
+        allItems: updatedAttributes
       });
     } else {
-      // If any other item is clicked
+      // Individual item clicked
       const updatedAttributes = {
         ...selectedAttributes,
         [attribute]: !selectedAttributes[attribute]
       };
 
-      // Call onCheck callback with new efficient structure
+      // Update "Select All" state based on all items
+      updatedAttributes.All = areAllNonAllItemsSelected(updatedAttributes);
       const filterData = createFilterData(updatedAttributes);
       onCheck({
         changedItem: attribute,
         filterData: filterData,
-        allItems: updatedAttributes // Keep for backward compatibility if needed
+        allItems: updatedAttributes
       });
     }
   };
   const handleReset = () => {
+    // Clear search when resetting
+    setSearchTerm('');
+
     // Reset to the original default state (all selected)
     const resetState = createInitialState();
-
-    // Call the onReset callback
     onReset();
-
-    // Also call onCheck to notify parent of the reset with new efficient structure
     const filterData = createFilterData(resetState);
     onCheck({
       changedItem: 'reset',
@@ -37540,17 +37788,24 @@ const FilterPop = props => {
     });
   };
 
-  // Function to determine checkbox state for "Select All"
+  // Function to determine checkbox state for "Select All" based on visible items
   const getSelectAllCheckboxProps = () => {
-    const allSelected = areAllNonAllItemsSelected();
-    const anySelected = areAnyNonAllItemsSelected();
-    const noneSelected = !anySelected;
-    if (allSelected) {
+    const visibleItems = getVisibleNonAllItems();
+    if (visibleItems.length === 0) {
+      return {
+        checked: false,
+        indeterminate: false
+      };
+    }
+    const allVisibleSelected = areAllVisibleItemsSelected();
+    const anyVisibleSelected = areAnyVisibleItemsSelected();
+    const noneVisibleSelected = !anyVisibleSelected;
+    if (allVisibleSelected) {
       return {
         checked: true,
         indeterminate: false
       };
-    } else if (noneSelected) {
+    } else if (noneVisibleSelected) {
       return {
         checked: false,
         indeterminate: false
@@ -37563,38 +37818,50 @@ const FilterPop = props => {
     }
   };
 
-  // Sort the list based on the `isAsc` prop, keeping 'All' as the first option
-  const sortedList = [...fullList.filter(item => item.value === 'All'), ...fullList.filter(item => item.value !== 'All').sort((a, b) => {
-    return isAsc ? a.label.localeCompare(b.label) : b.label.localeCompare(a.label);
-  })];
+  // Handle search input change
+  const handleSearchChange = e => {
+    setSearchTerm(e.target.value);
+  };
+
+  // Clear search
+  const clearSearch = () => {
+    setSearchTerm('');
+  };
   return /*#__PURE__*/React$1.createElement(FilterPopContainer, {
     width: width,
     height: height,
-    accentColor: color // Pass color as prop to styled component
-  }, /*#__PURE__*/React$1.createElement(Title$5, null, menuName), /*#__PURE__*/React$1.createElement(CheckboxGroup, {
+    maxHeight: maxHeight,
+    accentColor: color
+  }, /*#__PURE__*/React$1.createElement(Title$5, null, menuName), showSearch && /*#__PURE__*/React$1.createElement(SearchInput, {
+    type: "text",
+    placeholder: searchPlaceholder,
+    value: searchTerm,
+    onChange: handleSearchChange,
+    accentColor: color
+  }), /*#__PURE__*/React$1.createElement(CheckboxGroup, {
     style: {
       display: doubleColumn ? 'grid' : 'flex',
       gridTemplateColumns: doubleColumn ? '1fr 1fr' : 'none',
       gap: '8px'
     }
-  }, sortedList.map(item => {
+  }, sortedList.length === 1 ?
+  /*#__PURE__*/
+  // Only "Select All" is visible
+  React$1.createElement(NoResultsMessage, null, "No items match your search") : sortedList.map(item => {
     const isSelectAll = item.value === 'All';
     const checkboxProps = isSelectAll ? getSelectAllCheckboxProps() : {};
     const isChecked = isSelectAll ? checkboxProps.checked : selectedAttributes[item.value] || false;
     return /*#__PURE__*/React$1.createElement(CheckboxLabel, {
       width: !doubleColumn ?? width,
-      key: `${item.value}-${JSON.stringify(selectedAttributes)}`
+      key: `${item.value}-${JSON.stringify(selectedAttributes)}-${searchTerm}`
     }, /*#__PURE__*/React$1.createElement("input", {
       type: "checkbox",
       checked: isChecked,
       ref: el => {
         if (el) {
-          // Handle indeterminate for Select All FIRST
           if (isSelectAll) {
             el.indeterminate = checkboxProps.indeterminate;
           }
-
-          // FORCE DOM SYNC - manually set DOM state to match React state
           if (el.checked !== isChecked) {
             el.checked = isChecked;
           }
@@ -37604,7 +37871,12 @@ const FilterPop = props => {
         handleCheckboxChange(item.value);
       }
     }), /*#__PURE__*/React$1.createElement("span", null, item.label));
-  })), /*#__PURE__*/React$1.createElement(ButtonWrapper$2, null, /*#__PURE__*/React$1.createElement(ResetButton$1, {
+  })), /*#__PURE__*/React$1.createElement(ButtonWrapper$2, null, showSearch && searchTerm && /*#__PURE__*/React$1.createElement(ResetButton$1, {
+    onClick: clearSearch,
+    style: {
+      marginRight: '8px'
+    }
+  }, "Clear Search"), /*#__PURE__*/React$1.createElement(ResetButton$1, {
     onClick: handleReset,
     disabled: areAllNonAllItemsSelected() && selectedAttributes.All
   }, "Reset")));
@@ -55305,5 +55577,5 @@ const Tag = props => {
   }, /*#__PURE__*/React$1.createElement("span", null, text || template?.text));
 };
 
-export { AdvancedThresholds, Analytics, AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Budgets, Build, Button$1 as Button, Campaigns, CheckBox, CollapseData, CollapseHeader, ContainerTable, Coupons, CustomerSegments, Dashboard, DialogOverlay$1 as DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, DropdownNew, EventDetailsCard, EventList, Execute, FilterPanel, FilterPop, GroupBuilder, Heatmap, IconButton$1 as IconButton, Input$2 as Input, InsightsCarousel, ItemManagerPanel, ItemsStores, LinkButton, LinnerDataBox, MarketShareDescription, MenuRoute, MessageBox, ModalDrawer, ModalWithOverlay, OneColumnContainer, OverlayDropdown, PerformanceAnalyticsLegend, PieChart, PopupCharts, PreTestWhatIf, QuickFilter, QuickFilterCards, RangePicker, RangePop, ReportTable, RulesEngine, SampleRunEngine, SearchInput, SingleBarLineCharts, SortPop, TabMenu, Table, Tag, ToasterMessageBox, ToggleSwitch, Tooltip$2 as Tooltip, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, Track, TwoBarCharts, WeeksPicker };
+export { AdvancedThresholds, Analytics, AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Budgets, Build, Button$1 as Button, Campaigns, CheckBox, CollapseData, CollapseHeader, ContainerTable, Coupons, CustomerSegments, Dashboard, DialogOverlay$1 as DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, DropdownNew, EventDetailsCard, EventList, Execute, FilterPanel, FilterPop, GroupBuilder, Heatmap, IconButton$1 as IconButton, Input$2 as Input, InsightsCarousel, ItemManagerPanel, ItemsStores, LinkButton, LinnerDataBox, MarketShareDescription, MenuRoute, MessageBox, ModalDrawer, ModalWithOverlay, OneColumnContainer, OverlayDropdown, PerformanceAnalyticsLegend, PieChart, PopupCharts, PreTestWhatIf, QuickFilter, QuickFilterCards, RangePicker, RangePop, ReportTable, RulesEngine, SampleRunEngine, SearchInput$1 as SearchInput, SingleBarLineCharts, SortPop, TabMenu, Table, Tag, ToasterMessageBox, ToggleSwitch, Tooltip$2 as Tooltip, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, Track, TwoBarCharts, WeeksPicker };
 //# sourceMappingURL=index.esm.js.map