linear-react-components-ui 1.0.12-beta.8 → 1.0.12-beta.9

package/lib/@types/PointerEvents.d.ts

@@ -1,3 +1,3 @@
-type PointerEvents = 'none' | 'all' | 'fill' | 'painted' | 'stroke' | 'visible' | 'visibleFill' | 'visiblePainted' | 'visibleStroke' | 'inherit' | 'initial' | 'unset';
+type PointerEvents = 'none' | 'all' | 'fill' | 'painted' | 'stroke' | 'visible' | 'visibleFill' | 'visiblePainted' | 'visibleStroke' | 'inherit' | 'initial' | 'unset' | 'auto';
 
 export { PointerEvents };

package/lib/assets/styles/icon.scss

@@ -5,3 +5,11 @@
 .icon-component {
   margin: 0px 2px;
 }
+
+.icon-component-container {
+  display: inline-flex;
+  place-self: center;
+  padding: 2px;
+  border-radius: 99999px;
+  pointer-events: fill;
+}

package/lib/assets/styles/multiSelect.scss

@@ -1,19 +1,23 @@
 @import "commons.scss";
 @import "effects.scss";
+
 .multiSelect-component {
   width: 100%;
   display: block;
+
   .selectwrapper {
     height: auto;
 
-    > .multiselect {
+    >.multiselect {
       flex-wrap: wrap;
       position: relative;
-      > .textinput {
+
+      >.textinput {
         order: 1;
         display: inline-block;
       }
-      > .selecteditem {
+
+      >.selecteditem {
         font-size: 14px;
         position: absolute;
         top: 50%;
@@ -22,21 +26,21 @@
       }
     }
 
-    > .actionbutton {
+    >.actionbutton {
       display: flex;
       align-items: center;
       cursor: pointer;
       margin: 0 3px;
       padding: 0 3px;
 
-      > svg {
+      >svg {
         margin: 0;
       }
     }
   }
 }
 
-.multiSelect-component > .dropdown {
+.multiSelect-component>.dropdown {
   animation: 0.5s ease-in 0s 1 slideDown;
   background-color: #fff;
   border: $component-border-color;
@@ -48,40 +52,48 @@
   overflow-x: hidden;
   position: absolute;
   z-index: 9999;
-  > .filtercontainer {
+
+  >.filtercontainer {
     position: relative;
     display: grid;
     grid-template-columns: 1fr 20px;
     border: 1px solid $component-border-color;
     margin: 4px;
-    > .filterinput {
+
+    >.filterinput {
       border: 0;
       font-size: 13px;
       text-indent: 4px;
       padding: 10px 5px;
     }
-    > .filtericon {
+
+    >.filtericon {
       position: absolute;
       right: 5px;
       top: 10px;
     }
   }
-  > .listcontainer > .item {
+
+  >.listcontainer>.item {
     margin: 0;
     padding: 6px 10px;
     display: flex;
     cursor: pointer;
     justify-content: stretch;
     border-bottom: solid 1px #e1e1e1;
+
     &:last-child {
       border-bottom: none;
     }
+
     &:hover {
       background-color: $default-hover-color;
     }
+
     &.-selected {
       background-color: $default-hover-color;
     }
+
     .menubutton {
       background-color: transparent;
       border: 0;
@@ -91,13 +103,16 @@
       justify-content: space-between;
       align-items: center;
       width: 100%;
-      > .checkboxicon {
+
+      >.checkboxicon {
         margin-right: 5px;
       }
-      > .label {
+
+      >.label {
         flex-grow: 1;
       }
-      > .menuicon {
+
+      >.menuicon {
         margin-right: 5px;
       }
     }

package/lib/assets/styles/select.scss

@@ -1,28 +1,35 @@
 @import "commons.scss";
 @import "effects.scss";
+
 .select-component {
   width: 100%;
   display: block;
   position: relative;
+
   .selectwrapper {
     height: auto;
   }
+
   .selectwrapper .actionbutton {
     cursor: pointer;
     display: flex;
     align-items: center;
     height: 100%;
-    > .iconclear {
+
+    >.iconclear {
       margin: 8px -3px 2px 3px;
     }
   }
-  .selectwrapper > .multiselect {
+
+  .selectwrapper>.multiselect {
     flex-wrap: wrap;
-    > .textinput {
+
+    >.textinput {
       order: 1;
       display: inline-block;
     }
-    > .selecteditem {
+
+    >.selecteditem {
       background-color: #f2f9fc;
       border: 1px solid #c9e6f2;
       border-radius: 3px;
@@ -37,8 +44,10 @@
       padding: 0px 8px 0px 5px;
     }
   }
-  .selectwrapper > .multiselect > .selecteditem > .close {
+
+  .selectwrapper>.multiselect>.selecteditem>.close {
     cursor: pointer;
+
     &:after {
       content: "×";
       font-size: 16px;
@@ -48,7 +57,7 @@
   }
 }
 
-.dropdown-component > .select-dropdown {
+.dropdown-component>.select-dropdown {
   animation: 0.5s ease-in 0s 1 slideDown;
   background-color: #FFF;
   border: $component-border-color;
@@ -59,45 +68,55 @@
   overflow-y: auto;
   overflow-x: hidden;
   margin-top: 2px;
-  > .filtercontainer {
+
+  >.filtercontainer {
     display: grid;
     grid-template-columns: 1fr 20px;
     align-items: center;
     border: 1px solid $component-border-color;
     margin: 4px;
   }
-  > .filtercontainer > .filterinput {
+
+  >.filtercontainer>.filterinput {
     border: 0;
     width: 100%;
     font-size: 13px;
     text-indent: 4px;
     padding: 10px 5px;
   }
-  > .item {
+
+  >.item {
     margin: 0;
     padding: 6px 10px;
     display: flex;
     cursor: pointer;
     justify-content: stretch;
     border-bottom: solid 1px #e1e1e1;
+
     &:last-child {
       border-bottom: none;
     }
+
     &:hover {
       background-color: $default-hover-color;
     }
+
     &.-selected {
       background-color: $default-hover-color;
     }
+
     &.-disabled {
       @extend %component-menu-disabled;
+
       &:hover {
         background-color: transparent;
       }
     }
+
     &.-striped:nth-child(even) {
       background-color: #eee;
     }
+
     .menubutton {
       background-color: transparent;
       border: 0;
@@ -108,16 +127,19 @@
       align-items: center;
       width: 100%
     }
+
     .menubutton {
-      > .label {
+      >.label {
         flex-grow: 1;
       }
-      > .menuicon {
+
+      >.menuicon {
         margin-right: 5px
       }
     }
   }
-  > .notfound {
+
+  >.notfound {
     text-indent: 10px;
     color: graytext;
     font-style: italic;

package/lib/assets/styles/sidenav.scss

@@ -6,31 +6,37 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
 @import "commons.scss";
 @import "effects.scss";
 @import "colors.scss";
+
 .sidenav-component {
   height: 100%;
   width: 100%;
   overflow: hidden;
   background-color: transparent;
   border: 1px solid #eee;
+
   &.-blocked {
     opacity: 0.4;
     pointer-events: none;
   }
-  > .expandedmenu,
-  > .collapsedmenu {
+
+  >.expandedmenu,
+  >.collapsedmenu {
     height: auto;
     width: 100%;
-    > .item {
+
+    >.item {
       cursor: pointer;
       border-bottom: 1px solid #eee;
       width: 100%;
       transition: all 0.2s ease-in-out;
+
       &.-customsidenavitem {
         display: flex;
         align-items: center;
         justify-content: center;
         padding-left: 0px;
-        > .searchmenubutton {
+
+        >.searchmenubutton {
           width: 100%;
           height: 100%;
           display: flex;
@@ -38,46 +44,57 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
           justify-content: center;
         }
       }
+
       &.-customsidenavitem:hover {
         background-color: white;
       }
+
       &.-disabled {
         @extend %component-disabled;
       }
     }
-    > .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;
     height: 100%;
+
     &::-webkit-scrollbar {
       width: 5px;
     }
+
     &::-webkit-scrollbar-track {
       background: rgba(196, 222, 247, 0.5);
       border-radius: 10px;
     }
+
     &::-webkit-scrollbar-thumb {
       box-shadow: inset 0 0 5px #cecece;
       border-radius: 10px;
     }
+
     &::-webkit-scrollbar-thumb:hover {
       background: rgb(0, 195, 255);
     }
   }
+
   .openclosemenu {
     background: #f5f5f5;
     width: 100%;
@@ -89,14 +106,17 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
     align-content: center;
     text-align: center;
     transition: all 0.2s ease-in-out;
+
     &:hover {
       background: $border-container;
     }
+
     .icon-component {
       justify-self: center;
       width: 12px;
     }
   }
+
   &.closefromexpanded {
     background: transparent;
     margin-top: 2px;
@@ -106,7 +126,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;
@@ -116,27 +136,32 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   -webkit-box-flex: 0;
   -ms-flex: 0 0 70px;
   flex: 0 0 70px;
-  > .item {
+
+  >.item {
     align-content: center;
     background-color: #fff;
     display: grid;
     grid-template-columns: 30px 1fr;
     height: 45px;
     padding-left: 5px;
+
     &.-withlink {
       grid-template-columns: 1fr;
     }
+
     .menulink {
       display: grid;
       grid-template-columns: 30px 1fr;
       align-items: center;
       text-decoration: none;
     }
-    > .menuicon {
+
+    >.menuicon {
       justify-self: center;
     }
-    > .title,
-    > .menulink > .title {
+
+    >.title,
+    >.menulink>.title {
       color: #666;
       align-self: center;
       justify-self: left;
@@ -145,63 +170,76 @@ 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;
     align-items: center;
-    align-content: center; 
+    align-content: center;
+
     &.-withlink {
       align-items: stretch;
     }
-    > .menulink {
+
+    >.menulink {
       display: grid;
       grid-template-rows: 1fr;
       align-items: center;
     }
-    > .menuicon,
-    > .menulink > .menuicon {
+
+    >.menuicon,
+    >.menulink>.menuicon {
       justify-self: center;
     }
   }
+
   &.-small {
     width: 55px;
-    > .item {
+
+    >.item {
       height: 40px;
     }
+
     .-iconcenter {
       width: 55px !important;
     }
   }
+
   &.-medium {
     width: 55px;
-    > .item {
+
+    >.item {
       height: 50px;
     }
+
     .-iconcenter {
       width: 65px !important;
     }
   }
+
   &.-large {
     width: 75px;
-    > .item {
+
+    >.item {
       height: 60px;
     }
+
     .-iconcenter {
       width: 75px !important;
     }
   }
 }
 
-.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 ;
+  background-color: #eee;
   height: auto;
   width: auto;
   float: right;
@@ -211,7 +249,8 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   -moz-box-shadow: 3px 1px 6px 0px rgba(50, 50, 50, 0.35);
   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;
@@ -219,27 +258,32 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
     height: 36px;
     line-height: 36px;
   }
+
   .submenu {
     color: #808080;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     align-content: center;
     align-items: flex-start;
-    > .item {
+
+    >.item {
       display: grid;
       min-height: 40px;
       align-content: center;
       display: grid;
       margin-left: 20px;
+
       &.-disabled {
         @extend %component-disabled;
         background-color: #eee !important;
       }
     }
-    > .item:hover {
+
+    >.item:hover {
       color: #333;
     }
-    > .item:before {
+
+    >.item:before {
       position: absolute;
       content: '';
       left: -15px;
@@ -248,24 +292,27 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
       border-bottom: 5px solid transparent;
       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;
     }
   }
 }
-  
+
 .searchmenu {
-  background-color: #fff ;
+  background-color: #fff;
   border: solid 1px $component-border-color;
   border-radius: 4px;
   width: 300px;
   position: absolute;
   padding: 20px;
-  > .closebutton {
+
+  >.closebutton {
     cursor: pointer;
     float: right;
     margin: -21px -33px 15px 0px;
@@ -279,15 +326,19 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   justify-content: center;
   height: 100%;
   width: 100%;
-  > .text, .subtext {
+
+  >.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/buttons/button_container/index.js

@@ -25,6 +25,7 @@ var ButtonContainer = function ButtonContainer(_ref) {
     position = _ref$position === void 0 ? 'left' : _ref$position,
     children = _ref.children;
   return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "button-container",
     className: "btn-container ".concat(customClass),
     style: getStyles(style, position)
   }, children);

package/lib/dialog/Custom.js

@@ -44,7 +44,7 @@ var Custom = function Custom(props) {
     className: "title"
   }, props.title), /*#__PURE__*/_react.default.createElement("div", {
     className: "text"
-  }, props.text)), /*#__PURE__*/_react.default.createElement(_Footer.default, props, /*#__PURE__*/_react.default.createElement(_buttons.ButtonContainer, {
+  }, props.text)), props.buttons && props.buttons.length > 0 && /*#__PURE__*/_react.default.createElement(_Footer.default, props, /*#__PURE__*/_react.default.createElement(_buttons.ButtonContainer, {
     position: "right"
   }, props.buttons.map(function (button) {
     return /*#__PURE__*/_react.default.cloneElement(button, {

package/lib/dialog/form/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.FormDialogContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _uuid = _interopRequireDefault(require("uuid"));
 var _base = _interopRequireDefault(require("../base"));
 var _Header = _interopRequireDefault(require("../base/Header"));
 var _index = require("../../buttons/index");
@@ -67,16 +68,19 @@ var ModalForm = function ModalForm(props) {
     handlerClose: props.handlerClose
   }, props))), /*#__PURE__*/_react.default.createElement(_Content.default, {
     styleForContent: _objectSpread(_objectSpread({}, props.styleForContent), overlayStyle)
-  }, content || children), getSpinner(), showFooter && /*#__PURE__*/_react.default.createElement(_Footer.default, null, /*#__PURE__*/_react.default.createElement(_index.ButtonContainer, _extends({}, props, {
+  }, content || children), getSpinner(), showFooter && props.buttons && props.buttons.length > 0 && /*#__PURE__*/_react.default.createElement(_Footer.default, null, /*#__PURE__*/_react.default.createElement(_index.ButtonContainer, _extends({}, props, {
     style: _objectSpread({}, overlayStyle)
-  }), _react.default.Children.toArray(props.buttons.map(function (button) {
+  }), props.buttons.map(function (button) {
     if (context && context.securityBeforeUnload && button && button.type && button.type.name === 'CancelButton') {
       return /*#__PURE__*/_react.default.cloneElement(button, {
+        key: "button-".concat(_uuid.default.v1()),
         onClick: props.handlerClose
       });
     }
-    return /*#__PURE__*/_react.default.cloneElement(button);
-  }))))));
+    return /*#__PURE__*/_react.default.cloneElement(button, {
+      key: "button-".concat(_uuid.default.v1())
+    });
+  })))));
 };
 var _default = (0, _withFormSecurity.default)(ModalForm);
 exports.default = _default;

package/lib/dialog/types.d.ts

@@ -31,7 +31,7 @@ interface IBaseProps {
 }
 interface IFormProps {
     children: ReactNode | ReactNode[];
-    buttons: JSX.Element[];
+    buttons?: JSX.Element[];
     styleForContent?: CSSProperties;
     title?: string;
     width?: string;
@@ -61,7 +61,7 @@ interface IQuestionProps {
 }
 interface ICustomProps {
     icon: ReactElement;
-    buttons: JSX.Element[];
+    buttons?: JSX.Element[];
     title?: string;
     text?: string;
     height?: string;

package/lib/form/FieldNumber.js

@@ -42,6 +42,7 @@ var getEventProps = function getEventProps(_ref) {
     },
     onKeyDown: function onKeyDown(e) {
       if ([constants.keyCodes.ENTER].includes(e.keyCode)) {
+        handlerFieldChange === null || handlerFieldChange === void 0 ? void 0 : handlerFieldChange(e);
         if (validators) handlerFieldValidade === null || handlerFieldValidade === void 0 ? void 0 : handlerFieldValidade(name, e.target.value, validators);
         if (_onKeyDown) _onKeyDown(e);
         handleShowValidateMessages(true);

package/lib/icons/index.d.ts

@@ -4,7 +4,11 @@ import '../@types/PointerEvents.js';
 import '../@types/SizePixels.js';
 import '../@types/Icon.js';
 import './helper.js';
+import '../@types/Position.js';
 
-declare const Icon: ({ name, onClick, svgStruct, size, style, visible, disabled, customClass, color, pointerEvents, }: IIconProps) => JSX.Element | null;
+declare const _default: {
+    (props: IIconProps): JSX.Element;
+    displayName: string;
+};
 
-export { Icon as default };
+export { _default as default };

package/lib/icons/index.js

@@ -1,17 +1,20 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _helper = _interopRequireDefault(require("./helper"));
+var _withTooltip = _interopRequireDefault(require("../internals/withTooltip"));
 require("../assets/styles/icon.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var listIcon = _helper.default;
 var disabledIconColor = 'rgb(193, 193, 193)';
 var Icon = function Icon(_ref) {
-  var _getPaths;
   var name = _ref.name,
     _onClick = _ref.onClick,
     svgStruct = _ref.svgStruct,
@@ -25,34 +28,52 @@ var Icon = function Icon(_ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$customClass = _ref.customClass,
     customClass = _ref$customClass === void 0 ? '' : _ref$customClass,
+    _ref$customClassForCo = _ref.customClassForContainer,
+    customClassForContainer = _ref$customClassForCo === void 0 ? '' : _ref$customClassForCo,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? '#676464' : _ref$color,
     _ref$pointerEvents = _ref.pointerEvents,
-    pointerEvents = _ref$pointerEvents === void 0 ? 'none' : _ref$pointerEvents;
+    pointerEvents = _ref$pointerEvents === void 0 ? 'none' : _ref$pointerEvents,
+    targetRef = _ref.targetRef,
+    tooltip = _ref.tooltip;
+  var refSvg = (0, _react.useRef)(null);
   var getPaths = function getPaths() {
     return name ? listIcon[name].paths : svgStruct === null || svgStruct === void 0 ? void 0 : svgStruct.paths;
   };
+  var getSvg = function getSvg() {
+    var _getPaths;
+    return /*#__PURE__*/_react.default.createElement("svg", {
+      "data-testid": "icon",
+      onClick: function onClick() {
+        if (_onClick && !disabled) _onClick();
+      },
+      ref: function ref(r) {
+        refSvg.current = r;
+      },
+      width: "".concat(size, "px"),
+      height: "".concat(size, "px"),
+      fill: disabled ? disabledIconColor : color,
+      viewBox: name ? listIcon[name].viewbox : svgStruct === null || svgStruct === void 0 ? void 0 : svgStruct.viewbox,
+      className: "icon-component ".concat(customClass),
+      pointerEvents: pointerEvents,
+      style: style
+    }, (_getPaths = getPaths()) === null || _getPaths === void 0 ? void 0 : _getPaths.map(function (value) {
+      return /*#__PURE__*/_react.default.createElement("path", {
+        "data-testid": "icon-path",
+        d: value,
+        key: value
+      });
+    }));
+  };
   if (!name && !svgStruct) throw new Error('One of the "name" and "svgStruct" props must be filled');
   if (!visible) return null;
-  return /*#__PURE__*/_react.default.createElement("svg", {
-    "data-testid": "icon",
-    onClick: function onClick() {
-      if (_onClick && !disabled) _onClick();
-    },
-    width: "".concat(size, "px"),
-    height: "".concat(size, "px"),
-    fill: disabled ? disabledIconColor : color,
-    viewBox: name ? listIcon[name].viewbox : svgStruct === null || svgStruct === void 0 ? void 0 : svgStruct.viewbox,
-    className: "icon-component ".concat(customClass),
-    pointerEvents: pointerEvents,
-    style: style
-  }, (_getPaths = getPaths()) === null || _getPaths === void 0 ? void 0 : _getPaths.map(function (value) {
-    return /*#__PURE__*/_react.default.createElement("path", {
-      "data-testid": "icon-path",
-      d: value,
-      key: value
-    });
-  }));
+  if (!tooltip) return getSvg();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "icon-component-container ".concat(customClassForContainer),
+    ref: function ref(r) {
+      if (targetRef && r) targetRef(r);
+    }
+  }, getSvg());
 };
-var _default = Icon;
+var _default = (0, _withTooltip.default)(Icon);
 exports.default = _default;

package/lib/icons/types.d.ts

@@ -2,6 +2,7 @@ import { CSSProperties } from 'react';
 import { PointerEvents } from '../@types/PointerEvents.js';
 import { SizePixels } from '../@types/SizePixels.js';
 import { IconNames } from '../@types/Icon.js';
+import { Position } from '../@types/Position.js';
 import './helper.js';
 
 type ListIconType = {
@@ -14,6 +15,7 @@ interface IIconProps {
     size?: SizePixels;
     color?: string;
     customClass?: string;
+    customClassForContainer?: string;
     style?: CSSProperties;
     visible?: boolean;
     disabled?: boolean;
@@ -25,6 +27,10 @@ interface IIconProps {
         paths: Array<string>;
     };
     onClick?: () => void;
+    tooltipPosition?: Exclude<Position, 'center'>;
+    tooltipWidth?: string | number;
+    tooltip?: string;
+    targetRef?: (ref: HTMLDivElement) => void;
 }
 
 export { IIconProps, ListIconType };

package/lib/inputs/base/InputTextBase.js

@@ -71,7 +71,6 @@ var InputTextBase = function InputTextBase(props) {
     _onDragOver = props.onDragOver,
     _onDrop = props.onDrop,
     _onDragLeave = props.onDragLeave,
-    _onClick = props.onClick,
     readOnlyClass = props.readOnlyClass;
   var propsInput;
   var options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.readOnly, _permissionValidations.OPTIONS_ON_DENIED.hideContent];
@@ -149,9 +148,6 @@ var InputTextBase = function InputTextBase(props) {
         },
         onDragLeave: function onDragLeave(e) {
           if (_onDragLeave) _onDragLeave(e);
-        },
-        onClick: function onClick(e) {
-          if (_onClick) _onClick(e);
         }
       });
     }

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

@@ -1,4 +1,4 @@
-import { MouseEvent, KeyboardEvent, DragEvent, MutableRefObject, RefObject, CSSProperties } from 'react';
+import { KeyboardEvent, DragEvent, MutableRefObject, RefObject, CSSProperties } from 'react';
 import { TextAlign } from '../../@types/Align.js';
 import { Period } from '../../@types/Period.js';
 import { PermissionAttr, OnDenied } from '../../@types/PermissionAttr.js';
@@ -33,7 +33,6 @@ interface IBaseProps {
     maxLength?: number;
     name?: string;
     required?: boolean;
-    onClick?: (event: MouseEvent) => void;
     onBlur?: (e: CustomInputEvent) => void;
     onFocus?: (e: CustomInputEvent) => void;
     onReset?: (e: CustomInputEvent) => void;

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

@@ -80,20 +80,20 @@ var MultipleSelect = function MultipleSelect(props) {
   var selectWrapper = (0, _react.useRef)();
   var gridElRef = (0, _react.useRef)();
   var descriptionKeyIsString = typeof descriptionKey === 'string';
-  var insideComponents = ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label', 'actionbutton'];
   var onScreenResize = function onScreenResize() {
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
   };
   var onClickOutside = function onClickOutside(event) {
     var target = event.target;
-    if (!insideComponents.includes(target.className) && target !== selectWrapper.current && selectWrapper.current && !selectWrapper.current.contains(target) && dropdownRef.current && !dropdownRef.current.contains(target)) {
+    if (target !== selectWrapper.current && selectWrapper.current && !selectWrapper.current.contains(target) && dropdownRef.current && !dropdownRef.current.contains(target)) {
       setOpened(false);
     }
   };
   var onMouseMove = function onMouseMove(event) {
     var target = event.target;
     if (target.className === '') return;
-    setInsideComponent(insideComponents.includes(target.className));
+    var insideComponents = ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label'].includes(target.className);
+    setInsideComponent(insideComponents);
   };
   var onClearClick = function onClearClick() {
     setSelected(undefined);
@@ -123,26 +123,19 @@ var MultipleSelect = function MultipleSelect(props) {
       setInputValue([filteredValue]);
     }
   };
-  var _onFocus = function onFocus() {
-    var dropdownWidthFocus = selectWrapper.current ? selectWrapper.current.clientWidth : dropdownWidth;
-    setOpened(true);
-    setDropdownWidth(dropdownWidthFocus);
-  };
   var onSelect = function onSelect(select) {
-    var _dropdownRef$current;
     if (select === null) return;
     var currentsSelect = [].concat(_toConsumableArray(currents), [select]);
     setCurrents(currentsSelect);
     setDataCombo(dataSource);
     setInputValue([]);
+    setOpened(false);
     if (props.onSelect) setSelected(props.onSelect(currentsSelect.map(function (i) {
       return i[idKey];
     })));
-    (_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.focus();
   };
   var onUnselect = function onUnselect(id) {
     if (currents) {
-      var _dropdownRef$current2;
       var result = currents.filter(function (item) {
         return item[idKey] !== id;
       });
@@ -150,13 +143,17 @@ var MultipleSelect = function MultipleSelect(props) {
       if (props.onSelect) setSelected(props.onSelect(result.map(function (i) {
         return i[idKey];
       })));
-      (_dropdownRef$current2 = dropdownRef.current) === null || _dropdownRef$current2 === void 0 ? void 0 : _dropdownRef$current2.focus();
     }
   };
   var onOpenClose = function onOpenClose() {
     setOpened(!opened);
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
   };
+  var _onFocus = function onFocus() {
+    var dropdownWidthFocus = selectWrapper.current ? selectWrapper.current.clientWidth : dropdownWidth;
+    setOpened(true);
+    setDropdownWidth(dropdownWidthFocus);
+  };
   var _onBlur = function onBlur(e) {
     if (props.onBlur) props.onBlur(e);
     if (!insideComponent) setOpened(false);
@@ -167,20 +164,20 @@ var MultipleSelect = function MultipleSelect(props) {
         if (!currents.includes(selected)) onSelect(selected);
       } else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {
         if (!opened) setOpened(true);
-        var index = dataCombo ? dataCombo.findIndex(function (d) {
+        var index = dataSource ? dataSource.findIndex(function (d) {
           return d === selected;
         }) : 0;
         if (e.keyCode === constants.keyCodes.ARROW_DOWN) {
-          index = dataCombo && index === dataCombo.length - 1 ? 0 : index + 1;
+          index = dataSource && index === dataSource.length - 1 ? 0 : index + 1;
         } else {
-          index = dataCombo && index === 0 ? dataCombo.length - 1 : index - 1;
+          index = dataSource && index === 0 ? dataSource.length - 1 : index - 1;
         }
-        if (dataCombo && dataCombo.length) {
-          if (descriptionKeyIsString && dataCombo[index][descriptionKey]) {
-            setInputValue(dataCombo[index][descriptionKey]);
-          } else if (!descriptionKeyIsString) setInputValue([descriptionKey(dataCombo[index])]);
+        if (dataSource && dataSource.length) {
+          if (descriptionKeyIsString && dataSource[index][descriptionKey]) {
+            setInputValue(dataSource[index][descriptionKey]);
+          } else if (!descriptionKeyIsString) setInputValue([descriptionKey(dataSource[index])]);
         }
-        if (dataCombo) setSelected(dataCombo[index]);
+        if (dataSource) setSelected(dataSource[index]);
       } else if (e.keyCode === constants.keyCodes.BACKSPACE) {
         if (inputValue.length === 0) {
           var currentsKeyDown = _lodash.default.dropRight(currents);
@@ -189,8 +186,6 @@ var MultipleSelect = function MultipleSelect(props) {
             return i[idKey];
           }));
         }
-      } else if (e.keyCode === constants.keyCodes.TAB) {
-        setOpened(false);
       }
     }
   };
@@ -257,8 +252,6 @@ var MultipleSelect = function MultipleSelect(props) {
     onChange: function onChange(e) {
       if (e) onFilter(e.target.value);
     },
-    onClick: _onFocus,
-    inputRef: dropdownRef,
     onKeyDown: onInputKeyDown,
     customClassForWrapper: "selectwrapper ".concat((props.readOnly || shouldDisable() || shouldBeReadOnly()) && ' -undigitable'),
     customClassForInputContent: "multiselect",

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

@@ -154,13 +154,11 @@ var SimpleSelect = function SimpleSelect(props) {
     }
   };
   var onSelect = function onSelect(selectedDropdown) {
-    var _dropdownRef$current2;
     if (selectedDropdown === undefined) return;
     setOpened(false);
     setSelected(selectedDropdown);
     if (descriptionKeyIsString) setInputText(selectedDropdown[descriptionKey]);else setInputText(descriptionKey(selectedDropdown));
     onChange(selectedDropdown);
-    (_dropdownRef$current2 = dropdownRef.current) === null || _dropdownRef$current2 === void 0 ? void 0 : _dropdownRef$current2.focus();
   };
   var onOpenClose = function onOpenClose() {
     setOpened(!opened);
@@ -283,8 +281,6 @@ var SimpleSelect = function SimpleSelect(props) {
     onChange: function onChange(e) {
       if (e) onFilter(e.target.value);
     },
-    onClick: onFocus,
-    inputRef: dropdownRef,
     onKeyDown: onInputKeyDown,
     customClassForWrapper: "selectwrapper ".concat((undigitable || searchOnDropdown || shouldBeReadOnly()) && ' -undigitable'),
     customClassForInputContent: "multiselect",

package/lib/inputs/types.d.ts

@@ -19,7 +19,7 @@ interface ISearchProps extends IBaseProps {
     resetButton?: boolean;
     onReset?: (event?: CustomInputEvent) => void;
     onChange?: (event?: CustomInputEvent) => void;
-    onClick?: (event: MouseEvent<Element>) => void;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     textAlign?: TextAlign;
     disabled?: boolean;
     readOnly?: boolean;
@@ -110,7 +110,6 @@ interface IDropdownSelectProps {
     handleOnKeydown: (e: CustomInputEvent | KeyboardEvent) => void;
     handleOnBlur: (item: DataCombo) => void;
     handleOnFocus: () => void;
-    handlerSelecionadoAgora?: (bool: boolean) => void;
     opened: boolean;
     dropdownRef: MutableRefObject<HTMLDivElement | null>;
     dataCombo: DataCombo[];

package/lib/menus/sidenav/NavMenuItem.js

@@ -84,6 +84,7 @@ var NavMenuItem = function NavMenuItem(props) {
   }), /*#__PURE__*/_react.default.createElement(_react.Fragment, null, iconName && /*#__PURE__*/_react.default.createElement(_icons.default, {
     name: iconName,
     size: menuSize === 'small' && 16 || menuSize === 'medium' && 24 || menuSize === 'large' && 32 || 16,
+    customClassForContainer: "menuicon-container",
     customClass: "menuicon"
   }), isExpanded && /*#__PURE__*/_react.default.createElement("span", {
     className: "title"

package/package.json

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