sag_components 2.0.0-beta47 → 2.0.0-beta49

package/dist/index.js

@@ -9847,67 +9847,70 @@ const DropdownMain = styled__default["default"].div`
 `;
 
 /* eslint-disable react/prop-types */
-const DropdownNew = ({
-  isMulti,
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  labelColor,
-  checkBoxColor,
-  xIconShow,
-  showLabelOnTop,
-  orderBy,
-  elementType
-}) => /*#__PURE__*/React__default["default"].createElement(DropdownMain, {
-  className: "DropdownMain",
-  width: width
-}, isMulti ? /*#__PURE__*/React__default["default"].createElement(DropdownMultiNew, {
-  className: "DropdownMultiNew",
-  placeHolder: placeHolder,
-  label: label,
-  labelEmptyValue: labelEmptyValue,
-  labelColor: labelColor,
-  checkBoxColor: checkBoxColor,
-  required: required,
-  options: options,
-  width: width,
-  disabled: disabled,
-  error: error,
-  errorMessage: errorMessage,
-  selectedValue: selectedValue,
-  xIconShow: xIconShow,
-  onChange: onChange,
-  showLabelOnTop: showLabelOnTop,
-  orderBy: orderBy,
-  elementType: elementType
-}) : /*#__PURE__*/React__default["default"].createElement(DropdownSingleNew, {
-  className: "DropdownSingleNew",
-  placeHolder: placeHolder,
-  label: label,
-  labelEmptyValue: labelEmptyValue,
-  labelColor: labelColor,
-  checkBoxColor: checkBoxColor,
-  required: required,
-  options: options,
-  width: width,
-  disabled: disabled,
-  error: error,
-  errorMessage: errorMessage,
-  selectedValue: selectedValue,
-  xIconShow: xIconShow,
-  onChange: onChange,
-  showLabelOnTop: showLabelOnTop,
-  orderBy: orderBy,
-  elementType: elementType
-}));
+const DropdownNew = _ref => {
+  let {
+    isMulti,
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    labelColor,
+    checkBoxColor,
+    xIconShow,
+    showLabelOnTop,
+    orderBy,
+    elementType
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement(DropdownMain, {
+    className: "DropdownMain",
+    width: width
+  }, isMulti ? /*#__PURE__*/React__default["default"].createElement(DropdownMultiNew, {
+    className: "DropdownMultiNew",
+    placeHolder: placeHolder,
+    label: label,
+    labelEmptyValue: labelEmptyValue,
+    labelColor: labelColor,
+    checkBoxColor: checkBoxColor,
+    required: required,
+    options: options,
+    width: width,
+    disabled: disabled,
+    error: error,
+    errorMessage: errorMessage,
+    selectedValue: selectedValue,
+    xIconShow: xIconShow,
+    onChange: onChange,
+    showLabelOnTop: showLabelOnTop,
+    orderBy: orderBy,
+    elementType: elementType
+  }) : /*#__PURE__*/React__default["default"].createElement(DropdownSingleNew, {
+    className: "DropdownSingleNew",
+    placeHolder: placeHolder,
+    label: label,
+    labelEmptyValue: labelEmptyValue,
+    labelColor: labelColor,
+    checkBoxColor: checkBoxColor,
+    required: required,
+    options: options,
+    width: width,
+    disabled: disabled,
+    error: error,
+    errorMessage: errorMessage,
+    selectedValue: selectedValue,
+    xIconShow: xIconShow,
+    onChange: onChange,
+    showLabelOnTop: showLabelOnTop,
+    orderBy: orderBy,
+    elementType: elementType
+  }));
+};
 DropdownNew.propTypes = {
   placeHolder: PropTypes.string,
   label: PropTypes.string,
@@ -10080,26 +10083,34 @@ const OptionsContainer$4 = styled__default["default"].div`
   padding-top: 8px;
 `;
 
-const ChervronRightIcon = () => /*#__PURE__*/React__default["default"].createElement("svg", {
-  width: "8",
-  height: "13",
+const ChervronRightIcon = ({
+  width = "8",
+  height = "13",
+  fill = "#777575"
+}) => /*#__PURE__*/React__default["default"].createElement("svg", {
+  width: width,
+  height: height,
   viewBox: "0 0 8 13",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 }, /*#__PURE__*/React__default["default"].createElement("path", {
   d: "M7.33984 5.78516C7.58594 6.05859 7.58594 6.46875 7.33984 6.71484L2.08984 11.9648C1.81641 12.2383 1.40625 12.2383 1.16016 11.9648C0.886719 11.7188 0.886719 11.3086 1.16016 11.0625L5.94531 6.27734L1.16016 1.46484C0.886719 1.21875 0.886719 0.808594 1.16016 0.5625C1.40625 0.289062 1.81641 0.289062 2.0625 0.5625L7.33984 5.78516Z",
-  fill: "#777575"
+  fill: fill
 }));
 
-const ChervronLeftIcon = () => /*#__PURE__*/React__default["default"].createElement("svg", {
-  width: "7",
-  height: "13",
+const ChervronLeftIcon = ({
+  width = 7,
+  height = 13,
+  fill = "#777575"
+}) => /*#__PURE__*/React__default["default"].createElement("svg", {
+  width: width,
+  height: height,
   viewBox: "0 0 7 13",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 }, /*#__PURE__*/React__default["default"].createElement("path", {
   d: "M0.410156 5.78516L5.66016 0.5625C5.90625 0.289062 6.31641 0.289062 6.58984 0.5625C6.83594 0.808594 6.83594 1.21875 6.58984 1.46484L1.77734 6.25L6.5625 11.0625C6.83594 11.3086 6.83594 11.7188 6.5625 11.9648C6.31641 12.2383 5.90625 12.2383 5.66016 11.9648L0.410156 6.71484C0.136719 6.46875 0.136719 6.05859 0.410156 5.78516Z",
-  fill: "#777575"
+  fill: fill
 }));
 
 /* eslint-disable react/prop-types */
@@ -10321,20 +10332,21 @@ const DatePicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const RangePicker = ({
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue
-}) => {
+const RangePicker = _ref => {
+  let {
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue
+  } = _ref;
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState(''); // Added value state
@@ -10766,22 +10778,23 @@ 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
-}) => {
+const QuarterPicker = _ref => {
+  let {
+    availableQuarters,
+    // ["Q1-2024"]
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue
+  } = _ref;
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState('');
@@ -11220,21 +11233,22 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = ({
-  availableMonths,
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue
-}) => {
+const MonthPicker = _ref => {
+  let {
+    availableMonths,
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue
+  } = _ref;
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState('');
@@ -24459,21 +24473,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("");
@@ -24871,23 +24886,24 @@ const IconContainer$1 = styled__default["default"].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] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState('');
@@ -25891,39 +25907,45 @@ const LegendWrapper = styled__default["default"].div`
   padding-top: 15px;
 `;
 
-const LegendUnionIcon = ({
-  width = '18',
-  height = '5',
-  color = '#9CCB3B'
-}) => /*#__PURE__*/React__default["default"].createElement("svg", {
-  width: width,
-  height: height,
-  viewBox: "0 0 18 5",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, /*#__PURE__*/React__default["default"].createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M11.45 2H17C17.2761 2 17.5 2.22386 17.5 2.5C17.5 2.77614 17.2761 3 17 3H11.45C11.2184 4.14112 10.2095 5 9 5C7.79052 5 6.78164 4.14112 6.55001 3H1C0.723858 3 0.5 2.77614 0.5 2.5C0.5 2.22386 0.723858 2 1 2H6.55001C6.78164 0.85888 7.79052 0 9 0C10.2095 0 11.2184 0.85888 11.45 2Z",
-  fill: color
-}));
+const LegendUnionIcon = _ref => {
+  let {
+    width = '18',
+    height = '5',
+    color = '#9CCB3B'
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 18 5",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.45 2H17C17.2761 2 17.5 2.22386 17.5 2.5C17.5 2.77614 17.2761 3 17 3H11.45C11.2184 4.14112 10.2095 5 9 5C7.79052 5 6.78164 4.14112 6.55001 3H1C0.723858 3 0.5 2.77614 0.5 2.5C0.5 2.22386 0.723858 2 1 2H6.55001C6.78164 0.85888 7.79052 0 9 0C10.2095 0 11.2184 0.85888 11.45 2Z",
+    fill: color
+  }));
+};
 
-const LegendLineIcon = ({
-  width = '19',
-  height = '3',
-  color = '#9CCB3B'
-}) => /*#__PURE__*/React__default["default"].createElement("svg", {
-  width: width,
-  height: height,
-  viewBox: "0 0 19 3",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, /*#__PURE__*/React__default["default"].createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M0 1.5C0 0.671573 0.671573 0 1.5 0H17.5C18.3284 0 19 0.671572 19 1.5C19 2.32843 18.3284 3 17.5 3H1.5C0.671575 3 0 2.32843 0 1.5Z",
-  fill: color
-}));
+const LegendLineIcon = _ref => {
+  let {
+    width = '19',
+    height = '3',
+    color = '#9CCB3B'
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 19 3",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 1.5C0 0.671573 0.671573 0 1.5 0H17.5C18.3284 0 19 0.671572 19 1.5C19 2.32843 18.3284 3 17.5 3H1.5C0.671575 3 0 2.32843 0 1.5Z",
+    fill: color
+  }));
+};
 
 const ControlsContainer$5 = styled__default["default"].div`
   position: relative;
@@ -26498,7 +26520,7 @@ const LegendTitle = styled__default["default"].h5`
   display: flex;
   justify-content: space-between;
   @media (max-width: 1536px) {
-    font-size: 0.6875em; /* 11px → 0.6875em */
+    font-size: 0.75em; /* 11px → 0.6875em */
   }
   @media (max-width: 1366px) {
     font-size: 0.625em; /* 10px → 0.625em */
@@ -28852,7 +28874,6 @@ const scrollableStyles$2 = `
   }
 `;
 const DoubleBarSingleLineContainer = styled__default["default"].div`
-  position: relative;
   font-family: "Poppins", sans-serif;
   color: #212121;
   background-color: white;
@@ -28863,13 +28884,14 @@ const DoubleBarSingleLineContainer = styled__default["default"].div`
   ${scrollableStyles$2}
 `;
 const LegendContainer = styled__default["default"].div`
-  position: sticky;
+  position: absolute;
+  left: 0;
   text-align: center;
-  width: ${props => props.width};
-  bottom: calc(100% - ${props => props.height});
+  width: ${props => `${props.width}px`};
+  bottom: 20px;
 `;
 const Controls$1 = styled__default["default"].div`
-  height: 100%;
+  height: calc(100% - 30px);
   display: flex;
   flex-direction: column;
   background-color: white;
@@ -28921,6 +28943,7 @@ const DoubleBarSingleLine = props => {
     width,
     height,
     title,
+    hasScroll,
     dataState,
     data,
     lineChartValueType,
@@ -28932,6 +28955,14 @@ const DoubleBarSingleLine = props => {
     noDataText
   } = props;
   const [legendData, setLegendData] = React$1.useState([]);
+  const containerRef = React$1.useRef(null); // Create a ref for the container
+  const [containerWidth, setContainerWidth] = React$1.useState(0); // State to store the container's width
+
+  React$1.useEffect(() => {
+    if (containerRef.current) {
+      setContainerWidth(containerRef.current.offsetWidth); // Set the width of the container
+    }
+  }, [containerRef]);
   React$1.useEffect(() => {
     const newLegendData = dataState.map(item => ({
       title: item.name,
@@ -29074,16 +29105,17 @@ const DoubleBarSingleLine = props => {
     }, line))));
   };
   return /*#__PURE__*/React__default["default"].createElement(DoubleBarSingleLineContainer, {
+    ref: containerRef,
     className: className,
     height: height,
     width: width,
-    hasScroll: data.length >= limitViewableItems
+    hasScroll: hasScroll
   }, data.length === 0 ? /*#__PURE__*/React__default["default"].createElement(NoDataFoundMessage, {
     noDataText: noDataText
   }) : /*#__PURE__*/React__default["default"].createElement(Controls$1, {
     className: "Controls"
-  }, title !== '' && /*#__PURE__*/React__default["default"].createElement(Title$2, null, title), /*#__PURE__*/React__default["default"].createElement(ChartsWrapper, {
-    width: data.length >= limitViewableItems ? `${data.length * 178}px` : 'auto'
+  }, title && title.trim() !== '' && /*#__PURE__*/React__default["default"].createElement(Title$2, null, title), /*#__PURE__*/React__default["default"].createElement(ChartsWrapper, {
+    width: hasScroll ? `${data.length * 178}px` : 'auto'
   }, /*#__PURE__*/React__default["default"].createElement(LineChartWrapper, null, /*#__PURE__*/React__default["default"].createElement(recharts.ResponsiveContainer, null, /*#__PURE__*/React__default["default"].createElement(recharts.LineChart, {
     data: data,
     margin: {
@@ -29143,7 +29175,7 @@ const DoubleBarSingleLine = props => {
     dataKey: obj.key,
     content: CustomLabel
   }))))))), showLegend && /*#__PURE__*/React__default["default"].createElement(LegendContainer, {
-    width: width,
+    width: containerWidth,
     height: height
   }, /*#__PURE__*/React__default["default"].createElement(PerformanceAnalyticsLegend, {
     legendData: legendData
@@ -30350,6 +30382,7 @@ exports.LinkButton = LinkButton;
 exports.LinnerDataBox = LinnerDataBox;
 exports.MarketShareDescription = MarketShareDescription;
 exports.OneColumnContainer = OneColumnContainer;
+exports.PerformanceAnalyticsLegend = PerformanceAnalyticsLegend;
 exports.PieChart = PieChart;
 exports.PopupCharts = PopupCharts;
 exports.QuickFilter = QuickFilter;