sag_components 2.0.0-beta247 → 2.0.0-beta249

package/dist/index.d.ts

@@ -1284,13 +1284,12 @@ declare function ModalWithOverlay(props: any): react_jsx_runtime.JSX.Element;
 
 declare function DropdownNew(props: any): react_jsx_runtime.JSX.Element;
 
-declare function WeeksPicker({ label, disabled, borderColor, borderColorFocus, textColor, text, hoverColor, required, placeholder, borderRadius, year, width, height, withMarginBottom, onChange, selectedValue, isDarkerBackground, allowedWeekRange, restrictToRange, }: {
+declare function WeeksPicker({ label, disabled, borderColor, borderColorFocus, textColor, hoverColor, required, placeholder, borderRadius, year, width, height, withMarginBottom, onChange, selectedValue, isDarkerBackground, allowedWeekRange, restrictToRange, }: {
     label: any;
     disabled: any;
     borderColor: any;
     borderColorFocus: any;
     textColor: any;
-    text?: string;
     hoverColor: any;
     required: any;
     placeholder: any;
@@ -1575,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, width, height, label, labelEmptyValue, showLabelOnTop, placeHolder, labelColor, placeHolderColor, margin, editableDigitalCoupon, dropdownDigitalCouponTitle, ...props }: {
+declare function OverlayDropdown({ data, value, onSelectClick, disabled, isDarkerBackground, required, selectedColor, hoverColor, dropdownMaxHeight, width, height, label, labelEmptyValue, showLabelOnTop, placeHolder, labelColor, placeHolderColor, textColorMenu, margin, editableDigitalCoupon, dropdownDigitalCouponTitle, ...props }: {
     [x: string]: any;
     data?: any[];
     value: any;
@@ -1594,6 +1593,7 @@ declare function OverlayDropdown({ data, value, onSelectClick, disabled, isDarke
     placeHolder: any;
     labelColor: any;
     placeHolderColor: any;
+    textColorMenu?: string;
     margin?: string;
     editableDigitalCoupon?: boolean;
     dropdownDigitalCouponTitle?: string;

package/dist/index.esm.js

@@ -10581,23 +10581,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('');
@@ -11039,22 +11040,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('');
@@ -24165,21 +24167,22 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = ({
-  label,
-  hoverColor,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownSingle = _ref => {
+  let {
+    label,
+    hoverColor,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    xIconShow,
+    labelColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24636,25 +24639,26 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  height,
-  error,
-  errorMessage,
-  labelColor,
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop,
-  dropdownHeight
-}) => {
+const QuickFilterDropdownMultiSelection = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    height,
+    error,
+    errorMessage,
+    labelColor,
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop,
+    dropdownHeight
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -35195,7 +35199,6 @@ const WeeksPicker = _ref => {
     borderColor,
     borderColorFocus,
     textColor,
-    text = 'Week',
     hoverColor,
     required,
     placeholder,
@@ -35219,7 +35222,6 @@ const WeeksPicker = _ref => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [showAbove, setShowAbove] = useState(false);
-  const [previousText, setPreviousText] = useState(text);
 
   // Function to parse the value string and extract week numbers
   const parseValueToWeeks = valueString => {
@@ -35227,21 +35229,25 @@ const WeeksPicker = _ref => {
       startWeek: null,
       endWeek: null
     };
-    const rangeMatch = valueString.match(/^(.+?)\s*(\d+)\s*-\s*(\d+)$/);
-    if (rangeMatch) {
-      const startWeek = parseInt(rangeMatch[2]);
-      const endWeek = parseInt(rangeMatch[3]);
+
+    // Handle single week: "Week 5"
+    const singleWeekMatch = valueString.match(/^Week (\d+)$/);
+    if (singleWeekMatch) {
+      const week = parseInt(singleWeekMatch[1]);
       return {
-        startWeek,
-        endWeek
+        startWeek: week,
+        endWeek: week
       };
     }
-    const singleMatch = valueString.match(/^(.+?)\s*(\d+)$/);
-    if (singleMatch) {
-      const week = parseInt(singleMatch[2]);
+
+    // Handle week range: "Weeks 5 - 10"
+    const rangeMatch = valueString.match(/^Weeks (\d+) - (\d+)$/);
+    if (rangeMatch) {
+      const startWeek = parseInt(rangeMatch[1]);
+      const endWeek = parseInt(rangeMatch[2]);
       return {
-        startWeek: week,
-        endWeek: week
+        startWeek,
+        endWeek
       };
     }
     return {
@@ -35317,27 +35323,6 @@ const WeeksPicker = _ref => {
       }
     }
   }, [allowedWeekRange, restrictToRange]);
-  useEffect(() => {
-    if (previousText !== text) {
-      setPreviousText(text);
-    }
-    const currentValue = value || selectedValue;
-    if (currentValue) {
-      const {
-        startWeek,
-        endWeek
-      } = parseValueToWeeks(currentValue);
-      if (startWeek && endWeek) {
-        const newValue = endWeek === startWeek ? text === 'Week' ? `${text} ${startWeek}` : `${text}${startWeek}` : text === 'Week' ? `${text}s ${startWeek} - ${endWeek}` : `${text}${startWeek} - ${endWeek}`;
-        if (newValue !== value) {
-          setValue(newValue);
-          if (onChange) {
-            onChange(newValue);
-          }
-        }
-      }
-    }
-  }, [text, value, selectedValue, previousText, onChange]);
   const handleToggle = () => {
     setIsOpen(!isOpen);
   };
@@ -35358,6 +35343,11 @@ const WeeksPicker = _ref => {
     onChange(newValue);
     setValue(newValue);
   };
+  useEffect(() => {
+    if (selectedValue !== undefined) {
+      setValue(selectedValue);
+    }
+  }, [selectedValue]);
   const handleApply = () => {
     setIsOpen(false);
   };
@@ -35441,7 +35431,7 @@ const WeeksPicker = _ref => {
         console.warn('Selected weeks are outside the allowed range');
         return;
       }
-      const tempValue = end === start ? text === 'Week' ? `${text} ${start}` : `${text}${start}` : text === 'Week' ? `${text}s ${start} - ${end}` : `${text}${start} - ${end}`;
+      const tempValue = end === start ? `Week ${start}` : `Weeks ${start} - ${end}`;
       onChange(tempValue);
       setValue(tempValue);
       handleApply();
@@ -36108,15 +36098,19 @@ const ToggleInput = styled.input`
 const ToggleSlider = styled.span`
   display: block;
   position: relative;
-  background: ${({
-  checked,
-  disabled
-}) => checked ? "#006d6a" : disabled ? "#B1B1B1" : "#D0D0D0"};
+  background: ${_ref => {
+  let {
+    checked,
+    disabled
+  } = _ref;
+  return checked ? "#006d6a" : disabled ? "#B1B1B1" : "#D0D0D0";
+}};
   border-radius: 999px;
   transition: background 0.2s;
-  ${({
-  size
-}) => {
+  ${_ref2 => {
+  let {
+    size
+  } = _ref2;
   switch (size) {
     case "s":
       return css`width: 40px; height: 20px;`;
@@ -36132,14 +36126,18 @@ const ToggleSlider = styled.span`
     left: 3px;
     top: 50%;
     transform: translateY(-50%);
-    background: ${({
-  disabled
-}) => disabled ? "#D0D0D0" : "#fff"};
+    background: ${_ref3 => {
+  let {
+    disabled
+  } = _ref3;
+  return disabled ? "#D0D0D0" : "#fff";
+}};
     border-radius: 50%;
     transition: left 0.2s, width 0.2s, height 0.2s;
-    ${({
-  size
-}) => {
+    ${_ref4 => {
+  let {
+    size
+  } = _ref4;
   switch (size) {
     case "s":
       return css`width: 14px; height: 14px;`;
@@ -36149,10 +36147,11 @@ const ToggleSlider = styled.span`
       return css`width: 20px; height: 20px;`;
   }
 }}
-    left: ${({
-  checked,
-  size
-}) => {
+    left: ${_ref5 => {
+  let {
+    checked,
+    size
+  } = _ref5;
   if (!checked) return "3px";
   switch (size) {
     case "s":
@@ -36166,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 {
@@ -57659,6 +57658,7 @@ const OverlayDropdown = _ref => {
     placeHolder,
     labelColor,
     placeHolderColor,
+    textColorMenu = "black",
     margin = "8px",
     editableDigitalCoupon = false,
     dropdownDigitalCouponTitle = "",
@@ -57933,10 +57933,12 @@ const OverlayDropdown = _ref => {
   }, /*#__PURE__*/React$1.createElement(TruncatedText, {
     onMouseEnter: () => setHoveredText(selected?.label),
     onMouseLeave: () => setHoveredText(null),
-    color: !selected && open ? placeHolderColor : "inherit"
+    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 ? /*#__PURE__*/React$1.createElement(PenIcon, {
+  }) : group.templateType === 3 && editableDigitalCoupon ? dropdownDigitalCouponTitle === "" ? /*#__PURE__*/React$1.createElement(ChervronRightIcon, {
+    fill: item.value === value ? "#fff" : "#212121"
+  }) : /*#__PURE__*/React$1.createElement(PenIcon, {
     fill: item.value === value ? "#fff" : "#212121"
   }) : item.value === value && /*#__PURE__*/React$1.createElement(OkIcon, {
     width: "22px",