sag_components 2.0.0-beta73 → 2.0.0-beta75

package/dist/index.js

@@ -3749,7 +3749,7 @@ display: flex;
 flex-direction: row;
 
 `;
-styled__default["default"].div`
+const TabActionLine = styled__default["default"].div`
   margin-left: auto;
   display: flex;
   align-items: center;
@@ -3852,6 +3852,7 @@ const TabMenu = props => {
     showLabel,
     showSearchInput,
     showViewOptionsButton,
+    headlineContent,
     setTopRightButton,
     buttonHoverColor,
     disabledButton,
@@ -3898,7 +3899,7 @@ const TabMenu = props => {
     color: color,
     width: `${100 / tabs.length}%`,
     role: "presentation"
-  }))), setTopRightButton && /*#__PURE__*/React__default["default"].createElement(Button, {
+  }))), headlineContent && /*#__PURE__*/React__default["default"].createElement(TabActionLine, null, headlineContent), setTopRightButton && /*#__PURE__*/React__default["default"].createElement(Button, {
     text: rightButtonText,
     rightIcon: rightButtonIcon,
     size: "small",
@@ -10242,18 +10243,12 @@ const OptionsContainer$3 = styled__default["default"].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__default["default"].div`
   position: relative;
 `;
 const DatePickerPopup$1 = styled__default["default"].div`
   position: absolute;
   width: auto;
-  // margin: 5px;
   height: 120px;
   top: 100%;
   box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
@@ -10269,21 +10264,10 @@ const DatePickerHeader$1 = styled__default["default"].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__default["default"].select`
   padding: 4px;
   border: none;
-  font-family: Poppins;
   font-size: 12px; 
-  font-style: normal;
   font-weight: 400;
   cursor: pointer;
 
@@ -10305,7 +10289,6 @@ const DateCell$1 = styled__default["default"].div`
   width: 100%;
   aspect-ratio: 1 / 1;
   /* height: 32px; */
-  font-family: Poppins;
   border-radius: 4px;
   font-size: 12px;
   font-style: normal;
@@ -10337,6 +10320,7 @@ const DateCell$1 = styled__default["default"].div`
     color: #ccc;
   }
 `;
+
 const generateYearsArray$1 = (startYear, endDate) => {
   const years = [];
   const endYear = endDate.getFullYear();
@@ -10345,14 +10329,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] = React$1.useState(null);
   const [currentStartDate, setCurrentStartDate] = React$1.useState(new Date(new Date().getFullYear(), 0, 1));
@@ -10396,7 +10380,7 @@ const QuarterPopupPicker = ({
         setSelectedQuarter(null);
         setValue('');
       }
-    }, years$1.map(year => /*#__PURE__*/React__default["default"].createElement("option", {
+    }, generateYearsArray$1(startYear, new Date()).map(year => /*#__PURE__*/React__default["default"].createElement("option", {
       key: `${year}`,
       value: `${year}`
     }, year))))), /*#__PURE__*/React__default["default"].createElement(DatePickerCalendar$1, null, dates.map(date => {
@@ -10438,7 +10422,8 @@ const QuarterPicker = _ref => {
     borderColor,
     borderColorFocus,
     textColor,
-    selectedValue
+    selectedValue,
+    startYear
   } = _ref;
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
@@ -10557,7 +10542,8 @@ const QuarterPicker = _ref => {
     value: value,
     setValue: setValue,
     startDateValue: startDateValue,
-    availableQuarters: availableQuarters
+    availableQuarters: availableQuarters,
+    startYear: startYear
   })));
 };
 QuarterPicker.propTypes = {
@@ -10684,16 +10670,12 @@ const OptionsContainer$2 = styled__default["default"].div`
   padding-top: 8px;
 `;
 
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-
-// Styled components for the date picker
 const DatePickerContainer$1 = styled__default["default"].div`
   position: relative;
 `;
 const DatePickerPopup = styled__default["default"].div`
   position: absolute;
   width: auto;
-  // margin: 5px;
   height: 250px;
   top: 100%;
   box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
@@ -10719,9 +10701,7 @@ styled__default["default"].div`
 const DatePickerSelect = styled__default["default"].select`
   padding: 4px;
   border: none;
-  font-family: Poppins;
   font-size: 12px; 
-  font-style: normal;
   font-weight: 400;
   cursor: pointer;
 
@@ -10743,7 +10723,6 @@ const DateCell = styled__default["default"].div`
   width: 100%;
   aspect-ratio: 1 / 1;
   /* height: 32px; */
-  font-family: Poppins;
   border-radius: 4px;
   font-size: 12px;
   font-style: normal;
@@ -10774,6 +10753,7 @@ const DateCell = styled__default["default"].div`
     color: #ccc;
   }
 `;
+
 const generateYearsArray = (startYear, endDate) => {
   const years = [];
   const endYear = endDate.getFullYear();
@@ -10782,14 +10762,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] = React$1.useState(null);
   const [currentStartDate, setCurrentStartDate] = React$1.useState(new Date(new Date().getFullYear(), 0, 1));
@@ -10827,7 +10807,7 @@ const MonthPopupPicker = ({
         setSelectedMonth(null);
         setValue('');
       }
-    }, years.map(year => /*#__PURE__*/React__default["default"].createElement("option", {
+    }, generateYearsArray(startYear, new Date()).map(year => /*#__PURE__*/React__default["default"].createElement("option", {
       key: `${year}`,
       value: `${year}`
     }, year))))), /*#__PURE__*/React__default["default"].createElement(DatePickerCalendar, null, dates.map(date => {
@@ -10835,7 +10815,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__default["default"].createElement(DateCell, {
         key: date.toISOString()
         // eslint-disable-next-line no-nested-ternary
@@ -10900,7 +10880,8 @@ const MonthPicker = _ref => {
     borderColor,
     borderColorFocus,
     textColor,
-    selectedValue
+    selectedValue,
+    startYear
   } = _ref;
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
@@ -11018,7 +10999,8 @@ const MonthPicker = _ref => {
     value: value,
     setValue: setValue,
     startDateValue: startDateValue,
-    availableMonths: availableMonths
+    availableMonths: availableMonths,
+    startYear: startYear
   })));
 };
 MonthPicker.propTypes = {
@@ -11141,6 +11123,8 @@ const FilterPanel = props => {
     availableQuarters,
     availableMonths,
     availableYears,
+    monthStartYear,
+    quarterStartYear,
     fieldsData,
     borderColor,
     okButtonBackgroundColor,
@@ -11377,6 +11361,7 @@ const FilterPanel = props => {
       case 'month':
         content = /*#__PURE__*/React__default["default"].createElement(MonthPicker, {
           availableMonths: availableMonths,
+          startYear: monthStartYear,
           name: ''.concat(item.name, '_Month'),
           borderColor: "#E7E7E7",
           borderColorFocus: borderColor,
@@ -11411,6 +11396,7 @@ const FilterPanel = props => {
       case 'quarter':
         content = /*#__PURE__*/React__default["default"].createElement(QuarterPicker, {
           availableQuarters: availableQuarters,
+          startYear: quarterStartYear,
           className: "QuarterPicker",
           name: ''.concat(item.name, '_Quarter'),
           borderColor: "#E7E7E7",