sag_components 2.0.0-beta233 → 2.0.0-beta235

package/dist/index.esm.js

@@ -8929,26 +8929,27 @@ const IconContainer$5 = styled.div`
   cursor:  pointer;  
 `;
 
-const DropdownSingleNew = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  onChange,
-  required,
-  disabled,
-  width,
-  height,
-  withMarginBottom = true,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop,
-  orderBy,
-  placeHolder = "",
-  elementType
-}) => {
+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 [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [showAbove, setShowAbove] = useState(false);
@@ -9453,26 +9454,27 @@ const IconContainer$4 = styled.div`
   cursor:  pointer;  
 `;
 
-const DropdownMultiNew = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  onChange,
-  required,
-  disabled,
-  width,
-  height,
-  withMarginBottom = true,
-  error,
-  errorMessage,
-  labelColor,
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop,
-  orderBy,
-  elementType
-}) => {
+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 [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [showAbove, setShowAbove] = useState(false);
@@ -10581,23 +10583,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 +11042,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 +24169,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 +24641,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('');
@@ -34967,17 +34973,18 @@ css`
  * • onApply(start,end) — callback, both numbers (inclusive)
  * • onCancel()         — callback
  */
-const WeeksCalendar = ({
-  year,
-  defaultStartWeek = null,
-  defaultEndWeek = null,
-  backgroundColor = "#066768",
-  hoverBackgroundColor = "#E6F0F0",
-  allowedWeekRange = null,
-  // New prop for range restriction
-  onApply,
-  onCancel
-}) => {
+const WeeksCalendar = _ref => {
+  let {
+    year,
+    defaultStartWeek = null,
+    defaultEndWeek = null,
+    backgroundColor = "#066768",
+    hoverBackgroundColor = "#E6F0F0",
+    allowedWeekRange = null,
+    // New prop for range restriction
+    onApply,
+    onCancel
+  } = _ref;
   // state -------------------------------------------------
   const [startWeek, setStartWeek] = useState(defaultStartWeek);
   const [endWeek, setEndWeek] = useState(defaultEndWeek);
@@ -36085,9 +36092,12 @@ const ToggleSwitchLabel = styled.label`
   position: relative;
   cursor: pointer;
   user-select: none;
-  opacity: ${({
-  disabled
-}) => disabled ? 0.5 : 1};
+  opacity: ${_ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled ? 0.5 : 1;
+}};
 `;
 const ToggleInput = styled.input`
   display: none;
@@ -36095,15 +36105,19 @@ const ToggleInput = styled.input`
 const ToggleSlider = styled.span`
   display: block;
   position: relative;
-  background: ${({
-  checked,
-  disabled
-}) => checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc"};
+  background: ${_ref2 => {
+  let {
+    checked,
+    disabled
+  } = _ref2;
+  return checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc";
+}};
   border-radius: 999px;
   transition: background 0.2s;
-  ${({
-  size
-}) => {
+  ${_ref3 => {
+  let {
+    size
+  } = _ref3;
   switch (size) {
     case "s":
       return css`width: 40px; height: 20px;`;
@@ -36122,9 +36136,10 @@ const ToggleSlider = styled.span`
     background: #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;`;
@@ -36134,10 +36149,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":
@@ -36151,9 +36167,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 {
@@ -54891,10 +54907,11 @@ const DropdownList = styled.ul`
       `}
 `;
 const SectionDiv = styled.div`
-  ${({
-  $showBorder,
-  margin
-}) => {
+  ${_ref => {
+  let {
+    $showBorder,
+    margin
+  } = _ref;
   switch ($showBorder) {
     case 'Template Offer':
       return css`border-top: 1px solid #e6e2e2ff;
@@ -54935,18 +54952,22 @@ const DropdownItem = styled.li`
     background: ${props => props.disabled ? 'transparent' : props.selected ? props.selectedColor || '#066768' : props.hoverColor || '#E6F0F0'};
   }
 `;
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+`;
 const TruncatedText = styled.span`
-  display: inline-block;
-  font-family: "Poppins", sans-serif;
+  flex: 1; 
+  min-width: 0; 
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   line-height: 21px;
+  font-family: "Poppins", sans-serif;
   font-size: 14px;
   font-weight: 400;
-  color: ${props => props.color};
-  max-width: 340px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  vertical-align: middle;
+  color: ${props => props.color}; 
 `;
 styled.div`
   position: absolute;
@@ -55362,13 +55383,6 @@ const OverlayDropdown = _ref => {
   };
   const selected = findSelectedItem();
   const hasValue = !!selected;
-
-  // Tooltip logic for long string
-  const getDisplayText = text => {
-    if (!text) return "";
-    if (text.length > 66) return text.slice(0, 66) + "...";
-    return text;
-  };
   const getTemplateParams = label => {
     if (!label) return [];
 
@@ -55517,11 +55531,11 @@ const OverlayDropdown = _ref => {
     isDarkerBackground: isDarkerBackground,
     height: height,
     type: "button"
-  }, /*#__PURE__*/React$1.createElement(TruncatedText, {
+  }, /*#__PURE__*/React$1.createElement(Wrapper, null, /*#__PURE__*/React$1.createElement(TruncatedText, {
     onMouseEnter: () => setHoveredText(selected?.label),
     onMouseLeave: () => setHoveredText(null),
     color: !selected && open ? placeHolderColor : "inherit"
-  }, selected ? getDisplayText(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"
@@ -55529,7 +55543,7 @@ const OverlayDropdown = _ref => {
     width: "12px",
     height: "12px",
     color: "#B1B1B1"
-  })), open && /*#__PURE__*/React$1.createElement(DropdownList, {
+  }))), open && /*#__PURE__*/React$1.createElement(DropdownList, {
     ref: dropdownRef,
     role: "listbox",
     dropdownMaxHeight: dropdownMaxHeight,
@@ -55571,7 +55585,7 @@ const OverlayDropdown = _ref => {
   }, /*#__PURE__*/React$1.createElement(TruncatedText, {
     onMouseEnter: () => setHoveredText(item.label),
     onMouseLeave: () => setHoveredText(null)
-  }, getDisplayText(item.label)), group.templateType === 2 ? /*#__PURE__*/React$1.createElement(ChervronRightIcon, {
+  }, 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, {
     fill: item.value === value ? "#fff" : "#212121"