sag_components 2.0.0-beta173 → 2.0.0-beta175

package/dist/index.esm.js

@@ -449,6 +449,25 @@ const Calendar = () => /*#__PURE__*/React$1.createElement("svg", {
   fill: "#568202"
 }));
 
+// eslint-disable-next-line react/prop-types
+const ErrorIcon = _ref => {
+  let {
+    color = '#FF3949',
+    width = '18',
+    height = '18'
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 14 13",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M7 1.625C5.24219 1.625 3.64844 2.5625 2.75781 4.0625C1.89062 5.58594 1.89062 7.4375 2.75781 8.9375C3.64844 10.4609 5.24219 11.375 7 11.375C8.73438 11.375 10.3281 10.4609 11.2188 8.9375C12.0859 7.4375 12.0859 5.58594 11.2188 4.0625C10.3281 2.5625 8.73438 1.625 7 1.625ZM7 12.5C4.84375 12.5 2.875 11.375 1.79688 9.5C0.71875 7.64844 0.71875 5.375 1.79688 3.5C2.875 1.64844 4.84375 0.5 7 0.5C9.13281 0.5 11.1016 1.64844 12.1797 3.5C13.2578 5.375 13.2578 7.64844 12.1797 9.5C11.1016 11.375 9.13281 12.5 7 12.5ZM7 3.5C7.30469 3.5 7.5625 3.75781 7.5625 4.0625V6.6875C7.5625 7.01562 7.30469 7.25 7 7.25C6.67188 7.25 6.4375 7.01562 6.4375 6.6875V4.0625C6.4375 3.75781 6.67188 3.5 7 3.5ZM7.75 8.75C7.75 9.17188 7.39844 9.5 7 9.5C6.57812 9.5 6.25 9.17188 6.25 8.75C6.25 8.35156 6.57812 8 7 8C7.39844 8 7.75 8.35156 7.75 8.75Z",
+    fill: color
+  }));
+};
+
 const ChervronRightIcon = _ref => {
   let {
     width = "8",
@@ -10429,23 +10448,24 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = ({
-  availableQuarters,
-  // ["Q1-2024"]
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const QuarterPicker = _ref => {
+  let {
+    availableQuarters,
+    // ["Q1-2024"]
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -10887,22 +10907,23 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = ({
-  availableMonths,
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const MonthPicker = _ref => {
+  let {
+    availableMonths,
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -34199,25 +34220,6 @@ const InsightsCarousel = _ref => {
   })))));
 };
 
-// eslint-disable-next-line react/prop-types
-const ErrorIcon = _ref => {
-  let {
-    color = '#FF3949',
-    width = '18',
-    height = '18'
-  } = _ref;
-  return /*#__PURE__*/React$1.createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 14 13",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React$1.createElement("path", {
-    d: "M7 1.625C5.24219 1.625 3.64844 2.5625 2.75781 4.0625C1.89062 5.58594 1.89062 7.4375 2.75781 8.9375C3.64844 10.4609 5.24219 11.375 7 11.375C8.73438 11.375 10.3281 10.4609 11.2188 8.9375C12.0859 7.4375 12.0859 5.58594 11.2188 4.0625C10.3281 2.5625 8.73438 1.625 7 1.625ZM7 12.5C4.84375 12.5 2.875 11.375 1.79688 9.5C0.71875 7.64844 0.71875 5.375 1.79688 3.5C2.875 1.64844 4.84375 0.5 7 0.5C9.13281 0.5 11.1016 1.64844 12.1797 3.5C13.2578 5.375 13.2578 7.64844 12.1797 9.5C11.1016 11.375 9.13281 12.5 7 12.5ZM7 3.5C7.30469 3.5 7.5625 3.75781 7.5625 4.0625V6.6875C7.5625 7.01562 7.30469 7.25 7 7.25C6.67188 7.25 6.4375 7.01562 6.4375 6.6875V4.0625C6.4375 3.75781 6.67188 3.5 7 3.5ZM7.75 8.75C7.75 9.17188 7.39844 9.5 7 9.5C6.57812 9.5 6.25 9.17188 6.25 8.75C6.25 8.35156 6.57812 8 7 8C7.39844 8 7.75 8.35156 7.75 8.75Z",
-    fill: color
-  }));
-};
-
 // eslint-disable-next-line react/prop-types
 const SucceededIcon = _ref => {
   let {
@@ -35614,9 +35616,12 @@ const ToggleSwitchLabel = styled.label`
   position: relative;
   cursor: pointer;
   user-select: none;
-  opacity: ${({
-  disabled
-}) => disabled ? 0.5 : 1};
+  opacity: ${_ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled ? 0.5 : 1;
+}};
 `;
 const ToggleInput = styled.input`
   display: none;
@@ -35624,15 +35629,19 @@ const ToggleInput = styled.input`
 const ToggleSlider = styled.span`
   display: block;
   position: relative;
-  background: ${({
-  checked,
-  disabled
-}) => checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc"};
+  background: ${_ref2 => {
+  let {
+    checked,
+    disabled
+  } = _ref2;
+  return checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc";
+}};
   border-radius: 999px;
   transition: background 0.2s;
-  ${({
-  size
-}) => {
+  ${_ref3 => {
+  let {
+    size
+  } = _ref3;
   switch (size) {
     case "s":
       return css`width: 40px; height: 20px;`;
@@ -35651,9 +35660,10 @@ const ToggleSlider = styled.span`
     background: #fff;
     border-radius: 50%;
     transition: left 0.2s, width 0.2s, height 0.2s;
-    ${({
-  size
-}) => {
+    ${_ref4 => {
+  let {
+    size
+  } = _ref4;
   switch (size) {
     case "s":
       return css`width: 14px; height: 14px;`;
@@ -35663,10 +35673,11 @@ const ToggleSlider = styled.span`
       return css`width: 20px; height: 20px;`;
   }
 }}
-    left: ${({
-  checked,
-  size
-}) => {
+    left: ${_ref5 => {
+  let {
+    checked,
+    size
+  } = _ref5;
   if (!checked) return "3px";
   switch (size) {
     case "s":
@@ -38731,13 +38742,13 @@ const ExpandedContent = styled.div`
 `;
 
 // DROPDOWN STYLES
-const DropdownContainer$1 = styled.div`
+styled.div`
   position: relative;
   display: inline-block;
   width: 100%;
   font-family: "Poppins", sans-serif;
 `;
-const DropdownButton$1 = styled.button`
+styled.button`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -38770,7 +38781,7 @@ const DropdownButton$1 = styled.button`
     flex: 1;
   }
 `;
-const DropdownIcon = styled.div`
+styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -38785,7 +38796,7 @@ const DropdownIcon = styled.div`
     transform: rotate(180deg);
   `}
 `;
-const DropdownMenu = styled.div`
+styled.div`
   position: absolute;
   top: calc(100%);
   left: 0;
@@ -38818,7 +38829,7 @@ const DropdownMenu = styled.div`
     background: #94a3b8;
   }
 `;
-const DropdownOption = styled.div`
+styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -39066,6 +39077,177 @@ const DisabledTrashIcon = ({
   }));
 };
 
+// DROPDOWN STYLES
+const DropdownContainer$1 = styled.div`
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  font-family: "Poppins", sans-serif;
+`;
+const DropdownButton$1 = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-width: 120px;  
+  background-color: ${props => props.$isRowFocused || props.$isRowHovered ? props.$selectedColor : "white"};
+  border: none;
+  border-radius: 0;
+  font-family: "Poppins", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  color: #212121;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    background-color: #D1E7E7;
+  }
+  
+  &:focus {
+    outline: none;
+    background-color: #E6F0F0;
+  }
+  
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: left;
+    flex: 1;
+  }
+`;
+const DropdownIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  background-color: ${props => props.$isRowFocused || props.$isRowHovered ? '#B4D1D2' : 'white'};
+  border-radius: 4px;
+  margin-left: 8px;
+  transition: all 0.2s ease;
+  
+  ${props => props.$isOpen && `
+    transform: rotate(180deg);
+  `}
+`;
+const DropdownMenu = styled.div`
+  position: absolute;
+  top: calc(100%);
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: white;
+  border: none;
+  border-radius: 0;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  font-family: "Poppins", sans-serif;
+  max-height: ${props => props.$maxDropdownHeight || '200px'};
+  overflow-y: auto;
+  padding: 16px;
+  
+  /* Custom scrollbar */
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 2px;
+  }
+  
+  &::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+  }
+`;
+const DropdownOption = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #374151;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  border-radius: 0;
+  border-left: 3px solid transparent;
+  background-color: white;
+  
+  &:hover {
+    background-color: #E6F0F0;
+  }
+  
+  ${props => props.$isSelected && `
+    background-color: #B4D1D2;
+    color: #374151;
+    font-weight: 500;
+    border-left: 3px solid #066768;
+    
+    &:hover {
+      background-color: #A3C9CA;
+    }
+  `}
+`;
+
+const Dropdown = ({
+  isOpen,
+  options,
+  selectedValue,
+  displayText,
+  onToggle,
+  onOptionSelect,
+  maxDropdownHeight,
+  isRowFocused = false,
+  isRowHovered = false,
+  selectedColor
+}) => {
+  return /*#__PURE__*/React$1.createElement(DropdownContainer$1, null, /*#__PURE__*/React$1.createElement(DropdownButton$1, {
+    onClick: onToggle,
+    $isOpen: isOpen,
+    $isRowFocused: isRowFocused,
+    $selectedColor: selectedColor
+  }, /*#__PURE__*/React$1.createElement("span", null, displayText), /*#__PURE__*/React$1.createElement(DropdownIcon, {
+    $isOpen: isOpen,
+    $isRowFocused: isRowFocused,
+    $isRowHovered: isRowHovered
+  }, /*#__PURE__*/React$1.createElement(MenuItemOpenIcon, {
+    width: "10",
+    height: "6",
+    color: "#212121"
+  }))), isOpen && /*#__PURE__*/React$1.createElement(DropdownMenu, {
+    $maxDropdownHeight: maxDropdownHeight
+  }, 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, {
+    width: "24",
+    height: "24",
+    color: "#066768"
+  })))));
+};
+Dropdown.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired
+  })).isRequired,
+  selectedValue: PropTypes.string,
+  displayText: PropTypes.string.isRequired,
+  onToggle: PropTypes.func.isRequired,
+  onOptionSelect: PropTypes.func.isRequired,
+  maxDropdownHeight: PropTypes.string,
+  isRowFocused: PropTypes.bool,
+  isRowHovered: PropTypes.bool,
+  selectedColor: PropTypes.string
+};
+
 // TableBody.jsx
 const TableBody = ({
   columns,
@@ -39455,30 +39637,18 @@ const TableBody = ({
         // Find the current selected option to display its label
         const currentOption = dropdownOptions.find(option => option.value === value);
         const displayText = currentOption ? currentOption.label : value || 'Select...';
-        return /*#__PURE__*/React$1.createElement(DropdownContainer$1, null, /*#__PURE__*/React$1.createElement(DropdownButton$1, {
-          onClick: e => handleDropdownClick(rowIndex, column.key, e),
-          $isOpen: isOpen,
-          $isRowFocused: focusedRowIndex === rowIndex,
-          $selectedColor: selectedColor
-        }, /*#__PURE__*/React$1.createElement("span", null, displayText), /*#__PURE__*/React$1.createElement(DropdownIcon, {
-          $isOpen: isOpen,
-          $isRowFocused: focusedRowIndex === rowIndex,
-          $isRowHovered: hoveredRowIndex === rowIndex
-        }, /*#__PURE__*/React$1.createElement(MenuItemOpenIcon, {
-          width: "10",
-          height: "6",
-          color: "#212121"
-        }))), isOpen && /*#__PURE__*/React$1.createElement(DropdownMenu, {
-          $maxDropdownHeight: maxDropdownHeight
-        }, dropdownOptions.map((option, index) => /*#__PURE__*/React$1.createElement(DropdownOption, {
-          key: index,
-          onClick: e => handleDropdownOptionClick(row, rowIndex, column.key, option, e),
-          $isSelected: option.value === value
-        }, /*#__PURE__*/React$1.createElement("span", null, option.label), option.value === value && /*#__PURE__*/React$1.createElement(OkIcon, {
-          width: "24",
-          height: "24",
-          color: "#066768"
-        })))));
+        return /*#__PURE__*/React$1.createElement(Dropdown, {
+          isOpen: isOpen,
+          options: dropdownOptions,
+          selectedValue: value,
+          displayText: displayText,
+          onToggle: e => handleDropdownClick(rowIndex, column.key, e),
+          onOptionSelect: (option, e) => handleDropdownOptionClick(row, rowIndex, column.key, option, e),
+          maxDropdownHeight: maxDropdownHeight,
+          isRowFocused: focusedRowIndex === rowIndex,
+          isRowHovered: hoveredRowIndex === rowIndex,
+          selectedColor: selectedColor
+        });
       default:
         // Treat default as text
         return value.toString();
@@ -39519,9 +39689,9 @@ const TableBody = ({
       [dropdownKey]: false
     }));
 
-    // Fire the onDropdownSelected event
+    // Fire the onDropdownSelected event with columnKey instead of columnName
     if (onDropdownSelected) {
-      onDropdownSelected(row, selectedOption);
+      onDropdownSelected(row, selectedOption, columnKey);
     }
   };
 
@@ -54123,7 +54293,7 @@ const tagTemplates = {
   received: {
     backgroundColor: '#B9D5D54D',
     borderColor: '#B9D5D5',
-    textColor: '#000000',
+    textColor: '#084141',
     text: 'Received'
   },
   approved: {
@@ -54132,16 +54302,16 @@ const tagTemplates = {
     textColor: '#074310',
     text: 'Approved'
   },
-  canceled: {
+  cancelled: {
     backgroundColor: '#EBA6AF4D',
     borderColor: '#EBA6AF',
     textColor: '#44070F',
-    text: 'Canceled'
+    text: 'Cancelled'
   }
 };
 const Tag = props => {
   const {
-    type = 'pending',
+    type,
     size = 'small',
     backgroundColor,
     borderColor,
@@ -54149,15 +54319,15 @@ const Tag = props => {
     borderRadius = "62px",
     text
   } = props;
-  const template = tagTemplates[type];
+  const template = type ? tagTemplates[type] : null;
   const height = size === 'small' ? '21px' : size === 'medium' ? '32px' : '35px';
   return /*#__PURE__*/React$1.createElement(StatusCell, {
-    backgroundColor: backgroundColor || template.backgroundColor,
-    borderColor: borderColor || template.borderColor,
-    color: textColor || template.textColor,
+    backgroundColor: backgroundColor || template?.backgroundColor,
+    borderColor: borderColor || template?.borderColor,
+    color: textColor || template?.textColor,
     height: height,
     borderRadius: borderRadius
-  }, /*#__PURE__*/React$1.createElement("span", null, text || template.text));
+  }, /*#__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 };