linear-react-components-ui 1.1.18-beta.2 → 1.1.18-beta.4

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

@@ -354,12 +354,9 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   }
 }
 
-.helpmenu {
-  border: solid 1px $component-border-color;
-  border-radius: 4px;
-  width: 300px;
-  position: absolute;
-
+.popup-help {
+  border: 1px solid $list-container-border;
+  
   >.list-component {
     box-shadow: none;
     overflow: hidden;
@@ -369,15 +366,19 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
       background-color: #77777736 !important;
 
       >.title {
-        line-height: 40px;
+        line-height: 35px;
       }
     }
+
+    >.item-container >.item >.text {
+      font-size: 12px;
+    }
   }
 
-  >.popup-help>.infomartion>.help-information {
+  .infomartion>.help-information {
     color: rgba(0, 0, 0, 0.54);
     font-size: 12px;
-    padding-bottom: 10px;
+    line-height: 16px;
   }
 }
 
@@ -404,4 +405,4 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
     font-size: 15px;
     margin-top: 5px;
   }
-}
+}

package/lib/menus/sidenav/NavMenuItem.js

@@ -27,13 +27,16 @@ const NavMenuItem = props => {
     minWidth = 500,
     columnsQtty,
     targetRef,
+    disableDefaultStyle = false,
+    showDropdownOnClick = false,
     style
   } = 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 +49,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 +122,13 @@ 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: disableDefaultStyle ? '' : 'submenu-container',
+    style: isOnEndWindow ? {
       marginLeft: targetDimensions.width,
       bottom: '0',
       paddingBottom: '10px',
-      position: 'fixed'
+      position: 'fixed',
+      width: '20%'
     } : {
       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,41 +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, {
-    helpRef: helpRef,
-    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/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ReactElement, CSSProperties, Ref, RefObject } from 'react';
+import { ReactNode, ReactElement, CSSProperties } from 'react';
 import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { Size } from '../../@types/Size.js';
 import { WithTooltipProps } from '../../internals/types.js';
@@ -17,14 +17,6 @@ interface ISideNavProps {
     enableMenuSearch?: boolean;
     menuSearchEmptyMessage?: string;
     menuSearchPlaceholder?: string;
-    helpList?: IHelpItem[];
-    copyright: string;
-    version: string;
-}
-interface IHelpItem {
-    id: string;
-    title: string;
-    url?: string;
 }
 interface ISideNavDimensions {
     left: number;
@@ -59,7 +51,9 @@ interface INavMenuItemProps extends WithTooltipProps {
     minWidth?: string | number;
     maxWidth?: string | number;
     columnsQtty?: number;
-    targetRef?: Ref<HTMLLIElement>;
+    targetRef?: (ref: HTMLLIElement | null) => void;
+    disableDefaultStyle?: boolean;
+    showDropdownOnClick?: boolean;
     style?: CSSProperties;
 }
 interface INavSubMenuItemProps {
@@ -81,17 +75,6 @@ interface IPopupMenuSearchProps extends ISideNavProps {
     handlerClose: () => void;
     style?: CSSProperties | string;
 }
-interface IPopupMenuHelpProps extends ISideNavProps {
-    menuItemsContent?: IMenuItemContent[];
-    handlerClose: () => void;
-    style?: CSSProperties | string;
-    helpList?: IHelpItem[];
-    copyright: string;
-    version: string;
-    dropdown?: boolean;
-    isDropdownOpened?: boolean;
-    helpRef: RefObject<HTMLDivElement>;
-}
 interface ISubMenuContext {
     toggleSubMenu: () => void;
 }
@@ -102,4 +85,4 @@ interface ISideNavContext {
 }
 type ITargetDimensions = DOMRect;
 
-export { IEmptyListProps, IExpandMenuProps, IHelpItem, IMenuItemContent, IMenuLinkProps, INavMenuGroupProps, INavMenuItemProps, INavSubMenuItemProps, IPopupMenuHelpProps, IPopupMenuSearchProps, ISideNavContext, ISideNavDimensions, ISideNavProps, ISubMenuContext, ITargetDimensions };
+export { IEmptyListProps, IExpandMenuProps, IMenuItemContent, IMenuLinkProps, INavMenuGroupProps, INavMenuItemProps, INavSubMenuItemProps, IPopupMenuSearchProps, ISideNavContext, ISideNavDimensions, ISideNavProps, ISubMenuContext, ITargetDimensions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linear-react-components-ui",
-  "version": "1.1.18-beta.2",
+  "version": "1.1.18-beta.4",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "module": "lib/index.cjs",

package/lib/menus/sidenav/popup_menu_help/index.d.ts

@@ -1,12 +0,0 @@
-import React__default from 'react';
-import { IPopupMenuHelpProps } from '../types.js';
-import '../../../@types/PermissionAttr.js';
-import '../../../@types/Size.js';
-import '../../../internals/types.js';
-import '../../../@types/Position.js';
-import '../../../@types/Icon.js';
-import '../../../icons/helper.js';
-
-declare const PopupMenuHelp: (props: IPopupMenuHelpProps) => React__default.ReactPortal;
-
-export { PopupMenuHelp as default };