sag_components 2.0.0-beta264 → 2.0.0-beta266

package/dist/index.d.ts

@@ -1574,7 +1574,7 @@ declare function ModalDrawer({ open, height, onClose, children, widthPercent }:
     widthPercent?: number;
 }): react_jsx_runtime.JSX.Element;
 
-declare function OverlayDropdown({ data, value, onSelectClick, disabled, isDarkerBackground, required, selectedColor, hoverColor, dropdownMaxHeight, dropdownWidth, width, height, label, labelEmptyValue, showLabelOnTop, placeHolder, labelColor, placeHolderColor, textColorMenu, margin, editableDigitalCoupon, dropdownDigitalCouponTitle, className, ...props }: {
+declare function OverlayDropdown({ data, value, onSelectClick, disabled, isDarkerBackground, required, selectedColor, hoverColor, dropdownMaxHeight, width, height, label, labelEmptyValue, showLabelOnTop, placeHolder, labelColor, placeHolderColor, margin, editableDigitalCoupon, ...props }: {
     [x: string]: any;
     data?: any[];
     value: any;
@@ -1585,7 +1585,6 @@ declare function OverlayDropdown({ data, value, onSelectClick, disabled, isDarke
     selectedColor?: string;
     hoverColor?: string;
     dropdownMaxHeight?: string;
-    dropdownWidth?: string;
     width?: string;
     height?: string;
     label: any;
@@ -1594,11 +1593,8 @@ declare function OverlayDropdown({ data, value, onSelectClick, disabled, isDarke
     placeHolder: any;
     labelColor: any;
     placeHolderColor: any;
-    textColorMenu?: string;
     margin?: string;
     editableDigitalCoupon?: boolean;
-    dropdownDigitalCouponTitle?: string;
-    className?: string;
 }): react_jsx_runtime.JSX.Element;
 
 declare function MessageBox({ isOpen, isDisabled, onClose, onConfirm, title, primaryText, secondaryText, width, height, color, hoverColor, opacity, secondaryColor, seperateSectionBorder, children, tooltipContent, }: {

package/dist/index.esm.js

@@ -8929,27 +8929,26 @@ const IconContainer$5 = styled.div`
   cursor:  pointer;  
 `;
 
-const DropdownSingleNew = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    onChange,
-    required,
-    disabled,
-    width,
-    height,
-    withMarginBottom = true,
-    error,
-    errorMessage,
-    xIconShow,
-    labelColor,
-    showLabelOnTop,
-    orderBy,
-    placeHolder = "",
-    elementType
-  } = _ref;
+const DropdownSingleNew = ({
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  onChange,
+  required,
+  disabled,
+  width,
+  height,
+  withMarginBottom = true,
+  error,
+  errorMessage,
+  xIconShow,
+  labelColor,
+  showLabelOnTop,
+  orderBy,
+  placeHolder = "",
+  elementType
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [showAbove, setShowAbove] = useState(false);
@@ -9454,27 +9453,26 @@ const IconContainer$4 = styled.div`
   cursor:  pointer;  
 `;
 
-const DropdownMultiNew = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    onChange,
-    required,
-    disabled,
-    width,
-    height,
-    withMarginBottom = true,
-    error,
-    errorMessage,
-    labelColor,
-    xIconShow,
-    checkBoxColor,
-    showLabelOnTop,
-    orderBy,
-    elementType
-  } = _ref;
+const DropdownMultiNew = ({
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  onChange,
+  required,
+  disabled,
+  width,
+  height,
+  withMarginBottom = true,
+  error,
+  errorMessage,
+  labelColor,
+  xIconShow,
+  checkBoxColor,
+  showLabelOnTop,
+  orderBy,
+  elementType
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [showAbove, setShowAbove] = useState(false);
@@ -10583,24 +10581,23 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = _ref => {
-  let {
-    availableQuarters,
-    // ["Q1-2024"]
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue,
-    startYear
-  } = _ref;
+const QuarterPicker = ({
+  availableQuarters,
+  // ["Q1-2024"]
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue,
+  startYear
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -11042,23 +11039,22 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = _ref => {
-  let {
-    availableMonths,
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue,
-    startYear
-  } = _ref;
+const MonthPicker = ({
+  availableMonths,
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue,
+  startYear
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -24169,22 +24165,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("");
@@ -24641,26 +24636,25 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    required,
-    disabled,
-    width,
-    height,
-    error,
-    errorMessage,
-    labelColor,
-    xIconShow,
-    checkBoxColor,
-    showLabelOnTop,
-    dropdownHeight
-  } = _ref;
+const QuickFilterDropdownMultiSelection = ({
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  required,
+  disabled,
+  width,
+  height,
+  error,
+  errorMessage,
+  labelColor,
+  xIconShow,
+  checkBoxColor,
+  showLabelOnTop,
+  dropdownHeight
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -34973,18 +34967,17 @@ css`
  * • onApply(start,end) — callback, both numbers (inclusive)
  * • onCancel()         — callback
  */
-const WeeksCalendar = _ref => {
-  let {
-    year,
-    defaultStartWeek = null,
-    defaultEndWeek = null,
-    backgroundColor = "#066768",
-    hoverBackgroundColor = "#E6F0F0",
-    allowedWeekRange = null,
-    // New prop for range restriction
-    onApply,
-    onCancel
-  } = _ref;
+const WeeksCalendar = ({
+  year,
+  defaultStartWeek = null,
+  defaultEndWeek = null,
+  backgroundColor = "#066768",
+  hoverBackgroundColor = "#E6F0F0",
+  allowedWeekRange = null,
+  // New prop for range restriction
+  onApply,
+  onCancel
+}) => {
   // state -------------------------------------------------
   const [startWeek, setStartWeek] = useState(defaultStartWeek);
   const [endWeek, setEndWeek] = useState(defaultEndWeek);
@@ -36172,9 +36165,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 {
@@ -57727,7 +57720,6 @@ const OverlayDropdown = _ref => {
     selectedColor = "#066768",
     hoverColor = "#E6F0F0",
     dropdownMaxHeight = "600px",
-    dropdownWidth = "100%",
     width = "100%",
     height = "auto",
     label,
@@ -57736,23 +57728,20 @@ const OverlayDropdown = _ref => {
     placeHolder,
     labelColor,
     placeHolderColor,
-    textColorMenu = "black",
     margin = "8px",
     editableDigitalCoupon = false,
-    dropdownDigitalCouponTitle = "",
-    className = "",
     ...props
   } = _ref;
   const [open, setOpen] = useState(false);
   const [hoveredText, setHoveredText] = useState(null);
   const [templateDialog, setTemplateDialog] = useState(null);
   const [dropdownPosition, setDropdownPosition] = useState("below");
-  const [selected, setSelected] = useState("");
-  const [hasValue, setHasValue] = useState(false);
   const [lastDefinedGroup, setLastDefinedGroup] = useState(data.find(group => group.overlayCode === "last_defined"));
   const buttonRef = useRef(null);
   const dropdownRef = useRef(null);
   const containerRef = useRef(null);
+
+  // Click outside to close dropdown
   useEffect(() => {
     const handleClickOutside = event => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
@@ -57768,13 +57757,20 @@ const OverlayDropdown = _ref => {
       document.removeEventListener("touchstart", handleClickOutside);
     };
   }, [open]);
+
+  // Calculate dropdown position when opening
   useEffect(() => {
     if (open && buttonRef.current) {
       const buttonRect = buttonRef.current.getBoundingClientRect();
       const viewportHeight = window.innerHeight;
       const dropdownHeight = parseInt(dropdownMaxHeight, 10);
+
+      // Space available below the button
       const spaceBelow = viewportHeight - buttonRect.bottom;
+      // Space available above the button
       const spaceAbove = buttonRect.top;
+
+      // If there's not enough space below, but more space above, position above
       if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
         setDropdownPosition("above");
       } else {
@@ -57782,6 +57778,8 @@ const OverlayDropdown = _ref => {
       }
     }
   }, [open, dropdownMaxHeight, margin]);
+
+  // Combine original data with "Last defined by you" group
   const getDataWithLastDefined = () => {
     const combinedData = [...data];
     if (lastDefinedGroup) {
@@ -57789,26 +57787,20 @@ const OverlayDropdown = _ref => {
     }
     return combinedData;
   };
+
+  // Find selected item across all groups
   const findSelectedItem = () => {
     const allData = getDataWithLastDefined();
     for (const group of allData) {
       if (group.items) {
-        const found = group.items.find(item => {
-          const digitalCouponItem = item.value === value ? item.label : null;
-          if (digitalCouponItem && digitalCouponItem.includes("Digital") && editableDigitalCoupon) {
-            return true;
-          }
-          return item.value === value;
-        });
+        const found = group.items.find(item => item.value === value);
         if (found) return found;
       }
     }
     return null;
   };
-  useEffect(() => {
-    setSelected(findSelectedItem());
-    setHasValue(!!findSelectedItem());
-  }, [value]);
+  const selected = findSelectedItem();
+  const hasValue = !!selected;
   const getTemplateParams = label => {
     if (!label) return [];
 
@@ -57941,7 +57933,6 @@ const OverlayDropdown = _ref => {
     return "";
   };
   return /*#__PURE__*/React$1.createElement(DropdownContainer, {
-    className: className,
     width: width,
     ref: containerRef
   }, /*#__PURE__*/React$1.createElement(Label$1, {
@@ -57963,7 +57954,7 @@ const OverlayDropdown = _ref => {
     onMouseEnter: () => setHoveredText(selected?.label),
     onMouseLeave: () => setHoveredText(null),
     color: !selected && open ? placeHolderColor : "inherit"
-  }, selected ? selected.label.includes("Digital") && editableDigitalCoupon ? dropdownDigitalCouponTitle !== "" ? dropdownDigitalCouponTitle : selected.label : selected.label : open ? placeHolder : ""), open ? /*#__PURE__*/React$1.createElement(MenuItemUpIcon, {
+  }, selected ? selected.label : open ? placeHolder : ''), open ? /*#__PURE__*/React$1.createElement(MenuItemUpIcon, {
     width: "12px",
     height: "12px",
     color: "#B1B1B1"
@@ -57975,7 +57966,7 @@ const OverlayDropdown = _ref => {
     ref: dropdownRef,
     role: "listbox",
     dropdownMaxHeight: dropdownMaxHeight,
-    width: dropdownWidth,
+    width: width,
     position: dropdownPosition
   }, dataToRender.map((group, groupIndex) => group.items?.length > 0 && /*#__PURE__*/React$1.createElement(SectionDiv, {
     $showBorder: group.overlayName,
@@ -58011,14 +58002,11 @@ const OverlayDropdown = _ref => {
       }
     }
   }, /*#__PURE__*/React$1.createElement(TruncatedText, {
-    onMouseEnter: () => setHoveredText(selected?.label),
-    onMouseLeave: () => setHoveredText(null),
-    color: !selected && open ? textColorMenu : "inherit"
-  }, group.templateType === 3 && editableDigitalCoupon ? dropdownDigitalCouponTitle !== "" ? dropdownDigitalCouponTitle : item.label : item.label), group.templateType === 2 ? /*#__PURE__*/React$1.createElement(ChervronRightIcon, {
-    fill: item.value === value ? "#fff" : "#212121"
-  }) : group.templateType === 3 && editableDigitalCoupon ? dropdownDigitalCouponTitle === "" ? /*#__PURE__*/React$1.createElement(ChervronRightIcon, {
+    onMouseEnter: () => setHoveredText(item.label),
+    onMouseLeave: () => setHoveredText(null)
+  }, item.label), group.templateType === 2 ? /*#__PURE__*/React$1.createElement(ChervronRightIcon, {
     fill: item.value === value ? "#fff" : "#212121"
-  }) : /*#__PURE__*/React$1.createElement(PenIcon, {
+  }) : group.templateType === 3 && editableDigitalCoupon ? /*#__PURE__*/React$1.createElement(PenIcon, {
     fill: item.value === value ? "#fff" : "#212121"
   }) : item.value === value && /*#__PURE__*/React$1.createElement(OkIcon, {
     width: "22px",