linear-react-components-ui 1.1.18-beta.1 → 1.1.18-beta.11

package/.vscode/settings.json

@@ -7,7 +7,6 @@
     ".eslintrc.js": true,
     ".gitignore": true,
     "package-lock.json": true,
-    // ".gitlab-ci.yml": true,
     ".nvmrc": true,
     ".npmignore": true,
     ".editorconfig": true,
@@ -20,7 +19,4 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
-  "cSpell.words": [
-    "licenca"
-  ]
 }

package/lib/assets/styles/sidenav.scss

@@ -26,16 +26,16 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
     pointer-events: none;
   }
 
-  >.expandedmenu,
-  >.collapsedmenu {
+  > .expandedmenu,
+  > .collapsedmenu {
     height: auto;
     width: 100%;
 
-    >.help-item {
+    > .help-item {
       border-top: 1px solid #eee;
     }
 
-    >.item {
+    > .item {
       cursor: pointer;
       border-bottom: 1px solid #eee;
       width: 100%;
@@ -47,7 +47,7 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
         justify-content: center;
         padding-left: 0px;
 
-        >.searchmenubutton {
+        > .searchmenubutton {
           width: 100%;
           height: 100%;
           display: flex;
@@ -55,7 +55,7 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
           justify-content: center;
         }
 
-        >.helpmenubutton {
+        > .helpmenubutton {
           width: 100%;
           height: 100%;
           display: flex;
@@ -73,25 +73,25 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
       }
     }
 
-    >.item:hover {
+    > .item:hover {
       background-color: #eee;
     }
 
-    >.item:hover>.menuicon,
-    >.item:hover .searchmenuicon,
-    >.item:hover>.menulink>.menuicon,
-    >.item:hover>.menulink .searchmenuicon {
+    > .item:hover > .menuicon,
+    > .item:hover .searchmenuicon,
+    > .item:hover > .menulink > .menuicon,
+    > .item:hover > .menulink .searchmenuicon {
       fill: rgb(114, 114, 114);
     }
 
-    >.item:hover>.title,
-    >.item:hover>.menulink>.title {
+    > .item:hover > .title,
+    > .item:hover > .menulink > .title {
       color: rgb(114, 114, 114);
     }
   }
 
-  >.expandedmenu.customscroll,
-  >.collapsedmenu.customscroll {
+  > .expandedmenu.customscroll,
+  > .collapsedmenu.customscroll {
     overflow-y: auto;
 
     &::-webkit-scrollbar {
@@ -144,7 +144,7 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   }
 }
 
-.sidenav-component>.expandedmenu {
+.sidenav-component > .expandedmenu {
   animation: revealelement 0.3s;
   -moz-animation: revealelement 0.3s;
   background-color: #fff;
@@ -155,7 +155,7 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   -ms-flex: 0 0 70px;
   flex: 0 0 70px;
 
-  >.item {
+  > .item {
     align-content: center;
     background-color: #fff;
     display: grid;
@@ -174,12 +174,12 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
       text-decoration: none;
     }
 
-    >.menuicon {
+    > .menuicon {
       justify-self: center;
     }
 
-    >.title,
-    >.menulink>.title {
+    > .title,
+    > .menulink > .title {
       color: #666;
       align-self: center;
       justify-self: left;
@@ -188,12 +188,12 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   }
 }
 
-.sidenav-component>.collapsedmenu {
+.sidenav-component > .collapsedmenu {
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
 
-  >.item {
+  > .item {
     height: 50px;
     display: grid;
     grid-template-rows: 1fr;
@@ -204,14 +204,14 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
       align-items: stretch;
     }
 
-    >.menulink {
+    > .menulink {
       display: grid;
       grid-template-rows: 1fr;
       align-items: center;
     }
 
-    >.menuicon,
-    >.menulink>.menuicon {
+    > .menuicon,
+    > .menulink > .menuicon {
       justify-self: center;
     }
   }
@@ -219,7 +219,7 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   &.-small {
     width: 55px;
 
-    >.item {
+    > .item {
       height: 40px;
     }
 
@@ -231,7 +231,7 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   &.-medium {
     width: 55px;
 
-    >.item {
+    > .item {
       height: 50px;
     }
 
@@ -243,7 +243,7 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   &.-large {
     width: 75px;
 
-    >.item {
+    > .item {
       height: 60px;
     }
 
@@ -253,8 +253,8 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   }
 }
 
-.sidenav-component>.collapsedmenu>.item>.submenu-container,
-.sidenav-component>.expandedmenu>.item>.submenu-container {
+.sidenav-component > .collapsedmenu > .item > .submenu-container,
+.sidenav-component > .expandedmenu > .item > .submenu-container {
   animation: 0.5s ease-in 0s 1 slideLeft;
   -moz-animation: 0.5s ease-in 0s 1 slideLeft;
   background-color: #eee;
@@ -268,7 +268,7 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   box-shadow: 3px 1px 6px 0px rgba(50, 50, 50, 0.35);
   z-index: 9999999;
 
-  >.title {
+  > .title {
     color: #777777;
     font-size: 24px;
     font-weight: bold;
@@ -287,7 +287,7 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
     grid-template-columns: repeat(2, 1fr);
     align-items: flex-start;
 
-    >.item {
+    > .item {
       display: grid;
       min-height: 40px;
       align-content: center;
@@ -300,13 +300,13 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
       }
     }
 
-    >.item:hover {
+    > .item:hover {
       color: #333;
     }
 
-    >.item:before {
+    > .item:before {
       position: absolute;
-      content: '';
+      content: "";
       left: -15px;
       top: 15px;
       border-top: 5px solid transparent;
@@ -314,11 +314,11 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
       border-left: 5px solid #808080;
     }
 
-    >.item:nth-child(even) {
+    > .item:nth-child(even) {
       padding-left: 5px;
     }
 
-    >.item>.menulink {
+    > .item > .menulink {
       grid-template-columns: 1fr;
       text-decoration: none;
     }
@@ -347,37 +347,38 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   position: absolute;
   padding: 20px;
 
-  >.closebutton {
+  > .closebutton {
     cursor: pointer;
     float: right;
     margin: -21px -33px 15px 0px;
   }
 }
 
-.helpmenu {
-  border: solid 1px $component-border-color;
-  border-radius: 4px;
-  width: 300px;
-  position: absolute;
+.popup-help {
+  border: 1px solid $list-container-border;
 
-  >.list-component {
+  > .list-component {
     box-shadow: none;
     overflow: hidden;
     border-radius: 0px;
 
-    >.helpheader {
-      background-color: #77777736 !important;
+    > .helpheader {
+      background-color: #bdbdbda6;
 
-      >.title {
-        line-height: 40px;
+      > .title {
+        line-height: 35px;
       }
     }
+
+    > .item-container > .item > .text {
+      font-size: 12px;
+    }
   }
 
-  >.infomartion>.help-information {
+  .infomartion > .help-information {
     color: rgba(0, 0, 0, 0.54);
     font-size: 12px;
-    padding-bottom: 10px;
+    line-height: 16px;
   }
 }
 
@@ -389,19 +390,19 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   height: 100%;
   width: 100%;
 
-  >.text,
+  > .text,
   .subtext {
     color: #a8a8a8;
     text-align: center;
   }
 
-  >.text {
+  > .text {
     font-size: 26px;
     margin-top: 20px;
   }
 
-  >.subtext {
+  > .subtext {
     font-size: 15px;
     margin-top: 5px;
   }
-}
+}

package/lib/menus/sidenav/NavMenuItem.js

@@ -27,13 +27,17 @@ const NavMenuItem = props => {
     minWidth = 500,
     columnsQtty,
     targetRef,
-    style
+    disableDefaultStyle = false,
+    showDropdownOnClick = false,
+    style,
+    customClassForDropdown
   } = props;
   const [showSubMenu, setShowSubMenu] = (0, _react.useState)(false);
   const [targetDimensions, setTargetDimensions] = (0, _react.useState)({});
-  const [isFinalWindow, setIsFinalWindow] = (0, _react.useState)(false);
+  const [isOnEndWindow, setIsOnEndWindow] = (0, _react.useState)(false);
   const submenuContainerRef = (0, _react.useRef)(null);
   const submenuContentRef = (0, _react.useRef)(null);
+  const menuItemRef = (0, _react.useRef)(null);
   const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];
   const [onDenied] = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr));
   const {
@@ -46,39 +50,65 @@ const NavMenuItem = props => {
     disabled
   } = onDenied;
   const onMouseEnter = e => {
+    if (showDropdownOnClick) return;
     const windowHeight = window.innerHeight;
     const eventTarget = e.target;
     const position = eventTarget.getBoundingClientRect();
     setShowSubMenu(true);
     setTargetDimensions(position);
-    if (position.bottom >= windowHeight - 150) setIsFinalWindow(true);
+    if (position.bottom >= windowHeight - 150) setIsOnEndWindow(true);
   };
-  const toggleSubMenu = () => {
-    setShowSubMenu(!showSubMenu);
+  const toggleSubMenu = e => {
+    if (showDropdownOnClick && e) {
+      const eventTarget = e.target;
+      if (eventTarget === menuItemRef.current) {
+        const windowHeight = window.innerHeight;
+        const position = eventTarget.getBoundingClientRect();
+        setShowSubMenu(!showSubMenu);
+        setTargetDimensions(position);
+        if (position.bottom >= windowHeight - 150) setIsOnEndWindow(true);
+      }
+    }
   };
   const contextValues = {
     toggleSubMenu
   };
+  (0, _react.useEffect)(() => {
+    if (showSubMenu && showDropdownOnClick) {
+      document.addEventListener('click', e => {
+        var _menuItemRef$current;
+        const target = e.target;
+        const insideMenu = (_menuItemRef$current = menuItemRef.current) === null || _menuItemRef$current === void 0 ? void 0 : _menuItemRef$current.contains(target);
+        if (!insideMenu) setShowSubMenu(false);
+      });
+    }
+  }, [showSubMenu, showDropdownOnClick]);
   (0, _react.useEffect)(() => {
     var _submenuContainerRef$, _submenuContentRef$cu, _submenuContentRef$cu2;
     const heigthSubmenuContainer = ((_submenuContainerRef$ = submenuContainerRef.current) === null || _submenuContainerRef$ === void 0 ? void 0 : _submenuContainerRef$.clientHeight) || 0;
     const heigthSubmenuContent = ((_submenuContentRef$cu = submenuContentRef.current) === null || _submenuContentRef$cu === void 0 ? void 0 : _submenuContentRef$cu.clientHeight) || 0;
-    const maxHeigthSubMenu = isFinalWindow ? '100%' : (window.innerHeight - targetDimensions.top - (heigthSubmenuContainer - heigthSubmenuContent) - 1).toString().concat('px') || '0px';
+    const maxHeigthSubMenu = isOnEndWindow ? '100%' : (window.innerHeight - targetDimensions.top - (heigthSubmenuContainer - heigthSubmenuContent) - 1).toString().concat('px') || '0px';
     (_submenuContentRef$cu2 = submenuContentRef.current) === null || _submenuContentRef$cu2 === void 0 ? void 0 : _submenuContentRef$cu2.style.setProperty('max-height', maxHeigthSubMenu);
   }, [showSubMenu]);
   if (unvisible) return null;
   return /*#__PURE__*/_react.default.createElement(_helpers.SubMenuContext.Provider, {
     value: contextValues
   }, /*#__PURE__*/_react.default.createElement("li", {
-    ref: targetRef,
     style: style,
-    className: "item ".concat(url && !disabled && '-withlink', " ").concat(customClass, " ").concat(disabled && '-disabled'),
-    onMouseEnter: e => {
-      onMouseEnter(e);
+    ref: r => {
+      menuItemRef.current = r;
+      if (targetRef) targetRef(r);
     },
+    className: "item ".concat(url && !disabled && '-withlink', " ").concat(customClass, " ").concat(disabled && '-disabled'),
+    onMouseEnter: onMouseEnter,
     onMouseLeave: () => {
+      if (showDropdownOnClick) return;
       setShowSubMenu(false);
-      setIsFinalWindow(false);
+      setIsOnEndWindow(false);
+    },
+    onClick: e => {
+      if (!showDropdownOnClick) return;
+      toggleSubMenu(e);
     }
   }, /*#__PURE__*/_react.default.createElement(_MenuLink.default, _extends({
     disabled: disabled
@@ -93,12 +123,12 @@ const NavMenuItem = props => {
     className: "title"
   }, title), !childrenIsSubMenu && children)), showSubMenu && children && childrenIsSubMenu && !disabled && !openSearchMenuPopup && /*#__PURE__*/_react.default.createElement("div", {
     ref: submenuContainerRef,
-    className: "submenu-container",
-    style: isFinalWindow ? {
+    className: "customClassForDropdown ".concat(disableDefaultStyle ? '' : 'submenu-container'),
+    style: isOnEndWindow ? {
       marginLeft: targetDimensions.width,
       bottom: '0',
-      paddingBottom: '10px',
-      position: 'fixed'
+      position: 'fixed',
+      zIndex: disableDefaultStyle ? 999999999 : undefined
     } : {
       marginLeft: targetDimensions.width,
       top: targetDimensions.top,

package/lib/menus/sidenav/index.js

@@ -39,7 +39,6 @@ var _helpers = require("./helpers");
 var _icons = _interopRequireDefault(require("../../icons"));
 var constants = _interopRequireWildcard(require("../../internals/constants"));
 var _popup_menu_search = _interopRequireDefault(require("./popup_menu_search"));
-var _popup_menu_help = _interopRequireDefault(require("./popup_menu_help"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -59,9 +58,7 @@ const SideNav = props => {
   const [menuItemsContent, setMenuItemsContent] = (0, _react.useState)([]);
   const [sideNavDimensions, setSideNavDimensions] = (0, _react.useState)({});
   const [openSearchMenuPopup, setOpenSearchMenuPopup] = (0, _react.useState)(false);
-  const [openHelpMenuPopup, setOpenHelpMenuPopup] = (0, _react.useState)(false);
   const sideNavRef = (0, _react.useRef)(null);
-  const helpRef = (0, _react.useRef)(null);
   const onHeaderClick = () => {
     setIsExpanded(!isExpanded);
     if (onExpandMenuClick) onExpandMenuClick(!isExpanded);
@@ -76,20 +73,9 @@ const SideNav = props => {
     const style = "left: ".concat(left + width + 5, "px; top: ").concat(top + 1, "px; height: ").concat(height - 8, "px;");
     return style;
   };
-  const getPopupMenuHelpStyle = () => {
-    const {
-      left,
-      width
-    } = sideNavDimensions;
-    const style = "left: ".concat(left + width, "px; \n      bottom: 0px; \n      height: auto; width: 22%;\n      position: fixed;");
-    return style;
-  };
   const closeSearchMenuPopup = () => {
     setOpenSearchMenuPopup(false);
   };
-  const closeHelpMenuPopup = () => {
-    setOpenHelpMenuPopup(false);
-  };
   const compareChild = child => {
     const {
       type
@@ -118,20 +104,12 @@ const SideNav = props => {
   const openSearchMenu = () => {
     setOpenSearchMenuPopup(true);
   };
-  const openHelpMenu = () => {
-    setOpenHelpMenuPopup(true);
-  };
   const onKeyDown = e => {
     if ([constants.keyCodes.F].includes(e.keyCode) && e.ctrlKey && e.shiftKey) {
       e.preventDefault();
       openSearchMenu();
     }
   };
-  const handleClickOutside = event => {
-    if (helpRef.current && !helpRef.current.contains(event.target)) {
-      setOpenHelpMenuPopup(false);
-    }
-  };
   (0, _react.useEffect)(() => {
     document.addEventListener('keydown', onKeyDown);
     return () => {
@@ -147,12 +125,6 @@ const SideNav = props => {
   (0, _react.useEffect)(() => {
     setIsExpanded(expanded);
   }, [expanded]);
-  (0, _react.useEffect)(() => {
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
   const returnMenuItems = () => menuItemsContent.filter(item => item.content !== '');
   const getPopupMenuSearch = () => /*#__PURE__*/_react.default.createElement(_NavMenuGroup.default, {
     key: "popup-menusearch-".concat(uuid.v1())
@@ -179,40 +151,10 @@ const SideNav = props => {
     handlerClose: closeSearchMenuPopup,
     menuItemsContent: menuItemsContent && returnMenuItems()
   }))));
-  const getPopupMenuHelp = () => /*#__PURE__*/_react.default.createElement(_NavMenuGroup.default, {
-    style: {
-      flexGrow: 1,
-      alignContent: 'flex-end'
-    },
-    key: "popup-menuhelp-".concat(uuid.v1())
-  }, /*#__PURE__*/_react.default.createElement(_NavMenuItem.default, {
-    childrenIsSubMenu: false,
-    customClass: "-customsidenavitem help-item",
-    tooltip: "Ajuda",
-    tooltipPosition: "right"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    key: "helpMenuIcon",
-    className: "helpmenubutton",
-    role: "button",
-    tabIndex: -1,
-    onKeyDown: () => {},
-    onClick: () => {
-      openHelpMenu();
-    }
-  }, /*#__PURE__*/_react.default.createElement(_icons.default, {
-    name: "question",
-    customClass: "helphmenuicon",
-    size: menuSize === 'small' && 16 || menuSize === 'medium' && 22 || menuSize === 'large' && 32 || 16
-  })), openHelpMenuPopup && /*#__PURE__*/_react.default.createElement(_popup_menu_help.default, _extends({}, props, {
-    style: getPopupMenuHelpStyle(),
-    handlerClose: closeHelpMenuPopup,
-    menuItemsContent: menuItemsContent && returnMenuItems()
-  }))));
   const getSideNavContent = () => {
     if (!enableMenuSearch) return children;
     const items = [...children];
     items.splice(1, 0, getPopupMenuSearch());
-    items.splice(items.length, 0, getPopupMenuHelp());
     return items;
   };
   const contextValues = {

package/lib/menus/sidenav/popup_menu_help/index.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _list = _interopRequireWildcard(require("../../../list"));
-var _withDropdown = _interopRequireDefault(require("../../../../lib/dropdown/withDropdown"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -18,7 +17,8 @@ const PopupMenuHelp = props => {
     copyright,
     handlerClose,
     version,
-    helpList = []
+    helpList = [],
+    helpRef
   } = props;
   const searchFieldRef = (0, _react.useRef)(null);
   const popupRef = (0, _react.useRef)(document.createElement('div'));
@@ -46,39 +46,40 @@ const PopupMenuHelp = props => {
       style
     });
   }, [style]);
-  const returnList = () => {
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_list.default, {
-      condensed: true,
-      selectable: true,
-      onSelectItem: handlerClose,
-      selectOnEnter: true,
-      style: {
-        border: 'none',
-        boxShadow: 'hidden',
-        overflow: 'none'
-      }
-    }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_list.ListHeader, {
-      customClass: "helpheader",
-      title: "Ajuda"
-    }), helpList.map(item => /*#__PURE__*/_react.default.createElement(_list.ListItem, {
-      separator: true,
-      selectOnEnter: true,
-      key: item.id,
-      itemId: item.id,
-      url: item.url,
-      text: item.title
-    })))), /*#__PURE__*/_react.default.createElement("div", {
-      className: "infomartion",
-      style: {
-        padding: '10px 0px 0px 7px '
-      }
-    }, /*#__PURE__*/_react.default.createElement("p", {
-      className: "help-information"
-    }, /*#__PURE__*/_react.default.createElement("b", null, "Vers\xE3o:"), version), /*#__PURE__*/_react.default.createElement("p", {
-      className: "help-information"
-    }, copyright)));
-  };
-  const getPopupContent = () => /*#__PURE__*/_react.default.createElement(_react.Fragment, null, returnList());
+  const getPopupContent = () => /*#__PURE__*/_react.default.createElement("div", {
+    className: "popup-help",
+    ref: helpRef
+  }, /*#__PURE__*/_react.default.createElement(_list.default, {
+    condensed: true,
+    selectable: true,
+    onSelectItem: handlerClose,
+    selectOnEnter: true,
+    style: {
+      border: 'none',
+      boxShadow: 'hidden',
+      overflow: 'none'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_list.ListHeader, {
+    customClass: "helpheader",
+    title: "Ajuda"
+  }), helpList.map(item => /*#__PURE__*/_react.default.createElement(_list.ListItem, {
+    separator: true,
+    selectOnEnter: true,
+    key: item.id,
+    itemId: item.id,
+    url: item.url,
+    text: item.title
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "infomartion",
+    style: {
+      padding: '10px 0px 0px 7px',
+      backgroundColor: 'white'
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "help-information"
+  }, /*#__PURE__*/_react.default.createElement("b", null, "Vers\xE3o:"), version), /*#__PURE__*/_react.default.createElement("p", {
+    className: "help-information"
+  }, copyright)));
   return /*#__PURE__*/_reactDom.default.createPortal(getPopupContent(), popupRef.current);
 };
-var _default = exports.default = (0, _withDropdown.default)(PopupMenuHelp);
+var _default = exports.default = PopupMenuHelp;