sag_components 2.0.0-beta330 → 2.0.0-beta332

package/dist/index.esm.js

@@ -10090,7 +10090,9 @@ const DatePickerFooter = styled.div`
   margin-top: 10px;
 `;
 const ClearButton$1 = styled.button`
-  color: #568202;
+  color: ${({
+  clearButtonColor
+}) => clearButtonColor || '#568202'};
   text-align: center;
   font-family: Poppins;
   font-size: 12px;
@@ -10140,19 +10142,27 @@ const DateCell$2 = styled.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'];
@@ -10163,7 +10173,11 @@ const DatePicker = ({
   value,
   setValue,
   startDateValue,
-  endDateValue
+  endDateValue,
+  selectedColor,
+  hoverColor,
+  inRangeColor,
+  clearButtonColor
 }) => {
   const [startDate, setStartDate] = useState(null);
   const [endDate, setEndDate] = useState(null);
@@ -10234,12 +10248,15 @@ const DatePicker = ({
     }, /*#__PURE__*/React$1.createElement(ChervronRightIcon, null)))), /*#__PURE__*/React$1.createElement(DatePickerCalendar$2, {
       className: "DatePickerCalendar"
     }, daysOfWeek.map(day => /*#__PURE__*/React$1.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$1.createElement(DateCell$2, {
           key: date.toISOString(),
           className: "selected",
+          selectedColor: selectedColor,
+          hoverColor: hoverColor,
           onClick: () => handleDateSelect(date)
         }, date.getDate());
       }
@@ -10247,6 +10264,8 @@ const DatePicker = ({
         return /*#__PURE__*/React$1.createElement(DateCell$2, {
           key: date.toISOString(),
           className: "inrange",
+          inRangeColor: inRangeColor,
+          hoverColor: hoverColor,
           onClick: () => handleDateSelect(date)
         }, date.getDate());
       }
@@ -10254,12 +10273,15 @@ const DatePicker = ({
         return /*#__PURE__*/React$1.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$1.createElement(DateCell$2, {
           key: date.toISOString(),
+          hoverColor: hoverColor,
           onClick: () => handleDateSelect(date)
         }, date.getDate());
       }
@@ -10267,6 +10289,7 @@ const DatePicker = ({
         key: date.toISOString()
       });
     })), /*#__PURE__*/React$1.createElement(DatePickerFooter, null, /*#__PURE__*/React$1.createElement(ClearButton$1, {
+      clearButtonColor: clearButtonColor,
       onClick: clearSelection
     }, "Clear")));
   };
@@ -10289,7 +10312,11 @@ const RangePicker = _ref => {
     borderColor,
     borderColorFocus,
     textColor,
-    selectedValue
+    selectedValue,
+    selectedColor,
+    hoverColor,
+    inRangeColor,
+    clearButtonColor
   } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
@@ -10419,7 +10446,11 @@ const RangePicker = _ref => {
     value: value,
     setValue: setValue,
     startDateValue: startDateValue,
-    endDateValue: endDateValue
+    endDateValue: endDateValue,
+    selectedColor: selectedColor,
+    hoverColor: hoverColor,
+    inRangeColor: inRangeColor,
+    clearButtonColor: clearButtonColor
   })));
 };
 RangePicker.propTypes = {
@@ -10436,7 +10467,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
@@ -10451,7 +10486,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 */
@@ -10714,23 +10753,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('');
@@ -11172,22 +11212,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('');
@@ -12395,13 +12436,16 @@ const Td$1 = styled.td`
 `;
 const Tr = styled.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.div`
   font-weight: 400;
@@ -24303,23 +24347,24 @@ const DeleteIcon = styled.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] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24777,26 +24822,27 @@ const IconContainer$2 = styled.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] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -36347,9 +36393,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 {
@@ -49299,14 +49345,32 @@ const NewSubitem = ({
   componentText = "Scale",
   itemAndPackage,
   brandSuggestions = [],
-  onBrandSaved
+  onBrandSaved,
+  onFetchBrandSuggestions = null
 }) => {
   const [negotiatedBrands, setNegotiatedBrands] = useState("");
   const [negotiatedComponent, setNegotiatedComponent] = useState(componentText);
   const [isPackageDuplicated, setIsPackageDuplicated] = useState(false);
   // Form state
   const [isApplyEnabled, setIsApplyEnabled] = useState(negotiatedBrands.trim().length > 2);
-  const vendorSuggestions = useMemo(() => brandSuggestions.filter(s => s.vendor === vendor.name), [brandSuggestions, vendor.name]);
+  const [fetchedSuggestions, setFetchedSuggestions] = useState([]);
+  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 = useMemo(() => {
+    if (onFetchBrandSuggestions) return fetchedSuggestions;
+    return brandSuggestions.filter(s => s.vendor === vendor.name);
+  }, [brandSuggestions, fetchedSuggestions, onFetchBrandSuggestions, vendor.name]);
   useEffect(() => {
     if (!packageObject) return;
     if (!packageObject.brands) return;
@@ -49343,7 +49407,7 @@ const NewSubitem = ({
         addNewPackage(vendor.name, negotiatedBrands, negotiatedComponent);
       }
       if (onBrandSaved) {
-        onBrandSaved(negotiatedBrands, vendor.name);
+        onBrandSaved(vendor.name, negotiatedBrands);
       }
     },
     rightIcon: "none",
@@ -58058,7 +58122,8 @@ const ItemManagerPanel = _ref => {
     onBackFromList = null,
     onPackageAdded = null,
     brandSuggestions = [],
-    onBrandSaved = null
+    onBrandSaved = null,
+    onFetchBrandSuggestions = null
   } = _ref;
   const [screen, setScreen] = useState("initial");
   const [selectedVendor, setSelectedVendor] = useState(null);
@@ -58070,7 +58135,6 @@ const ItemManagerPanel = _ref => {
   const scrollWrapperRef = useRef(null);
   const headerRef = useRef(null);
   useEffect(() => {
-    console.log("brandSuggestions", brandSuggestions);
     if (headerRef.current) {
       setHeaderHeight(headerRef.current.offsetHeight);
     }
@@ -58276,7 +58340,8 @@ const ItemManagerPanel = _ref => {
       onBack: () => setScreen("subitem"),
       componentText: componentText,
       brandSuggestions: brandSuggestions,
-      onBrandSaved: onBrandSaved
+      onBrandSaved: onBrandSaved,
+      onFetchBrandSuggestions: onFetchBrandSuggestions
     }));
   }
   if (screen === "list") {