sag_components 2.0.0-beta194 → 2.0.0-beta195

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('');
@@ -12254,16 +12252,13 @@ const Td$1 = styled.td`
 `;
 const Tr = styled.tr`
   border-bottom: 1px solid #f3f4f6;
-  ${_ref => {
-  let {
-    enableHover,
-    selectHoverColor
-  } = _ref;
-  return enableHover && `&:hover {
+  ${({
+  enableHover,
+  selectHoverColor
+}) => enableHover && `&:hover {
       background-color: ${selectHoverColor};
       cursor: pointer;
-    }`;
-}}
+    }`}
 `;
 const InfoText = styled.div`
   font-weight: 400;
@@ -24165,22 +24160,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 +24571,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('');
@@ -35925,9 +35918,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 +37328,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 +37351,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 +37485,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 +37524,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 +37590,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 +37605,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 +37657,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 +37687,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 +37740,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 +55446,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