linear-react-components-ui 1.1.2-beta.22 → 1.1.2-beta.24

package/lib/inputs/select/ActionButtons.js

@@ -11,28 +11,37 @@ const ActionButtons = props => {
   const {
     disabled = false,
     showClearButton = true,
-    dropDownOpened,
-    handlerOpenClose,
-    handlerClear
+    dropDownOpened
   } = props;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "actionbuttonsselect"
-  }, showClearButton && /*#__PURE__*/_react.default.createElement("button", {
-    disabled: disabled,
-    tabIndex: -1,
-    className: "actionbutton buttonclear",
-    onClick: handlerClear
+  const returnOnClick = () => {
+    if (!disabled) {
+      return props.handleOpenClose();
+    }
+    return undefined;
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showClearButton && /*#__PURE__*/_react.default.createElement("span", {
+    role: "button",
+    className: "actionbutton",
+    onClick: () => {
+      props.handleClear();
+    },
+    onKeyPress: () => {},
+    tabIndex: -1
   }, /*#__PURE__*/_react.default.createElement(_icons.default, {
+    pointerEvents: "none",
     name: "cancel",
-    pointerEvents: "none"
-  })), /*#__PURE__*/_react.default.createElement("button", {
-    disabled: disabled,
-    tabIndex: -1,
-    className: "actionbutton buttonopenclose",
-    onClick: handlerOpenClose
+    customClass: "iconclear"
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    role: "button",
+    className: "actionbutton",
+    onClick: () => {
+      returnOnClick();
+    },
+    onKeyPress: () => {},
+    tabIndex: -1
   }, /*#__PURE__*/_react.default.createElement(_icons.default, {
-    pointerEvents: "none",
-    name: dropDownOpened ? 'mini_up' : 'mini_down'
+    name: dropDownOpened ? 'mini_up' : 'mini_down',
+    pointerEvents: "none"
   })));
 };
 var _default = exports.default = ActionButtons;

package/lib/inputs/select/Dropdown.d.ts

@@ -1,6 +1,5 @@
 import { IDropdownSelectProps } from '../types.js';
 import 'react';
-import 'imask';
 import '../../@types/PermissionAttr.js';
 import '../../@types/DataCombo.js';
 import '../base/types.js';

package/lib/inputs/select/Dropdown.js

@@ -29,6 +29,7 @@ const Dropdown = props => {
     dropdownWidth,
     gridWrapperStyle,
     handleOnSelect,
+    handleOnBlur,
     inputValue,
     handleOnFocus,
     opened,
@@ -82,12 +83,15 @@ const Dropdown = props => {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "dropdowmIten ".concat(item[idKey], "}"),
       className: helper.getDropdownItemCssClass(itemSelected, disabled, striped)
-    }, /*#__PURE__*/_react.default.createElement("button", {
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      role: "button",
       className: "menubutton",
       tabIndex: -1,
-      onClick: event => {
+      onKeyPress: () => {},
+      onClick: () => {
         if (!disabled) {
           handleOnSelect(item);
+          handleOnBlur(item);
         }
       }
     }, item.iconName && /*#__PURE__*/_react.default.createElement(_icons.default, {

package/lib/inputs/select/helper.d.ts

@@ -1,7 +1,6 @@
 import { IDropdownSelectProps } from '../types.js';
 import { GetSimpleFilteredParams, GetMultipleFilteredParams } from './types.js';
 import 'react';
-import 'imask';
 import '../../@types/PermissionAttr.js';
 import '../../@types/DataCombo.js';
 import '../base/types.js';

package/lib/inputs/select/multiple/Selecteds.d.ts

@@ -6,6 +6,6 @@ import '../../base/types.js';
 import 'react';
 import '../../../@types/Period.js';
 
-declare const Selecteds: ({ currents, descriptionKey, idKey, handlerOnUnselect, }: ISelectedsMultipleProps) => JSX.Element;
+declare const Selecteds: ({ currents, descriptionKey, idKey, handleOnUnselect, }: ISelectedsMultipleProps) => JSX.Element;
 
 export { Selecteds as default };

package/lib/inputs/select/multiple/Selecteds.js

@@ -11,15 +11,17 @@ const Selecteds = _ref => {
     currents,
     descriptionKey,
     idKey,
-    handlerOnUnselect
+    handleOnUnselect
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currents.map(selected => /*#__PURE__*/_react.default.createElement("div", {
     className: "selecteditem",
     key: "selected-".concat(selected[idKey])
-  }, typeof descriptionKey === 'string' ? selected[descriptionKey] : descriptionKey(selected), /*#__PURE__*/_react.default.createElement("button", {
+  }, typeof descriptionKey === 'string' ? selected[descriptionKey] : descriptionKey(selected), /*#__PURE__*/_react.default.createElement("span", {
     className: "close",
+    role: "button",
     tabIndex: -1,
-    onClick: () => handlerOnUnselect(selected[idKey])
+    onKeyPress: () => {},
+    onClick: () => handleOnUnselect(selected[idKey])
   }))));
 };
 var _default = exports.default = Selecteds;

package/lib/inputs/select/multiple/index.js

@@ -24,8 +24,7 @@ const MultipleSelect = props => {
     handlerClear,
     value = [],
     remoteSearch = false,
-    descriptionKey,
-    showClearButton
+    descriptionKey
   } = props;
   const [dataCombo, setDataCombo] = (0, _react.useState)(dataSource);
   const [currents, setCurrents] = (0, _react.useState)([]);
@@ -41,7 +40,6 @@ const MultipleSelect = props => {
   const dropdownRef = (0, _react.useRef)(null);
   const selectWrapper = (0, _react.useRef)();
   const gridElRef = (0, _react.useRef)();
-  const inputTextRef = (0, _react.useRef)(null);
   const descriptionKeyIsString = typeof descriptionKey === 'string';
   const onScreenResize = () => {
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
@@ -55,12 +53,12 @@ const MultipleSelect = props => {
     }
   };
   const onMouseMove = event => {
-    var _dropdownRef$current, _dropdownRef$current$;
-    const target = event.target;
-    const idDropdown = ((_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : (_dropdownRef$current$ = _dropdownRef$current.parentElement) === null || _dropdownRef$current$ === void 0 ? void 0 : _dropdownRef$current$.id) || '';
-    const dropdownElement = document.getElementById(idDropdown);
-    const keepDropdownOpen = Boolean(dropdownElement === null || dropdownElement === void 0 ? void 0 : dropdownElement.contains(target));
-    setInsideComponent(keepDropdownOpen);
+    const {
+      target
+    } = event;
+    if (target.className === '') return;
+    const insideComponents = ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label'].includes(target.className);
+    setInsideComponent(insideComponents);
   };
   const onClearClick = () => {
     setSelected(undefined);
@@ -96,7 +94,6 @@ const MultipleSelect = props => {
     setCurrents(currentsSelect);
     setDataCombo(dataSource);
     setInputValue([]);
-    if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
     setOpened(false);
     if (props.onSelect) setSelected(props.onSelect(currentsSelect.map(i => i[idKey])));
   };
@@ -104,13 +101,11 @@ const MultipleSelect = props => {
     if (currents) {
       const result = currents.filter(item => item[idKey] !== id);
       setCurrents(result);
-      if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
-      setOpened(false);
       if (props.onSelect) setSelected(props.onSelect(result.map(i => i[idKey])));
     }
   };
   const onOpenClose = () => {
-    setOpened(prevState => !prevState);
+    setOpened(!opened);
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
   };
   const onFocus = () => {
@@ -120,16 +115,11 @@ const MultipleSelect = props => {
   };
   const onBlur = e => {
     if (props.onBlur) props.onBlur(e);
-    if (!insideComponent) {
-      setOpened(false);
-      setDataCombo(dataSource);
-    }
+    if (!insideComponent) setOpened(false);
   };
   const onInputKeyDown = e => {
     if (e.keyCode) {
       if (e.keyCode === constants.keyCodes.ENTER && selected) {
-        var _e$preventDefault;
-        (_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 ? void 0 : _e$preventDefault.call(e);
         if (!currents.includes(selected)) onSelect(selected);
       } else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {
         if (!opened) setOpened(true);
@@ -200,17 +190,6 @@ const MultipleSelect = props => {
     ref: componentRef,
     className: "select-component"
   }, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
-    inputRef: ref => {
-      if (props.inputRef) {
-        if (!_lodash.default.isFunction(props.inputRef)) {
-          props.inputRef.current = ref;
-        } else {
-          props.inputRef(ref);
-        }
-      }
-      inputTextRef.current = ref;
-    },
-    autoComplete: "off",
     value: inputValue.toString(),
     readOnly: shouldBeReadOnly(),
     onFocus: () => {
@@ -229,19 +208,21 @@ const MultipleSelect = props => {
       selectWrapper.current = r;
     },
     handlerSetOnDenied: setOnDenied,
-    rightElements: /*#__PURE__*/_react.default.createElement(_ActionButtons.default, {
-      showClearButton: showClearButton,
+    rightElements: /*#__PURE__*/_react.default.createElement(_ActionButtons.default, _extends({}, props, {
       disabled: shouldDisable() || shouldBeReadOnly(),
       dropDownOpened: opened,
-      handlerClear: () => {
+      handleClear: () => {
         if (shouldDisable()) return null;
         return onClearClick();
       },
-      handlerOpenClose: onOpenClose
-    })
-  }), /*#__PURE__*/_react.default.createElement(_Selecteds.default, _extends({}, props, {
-    currents: currents,
-    handlerOnUnselect: onUnselect
+      handleOpenClose: () => {
+        onOpenClose();
+      }
+    }))
+  }), /*#__PURE__*/_react.default.createElement(_Selecteds.default, _extends({
+    currents: currents
+  }, props, {
+    handleOnUnselect: onUnselect
   }))), opened && /*#__PURE__*/_react.default.createElement(_Dropdown.default, _extends({}, props, {
     selected: selected,
     selectFieldRef: componentRef,

package/lib/inputs/select/simple/index.js

@@ -19,7 +19,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 const SimpleSelect = props => {
   const {
     value,
-    descriptionKey,
+    descriptionKey = '',
     dataSource = [],
     gridLayout,
     onSearch,
@@ -32,9 +32,7 @@ const SimpleSelect = props => {
     name = '',
     undigitable,
     searchOnDropdown = false,
-    allOptions = undefined,
-    showClearButton = false,
-    searchNotFoundText
+    allOptions = undefined
   } = props;
   const descriptionKeyIsString = typeof descriptionKey === 'string';
   const dataSourceWithAllOptions = allOptions ? [{
@@ -50,11 +48,15 @@ const SimpleSelect = props => {
   const [onDenied, setOnDeniedSelect] = (0, _react.useState)();
   const [isTyping, setIsTyping] = (0, _react.useState)(false);
   const dropdownRef = (0, _react.useRef)(null);
-  const componentId = "select-component-".concat(name, "-").concat(uuid.v1());
+  const componentId = "select-component".concat(uuid.v1());
   const componentRef = (0, _react.useRef)(null);
   const selectWrapper = (0, _react.useRef)();
   const gridElement = (0, _react.useRef)();
-  const inputTextRef = (0, _react.useRef)(null);
+  const clearSelected = () => {
+    setInputText('');
+    setSelected(null);
+    setDataCombo(dataSourceWithAllOptions);
+  };
   const onScreenResize = () => {
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
   };
@@ -68,12 +70,10 @@ const SimpleSelect = props => {
     }
   };
   const onMouseMove = event => {
-    var _dropdownRef$current2, _dropdownRef$current3;
     const target = event.target;
-    const idDropdown = ((_dropdownRef$current2 = dropdownRef.current) === null || _dropdownRef$current2 === void 0 ? void 0 : (_dropdownRef$current3 = _dropdownRef$current2.parentElement) === null || _dropdownRef$current3 === void 0 ? void 0 : _dropdownRef$current3.id) || '';
-    const dropdownElement = document.getElementById(idDropdown);
-    const keepDropdownOpen = Boolean(dropdownElement === null || dropdownElement === void 0 ? void 0 : dropdownElement.contains(target));
-    setInsideComponent(keepDropdownOpen);
+    if (target.className === '') return;
+    const insideComponents = ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label'].includes(target.className);
+    setInsideComponent(insideComponents);
   };
   const getSelectEvent = selectedEvent => ({
     target: {
@@ -99,12 +99,12 @@ const SimpleSelect = props => {
       });
       if (dataComboFilter && dataComboFilter.length > 0) {
         selectedFilter = dataComboFilter[0];
-        setSelected(selectedFilter);
       }
       setDataCombo(dataComboFilter);
     }
     setOpened(true);
     setInputText(valueFilter);
+    setSelected(selectedFilter);
     if (selectedFilter) {
       if (descriptionKeyIsString && valueFilter === selectedFilter[descriptionKey] || !descriptionKeyIsString && valueFilter === descriptionKey(selectedFilter)) {
         onChange(selectedFilter);
@@ -112,22 +112,18 @@ const SimpleSelect = props => {
     }
   };
   const onSelect = selectedDropdown => {
-    if (!selectedDropdown) return;
+    if (selectedDropdown === undefined) return;
+    setOpened(false);
     setSelected(selectedDropdown);
     if (descriptionKeyIsString) setInputText(selectedDropdown[descriptionKey]);else setInputText(descriptionKey(selectedDropdown));
-    new Promise(resolve => {
-      resolve(onChange(selectedDropdown));
-    }).finally(() => {
-      if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
-      setOpened(false);
-    });
+    onChange(selectedDropdown);
   };
   const onOpenClose = () => {
-    setOpened(prevState => !prevState);
+    setOpened(!opened);
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
   };
   const onFocus = () => {
-    if (openDropdownOnFocus) setOpened(true);
+    setOpened(openDropdownOnFocus);
     if (selectWrapper) {
       const dropdownWidthFocus = selectWrapper.current ? selectWrapper.current.clientWidth : 0;
       setDropdownWidth(dropdownWidthFocus);
@@ -137,20 +133,15 @@ const SimpleSelect = props => {
     if (props.onBlur) {
       const event = getSelectEvent(selected);
       props.onBlur(event);
-      if (selected && descriptionKeyIsString && inputText !== selected[descriptionKey] || !descriptionKeyIsString && inputText !== descriptionKey(selected)) {
-        setSelected(null);
-        setInputText(inputText);
-        new Promise(resolve => {
-          resolve(onChange(null));
-        }).finally(() => {
-          onChange();
-        });
+      if (selected) {
+        if (descriptionKeyIsString && inputText !== selected[descriptionKey] || !descriptionKeyIsString && inputText !== descriptionKey(selected)) {
+          clearSelected();
+        }
       }
     }
     if (!insideComponent) {
       setOpened(false);
       setIsTyping(false);
-      setDataCombo(dataSourceWithAllOptions);
     }
   };
   const onInputKeyDown = e => {
@@ -168,22 +159,13 @@ const SimpleSelect = props => {
           index = dataCombo && index === 0 ? (dataCombo === null || dataCombo === void 0 ? void 0 : dataCombo.length) - 1 : index - 1;
         }
         setSelected(dataCombo[index]);
-        if (descriptionKeyIsString) setInputText(dataCombo[index][descriptionKey]);
-        if (!descriptionKeyIsString) setInputText(descriptionKey(dataCombo[index]));
       }
     }
     if (!isTyping) setIsTyping(true);
   };
   const onClearClick = () => {
-    new Promise(resolve => {
-      resolve(onChange(null));
-    }).finally(() => {
-      setSelected(null);
-      setInputText('');
-      onChange();
-      if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
-      setOpened(false);
-    });
+    setSelected(undefined);
+    setInputText('');
   };
   const setOnDenied = onDeniedSelect => {
     setOnDeniedSelect(onDeniedSelect);
@@ -246,17 +228,6 @@ const SimpleSelect = props => {
     ref: componentRef,
     className: "select-component"
   }, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
-    inputRef: ref => {
-      if (props.inputRef) {
-        if (!_lodash.default.isFunction(props.inputRef)) {
-          props.inputRef.current = ref;
-        } else {
-          props.inputRef(ref);
-        }
-      }
-      inputTextRef.current = ref;
-    },
-    autoComplete: "off",
     readOnly: undigitable || shouldBeReadOnly(),
     value: inputText,
     onFocus: onFocus,
@@ -271,18 +242,18 @@ const SimpleSelect = props => {
       selectWrapper.current = r;
     },
     handlerSetOnDenied: inputOnDenied => setOnDenied(inputOnDenied),
-    rightElements: /*#__PURE__*/_react.default.createElement(_ActionButtons.default, {
+    rightElements: /*#__PURE__*/_react.default.createElement(_ActionButtons.default, _extends({}, props, {
       disabled: shouldDisable() || shouldBeReadOnly(),
-      showClearButton: showClearButton,
       dropDownOpened: opened,
-      handlerClear: () => {
+      handleClear: () => {
         if (shouldDisable()) return null;
         return onClearClick();
       },
-      handlerOpenClose: onOpenClose
-    })
+      handleOpenClose: () => {
+        onOpenClose();
+      }
+    }))
   })), opened && /*#__PURE__*/_react.default.createElement(_Dropdown.default, _extends({}, props, {
-    opened: opened,
     selected: selected,
     inputValue: inputText,
     selectFieldRef: componentRef,
@@ -296,9 +267,9 @@ const SimpleSelect = props => {
     handleOnKeydown: onInputKeyDown,
     handleOnBlur: () => onBlur,
     handleOnFocus: onFocus,
+    opened: opened,
     dataCombo: dataCombo,
-    dropdownWidth: dropdownWidth || 0,
-    searchNotFoundText: searchNotFoundText
+    dropdownWidth: dropdownWidth || 0
   })));
 };
 var _default = exports.default = SimpleSelect;

package/lib/inputs/select/types.d.ts

@@ -2,7 +2,7 @@ import { TextAlign } from '../../@types/Align.js';
 import { DataCombo } from '../../@types/DataCombo.js';
 import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { CustomInputEvent } from '../base/types.js';
-import { MutableRefObject } from 'react';
+import 'react';
 import '../../@types/Period.js';
 
 type AllOptions = {
@@ -47,7 +47,6 @@ interface ISimpleSelectProps {
     autoFocus?: boolean;
     onFocus?: () => void;
     allOptions?: AllOptions;
-    inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null> | ((ref: HTMLInputElement | HTMLTextAreaElement | null) => void);
 }
 interface ISelectFieldProps extends Omit<ISimpleSelectProps, 'idKey' | 'value' | 'descriptionKey'> {
     multiple?: boolean;
@@ -93,7 +92,7 @@ interface ISelectedsMultipleProps {
     idKey: string;
     descriptionKey: DescriptionKey;
     currents: DataCombo[];
-    handlerOnUnselect: (id: string) => void;
+    handleOnUnselect: (id: string) => void;
 }
 interface GetFilteredParams {
     dataSource: DataCombo[];

package/lib/inputs/types.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode, MouseEvent, MutableRefObject, CSSProperties, KeyboardEvent, ReactElement } from 'react';
-import IMask from 'imask';
 import { PermissionAttr, OnDenied } from '../@types/PermissionAttr.js';
 import { DataCombo } from '../@types/DataCombo.js';
 import { IBaseProps, CustomInputEvent } from './base/types.js';
@@ -63,7 +62,7 @@ interface IMaskHOCProps {
     inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null> | ((ref: HTMLInputElement | HTMLTextAreaElement | null) => void);
     placeholderChar?: string;
     lazy?: boolean;
-    definitions?: IMask.AllMaskedOptions['definitions'];
+    definitions?: object;
     groups?: object;
     pattern?: string;
     format?: () => void;
@@ -98,7 +97,7 @@ interface IMaskHOCProps {
     rounded?: boolean;
     errorMessages?: string[];
     skeletonize?: boolean;
-    mask?: IMask.AnyMask;
+    mask?: string | NumberConstructor;
     isDateField?: boolean;
     autoCompleteMask?: 'left' | 'right';
 }
@@ -134,8 +133,8 @@ interface IDropdownSelectProps {
     align?: 'left' | 'right';
 }
 interface IActionButtonsSelectProps {
-    handlerClear: () => void;
-    handlerOpenClose: () => void;
+    handleClear: () => void;
+    handleOpenClose: () => void;
     dropDownOpened: boolean;
     showClearButton?: boolean;
     disabled?: boolean;
@@ -150,10 +149,5 @@ interface IButtonsProps {
     transparent: boolean;
     disabled?: boolean;
 }
-interface ErrorProps {
-    customClass?: string;
-    style?: React.CSSProperties;
-    messages?: string | string[];
-}
 
-export type { ErrorProps, IActionButtonsSelectProps, IAdvancedFilterProps, IButtonsProps, IDropdownProps, IDropdownSelectProps, IInputHOCProps, IMaskHOCProps, ISearchProps };
+export type { IActionButtonsSelectProps, IAdvancedFilterProps, IButtonsProps, IDropdownProps, IDropdownSelectProps, IInputHOCProps, IMaskHOCProps, ISearchProps };

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', "\n      ").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/popup_menu_search/index.js

@@ -32,18 +32,17 @@ const PopupMenuSearch = props => {
     style
   });
   const closeOnEsc = e => {
-    if (e.key === 'Escape') {
+    if (e.keyCode === 27 || e.key === 'ESC') {
       handlerClose();
-      e.stopPropagation();
     }
   };
   (0, _react.useEffect)(() => {
     body.appendChild(popupRef.current);
     if (searchFieldRef && searchFieldRef.current) searchFieldRef.current.focus();
-    document.body.addEventListener('keydown', closeOnEsc);
+    document.body.addEventListener('keyup', closeOnEsc);
     return () => {
       body.removeChild(popupRef.current);
-      document.body.removeEventListener('keydown', closeOnEsc);
+      document.body.removeEventListener('keyup', closeOnEsc);
     };
   }, []);
   (0, _react.useEffect)(() => {