sag_components 2.0.0-beta233 → 2.0.0-beta234

package/dist/index.d.ts

@@ -1416,12 +1416,13 @@ declare function Tooltip(props: any): react_jsx_runtime.JSX.Element;
  * ToggleSwitch component for on/off states.
  * Supports small/large sizes and disabled state.
  */
-declare function ToggleSwitch({ checked, onChange, size, disabled, ...props }: {
+declare function ToggleSwitch({ checked, onChange, size, disabled, aa, ...props }: {
     [x: string]: any;
     checked: any;
     onChange: any;
     size?: string;
     disabled?: boolean;
+    aa: any;
 }): react_jsx_runtime.JSX.Element;
 declare namespace ToggleSwitch {
     namespace propTypes {

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('');
@@ -36085,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;
@@ -36095,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;`;
@@ -36122,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;`;
@@ -36134,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":
@@ -36151,9 +36164,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 {
@@ -36161,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,
@@ -54935,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;
@@ -55362,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 [];
 
@@ -55517,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"
@@ -55529,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,
@@ -55571,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"