sag_components 2.0.0-beta329 → 2.0.0-beta330

package/dist/index.d.ts

@@ -1558,7 +1558,7 @@ declare function RangePop(props: any): react_jsx_runtime.JSX.Element;
 
 declare function SearchInput(props: any): react_jsx_runtime.JSX.Element;
 
-declare function ItemManagerPanel({ width, height, disableSection, onSendForms, editMode, disabledSendForms, AllFormsSent, itemAndPackage, setItemAndPackage, linkColor, backgroundColor, buttonTooltipText, trashTooltipText, maxVisibleVendors, componentText, SubTitleColor, searchValue, onSearchChange, searchResults, filteredVendors, isSearchLoading, isLoading, isLoadingText, onLastRowsReached, lastRowsThreshold, onBackFromList, onPackageAdded, }: {
+declare function ItemManagerPanel({ width, height, disableSection, onSendForms, editMode, disabledSendForms, AllFormsSent, itemAndPackage, setItemAndPackage, linkColor, backgroundColor, buttonTooltipText, trashTooltipText, maxVisibleVendors, componentText, SubTitleColor, searchValue, onSearchChange, searchResults, filteredVendors, isSearchLoading, isLoading, isLoadingText, onLastRowsReached, lastRowsThreshold, onBackFromList, onPackageAdded, brandSuggestions, onBrandSaved, }: {
     width?: string;
     height?: string;
     disableSection?: boolean;
@@ -1586,6 +1586,8 @@ declare function ItemManagerPanel({ width, height, disableSection, onSendForms,
     lastRowsThreshold?: number;
     onBackFromList?: any;
     onPackageAdded?: any;
+    brandSuggestions?: any[];
+    onBrandSaved?: any;
 }): react_jsx_runtime.JSX.Element;
 
 /**

package/dist/index.esm.js

@@ -12395,16 +12395,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;
@@ -49055,17 +49052,83 @@ const AddNegotiatedBrand = styled.label`
   font-family: Poppins;
   font-size: 15px;
 `;
-const NegotiatedTextarea = styled.textarea`
+const AutocompleteWrapper = styled.div`
+  position: relative;
   width: 90%;
-  min-height: 220px;
   margin-top: 8px;
+`;
+const NegotiatedTextarea = styled.textarea`
+  width: 100%;
+  min-height: 220px;
   border: 1px solid #e3e4e5;
   border-radius: 12px;
   padding: 16px;
   font-size: 15px;
+  font-family: Poppins, sans-serif;
+  line-height: 1.5;
+  letter-spacing: normal;
   resize: vertical;
-  background: #fff;
+  background: transparent;
+  color: #212121;
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  outline: none;
+`;
+const GhostSuggestion = styled.span`
+  position: absolute;
+  pointer-events: none;
+  color: #b1b1b1;
+  font-size: 15px;
+  font-family: Poppins, sans-serif;
+  line-height: 1.5;
+  letter-spacing: normal;
+  white-space: pre;
+  z-index: 2;
+`;
+const MeasureSpan = styled.span`
+  position: absolute;
+  visibility: hidden;
+  white-space: pre;
+  font-size: 15px;
+  font-family: Poppins, sans-serif;
+  line-height: 1.5;
+  letter-spacing: normal;
+`;
+const SuggestionDropdown = styled.ul`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  width: 100%;
+  max-height: 240px;
+  overflow-y: auto;
+  list-style: none;
+  margin: 4px 0 0 0;
+  padding: 8px 0;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+  font-family: Poppins, sans-serif;
+  font-size: 15px;
+
+  &::-webkit-scrollbar { width: 4px; }
+  &::-webkit-scrollbar-track { background: #E8E8E8; border-radius: 5px; }
+  &::-webkit-scrollbar-thumb { background: #D0D0D0; border-radius: 5px; }
+`;
+const SuggestionItem = styled.li`
+  padding: 8px 16px;
+  cursor: pointer;
   color: #212121;
+  font-size: 14px;
+  font-weight: 400;
+  transition: background-color 0.15s;
+  background-color: ${props => props.$highlighted ? '#EDF6FF' : '#fff'};
+
+  &:hover {
+    background-color: #EDF6FF;
+  }
 `;
 const NegotiatedContainer = styled.div`
   display: flex;
@@ -49078,6 +49141,155 @@ const NegotiatedContainer = styled.div`
   margin-top: 8px;
 `;
 
+const MAX_VISIBLE_SUGGESTIONS = 4;
+const getMatchingSuggestions = (input, suggestions) => {
+  const normalized = input.trim().toLowerCase().replace(/\s+/g, " ");
+  if (!normalized || suggestions.length === 0) return [];
+  const rank = (a, b) => b.frequency - a.frequency || (b.lastUsed || 0) - (a.lastUsed || 0);
+  return suggestions.filter(s => {
+    const norm = s.value.trim().toLowerCase().replace(/\s+/g, " ");
+    return norm.startsWith(normalized) && norm !== normalized;
+  }).sort(rank).slice(0, MAX_VISIBLE_SUGGESTIONS);
+};
+const BrandAutocomplete = ({
+  value,
+  onChange,
+  suggestions = [],
+  placeholder = "",
+  maxLength = 200
+}) => {
+  const measureRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const blurTimeoutRef = useRef(null);
+  const [textWidth, setTextWidth] = useState(0);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const matchingSuggestions = useMemo(() => getMatchingSuggestions(value, suggestions), [value, suggestions]);
+  const activeSuggestion = highlightedIndex >= 0 ? matchingSuggestions[highlightedIndex] : matchingSuggestions[0] || null;
+  const suggestionRemainder = activeSuggestion ? activeSuggestion.value.slice(value.length) : "";
+
+  // Measure typed text width after each change
+  useEffect(() => {
+    if (measureRef.current) {
+      setTextWidth(measureRef.current.offsetWidth);
+    }
+  }, [value]);
+
+  // Close dropdown when no matches
+  useEffect(() => {
+    if (matchingSuggestions.length === 0) {
+      setShowDropdown(false);
+      setHighlightedIndex(-1);
+    }
+  }, [matchingSuggestions.length]);
+
+  // Scroll highlighted item into view
+  useEffect(() => {
+    if (highlightedIndex >= 0 && dropdownRef.current) {
+      const items = dropdownRef.current.querySelectorAll("li");
+      if (items[highlightedIndex]) {
+        items[highlightedIndex].scrollIntoView({
+          block: "nearest"
+        });
+      }
+    }
+  }, [highlightedIndex]);
+
+  // Cleanup blur timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
+    };
+  }, []);
+  const handleKeyDown = e => {
+    const len = matchingSuggestions.length;
+    if (e.key === "ArrowDown" && len > 0) {
+      e.preventDefault();
+      if (!showDropdown) {
+        setShowDropdown(true);
+        setHighlightedIndex(0);
+      } else {
+        setHighlightedIndex(prev => (prev + 1) % len);
+      }
+      return;
+    }
+    if (e.key === "ArrowUp" && len > 0 && showDropdown) {
+      e.preventDefault();
+      setHighlightedIndex(prev => prev <= 0 ? len - 1 : prev - 1);
+      return;
+    }
+    if (e.key === "Enter" && showDropdown && highlightedIndex >= 0) {
+      e.preventDefault();
+      onChange(matchingSuggestions[highlightedIndex].value);
+      setShowDropdown(false);
+      setHighlightedIndex(-1);
+      return;
+    }
+    if (e.key === "Escape" && showDropdown) {
+      e.preventDefault();
+      setShowDropdown(false);
+      setHighlightedIndex(-1);
+      return;
+    }
+    if (e.key === "Tab" && activeSuggestion && value.trim().length > 0) {
+      e.preventDefault();
+      onChange(activeSuggestion.value);
+      setShowDropdown(false);
+      setHighlightedIndex(-1);
+    }
+  };
+  const handleChange = e => {
+    const val = e.target.value;
+    if (val.includes("$$")) return;
+    const collapsed = val.replace(/  +/g, " ");
+    onChange(collapsed);
+    setHighlightedIndex(-1);
+    setShowDropdown(collapsed.trim().length > 0);
+  };
+  const handleFocus = useCallback(() => {
+    if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
+    if (value.trim().length > 0 && matchingSuggestions.length > 0) {
+      setShowDropdown(true);
+    }
+  }, [value, matchingSuggestions.length]);
+  const handleBlur = useCallback(() => {
+    blurTimeoutRef.current = setTimeout(() => {
+      setShowDropdown(false);
+      setHighlightedIndex(-1);
+    }, 150);
+  }, []);
+  const handleSuggestionMouseDown = (e, suggestion) => {
+    e.preventDefault();
+    onChange(suggestion.value);
+    setShowDropdown(false);
+    setHighlightedIndex(-1);
+  };
+  const showGhost = activeSuggestion && value.length > 0;
+  return /*#__PURE__*/React$1.createElement(AutocompleteWrapper, null, /*#__PURE__*/React$1.createElement(MeasureSpan, {
+    ref: measureRef
+  }, value), /*#__PURE__*/React$1.createElement(NegotiatedTextarea, {
+    value: value,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    placeholder: placeholder,
+    maxLength: maxLength,
+    required: true
+  }), showGhost && /*#__PURE__*/React$1.createElement(GhostSuggestion, {
+    style: {
+      top: 17,
+      left: 17 + textWidth
+    }
+  }, suggestionRemainder), showDropdown && matchingSuggestions.length > 0 && /*#__PURE__*/React$1.createElement(SuggestionDropdown, {
+    ref: dropdownRef
+  }, matchingSuggestions.map((suggestion, index) => /*#__PURE__*/React$1.createElement(SuggestionItem, {
+    key: suggestion.value,
+    $highlighted: index === highlightedIndex,
+    onMouseDown: e => handleSuggestionMouseDown(e, suggestion)
+  }, suggestion.value))));
+};
+
 const NewSubitem = ({
   packageObject,
   vendor,
@@ -49085,13 +49297,16 @@ const NewSubitem = ({
   addNewPackage,
   updateExistingPackage,
   componentText = "Scale",
-  itemAndPackage
+  itemAndPackage,
+  brandSuggestions = [],
+  onBrandSaved
 }) => {
   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]);
   useEffect(() => {
     if (!packageObject) return;
     if (!packageObject.brands) return;
@@ -49100,8 +49315,10 @@ const NewSubitem = ({
   }, [packageObject]);
   useEffect(() => {
     if (packageObject && packageObject.brands === negotiatedBrands) return;
-    setIsPackageDuplicated(itemAndPackage.some(obj => obj.name === vendor.name && obj.packages?.some(pkg => pkg.brands === negotiatedBrands)));
-    setIsApplyEnabled(negotiatedBrands.trim().length > 2 && !itemAndPackage.some(obj => obj.name === vendor.name && obj.packages?.some(pkg => pkg.brands === negotiatedBrands)));
+    const normalizedInput = negotiatedBrands.trim().toLowerCase();
+    const isDuplicate = itemAndPackage.some(obj => obj.packages?.some(pkg => pkg.brands?.trim().toLowerCase() === normalizedInput));
+    setIsPackageDuplicated(isDuplicate);
+    setIsApplyEnabled(negotiatedBrands.trim().length > 2 && !isDuplicate);
   }, [negotiatedBrands]);
   return /*#__PURE__*/React$1.createElement(NewSubitemContainer, null, /*#__PURE__*/React$1.createElement(Header, null, /*#__PURE__*/React$1.createElement(BackButton, {
     onClick: onBack
@@ -49125,6 +49342,9 @@ const NewSubitem = ({
       } else {
         addNewPackage(vendor.name, negotiatedBrands, negotiatedComponent);
       }
+      if (onBrandSaved) {
+        onBrandSaved(negotiatedBrands, vendor.name);
+      }
     },
     rightIcon: "none",
     size: "small",
@@ -49140,12 +49360,14 @@ const NewSubitem = ({
     style: {
       color: "red"
     }
-  }, "*")), /*#__PURE__*/React$1.createElement(NegotiatedTextarea, {
+  }, "*")), /*#__PURE__*/React$1.createElement(BrandAutocomplete, {
     value: negotiatedBrands,
-    onChange: e => setNegotiatedBrands(e.target.value),
-    required: true,
-    placeholder: "Specify by text the participated brands, divided by commas"
-  }), isPackageDuplicated ? /*#__PURE__*/React$1.createElement(ErrorLabel, null, "Package already exists for that vendor, Please enter a unique package.") : /*#__PURE__*/React$1.createElement(ErrorLabel, null)), /*#__PURE__*/React$1.createElement(NegotiatedContainer, null, /*#__PURE__*/React$1.createElement(AddNegotiatedBrand, null, "Component ", /*#__PURE__*/React$1.createElement("span", {
+    onChange: val => setNegotiatedBrands(val),
+    suggestions: vendorSuggestions,
+    placeholder: "Specify by text the participated brands, divided by commas",
+    maxLength: 200,
+    hasError: isPackageDuplicated
+  }), isPackageDuplicated ? /*#__PURE__*/React$1.createElement(ErrorLabel, null, "Package already exists in the event, Please enter a unique package") : /*#__PURE__*/React$1.createElement(ErrorLabel, null)), /*#__PURE__*/React$1.createElement(NegotiatedContainer, null, /*#__PURE__*/React$1.createElement(AddNegotiatedBrand, null, "Component ", /*#__PURE__*/React$1.createElement("span", {
     style: {
       color: "red"
     }
@@ -57834,7 +58056,9 @@ const ItemManagerPanel = _ref => {
     onLastRowsReached = () => {},
     lastRowsThreshold = 3,
     onBackFromList = null,
-    onPackageAdded = null
+    onPackageAdded = null,
+    brandSuggestions = [],
+    onBrandSaved = null
   } = _ref;
   const [screen, setScreen] = useState("initial");
   const [selectedVendor, setSelectedVendor] = useState(null);
@@ -57846,6 +58070,7 @@ const ItemManagerPanel = _ref => {
   const scrollWrapperRef = useRef(null);
   const headerRef = useRef(null);
   useEffect(() => {
+    console.log("brandSuggestions", brandSuggestions);
     if (headerRef.current) {
       setHeaderHeight(headerRef.current.offsetHeight);
     }
@@ -58049,7 +58274,9 @@ const ItemManagerPanel = _ref => {
       updateExistingPackage: updateExistingPackage,
       isEditingExisting: isEditingExisting,
       onBack: () => setScreen("subitem"),
-      componentText: componentText
+      componentText: componentText,
+      brandSuggestions: brandSuggestions,
+      onBrandSaved: onBrandSaved
     }));
   }
   if (screen === "list") {