sag_components 2.0.0-beta233 → 2.0.0-beta234

package/dist/index.js

@@ -10591,23 +10591,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] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState('');
@@ -11049,22 +11050,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] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState('');
@@ -24175,21 +24177,22 @@ const DeleteIcon = styled__default["default"].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] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState("");
@@ -24646,25 +24649,26 @@ const IconContainer$2 = styled__default["default"].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] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState('');
@@ -36095,9 +36099,12 @@ const ToggleSwitchLabel = styled__default["default"].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__default["default"].input`
   display: none;
@@ -36105,15 +36112,19 @@ const ToggleInput = styled__default["default"].input`
 const ToggleSlider = styled__default["default"].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 styled.css`width: 40px; height: 20px;`;
@@ -36132,9 +36143,10 @@ const ToggleSlider = styled__default["default"].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 styled.css`width: 14px; height: 14px;`;
@@ -36144,10 +36156,11 @@ const ToggleSlider = styled__default["default"].span`
       return styled.css`width: 20px; height: 20px;`;
   }
 }}
-    left: ${({
-  checked,
-  size
-}) => {
+    left: ${_ref5 => {
+  let {
+    checked,
+    size
+  } = _ref5;
   if (!checked) return "3px";
   switch (size) {
     case "s":
@@ -36161,9 +36174,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 {
@@ -36171,11 +36184,13 @@ function ToggleSwitch(_ref) {
     onChange,
     size = "m",
     disabled = false,
+    aa,
     ...props
   } = _ref;
   return /*#__PURE__*/React__default["default"].createElement(ToggleSwitchLabel, {
     size: size,
-    disabled: disabled
+    disabled: disabled,
+    aa: true
   }, /*#__PURE__*/React__default["default"].createElement(ToggleInput, _extends$1({
     type: "checkbox",
     checked: checked,
@@ -54945,18 +54960,22 @@ const DropdownItem = styled__default["default"].li`
     background: ${props => props.disabled ? 'transparent' : props.selected ? props.selectedColor || '#066768' : props.hoverColor || '#E6F0F0'};
   }
 `;
+const Wrapper = styled__default["default"].div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+`;
 const TruncatedText = styled__default["default"].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__default["default"].div`
   position: absolute;
@@ -55372,13 +55391,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 [];
 
@@ -55527,11 +55539,11 @@ const OverlayDropdown = _ref => {
     isDarkerBackground: isDarkerBackground,
     height: height,
     type: "button"
-  }, /*#__PURE__*/React__default["default"].createElement(TruncatedText, {
+  }, /*#__PURE__*/React__default["default"].createElement(Wrapper, null, /*#__PURE__*/React__default["default"].createElement(TruncatedText, {
     onMouseEnter: () => setHoveredText(selected?.label),
     onMouseLeave: () => setHoveredText(null),
     color: !selected && open ? placeHolderColor : "inherit"
-  }, selected ? getDisplayText(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"
@@ -55539,7 +55551,7 @@ const OverlayDropdown = _ref => {
     width: "12px",
     height: "12px",
     color: "#B1B1B1"
-  })), open && /*#__PURE__*/React__default["default"].createElement(DropdownList, {
+  }))), open && /*#__PURE__*/React__default["default"].createElement(DropdownList, {
     ref: dropdownRef,
     role: "listbox",
     dropdownMaxHeight: dropdownMaxHeight,
@@ -55581,7 +55593,7 @@ const OverlayDropdown = _ref => {
   }, /*#__PURE__*/React__default["default"].createElement(TruncatedText, {
     onMouseEnter: () => setHoveredText(item.label),
     onMouseLeave: () => setHoveredText(null)
-  }, getDisplayText(item.label)), group.templateType === 2 ? /*#__PURE__*/React__default["default"].createElement(ChervronRightIcon, {
+  }, item.label), group.templateType === 2 ? /*#__PURE__*/React__default["default"].createElement(ChervronRightIcon, {
     fill: item.value === value ? "#fff" : "#212121"
   }) : group.templateType === 3 && editableDigitalCoupon ? /*#__PURE__*/React__default["default"].createElement(PenIcon, {
     fill: item.value === value ? "#fff" : "#212121"