linear-react-components-ui 1.1.17 → 1.1.18-beta.0

package/lib/assets/styles/sidenav.scss

@@ -8,12 +8,19 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
 @import "colors.scss";
 
 .sidenav-component {
+  display: flex;
+  flex-direction: column;
   height: 100%;
   width: 100%;
   overflow: hidden;
   background-color: transparent;
   border: 1px solid #eee;
 
+  &.-expanded {
+    display: block;
+    flex-direction: row;
+  }
+
   &.-blocked {
     opacity: 0.4;
     pointer-events: none;
@@ -74,7 +81,6 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   >.expandedmenu.customscroll,
   >.collapsedmenu.customscroll {
     overflow-y: auto;
-    height: 100%;
 
     &::-webkit-scrollbar {
       width: 5px;
@@ -308,13 +314,13 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
       width: 5px;
     }
     &::-webkit-scrollbar-track {
-      box-shadow: inset 0 0 5px grey; 
+      box-shadow: inset 0 0 5px grey;
       border-radius: 10px;
     }
     &::-webkit-scrollbar-thumb {
-      background: rgb(151, 142, 142); 
+      background: rgb(151, 142, 142);
       border-radius: 10px;
-    }  
+    }
   }
 }
 

package/lib/menus/sidenav/NavMenuGroup.d.ts

@@ -7,6 +7,6 @@ import '../../@types/Position.js';
 import '../../@types/Icon.js';
 import '../../icons/helper.js';
 
-declare const NavMenuGroup: ({ children, scrollable }: INavMenuGroupProps) => JSX.Element;
+declare const NavMenuGroup: ({ children, scrollable, style }: INavMenuGroupProps) => JSX.Element;
 
 export { NavMenuGroup as default };

package/lib/menus/sidenav/NavMenuGroup.js

@@ -11,14 +11,16 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const NavMenuGroup = _ref => {
   let {
     children,
-    scrollable
+    scrollable,
+    style
   } = _ref;
   const {
     isExpanded,
     menuSize
   } = (0, _react.useContext)(_helpers.SideNavContext);
   return /*#__PURE__*/_react.default.createElement("ul", {
-    className: "".concat(scrollable && 'customscroll', " \n      ").concat((0, _helpers.default)(isExpanded, menuSize))
+    style: style,
+    className: "".concat(scrollable && 'customscroll', " ").concat((0, _helpers.default)(isExpanded, menuSize))
   }, children);
 };
 var _default = exports.default = NavMenuGroup;

package/lib/menus/sidenav/NavMenuItem.js

@@ -30,6 +30,7 @@ const NavMenuItem = props => {
   } = props;
   const [showSubMenu, setShowSubMenu] = (0, _react.useState)(false);
   const [targetDimensions, setTargetDimensions] = (0, _react.useState)({});
+  const [isFinalWindow, setIsFinalWindow] = (0, _react.useState)(false);
   const submenuContainerRef = (0, _react.useRef)(null);
   const submenuContentRef = (0, _react.useRef)(null);
   const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];
@@ -44,9 +45,12 @@ const NavMenuItem = props => {
     disabled
   } = onDenied;
   const onMouseEnter = e => {
+    const windowHeight = window.innerHeight;
     const eventTarget = e.target;
+    const position = eventTarget.getBoundingClientRect();
     setShowSubMenu(true);
-    setTargetDimensions(eventTarget.getBoundingClientRect());
+    setTargetDimensions(position);
+    if (position.bottom >= windowHeight - 150) setIsFinalWindow(true);
   };
   const toggleSubMenu = () => {
     setShowSubMenu(!showSubMenu);
@@ -58,7 +62,7 @@ const NavMenuItem = props => {
     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 = (window.innerHeight - targetDimensions.top - (heigthSubmenuContainer - heigthSubmenuContent) - 1).toString().concat('px') || '0px';
+    const maxHeigthSubMenu = isFinalWindow ? '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;
@@ -72,6 +76,7 @@ const NavMenuItem = props => {
     },
     onMouseLeave: () => {
       setShowSubMenu(false);
+      setIsFinalWindow(false);
     }
   }, /*#__PURE__*/_react.default.createElement(_MenuLink.default, _extends({
     disabled: disabled
@@ -87,7 +92,12 @@ const NavMenuItem = props => {
   }, title), !childrenIsSubMenu && children)), showSubMenu && children && childrenIsSubMenu && !disabled && !openSearchMenuPopup && /*#__PURE__*/_react.default.createElement("div", {
     ref: submenuContainerRef,
     className: "submenu-container",
-    style: {
+    style: isFinalWindow ? {
+      marginLeft: targetDimensions.width,
+      bottom: '0',
+      paddingBottom: '10px',
+      position: 'fixed'
+    } : {
       marginLeft: targetDimensions.width,
       top: targetDimensions.top,
       minWidth,

package/lib/menus/sidenav/index.js

@@ -93,12 +93,12 @@ const SideNav = props => {
       childrenProps.forEach(child => {
         if (child) {
           compareChild(child);
-          if (child.props.children) scanChildrenContent(child.props.children);
+          if (child.props && child.props.children) scanChildrenContent(child.props.children);
         }
       });
     } else if (childrenProps) {
       compareChild(childrenProps);
-      if (childrenProps.props.children) scanChildrenContent(childrenProps.props.children);
+      if (childrenProps.props && childrenProps.props.children) scanChildrenContent(childrenProps.props.children);
     }
   };
   const openSearchMenu = () => {
@@ -165,7 +165,7 @@ const SideNav = props => {
   return /*#__PURE__*/_react.default.createElement(_helpers.SideNavContext.Provider, {
     value: contextValues
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "sidenav-component ".concat(openSearchMenuPopup ? '-blocked' : '', " ").concat(customClass),
+    className: "sidenav-component ".concat(isExpanded ? '-expanded' : '', " ").concat(openSearchMenuPopup ? '-blocked' : '', " ").concat(customClass),
     ref: sideNavRef
   }, showExpandMenu && /*#__PURE__*/_react.default.createElement(_ExpandMenu.default, {
     expandMenuCustomClass: "".concat(isExpanded && 'closefromexpanded', " ").concat(expandMenuCustomClass),

package/lib/menus/sidenav/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ReactElement, Ref, CSSProperties } from 'react';
+import { ReactNode, ReactElement, CSSProperties, Ref } from 'react';
 import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { Size } from '../../@types/Size.js';
 import { WithTooltipProps } from '../../internals/types.js';
@@ -38,6 +38,7 @@ interface IMenuLinkProps extends WithTooltipProps {
 interface INavMenuGroupProps {
     children: ReactNode;
     scrollable?: boolean;
+    style?: CSSProperties;
 }
 interface INavMenuItemProps extends WithTooltipProps {
     children?: ReactNode;

package/package.json

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