sag_components 2.0.0-beta264 → 2.0.0-beta266

package/dist/index.js

@@ -8939,27 +8939,26 @@ const IconContainer$5 = styled__default["default"].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] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [showAbove, setShowAbove] = React$1.useState(false);
@@ -9464,27 +9463,26 @@ const IconContainer$4 = styled__default["default"].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] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [showAbove, setShowAbove] = React$1.useState(false);
@@ -10593,24 +10591,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] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState('');
@@ -11052,23 +11049,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] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState('');
@@ -24179,22 +24175,21 @@ const DeleteIcon = styled__default["default"].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] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState("");
@@ -24651,26 +24646,25 @@ const IconContainer$2 = styled__default["default"].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] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState('');
@@ -34983,18 +34977,17 @@ styled.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] = React$1.useState(defaultStartWeek);
   const [endWeek, setEndWeek] = React$1.useState(defaultEndWeek);
@@ -36182,9 +36175,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 {
@@ -57737,7 +57730,6 @@ const OverlayDropdown = _ref => {
     selectedColor = "#066768",
     hoverColor = "#E6F0F0",
     dropdownMaxHeight = "600px",
-    dropdownWidth = "100%",
     width = "100%",
     height = "auto",
     label,
@@ -57746,23 +57738,20 @@ const OverlayDropdown = _ref => {
     placeHolder,
     labelColor,
     placeHolderColor,
-    textColorMenu = "black",
     margin = "8px",
     editableDigitalCoupon = false,
-    dropdownDigitalCouponTitle = "",
-    className = "",
     ...props
   } = _ref;
   const [open, setOpen] = React$1.useState(false);
   const [hoveredText, setHoveredText] = React$1.useState(null);
   const [templateDialog, setTemplateDialog] = React$1.useState(null);
   const [dropdownPosition, setDropdownPosition] = React$1.useState("below");
-  const [selected, setSelected] = React$1.useState("");
-  const [hasValue, setHasValue] = React$1.useState(false);
   const [lastDefinedGroup, setLastDefinedGroup] = React$1.useState(data.find(group => group.overlayCode === "last_defined"));
   const buttonRef = React$1.useRef(null);
   const dropdownRef = React$1.useRef(null);
   const containerRef = React$1.useRef(null);
+
+  // Click outside to close dropdown
   React$1.useEffect(() => {
     const handleClickOutside = event => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
@@ -57778,13 +57767,20 @@ const OverlayDropdown = _ref => {
       document.removeEventListener("touchstart", handleClickOutside);
     };
   }, [open]);
+
+  // Calculate dropdown position when opening
   React$1.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 {
@@ -57792,6 +57788,8 @@ const OverlayDropdown = _ref => {
       }
     }
   }, [open, dropdownMaxHeight, margin]);
+
+  // Combine original data with "Last defined by you" group
   const getDataWithLastDefined = () => {
     const combinedData = [...data];
     if (lastDefinedGroup) {
@@ -57799,26 +57797,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;
   };
-  React$1.useEffect(() => {
-    setSelected(findSelectedItem());
-    setHasValue(!!findSelectedItem());
-  }, [value]);
+  const selected = findSelectedItem();
+  const hasValue = !!selected;
   const getTemplateParams = label => {
     if (!label) return [];
 
@@ -57951,7 +57943,6 @@ const OverlayDropdown = _ref => {
     return "";
   };
   return /*#__PURE__*/React__default["default"].createElement(DropdownContainer, {
-    className: className,
     width: width,
     ref: containerRef
   }, /*#__PURE__*/React__default["default"].createElement(Label$1, {
@@ -57973,7 +57964,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__default["default"].createElement(MenuItemUpIcon, {
+  }, selected ? selected.label : open ? placeHolder : ''), open ? /*#__PURE__*/React__default["default"].createElement(MenuItemUpIcon, {
     width: "12px",
     height: "12px",
     color: "#B1B1B1"
@@ -57985,7 +57976,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__default["default"].createElement(SectionDiv, {
     $showBorder: group.overlayName,
@@ -58021,14 +58012,11 @@ const OverlayDropdown = _ref => {
       }
     }
   }, /*#__PURE__*/React__default["default"].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__default["default"].createElement(ChervronRightIcon, {
-    fill: item.value === value ? "#fff" : "#212121"
-  }) : group.templateType === 3 && editableDigitalCoupon ? dropdownDigitalCouponTitle === "" ? /*#__PURE__*/React__default["default"].createElement(ChervronRightIcon, {
+    onMouseEnter: () => setHoveredText(item.label),
+    onMouseLeave: () => setHoveredText(null)
+  }, item.label), group.templateType === 2 ? /*#__PURE__*/React__default["default"].createElement(ChervronRightIcon, {
     fill: item.value === value ? "#fff" : "#212121"
-  }) : /*#__PURE__*/React__default["default"].createElement(PenIcon, {
+  }) : group.templateType === 3 && editableDigitalCoupon ? /*#__PURE__*/React__default["default"].createElement(PenIcon, {
     fill: item.value === value ? "#fff" : "#212121"
   }) : item.value === value && /*#__PURE__*/React__default["default"].createElement(OkIcon, {
     width: "22px",