sag_components 2.0.0-beta148 → 2.0.0-beta149

package/dist/index.esm.js

@@ -10320,23 +10320,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('');
@@ -10778,22 +10779,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('');
@@ -23904,21 +23906,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("");
@@ -24315,23 +24318,24 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  labelColor,
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownMultiSelection = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    labelColor,
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -35563,9 +35567,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 {
@@ -52387,21 +52391,33 @@ const DropdownList = styled.ul`
       `}
 `;
 const SectionDiv = styled.div`
-  &:nth-child(2),
-  &:nth-child(4){
-    border-top: 1px solid #e6e2e2ff;
-    padding-top: 16px;
+${({
+  $showBorder
+}) => {
+  switch ($showBorder) {
+    case 'Template Offer':
+      return css`border-top: 1px solid #e6e2e2ff;
+         margin-top: 8px;`;
+    case 'Last defined by you':
+      return css`border-bottom: 1px solid #e6e2e2ff;
+         padding-bottom: 8px;
+        margin-bottom: 8px;`;
+    default:
+      return css`border-top: none`;
   }
+}}
 `;
 const SectionTitle = styled.li`
   font-size: 14px;
   color: #bdbdbd;
-  padding: 12px 12px 0 12px;
+  padding: 8px 12px 0 12px;
+  margin: 8px 12px 0 12px;
   font-weight: 500;
   pointer-events: none;
+  list-style: none;
 `;
 const DropdownItem = styled.li`
-  padding: 8px 16px;
+  padding: 8px 12px;
   cursor: pointer; 
   display: flex;
   align-items: center;
@@ -52943,9 +52959,10 @@ const OverlayDropdown = _ref => {
     dropdownMaxHeight: dropdownMaxHeight,
     width: width,
     position: dropdownPosition
-  }, dataToRender.map((group, groupIndex) => group.items && group.items.length > 0 && /*#__PURE__*/React$1.createElement(SectionDiv, {
+  }, dataToRender.map((group, groupIndex) => group.items?.length > 0 && /*#__PURE__*/React$1.createElement(SectionDiv, {
+    $showBorder: group.overlayName,
     key: group.overlayCode
-  }, (groupIndex === 0 || groupIndex === 3) && /*#__PURE__*/React$1.createElement(SectionTitle, null, group.overlayName), group.items.map(item => /*#__PURE__*/React$1.createElement(DropdownItem, {
+  }, ['Template Offer', 'Last defined by you'].includes(group.overlayName) && /*#__PURE__*/React$1.createElement(SectionTitle, null, group.overlayName), group.items.map(item => /*#__PURE__*/React$1.createElement(DropdownItem, {
     key: item.value,
     selected: item.value === value,
     selectedColor: selectedColor,