sag_components 2.0.0-beta73 → 2.0.0-beta75

package/dist/index.esm.js

@@ -3739,7 +3739,7 @@ display: flex;
 flex-direction: row;
 
 `;
-styled.div`
+const TabActionLine = styled.div`
   margin-left: auto;
   display: flex;
   align-items: center;
@@ -3842,6 +3842,7 @@ const TabMenu = props => {
     showLabel,
     showSearchInput,
     showViewOptionsButton,
+    headlineContent,
     setTopRightButton,
     buttonHoverColor,
     disabledButton,
@@ -3888,7 +3889,7 @@ const TabMenu = props => {
     color: color,
     width: `${100 / tabs.length}%`,
     role: "presentation"
-  }))), setTopRightButton && /*#__PURE__*/React$1.createElement(Button, {
+  }))), headlineContent && /*#__PURE__*/React$1.createElement(TabActionLine, null, headlineContent), setTopRightButton && /*#__PURE__*/React$1.createElement(Button, {
     text: rightButtonText,
     rightIcon: rightButtonIcon,
     size: "small",
@@ -10232,18 +10233,12 @@ const OptionsContainer$3 = styled.div`
   padding-top: 8px;
 `;
 
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-// import ChervronRightIcon from './icons/ChervronRightIcon';
-// import ChervronLeftIcon from './icons/ChervronLeftIcon';
-
-// Styled components for the date picker
 const DatePickerContainer$2 = styled.div`
   position: relative;
 `;
 const DatePickerPopup$1 = styled.div`
   position: absolute;
   width: auto;
-  // margin: 5px;
   height: 120px;
   top: 100%;
   box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
@@ -10259,21 +10254,10 @@ const DatePickerHeader$1 = styled.div`
   justify-content: space-between;
   margin-bottom: 10px;
 `;
-
-// const NavDiv = styled.div`
-//   width: 80px;
-//   height: 30px;
-//   display: flex;
-//   padding: 5px;
-//   justify-content: space-around;
-// `;
-
 const DatePickerSelect$1 = styled.select`
   padding: 4px;
   border: none;
-  font-family: Poppins;
   font-size: 12px; 
-  font-style: normal;
   font-weight: 400;
   cursor: pointer;
 
@@ -10295,7 +10279,6 @@ const DateCell$1 = styled.div`
   width: 100%;
   aspect-ratio: 1 / 1;
   /* height: 32px; */
-  font-family: Poppins;
   border-radius: 4px;
   font-size: 12px;
   font-style: normal;
@@ -10327,6 +10310,7 @@ const DateCell$1 = styled.div`
     color: #ccc;
   }
 `;
+
 const generateYearsArray$1 = (startYear, endDate) => {
   const years = [];
   const endYear = endDate.getFullYear();
@@ -10335,14 +10319,14 @@ const generateYearsArray$1 = (startYear, endDate) => {
   }
   return years;
 };
-const years$1 = generateYearsArray$1(2022, new Date());
 const QuarterPopupPicker = ({
   isOpen,
   onChangeDate,
   value,
   setValue,
   startDateValue,
-  availableQuarters
+  availableQuarters,
+  startYear = 2022
 }) => {
   const [selectedQuarter, setSelectedQuarter] = useState(null);
   const [currentStartDate, setCurrentStartDate] = useState(new Date(new Date().getFullYear(), 0, 1));
@@ -10386,7 +10370,7 @@ const QuarterPopupPicker = ({
         setSelectedQuarter(null);
         setValue('');
       }
-    }, years$1.map(year => /*#__PURE__*/React$1.createElement("option", {
+    }, generateYearsArray$1(startYear, new Date()).map(year => /*#__PURE__*/React$1.createElement("option", {
       key: `${year}`,
       value: `${year}`
     }, year))))), /*#__PURE__*/React$1.createElement(DatePickerCalendar$1, null, dates.map(date => {
@@ -10428,7 +10412,8 @@ const QuarterPicker = _ref => {
     borderColor,
     borderColorFocus,
     textColor,
-    selectedValue
+    selectedValue,
+    startYear
   } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
@@ -10547,7 +10532,8 @@ const QuarterPicker = _ref => {
     value: value,
     setValue: setValue,
     startDateValue: startDateValue,
-    availableQuarters: availableQuarters
+    availableQuarters: availableQuarters,
+    startYear: startYear
   })));
 };
 QuarterPicker.propTypes = {
@@ -10674,16 +10660,12 @@ const OptionsContainer$2 = styled.div`
   padding-top: 8px;
 `;
 
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-
-// Styled components for the date picker
 const DatePickerContainer$1 = styled.div`
   position: relative;
 `;
 const DatePickerPopup = styled.div`
   position: absolute;
   width: auto;
-  // margin: 5px;
   height: 250px;
   top: 100%;
   box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
@@ -10709,9 +10691,7 @@ styled.div`
 const DatePickerSelect = styled.select`
   padding: 4px;
   border: none;
-  font-family: Poppins;
   font-size: 12px; 
-  font-style: normal;
   font-weight: 400;
   cursor: pointer;
 
@@ -10733,7 +10713,6 @@ const DateCell = styled.div`
   width: 100%;
   aspect-ratio: 1 / 1;
   /* height: 32px; */
-  font-family: Poppins;
   border-radius: 4px;
   font-size: 12px;
   font-style: normal;
@@ -10764,6 +10743,7 @@ const DateCell = styled.div`
     color: #ccc;
   }
 `;
+
 const generateYearsArray = (startYear, endDate) => {
   const years = [];
   const endYear = endDate.getFullYear();
@@ -10772,14 +10752,14 @@ const generateYearsArray = (startYear, endDate) => {
   }
   return years;
 };
-const years = generateYearsArray(2022, new Date());
 const MonthPopupPicker = ({
   isOpen,
   onChangeDate,
   value,
   setValue,
   startDateValue,
-  availableMonths
+  availableMonths,
+  startYear = 2022
 }) => {
   const [selectedMonth, setSelectedMonth] = useState(null);
   const [currentStartDate, setCurrentStartDate] = useState(new Date(new Date().getFullYear(), 0, 1));
@@ -10817,7 +10797,7 @@ const MonthPopupPicker = ({
         setSelectedMonth(null);
         setValue('');
       }
-    }, years.map(year => /*#__PURE__*/React$1.createElement("option", {
+    }, generateYearsArray(startYear, new Date()).map(year => /*#__PURE__*/React$1.createElement("option", {
       key: `${year}`,
       value: `${year}`
     }, year))))), /*#__PURE__*/React$1.createElement(DatePickerCalendar, null, dates.map(date => {
@@ -10825,7 +10805,7 @@ const MonthPopupPicker = ({
         month: 'short'
       })} ${date.getFullYear()}`;
       const isAvailableMonth = availableMonths.includes(monthYear);
-      const isDisabled = !isAvailableMonth || date.getMonth() === 0 && date.getFullYear() === 2022;
+      const isDisabled = !isAvailableMonth || date.getMonth() === 0 && date.getFullYear() === startYear;
       return /*#__PURE__*/React$1.createElement(DateCell, {
         key: date.toISOString()
         // eslint-disable-next-line no-nested-ternary
@@ -10890,7 +10870,8 @@ const MonthPicker = _ref => {
     borderColor,
     borderColorFocus,
     textColor,
-    selectedValue
+    selectedValue,
+    startYear
   } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
@@ -11008,7 +10989,8 @@ const MonthPicker = _ref => {
     value: value,
     setValue: setValue,
     startDateValue: startDateValue,
-    availableMonths: availableMonths
+    availableMonths: availableMonths,
+    startYear: startYear
   })));
 };
 MonthPicker.propTypes = {
@@ -11131,6 +11113,8 @@ const FilterPanel = props => {
     availableQuarters,
     availableMonths,
     availableYears,
+    monthStartYear,
+    quarterStartYear,
     fieldsData,
     borderColor,
     okButtonBackgroundColor,
@@ -11367,6 +11351,7 @@ const FilterPanel = props => {
       case 'month':
         content = /*#__PURE__*/React$1.createElement(MonthPicker, {
           availableMonths: availableMonths,
+          startYear: monthStartYear,
           name: ''.concat(item.name, '_Month'),
           borderColor: "#E7E7E7",
           borderColorFocus: borderColor,
@@ -11401,6 +11386,7 @@ const FilterPanel = props => {
       case 'quarter':
         content = /*#__PURE__*/React$1.createElement(QuarterPicker, {
           availableQuarters: availableQuarters,
+          startYear: quarterStartYear,
           className: "QuarterPicker",
           name: ''.concat(item.name, '_Quarter'),
           borderColor: "#E7E7E7",