sag_components 2.0.0-beta232 → 2.0.0-beta234

package/dist/index.esm.js

@@ -36089,9 +36089,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;
@@ -36099,15 +36102,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" : disabled ? "#B1B1B1" : "#cfd8dc";
+}};
   border-radius: 999px;
   transition: background 0.2s;
-  ${({
-  size
-}) => {
+  ${_ref3 => {
+  let {
+    size
+  } = _ref3;
   switch (size) {
     case "s":
       return css`width: 40px; height: 20px;`;
@@ -36126,9 +36133,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;`;
@@ -36138,10 +36146,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":
@@ -36165,11 +36174,13 @@ function ToggleSwitch(_ref) {
     onChange,
     size = "m",
     disabled = false,
+    aa,
     ...props
   } = _ref;
   return /*#__PURE__*/React$1.createElement(ToggleSwitchLabel, {
     size: size,
-    disabled: disabled
+    disabled: disabled,
+    aa: true
   }, /*#__PURE__*/React$1.createElement(ToggleInput, _extends$1({
     type: "checkbox",
     checked: checked,
@@ -38242,48 +38253,28 @@ const SortPop = props => {
     color = '#066768',
     onCheck = () => {},
     onReset = () => {},
-    selectedValue: externalSelectedValue = null // Accept external state
+    selectedValue: externalSelectedValue = null
   } = props;
-
-  // Use external state if provided, otherwise use internal state
   const [internalValue, setInternalValue] = useState(null);
   const value = externalSelectedValue !== null ? externalSelectedValue : internalValue;
   const setValue = externalSelectedValue !== null ? () => {} : setInternalValue;
-
-  // Initialize internal state from external state if provided
   useEffect(() => {
     if (externalSelectedValue !== null) {
       setInternalValue(externalSelectedValue);
     }
   }, [externalSelectedValue]);
   const handleReset = () => {
-    // console.log('SortPop Reset:', {
-    //     menuName,
-    //     previousValue: value,
-    //     newValue: null,
-    //     timestamp: new Date().toISOString()
-    // });
-
-    // Reset state (either internal or external)
     if (externalSelectedValue === null) {
       setValue(null);
     }
-
-    // Call the onReset callback
     onReset();
-
-    // Notify parent about the reset
     onCheck(null);
   };
   const handleChange = newValue => {
     const selectedItem = list.find(item => item.value === newValue.value);
-
-    // Update state (either internal or external)
     if (externalSelectedValue === null) {
       setValue(selectedItem);
     }
-
-    // Notify parent about the change
     onCheck(selectedItem);
   };
   useEffect(() => {
@@ -38294,17 +38285,18 @@ const SortPop = props => {
     height: height
   }, /*#__PURE__*/React$1.createElement(Title$3, null, menuName), /*#__PURE__*/React$1.createElement(DropdownList$1, {
     role: "listbox"
-  }, list.map(item => /*#__PURE__*/React$1.createElement(DropdownItem$1, {
-    key: item.value,
-    selected: item.value === value,
-    onClick: () => {
-      handleChange(item);
-    }
-  }, /*#__PURE__*/React$1.createElement(TruncatedText$1, null, item.label), item.value === value && /*#__PURE__*/React$1.createElement(Checkmark, {
-    color: color
-  }, "\u2713")))), /*#__PURE__*/React$1.createElement(ButtonWrapper$1, null, /*#__PURE__*/React$1.createElement(ResetButton, {
+  }, list.map(item => {
+    const isSelected = value && item.value === value.value;
+    return /*#__PURE__*/React$1.createElement(DropdownItem$1, {
+      key: item.value,
+      selected: isSelected,
+      onClick: () => handleChange(item)
+    }, /*#__PURE__*/React$1.createElement(TruncatedText$1, null, item.label), isSelected && /*#__PURE__*/React$1.createElement(Checkmark, {
+      color: color
+    }, "\u2713"));
+  })), /*#__PURE__*/React$1.createElement(ButtonWrapper$1, null, /*#__PURE__*/React$1.createElement(ResetButton, {
     onClick: handleReset,
-    disabled: value === null // Disable reset if no value is selected
+    disabled: value === null
   }, "Reset")));
 };
 
@@ -54958,18 +54950,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;
@@ -55385,13 +55381,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 [];
 
@@ -55540,11 +55529,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"
@@ -55552,7 +55541,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,
@@ -55594,7 +55583,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"