sag_components 2.0.0-beta75 → 2.0.0-beta76

package/dist/index.esm.js

@@ -3472,154 +3472,6 @@ const LinnerDataBox = props => {
   }))));
 };
 
-const SagIconButtonWrapper = styled.button`
-  height: ${props => props.height};
-  font-size: 14px;
-  font-weight: 400;
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 18px;
-  white-space: nowrap;
-  color: ${props => props.color};
-  border-radius: 8px;
-  border: 1px solid ${props => props.color};
-  background: ${props => props.backgroundColor ? props.backgroundColor : 'transparent'}; 
-  transition: box-shadow 0.3s ease;
-  &:hover, &:focus {
-    cursor: pointer;
-    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
-  }
-`;
-const SpanText$1 = styled.span`
-`;
-
-const SagIconButton = props => {
-  const {
-    iconName,
-    color,
-    backgroundColor,
-    activeColor,
-    height,
-    buttonText,
-    iconWidth,
-    iconHeight,
-    disabled,
-    openState,
-    onButtonClick,
-    className
-  } = props;
-  const [activeState, setActiveState] = useState(openState);
-  const onClickHandler = event => {
-    onButtonClick(event);
-    setActiveState(prevState => !prevState);
-  };
-  const getIcon = icon => {
-    switch (icon.toLowerCase()) {
-      case 'filter':
-        return /*#__PURE__*/React$1.createElement(FilterIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'options':
-        return /*#__PURE__*/React$1.createElement(OptionsIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'download':
-        return /*#__PURE__*/React$1.createElement(DownloadIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'document':
-        return /*#__PURE__*/React$1.createElement(DocumentIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'fly':
-        return /*#__PURE__*/React$1.createElement(FlyIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'bell':
-        return /*#__PURE__*/React$1.createElement(BellIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'maintenance':
-        return /*#__PURE__*/React$1.createElement(MaintenanceIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'exit':
-        return /*#__PURE__*/React$1.createElement(ExitIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'eye':
-        return /*#__PURE__*/React$1.createElement(EyeIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      default:
-        return /*#__PURE__*/React$1.createElement(EyeIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-    }
-  };
-  return /*#__PURE__*/React$1.createElement(SagIconButtonWrapper, {
-    className: className,
-    height: height,
-    color: activeState ? activeColor : color,
-    backgroundColor: backgroundColor,
-    disabled: disabled,
-    onClick: event => {
-      onClickHandler(event);
-    }
-  }, getIcon(iconName), buttonText && /*#__PURE__*/React$1.createElement(SpanText$1, null, buttonText));
-};
-SagIconButton.propTypes = {
-  className: PropTypes.string,
-  iconName: PropTypes.string,
-  buttonText: PropTypes.string,
-  height: PropTypes.string,
-  color: PropTypes.string,
-  backgroundColor: PropTypes.string,
-  activeColor: PropTypes.string,
-  iconHeight: PropTypes.number,
-  iconWidth: PropTypes.number,
-  openState: PropTypes.bool,
-  disabled: PropTypes.bool,
-  onButtonClick: PropTypes.func
-};
-SagIconButton.defaultProps = {
-  className: '',
-  iconName: 'filter',
-  buttonText: 'Filter',
-  height: '40px',
-  color: '#212121',
-  activeColor: '#229E38',
-  backgroundColor: 'transparent',
-  // '#E8F5EB',
-  iconHeight: 12,
-  iconWidth: 12,
-  openState: false,
-  disabled: false,
-  onButtonClick: () => {}
-};
-
 const TextFieldContainer = styled.div`
     position: relative;
     width: ${props => props.width};
@@ -3728,16 +3580,6 @@ const TopRow = styled.div`
   display: flex;
   align-items: center;
   gap: 20px;
-`;
-const Headline$1 = styled.span`
-  font-size: 18px;
-  font-weight: 500;
-  margin-right: auto;
-`;
-const Nav = styled.nav`
-display: flex;
-flex-direction: row;
-
 `;
 const TabActionLine = styled.div`
   margin-left: auto;
@@ -3745,20 +3587,28 @@ const TabActionLine = styled.div`
   align-items: center;
   height: 100%;
 `;
+const Headline$1 = styled.span`
+  font-size: 18px;
+  font-weight: 500;
+  margin-right: auto;
+`;
 const Tabs = styled.div`
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
 `;
-const Tab = styled.div`
+const Tab = styled.button`
   cursor: pointer;
   position: relative;
   text-align: center;
   padding: 8px 12px;
   font-size: 16px;
   color: #000000;
+  border: none;
   border-bottom: 2px solid #D0D0D0;
+  background: transparent;
+  z-index: 2;
   &.active {
     font-weight: 600;
     color: ${props => props.color};
@@ -3816,12 +3666,158 @@ const ActionsWrapper = styled.div`
   gap: 10px;
   width: 100%;
 `;
-const SagIconButtonWrap = styled(SagIconButton)`
-`;
 const SearchInputWrap = styled(SearchInput)`
   margin-left: auto;
 `;
 
+const SagIconButtonWrapper = styled.button`
+  height: ${props => props.height};
+  font-size: 14px;
+  font-weight: 400;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 18px;
+  white-space: nowrap;
+  color: ${props => props.color};
+  border-radius: 8px;
+  border: 1px solid ${props => props.color};
+  background: ${props => props.backgroundColor ? props.backgroundColor : 'transparent'}; 
+  transition: box-shadow 0.3s ease;
+  &:hover, &:focus {
+    cursor: pointer;
+    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
+  }
+`;
+const SpanText$1 = styled.span`
+`;
+
+const SagIconButton = props => {
+  const {
+    iconName,
+    color,
+    backgroundColor,
+    activeColor,
+    height,
+    buttonText,
+    iconWidth,
+    iconHeight,
+    disabled,
+    openState,
+    onButtonClick,
+    className
+  } = props;
+  const [activeState, setActiveState] = useState(openState);
+  const onClickHandler = event => {
+    onButtonClick(event);
+    setActiveState(prevState => !prevState);
+  };
+  const getIcon = icon => {
+    switch (icon.toLowerCase()) {
+      case 'filter':
+        return /*#__PURE__*/React$1.createElement(FilterIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'options':
+        return /*#__PURE__*/React$1.createElement(OptionsIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'download':
+        return /*#__PURE__*/React$1.createElement(DownloadIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'document':
+        return /*#__PURE__*/React$1.createElement(DocumentIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'fly':
+        return /*#__PURE__*/React$1.createElement(FlyIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'bell':
+        return /*#__PURE__*/React$1.createElement(BellIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'maintenance':
+        return /*#__PURE__*/React$1.createElement(MaintenanceIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'exit':
+        return /*#__PURE__*/React$1.createElement(ExitIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'eye':
+        return /*#__PURE__*/React$1.createElement(EyeIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      default:
+        return /*#__PURE__*/React$1.createElement(EyeIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+    }
+  };
+  return /*#__PURE__*/React$1.createElement(SagIconButtonWrapper, {
+    className: className,
+    height: height,
+    color: activeState ? activeColor : color,
+    backgroundColor: backgroundColor,
+    disabled: disabled,
+    onClick: event => {
+      onClickHandler(event);
+    }
+  }, getIcon(iconName), buttonText && /*#__PURE__*/React$1.createElement(SpanText$1, null, buttonText));
+};
+SagIconButton.propTypes = {
+  className: PropTypes.string,
+  iconName: PropTypes.string,
+  buttonText: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  activeColor: PropTypes.string,
+  iconHeight: PropTypes.number,
+  iconWidth: PropTypes.number,
+  openState: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onButtonClick: PropTypes.func
+};
+SagIconButton.defaultProps = {
+  className: '',
+  iconName: 'filter',
+  buttonText: 'Filter',
+  height: '40px',
+  color: '#212121',
+  activeColor: '#229E38',
+  backgroundColor: 'transparent',
+  // '#E8F5EB',
+  iconHeight: 12,
+  iconWidth: 12,
+  openState: false,
+  disabled: false,
+  onButtonClick: () => {}
+};
+
 const TabMenu = props => {
   const {
     activeColor,
@@ -3829,7 +3825,6 @@ const TabMenu = props => {
     className,
     color,
     currentTab,
-    headlineInsteadTabs,
     headlineText,
     inputWidth,
     onFilterButtonClick,
@@ -3861,14 +3856,14 @@ const TabMenu = props => {
   }, [currentTab]);
   return /*#__PURE__*/React$1.createElement(TabMenuContainer, {
     className: className
-  }, /*#__PURE__*/React$1.createElement(TopRow, null, showFilterButton && /*#__PURE__*/React$1.createElement(SagIconButtonWrap, {
+  }, /*#__PURE__*/React$1.createElement(TopRow, null, showFilterButton && /*#__PURE__*/React$1.createElement(SagIconButton, {
     id: "filterButton",
     iconName: "Filter",
     buttonText: "",
     openState: panelIsOpen,
     activeColor: activeColor,
     onButtonClick: onFilterButtonClick
-  }), headlineInsteadTabs ? /*#__PURE__*/React$1.createElement(Headline$1, null, headlineText) : /*#__PURE__*/React$1.createElement(Nav, {
+  }), headlineText && headlineText !== '' ? /*#__PURE__*/React$1.createElement(Headline$1, null, headlineText) : /*#__PURE__*/React$1.createElement("nav", {
     className: "Nav"
   }, /*#__PURE__*/React$1.createElement(Tabs, {
     className: "Tabs"
@@ -24000,22 +23995,21 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = _ref => {
-  let {
-    label,
-    hoverColor,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    xIconShow,
-    labelColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownSingle = ({
+  label,
+  hoverColor,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  xIconShow,
+  labelColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -30795,7 +30789,7 @@ const BubbleChart = _ref => {
     onMouseMove: handleChartMouseMove,
     cursor: curosrMouse,
     margin: {
-      top: 60,
+      top: 100,
       right: 190,
       bottom: 50,
       left: 180