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

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,12 +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%;
 
-    >.item {
+    > .help-item {
+      border-top: 1px solid #eee;
+    }
+
+    > .item {
       cursor: pointer;
       border-bottom: 1px solid #eee;
       width: 100%;
@@ -43,7 +47,15 @@ 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;
+          align-items: center;
+          justify-content: center;
+        }
+
+        > .helpmenubutton {
           width: 100%;
           height: 100%;
           display: flex;
@@ -61,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 {
@@ -132,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;
@@ -143,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;
@@ -162,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;
@@ -176,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;
@@ -192,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;
     }
   }
@@ -207,7 +219,7 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   &.-small {
     width: 55px;
 
-    >.item {
+    > .item {
       height: 40px;
     }
 
@@ -219,7 +231,7 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   &.-medium {
     width: 55px;
 
-    >.item {
+    > .item {
       height: 50px;
     }
 
@@ -231,7 +243,7 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   &.-large {
     width: 75px;
 
-    >.item {
+    > .item {
       height: 60px;
     }
 
@@ -241,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;
@@ -256,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;
@@ -275,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;
@@ -288,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;
@@ -302,21 +314,24 @@ 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;
     }
+
     &::-webkit-scrollbar {
       width: 5px;
     }
+
     &::-webkit-scrollbar-track {
       box-shadow: inset 0 0 5px grey;
       border-radius: 10px;
     }
+
     &::-webkit-scrollbar-thumb {
       background: rgb(151, 142, 142);
       border-radius: 10px;
@@ -332,13 +347,41 @@ 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;
   }
 }
 
+.popup-help {
+  border: 1px solid $list-container-border;
+
+  > .list-component {
+    box-shadow: none;
+    overflow: hidden;
+    border-radius: 0px;
+
+    > .helpheader {
+      background-color: #bdbdbda6;
+
+      > .title {
+        line-height: 35px;
+      }
+    }
+
+    > .item-container > .item > .text {
+      font-size: 12px;
+    }
+  }
+
+  .infomartion > .help-information {
+    color: rgba(0, 0, 0, 0.54);
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+
 .nodata-container {
   display: flex;
   flex-direction: column;
@@ -347,18 +390,18 @@ 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/inputs/mask/imaskHOC.js

@@ -0,0 +1,203 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _imask = _interopRequireDefault(require("imask"));
+var helpers = _interopRequireWildcard(require("./helpers"));
+var _permissionValidations = require("../../permissionValidations");
+var _format_number = require("../number/format_number");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.readOnly, _permissionValidations.OPTIONS_ON_DENIED.hideContent];
+const IMaskHOC = ComposedComponent => {
+  const MaskedComponent = props => {
+    const {
+      permissionAttr,
+      skeletonize,
+      inputRef,
+      placeholderChar = '_',
+      lazy = false,
+      pattern = '',
+      radix = ' ',
+      thousandsSeparator = '',
+      mapToRadix = [],
+      scale = 2,
+      signed = false,
+      normalizeZeros = true,
+      padFractionalZeros = true,
+      mask,
+      commit = () => {},
+      parse,
+      format,
+      definitions,
+      groups,
+      min,
+      max,
+      dispatch,
+      value = '',
+      onChange,
+      isDateField = false,
+      autoCompleteMask
+    } = props;
+    const maskOptions = {
+      placeholderChar: placeholderChar === '' ? ' ' : placeholderChar,
+      lazy,
+      pattern,
+      radix,
+      thousandsSeparator,
+      mapToRadix,
+      scale,
+      signed,
+      normalizeZeros,
+      padFractionalZeros,
+      mask,
+      commit,
+      parse,
+      format,
+      definitions,
+      groups,
+      min,
+      max,
+      dispatch
+    };
+    const [onDenied] = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr));
+    const elementRef = (0, _react.useRef)(null);
+    const maskRef = (0, _react.useRef)(null);
+    const {
+      hideContent,
+      unvisible,
+      disabled,
+      readOnly
+    } = onDenied;
+    const dontInitMask = hideContent || unvisible || skeletonize;
+    const disableCallbacks = disabled || readOnly;
+    const setValue = newValue => {
+      if (maskRef.current) {
+        if (props.unmask) maskRef.current.unmaskedValue = newValue.toString();
+        maskRef.current.value = String(newValue);
+      }
+    };
+    const onAccept = (0, _react.useCallback)(() => {
+      if (onChange && !disableCallbacks && maskRef.current) {
+        const {
+          unmaskedValue,
+          el
+        } = maskRef.current;
+        const name = el.name || el.input && el.input.name;
+        onChange({
+          target: {
+            value: unmaskedValue,
+            name
+          }
+        }, props.unmask ? unmaskedValue : maskRef.current.value);
+      }
+    }, [onChange]);
+    const onComplete = (0, _react.useCallback)(() => {
+      if (props.onComplete && !disableCallbacks && maskRef.current) {
+        const {
+          unmaskedValue,
+          el
+        } = maskRef.current;
+        const name = el.name || el.input && el.input.name;
+        props.onComplete({
+          target: {
+            value: unmaskedValue,
+            name
+          }
+        }, props.unmask ? unmaskedValue : maskRef.current.value);
+      }
+    }, [props.onComplete]);
+    const autoCompleteMaskValue = (0, _react.useCallback)(eventTargetValue => {
+      if (autoCompleteMask && eventTargetValue.length && maskRef.current && elementRef.current) {
+        const sizeMask = maskRef.current.mask.toString().replace(/\D+/g, '').length;
+        if (sizeMask > eventTargetValue.length) {
+          switch (autoCompleteMask) {
+            case 'left':
+              setValue(eventTargetValue.padStart(sizeMask, '0'));
+              break;
+            case 'right':
+              setValue(eventTargetValue.padEnd(sizeMask, '0'));
+              break;
+            default:
+              setValue(eventTargetValue);
+              break;
+          }
+        }
+      }
+    }, [autoCompleteMask, maskRef.current, elementRef.current]);
+    const getMask = () => {
+      const element = elementRef.current;
+      if (element) {
+        const maskCurrent = maskRef.current;
+        if (!maskCurrent) {
+          maskRef.current = (0, _imask.default)(element, maskOptions);
+          if (value && typeof value !== 'number' && value.trim() !== '' || value && typeof value === 'number') onAccept();
+          setValue(value);
+        } else {
+          maskCurrent.updateOptions(maskOptions);
+        }
+      }
+    };
+    const destroyMask = () => {
+      if (maskRef.current) {
+        maskRef.current.destroy();
+        maskRef.current = null;
+      }
+    };
+    (0, _react.useEffect)(() => {
+      if (props.handlerSetOnDenied) props.handlerSetOnDenied(onDenied);
+      if (!props.mask || dontInitMask) return;
+      getMask();
+    }, [maskOptions]);
+    (0, _react.useEffect)(() => {
+      if (!maskRef.current) return;
+      const maskCurrent = maskRef.current;
+      maskCurrent.on('accept', onAccept);
+      maskCurrent.on('complete', onComplete);
+
+      // eslint-disable-next-line consistent-return
+      return () => {
+        maskCurrent.off('accept', onAccept);
+        maskCurrent.off('complete', onComplete);
+      };
+    }, [onAccept, onComplete]);
+    (0, _react.useEffect)(() => {
+      if (maskOptions.mask && !dontInitMask) {
+        if (maskRef.current) {
+          const formattedValue = isDateField ? value : (0, _format_number.numberToPtBR)(value) || '';
+          setValue(formattedValue);
+        } else {
+          getMask();
+        }
+      } else if (!dontInitMask) {
+        destroyMask();
+        if (value && elementRef.current) elementRef.current.value = value;
+      }
+    }, [value, isDateField]);
+    (0, _react.useEffect)(() => destroyMask, []);
+    return /*#__PURE__*/_react.default.createElement(ComposedComponent, _extends({}, helpers.extractNonMaskProps(props, maskOptions), {
+      onDeniedActions: onDenied,
+      defaultValue: value,
+      onBlur: e => {
+        autoCompleteMaskValue(e.target.value);
+        if (props.onBlur) props.onBlur(e);
+      },
+      onChange: e => setValue(e.target.value),
+      inputRef: el => {
+        elementRef.current = el;
+        if (inputRef) {
+          if (typeof inputRef === 'object') inputRef.current = el;else inputRef(el);
+        }
+      }
+    }));
+  };
+  const nestedComponentName = ComposedComponent.displayName || ComposedComponent.name || 'Component';
+  MaskedComponent.displayName = "IMask(".concat(nestedComponentName, ")");
+  return MaskedComponent;
+};
+var _default = exports.default = IMaskHOC;

package/lib/menus/sidenav/NavMenuItem.js

@@ -26,13 +26,18 @@ const NavMenuItem = props => {
     maxWidth = '90%',
     minWidth = 500,
     columnsQtty,
-    targetRef
+    targetRef,
+    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 {
@@ -45,38 +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,
-    className: "item ".concat(url && !disabled && '-withlink', " ").concat(customClass, " ").concat(disabled && '-disabled'),
-    onMouseEnter: e => {
-      onMouseEnter(e);
+    style: style,
+    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
@@ -91,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,