sag_components 2.0.0-beta330 → 2.0.0-beta332

package/dist/index.js

@@ -10100,7 +10100,9 @@ const DatePickerFooter = styled__default["default"].div`
   margin-top: 10px;
 `;
 const ClearButton$1 = styled__default["default"].button`
-  color: #568202;
+  color: ${({
+  clearButtonColor
+}) => clearButtonColor || '#568202'};
   text-align: center;
   font-family: Poppins;
   font-size: 12px;
@@ -10150,19 +10152,27 @@ const DateCell$2 = styled__default["default"].div`
   transition: background-color 0.3s ease;
 
   &:hover {
-    background: #f4faf5;
+    background: ${({
+  hoverColor
+}) => hoverColor || '#f4faf5'};
   }
 
   &.selected {
-    background-color: #229e38;
+    background-color: ${({
+  selectedColor
+}) => selectedColor || '#229e38'};
     color: #fff;
   }
   &.startselected {
-    border: 1px solid #229e38;
+    border: 1px solid ${({
+  selectedColor
+}) => selectedColor || '#229e38'};
   }
   &.inrange {
     border-radius: 0px;
-    background-color: #effef2;
+    background-color: ${({
+  inRangeColor
+}) => inRangeColor || '#effef2'};
   }
 `;
 const daysOfWeek = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
@@ -10173,7 +10183,11 @@ const DatePicker = ({
   value,
   setValue,
   startDateValue,
-  endDateValue
+  endDateValue,
+  selectedColor,
+  hoverColor,
+  inRangeColor,
+  clearButtonColor
 }) => {
   const [startDate, setStartDate] = React$1.useState(null);
   const [endDate, setEndDate] = React$1.useState(null);
@@ -10244,12 +10258,15 @@ const DatePicker = ({
     }, /*#__PURE__*/React__default["default"].createElement(ChervronRightIcon, null)))), /*#__PURE__*/React__default["default"].createElement(DatePickerCalendar$2, {
       className: "DatePickerCalendar"
     }, daysOfWeek.map(day => /*#__PURE__*/React__default["default"].createElement(DateCell$2, {
-      key: day
+      key: day,
+      hoverColor: hoverColor
     }, day)), dates.map(date => {
       if (startDate && endDate && (date.getTime() === startDate.getTime() || date.getTime() === endDate.getTime())) {
         return /*#__PURE__*/React__default["default"].createElement(DateCell$2, {
           key: date.toISOString(),
           className: "selected",
+          selectedColor: selectedColor,
+          hoverColor: hoverColor,
           onClick: () => handleDateSelect(date)
         }, date.getDate());
       }
@@ -10257,6 +10274,8 @@ const DatePicker = ({
         return /*#__PURE__*/React__default["default"].createElement(DateCell$2, {
           key: date.toISOString(),
           className: "inrange",
+          inRangeColor: inRangeColor,
+          hoverColor: hoverColor,
           onClick: () => handleDateSelect(date)
         }, date.getDate());
       }
@@ -10264,12 +10283,15 @@ const DatePicker = ({
         return /*#__PURE__*/React__default["default"].createElement(DateCell$2, {
           key: date.toISOString(),
           className: "startselected",
+          selectedColor: selectedColor,
+          hoverColor: hoverColor,
           onClick: () => handleDateSelect(date)
         }, date.getDate());
       }
       if (date.getMonth() === currentDate.getMonth()) {
         return /*#__PURE__*/React__default["default"].createElement(DateCell$2, {
           key: date.toISOString(),
+          hoverColor: hoverColor,
           onClick: () => handleDateSelect(date)
         }, date.getDate());
       }
@@ -10277,6 +10299,7 @@ const DatePicker = ({
         key: date.toISOString()
       });
     })), /*#__PURE__*/React__default["default"].createElement(DatePickerFooter, null, /*#__PURE__*/React__default["default"].createElement(ClearButton$1, {
+      clearButtonColor: clearButtonColor,
       onClick: clearSelection
     }, "Clear")));
   };
@@ -10299,7 +10322,11 @@ const RangePicker = _ref => {
     borderColor,
     borderColorFocus,
     textColor,
-    selectedValue
+    selectedValue,
+    selectedColor,
+    hoverColor,
+    inRangeColor,
+    clearButtonColor
   } = _ref;
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
@@ -10429,7 +10456,11 @@ const RangePicker = _ref => {
     value: value,
     setValue: setValue,
     startDateValue: startDateValue,
-    endDateValue: endDateValue
+    endDateValue: endDateValue,
+    selectedColor: selectedColor,
+    hoverColor: hoverColor,
+    inRangeColor: inRangeColor,
+    clearButtonColor: clearButtonColor
   })));
 };
 RangePicker.propTypes = {
@@ -10446,7 +10477,11 @@ RangePicker.propTypes = {
   borderColorFocus: PropTypes.string,
   textColor: PropTypes.string,
   // Added textColor prop
-  selectedValue: PropTypes.string
+  selectedValue: PropTypes.string,
+  selectedColor: PropTypes.string,
+  hoverColor: PropTypes.string,
+  inRangeColor: PropTypes.string,
+  clearButtonColor: PropTypes.string
 };
 
 // Adding defaultProps
@@ -10461,7 +10496,11 @@ RangePicker.defaultProps = {
   borderColorFocus: '#000000',
   textColor: '#000000',
   // Default textColor prop value
-  selectedValue: ''
+  selectedValue: '',
+  selectedColor: '#229e38',
+  hoverColor: '#f4faf5',
+  inRangeColor: '#effef2',
+  clearButtonColor: '#568202'
 };
 
 /* eslint-disable no-nested-ternary */
@@ -10724,23 +10763,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] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState('');
@@ -11182,22 +11222,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] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState('');
@@ -12405,13 +12446,16 @@ const Td$1 = styled__default["default"].td`
 `;
 const Tr = styled__default["default"].tr`
   border-bottom: 1px solid #f3f4f6;
-  ${({
-  enableHover,
-  selectHoverColor
-}) => enableHover && `&:hover {
+  ${_ref => {
+  let {
+    enableHover,
+    selectHoverColor
+  } = _ref;
+  return enableHover && `&:hover {
       background-color: ${selectHoverColor};
       cursor: pointer;
-    }`}
+    }`;
+}}
 `;
 const InfoText = styled__default["default"].div`
   font-weight: 400;
@@ -24313,23 +24357,24 @@ const DeleteIcon = styled__default["default"].div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = ({
-  label,
-  hoverColor,
-  options,
-  selectedValue,
-  placeHolder,
-  optionHoverColor = '#edf6ff',
-  selectedOptionColor = "#C7E4FF",
-  onChange,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownSingle = _ref => {
+  let {
+    label,
+    hoverColor,
+    options,
+    selectedValue,
+    placeHolder,
+    optionHoverColor = '#edf6ff',
+    selectedOptionColor = "#C7E4FF",
+    onChange,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    xIconShow,
+    labelColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState("");
@@ -24787,26 +24832,27 @@ const IconContainer$2 = styled__default["default"].div`
   cursor:  pointer;
 `;
 
-const QuickFilterDropdownMultiSelection = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  height,
-  error,
-  errorMessage,
-  labelColor,
-  optionHoverColor = '#edf6ff',
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop,
-  dropdownHeight
-}) => {
+const QuickFilterDropdownMultiSelection = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    height,
+    error,
+    errorMessage,
+    labelColor,
+    optionHoverColor = '#edf6ff',
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop,
+    dropdownHeight
+  } = _ref;
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState('');
@@ -36357,9 +36403,9 @@ const ToggleSlider = styled__default["default"].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 {
@@ -49309,14 +49355,32 @@ const NewSubitem = ({
   componentText = "Scale",
   itemAndPackage,
   brandSuggestions = [],
-  onBrandSaved
+  onBrandSaved,
+  onFetchBrandSuggestions = null
 }) => {
   const [negotiatedBrands, setNegotiatedBrands] = React$1.useState("");
   const [negotiatedComponent, setNegotiatedComponent] = React$1.useState(componentText);
   const [isPackageDuplicated, setIsPackageDuplicated] = React$1.useState(false);
   // Form state
   const [isApplyEnabled, setIsApplyEnabled] = React$1.useState(negotiatedBrands.trim().length > 2);
-  const vendorSuggestions = React$1.useMemo(() => brandSuggestions.filter(s => s.vendor === vendor.name), [brandSuggestions, vendor.name]);
+  const [fetchedSuggestions, setFetchedSuggestions] = React$1.useState([]);
+  React$1.useEffect(() => {
+    let aborted = false;
+    if (onFetchBrandSuggestions && vendor?.name) {
+      onFetchBrandSuggestions(vendor.name).then(results => {
+        if (!aborted) setFetchedSuggestions(results);
+      }).catch(() => {
+        if (!aborted) setFetchedSuggestions([]);
+      });
+    }
+    return () => {
+      aborted = true;
+    };
+  }, [onFetchBrandSuggestions, vendor?.name]);
+  const vendorSuggestions = React$1.useMemo(() => {
+    if (onFetchBrandSuggestions) return fetchedSuggestions;
+    return brandSuggestions.filter(s => s.vendor === vendor.name);
+  }, [brandSuggestions, fetchedSuggestions, onFetchBrandSuggestions, vendor.name]);
   React$1.useEffect(() => {
     if (!packageObject) return;
     if (!packageObject.brands) return;
@@ -49353,7 +49417,7 @@ const NewSubitem = ({
         addNewPackage(vendor.name, negotiatedBrands, negotiatedComponent);
       }
       if (onBrandSaved) {
-        onBrandSaved(negotiatedBrands, vendor.name);
+        onBrandSaved(vendor.name, negotiatedBrands);
       }
     },
     rightIcon: "none",
@@ -58068,7 +58132,8 @@ const ItemManagerPanel = _ref => {
     onBackFromList = null,
     onPackageAdded = null,
     brandSuggestions = [],
-    onBrandSaved = null
+    onBrandSaved = null,
+    onFetchBrandSuggestions = null
   } = _ref;
   const [screen, setScreen] = React$1.useState("initial");
   const [selectedVendor, setSelectedVendor] = React$1.useState(null);
@@ -58080,7 +58145,6 @@ const ItemManagerPanel = _ref => {
   const scrollWrapperRef = React$1.useRef(null);
   const headerRef = React$1.useRef(null);
   React$1.useEffect(() => {
-    console.log("brandSuggestions", brandSuggestions);
     if (headerRef.current) {
       setHeaderHeight(headerRef.current.offsetHeight);
     }
@@ -58286,7 +58350,8 @@ const ItemManagerPanel = _ref => {
       onBack: () => setScreen("subitem"),
       componentText: componentText,
       brandSuggestions: brandSuggestions,
-      onBrandSaved: onBrandSaved
+      onBrandSaved: onBrandSaved,
+      onFetchBrandSuggestions: onFetchBrandSuggestions
     }));
   }
   if (screen === "list") {