sag_components 2.0.0-beta113 → 2.0.0-beta115

package/dist/index.d.ts

@@ -1300,7 +1300,7 @@ declare function WeeksPicker({ label, disabled, borderColor, borderColorFocus, t
     selectedValue: any;
 }): react_jsx_runtime.JSX.Element;
 
-declare function Input({ label, labelEmptyValue, size, selectedValue, placeHolder, onChange, onBlur, required, disabled, width, error, errorMessage, labelColor, leftIcon, rightIcon, password, leftIconOnClick, rightIconOnClick, }: {
+declare function Input({ label, labelEmptyValue, size, selectedValue, placeHolder, onChange, onBlur, required, disabled, isDarkerBackground, width, error, errorMessage, labelColor, leftIcon, rightIcon, password, leftIconOnClick, rightIconOnClick, }: {
     label: any;
     labelEmptyValue: any;
     size: any;
@@ -1310,6 +1310,7 @@ declare function Input({ label, labelEmptyValue, size, selectedValue, placeHolde
     onBlur: any;
     required: any;
     disabled: any;
+    isDarkerBackground?: boolean;
     width: any;
     error: any;
     errorMessage: any;

package/dist/index.esm.js

@@ -23897,22 +23897,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("");
@@ -35194,7 +35193,7 @@ const Label$2 = styled.label`
   margin-right: 10px; 
   z-index: 2;
   color: ${props => props.error ? 'red' : props.disabled ? '#D0D0D0' : props.labelColor};
-  background-color: white;
+  background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};
   position: absolute;
   top: ${props => props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '27px' : '17px'};
   left: ${props => props.isFocused || props.hasValue ? '23px' : props.leftIcon && props.leftIcon !== 'none' ? '42px' : '16px'};
@@ -35211,28 +35210,26 @@ const Label$2 = styled.label`
   }
 `;
 const InputContainer = styled.div`
-
-    display: flex;       
-    flex-direction: row;
-    flex-wrap: nowrap; 
-    justify-content: flex-start;
-    align-content: center;     
-    white-space: pre-wrap;
-    align-items: center;
-    overflow: hidden;
-    padding: 0 16px;
-    gap: 14px;
-    width: 100%;
-    height: 100%;    
-    box-sizing: border-box;
-    background-color: #fff;
-    border:  1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : '#B1B1B1'};
-    font-family: "Poppins", sans-serif;
-    font-weight: 400;
-    font-size: 14px;
-    border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
-    outline: none;
-    color: ${props => props.disabled ? '#D0D0D0' : '#212121'};
+  display: flex;       
+  flex-wrap: nowrap; 
+  justify-content: flex-start;
+  align-content: center;     
+  white-space: pre-wrap;
+  align-items: center;
+  overflow: hidden;
+  padding: 0 16px;
+  gap: 14px;
+  width: 100%;
+  height: 100%;    
+  box-sizing: border-box;
+  background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};  
+  border:  1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : '#B1B1B1'};
+  font-family: "Poppins", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
+  outline: none;
+  color: ${props => props.disabled ? '#D0D0D0' : '#212121'};
    
   &:hover {
     border: 1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : props.labelColor || '#212121'};
@@ -35244,25 +35241,24 @@ const InputContainer = styled.div`
   
 `;
 const InputSubContainer = styled.div`
-
-    display: flex;       
-    flex-direction: column;
-    flex-wrap: nowrap;     
-    align-content: center; 
-    align-items: flex-start;
-    justify-content: center;
-    white-space: pre-wrap;
-    overflow: hidden;
-    padding: 5px 0;
-    width: 100%;
-    height: 100%;
-    min-height: ${props => props.size === 'medium' ? '52px' : '32px'};
-    box-sizing: border-box;
-    background-color: #fff;    
-    border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
-    outline: none;
-    color: ${props => props.disabled ? '#D0D0D0' : '#212121'};     
-    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+  display: flex;       
+  flex-direction: column;
+  flex-wrap: nowrap;     
+  align-content: center; 
+  align-items: flex-start;
+  justify-content: center;
+  white-space: pre-wrap;
+  overflow: hidden;
+  padding: 5px 0;
+  width: 100%;
+  height: 100%;
+  min-height: ${props => props.size === 'medium' ? '52px' : '32px'};
+  box-sizing: border-box;
+  background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};  
+  border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
+  outline: none;
+  color: ${props => props.disabled ? '#D0D0D0' : '#212121'};     
+  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
 `;
 const StyledInput = styled.input`
   width: calc(100% - 10px);
@@ -35271,7 +35267,7 @@ const StyledInput = styled.input`
   font-size: 14px;
   outline: none;  
   color: ${props => props.disabled ? '#D0D0D0' : '#212121'};  
-  background-color: #fff;  
+  background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};  
   border: none;
   cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
 `;
@@ -35304,6 +35300,7 @@ const Input$2 = _ref => {
     onBlur,
     required,
     disabled,
+    isDarkerBackground = false,
     width,
     error,
     errorMessage,
@@ -35390,11 +35387,13 @@ const Input$2 = _ref => {
     className: "MainContainer",
     width: width,
     size: size,
-    disabled: disabled
+    disabled: disabled,
+    isDarkerBackground: isDarkerBackground
   }, /*#__PURE__*/React$1.createElement(InputContainer, {
     className: "InputContainer",
     labelColor: labelColor,
     disabled: disabled,
+    isDarkerBackground: isDarkerBackground,
     error: error,
     isFocused: isFocused,
     size: size
@@ -35403,6 +35402,7 @@ const Input$2 = _ref => {
     ref: containerRef,
     labelColor: labelColor,
     disabled: disabled,
+    isDarkerBackground: isDarkerBackground,
     error: error,
     onClick: handleLabelClick,
     size: size
@@ -35413,6 +35413,7 @@ const Input$2 = _ref => {
     hasValue: inputValue,
     leftIcon: leftIcon,
     disabled: disabled,
+    isDarkerBackground: isDarkerBackground,
     error: error,
     errorMessage: errorMessage,
     onClick: handleLabelClick,
@@ -35432,6 +35433,7 @@ const Input$2 = _ref => {
     onFocus: handleFocus,
     onBlur: handleBlur,
     disabled: disabled,
+    isDarkerBackground: isDarkerBackground,
     placeholder: isFocused ? placeHolder : '',
     error: error,
     isFocused: isFocused
@@ -41930,6 +41932,15 @@ const NewSubitemList = props => {
     } : v);
     setItemAndPackage(updatedItemAndPackage);
   };
+  const handleAddNewPackage = () => {
+    setSelectedPackage(null);
+    handleSubitemDetail(null); // Pass null for new package
+  };
+  const handleEditExistingPackage = item => {
+    setSelectedPackage(item);
+    handleSubitemDetail(item); // Pass the package object for editing
+  };
+
   // useEffect(() => {
   //   console.log("Vendor items updated:", vendorItems);
   //   console.log("Props:", props);
@@ -41941,16 +41952,15 @@ const NewSubitemList = props => {
     textColor: linkColor,
     leftIcon: "Plus",
     rightIcon: "none",
-    onClick: handleSubitemDetail,
+    onClick: handleAddNewPackage,
     size: "small",
     text: "Add Package",
     type: "primary"
   })), /*#__PURE__*/React$1.createElement(List, null, vendorItems.map((item, idx) => /*#__PURE__*/React$1.createElement(Item$1, {
-    key: idx
+    key: `item-${idx}-${item.brands}`
   }, /*#__PURE__*/React$1.createElement(PaperPlane, null), /*#__PURE__*/React$1.createElement(Container, {
     onClick: e => {
-      setSelectedPackage(item);
-      handleSubitemDetail(item);
+      handleEditExistingPackage(item);
     }
   }, item.brands && /*#__PURE__*/React$1.createElement(Title$2, null, item.brands), item.component && /*#__PURE__*/React$1.createElement(ComponentContainer, null, item.component[0]), /*#__PURE__*/React$1.createElement(Chevron, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), /*#__PURE__*/React$1.createElement(Trash, {
     className: "trash-icon",
@@ -50825,6 +50835,7 @@ const ItemManagerPanel = _ref => {
   const [screen, setScreen] = useState("initial");
   const [selectedVendor, setSelectedVendor] = useState(null);
   const [selectedPackage, setSelectedPackage] = useState(null);
+  const [isEditingExisting, setIsEditingExisting] = useState(false);
   const handleVendorClick = vendor => {
     // console.log("Vendor clicked:", vendor);
     setSelectedVendor(vendor);
@@ -50853,6 +50864,30 @@ const ItemManagerPanel = _ref => {
     });
     setScreen("subitem");
   };
+  const updateExistingPackage = (vendorName, originalPackage, updatedPackageName, updatedComponent) => {
+    setItemAndPackage(prev => {
+      return prev.map(vendor => {
+        if (vendor.name !== vendorName) {
+          return vendor;
+        }
+        return {
+          ...vendor,
+          packages: vendor.packages.map(pkg => {
+            // Find the package to update by comparing with the original package
+            if (pkg.brands === originalPackage.brands && JSON.stringify(pkg.component) === JSON.stringify(originalPackage.component)) {
+              return {
+                ...pkg,
+                brands: updatedPackageName,
+                component: updatedComponent
+              };
+            }
+            return pkg;
+          })
+        };
+      });
+    });
+    setScreen("subitem");
+  };
   const onDeleteVendor = vendor => {
     const updatedItemAndPackage = itemAndPackage.filter(item => item.name !== vendor.name);
     setItemAndPackage([...updatedItemAndPackage, {
@@ -50888,7 +50923,19 @@ const ItemManagerPanel = _ref => {
       itemAndPackage: itemAndPackage,
       onBack: () => setScreen("initial"),
       onTrashClick: () => onDeleteInner(selectedVendor),
-      handleSubitemDetail: () => setScreen("subitemdetail")
+      handleSubitemDetail: function () {
+        let pkg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+        if (pkg) {
+          // Editing existing package
+          setSelectedPackage(pkg);
+          setIsEditingExisting(true);
+        } else {
+          // Adding new package
+          setSelectedPackage(null);
+          setIsEditingExisting(false);
+        }
+        setScreen("subitemdetail");
+      }
     }));
   }
   if (screen === "confirmation") {
@@ -50926,6 +50973,8 @@ const ItemManagerPanel = _ref => {
       vendor: selectedVendor,
       itemAndPackage: itemAndPackage,
       addNewPackage: addNewPackage,
+      updateExistingPackage: updateExistingPackage,
+      isEditingExisting: isEditingExisting,
       onBack: () => setScreen("subitem")
     }));
   }
@@ -51076,14 +51125,11 @@ const scrollableStyles = `
 const DropdownContainer = styled.div`
   position: relative;
   width: ${props => props.width || '100%'};
-  /* min-width: 320px; */
-  max-width: 600px;
+  max-width: 420px;
   font-family: "Poppins", sans-serif;
 `;
 const DropdownButton = styled.button`
   width: 100%;
-  /* min-width: 320px; */
-  max-width: 600px;
   background: #fff;
   border: 1px solid #8B8989;
   border-radius: 12px;
@@ -51094,9 +51140,9 @@ const DropdownButton = styled.button`
   align-items: center;
   justify-content: space-between;
   ${props => props.disabled && css`
-      color:#8B8989;
-      /* background-color: #D0D0D0; */
+      color: #D0D0D0;
       cursor: not-allowed;
+      border: 1px solid #D0D0D0;
     `}
 `;
 const DropdownList = styled.ul`
@@ -51110,7 +51156,7 @@ const DropdownList = styled.ul`
   width: ${props => props.width || '100%'};
   /* min-width: 320px; */
   max-width: 600px;
-  max-height: ${props => props.dropdownMaxHeight || '400px'}; 
+  max-height: ${props => props.dropdownMaxHeight || '420px'}; 
   overflow-y: auto;
   left: 0;
 
@@ -51139,7 +51185,7 @@ const DropdownItem = styled.li`
   margin: 0 12px;
   background: ${props => props.selected ? props.selectedColor || '#066768' : 'transparent'};
   font-weight: ${props => props.selected ? '500' : '400'};
-  color: ${props => props.disabled ? '#bdbdbd' : props.selected ? '#fff' : '#212121'};
+  color: ${props => props.disabled ? '#D0D0D0' : props.selected ? '#fff' : '#212121'};
   border-left: ${props => props.selected ? `3px solid ${props.selectedColor || '#066768'}` : 'none'};
   ${props => props.disabled && css`
       cursor: not-allowed;