linear-react-components-ui 0.4.76-beta.11 → 0.4.76-beta.12

package/.vscode/settings.json

@@ -1,6 +1,7 @@
 {
   "files.exclude": {
-    "config": true,
+    "__error": "Not found",
+    "config": false,
     "coverage": true,
     "node_modules": true,
     "scripts": true,

package/README.md

@@ -36,39 +36,6 @@ Compilar para publicação:
 
 `npm run demo:prod`
 
-### Publicação da lib no NPM
-A princípio precisaremos fazer o login no npm para isso rode o comando abaixo:
-
-  `npm login`
-
-Para gerar uma build nova e fazer a publicação no npm rode os comandos a seguir:
-
-  `npm version <versão>`
-
-  `npm run publish:npm`
-
-Caso queira gerar uma build com versão beta e fazer a publicação no npm rode os comandos da seguinte forma:
-
-  `npm version <versão>`
-
-  `npm run publish:npm --tag beta`
-
-Caso queira gerar uma build com versão candidata e fazer a publicação no npm rode os comandos da seguinte forma:
-
-  `npm version <versão>`
-
-  `npm run publish:npm --tag rc`
-
-no local onde esta denominado o campo versão, você deverá colocar a nova versão do pacote, alguns exemplos para o campo versão:
- - release: 0.4.75
- - beta: 0.4.75-beta.0
- - candidata: 0.4.75-rc.0
- 
-ficando da seguinte maneira:
-
-  `npm version 0.4.75`
-
-
 ### Publicar versão de demonstração no Heroku
 
     

package/lib/assets/styles/dropdown.scss

@@ -76,12 +76,12 @@
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
     animation: revealelement 0.3s forwards ease-in-out;
     margin-right: 7px;
-    > .floatmenuitem {
+    > .floatmenulink {
       text-decoration: none;
       color: #666666;
       text-align: center;
     }
-    > .floatmenuitem .-items {
+    > .floatmenulink .-items {
       border: solid 1px $default-hover-color;
       margin: 0 5px 5px 0;
       font-size: 12px;
@@ -106,32 +106,6 @@
       transition: all 0.2s ease-in-out;
       &:hover {
         background: $default-hover-color;
-
-        > .floatmenudropdown {
-          visibility: visible;
-          pointer-events: initial;
-          opacity: 1;
-        }
-      }
-      > .floatmenudropdown {
-        position: absolute;
-        padding: 0;
-        top: 5px;
-        right: 5px;
-        visibility: hidden;
-        opacity: 0;
-        pointer-events: none;
-      }
-      > .floatmenulink {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        flex: 1;
-        width: 100%;
-        text-decoration: none;
-        color: #666666;
-        text-align: center;
       }
       &.iconcontainer {
         padding-bottom: 10px;

package/lib/assets/styles/effects.scss

@@ -2,11 +2,9 @@
 @keyframes slideInFromTop {
   0% {
     transform: translateY(-60%);
-    -webkit-font-smoothing: subpixel-antialiased;
   }
   30% {
     transform: translateY(0);
-    -webkit-font-smoothing: subpixel-antialiased;
   }
 }
 
@@ -721,13 +719,3 @@
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
 }
-
-// SlideWithPosition
-@keyframes slideWithPositionFromLeft {
-  from {
-    left: -100%;
-  }
-  to {
-    left: 100%;
-  }
-}

package/lib/assets/styles/floatMenu.scss

@@ -15,3 +15,4 @@
     }
   }
 }
+

package/lib/assets/styles/panel.scss

@@ -48,6 +48,7 @@
   }
   > .panel-content {
     height: auto;
+    overflow: auto;
     padding: 15px;
   }
 }

package/lib/assets/styles/progress.scss

@@ -1,15 +1,14 @@
 @import "colors.scss";
 @import "commons.scss";
-
 .container-progress {
   display: flex;
   overflow: hidden;
+  height: 24px;
   margin-bottom: 20px;
   background-color: #f5f5f5; 
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
   box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
-  position: relative;
 }
 
 .bar {
@@ -51,12 +50,6 @@
     -o-animation: progress-bar-stripes 2s linear infinite;
     animation: progress-bar-stripes 2s linear infinite;
   }
-  &.-indeterminate {
-    animation: slideWithPositionFromLeft infinite;
-    position: absolute;
-    left: -100%;
-    top: 0;
-  }
   >.progressbar-label {
     display: flex;
     align-items: center;

package/lib/assets/styles/select.scss

@@ -3,7 +3,6 @@
 .select-component {
   width: 100%;
   display: block;
-  position: relative;
   .selectwrapper {
     height: auto;
   }

package/lib/assets/styles/table.scss

@@ -1,11 +1,5 @@
 @import "colors.scss";
 @import "effects.scss";
-
-.table-component,
-.innertable {
-  contain: strict;
-}
-
 .table-component {
   width: 100%;
   max-width: 100%;
@@ -14,8 +8,7 @@
   font-size: 14px;
   max-height: 20em;
   position: relative;
-  > .headercontainer,
-  .bodycontainer {
+  > .headercontainer, .bodycontainer {
     width: 100%;
     .innertable {
       width: 100%;
@@ -38,8 +31,7 @@
     vertical-align: middle;
     border-bottom: 1px solid $component-border-color-soft;
     line-height: 18px;
-    > .hidden,
-    > .rowhover {
+    > .hidden, > .rowhover { 
       display: none;
       animation: revealelement 0.2s forwards ease-in-out;
     }
@@ -47,7 +39,7 @@
       border-bottom: 0;
     }
   }
-
+  
   > .bodycontainer > .innertable > .tbody > .trow,
   > .tbody > .trow {
     &.-selected {
@@ -56,7 +48,7 @@
     }
     &:hover {
       > .rowcolumn > .rowhover {
-        display: table;
+        display: table
       }
     }
   }
@@ -92,7 +84,7 @@
       background: $header-container-bg;
     }
     > .headercontainer > .innertable > .theader,
-    > .theader {
+    > .theader { 
       background: $header-container-bg;
     }
   }

package/lib/assets/styles/tabs.scss

@@ -1,29 +1,4 @@
 @import "colors.scss";
-%tab-closepanel {
-  background-color: transparent;
-  border: 0;
-  height: 20px;
-  margin-right: 5px;
-  padding: 0;
-  text-shadow: 0 1px 0 $font-color-second;
-  width: 20px;
-  visibility: hidden;
-  transition: all 0.2s ease-in-out;
-  border-radius: 4px;
-  &:after {
-    content: "×";
-    font-size: 20px;
-    text-shadow: none;
-    color: $font-color-soft;
-    transition: all 0.2s ease-in-out;
-  }
-  &:hover {
-    background-color: $color-light-dark;
-    &:after {
-      color: $font-color-second;
-    }
-  }
-}
 %tab-component-menus {
   .menu {
     -webkit-box-shadow: 0px -1px 0px $component-border-color inset;
@@ -32,26 +7,22 @@
     display: flex;
     flex-wrap: nowrap;
     justify-content: center;
-    flex: 1;
+    flex-grow: 1;
     &.-firsttabident > .menuitem:first-child {
       margin-left: 15px;
     }
   }
-  .menu > .menuitem {
+  .menu  > .menuitem {
     border-bottom: 0;
-    border-radius: 5px 5px 0px 0px;
-    -moz-border-radius: 5px 5px 0px 0px;
-    -webkit-border-radius: 5px 5px 0px 0px;
+    border-radius: 5px 5px 0px 0px; 
+    -moz-border-radius: 5px 5px 0px 0px; 
+    -webkit-border-radius: 5px 5px 0px 0px; 	
     text-shadow: 0 1px $font-color-second;
     cursor: pointer;
     line-height: 20px;
     margin-right: 1px;
     padding: 0;
     width: auto;
-    min-width: 100px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
     &.selected {
       border: 1px solid $component-border-color;
       background: $font-color-second;
@@ -60,22 +31,40 @@
       box-shadow: 0;
       font-weight: bold; /* z-index: 2; */
     }
-    &.selected > .closepanel,
-    &:hover > .closepanel {
+    &.selected > .closepanel, &:hover > .closepanel {
       visibility: visible;
     }
   }
-  .menu > .menuitem > .menubutton {
-    white-space: nowrap;
-    text-overflow: ellipsis;
+  .menu  > .menuitem > .menubutton {
     background: transparent;
     border: 0;
   }
-
-  .menu > .menuitem > .closepanel {
-    @extend %tab-closepanel;
+  .menu  > .menuitem > .closepanel {
+    background-color: transparent;
+    border: 0;
+    float: right;
+    height: 20px;
+    margin: 5px 5px 0 0;
+    padding: 0;
+    text-shadow: 0 1px 0 $font-color-second;
+    width: 20px;
+    visibility: hidden;
+    transition: all 0.2s ease-in-out;
+    border-radius: 4px;
+    &:after {
+      content: "×";
+      font-size: 20px;
+      text-shadow: none;
+      color: $font-color-soft;
+      transition: all 0.2s ease-in-out;
+    }
+    &:hover {
+      background-color: $color-light-dark;
+      &:after {
+        color: $font-color-second;
+      }
+    }
   }
-
   .menubar {
     width: auto;
     border-bottom: 1px solid #dae1e8;
@@ -95,13 +84,8 @@
   > .menucontainer {
     display: flex;
     flex-wrap: nowrap;
-    max-width: 100%;
-    overflow: hidden;
+    width: 100%;
     @extend %tab-component-menus;
-    > .dropdownbutton {
-      border-bottom: 1px solid $component-border-color;
-      padding: 0 0.8rem;
-    }
   }
   > .panel {
     background-color: $font-color-second;
@@ -127,9 +111,9 @@
     justify-content: center;
   }
   > .menu > .menuitem {
-    border-radius: 5px 0px 0px 5px;
-    -moz-border-radius: 5px 0px 0px 5px;
-    -webkit-border-radius: 5px 0px 0px 5px;
+    border-radius: 5px 0px 0px 5px; 
+    -moz-border-radius: 5px 0px 0px 5px; 
+    -webkit-border-radius: 5px 0px 0px 5px; 
     &.selected {
       border: 1px solid $component-border-color;
       border-right: 1px solid $font-color-second;
@@ -137,8 +121,8 @@
       width: 100%;
     }
   }
-  > .menu > .menuitem > .closepanel {
-    float: left;
+  > .menu  > .menuitem > .closepanel {
+    float: left
   }
   > .panel {
     border-top: 1px solid $component-border-color;
@@ -155,9 +139,9 @@
     box-shadow: 0 1px 1px 0px $component-border-color inset;
   }
   > .menu > .menuitem {
-    border-radius: 0px 0px 5px 5px;
-    -moz-border-radius: 0px 0px 5px 5px;
-    -webkit-border-radius: 0px 0px 5px 5px;
+    border-radius: 0px 0px 5px 5px; 
+    -moz-border-radius: 0px 0px 5px 5px; 
+    -webkit-border-radius: 0px 0px 5px 5px; 
     &.selected {
       border: 1px solid $component-border-color;
       border-top: 1px solid $font-color-second;
@@ -183,9 +167,9 @@
     justify-content: center;
   }
   > .menu > .menuitem {
-    border-radius: 0px 5px 5px 0px;
-    -moz-border-radius: 0px 5px 5px 0px;
-    -webkit-border-radius: 0px 5px 5px 0px;
+    border-radius: 0px 5px 5px 0px; 
+    -moz-border-radius: 0px 5px 5px 0px; 
+    -webkit-border-radius: 0px 5px 5px 0px; 
     &.selected {
       border: 1px solid $component-border-color;
       border-left: 1px solid $font-color-second;
@@ -198,22 +182,3 @@
     border-right: 0;
   }
 }
-
-/*
-  Dropdown hide tabs
-*/
-.dropdown-hide-tabs .menuitem {
-  cursor: pointer;
-  line-height: 20px;
-  margin-right: 1px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 50px;
-  > .closepanel {
-    @extend %tab-closepanel;
-  }
-  &:hover > .closepanel {
-    visibility: visible;
-  }
-}

package/lib/assets/styles/treeview.scss

@@ -42,25 +42,6 @@
   animation: revealelement 0.3s forwards ease-in-out;
   > .label {
     width: auto;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    >.node-menu {
-      animation: revealelement 0.3s forwards ease-in-out;
-      margin-left: 10px;
-    }
-    >.node-rightelements {
-      animation: revealelement 0.3s forwards ease-in-out;
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-    }
-    >.node-toolbarelements {
-      animation: revealelement 0.3s forwards ease-in-out;
-      width: auto;
-      height: 100%;
-      margin-left: 10px;
-    }
     &:hover {
       background-color: rgb(209, 209, 209);
     }
@@ -72,16 +53,3 @@
     float: left;
   }
 }
-
-.nodelist > .treeviewitem > .label > .node-rightelements  > .element,
-.treeview-component > .treeviewcontainer > .treeviewitem > .label > .node-rightelements > .element {
-  margin-left: 10px;
-  display: flex;
-  align-items: center;
-  height: 100%;
-}
-
-.nodelist > .treeviewitem > .label > .node-toolbarelements > .toolbar-group > .buttonbar,
-.treeview-component > .treeviewcontainer > .treeviewitem > .label > .node-toolbarelements > .toolbar-group > .buttonbar {
-  border: none;
-}

package/lib/avatar/avatar.spec.js

@@ -103,29 +103,18 @@ describe('Avatar', function () {
     expect(container.firstChild).toContainElement(_react2.screen.getByAltText('Avatar Teste'));
     expect(_react2.screen.getByAltText('Avatar Teste')).toHaveClass('imgavatar');
   });
-  it('should not render icon if has image', function () {
-    var mockAvatar = /*#__PURE__*/_react["default"].createElement(_["default"], {
-      src: "https://yt3.ggpht.com/a-/AAuE7mDGQh9L3n_EULfeZEO9rs_JR4BY376CSrlxdw=s900-mo-c-c0xffffffff-rj-k-no",
-      srcAlt: "Avatar Teste"
-    });
-
-    var _render9 = (0, _react2.render)(mockAvatar),
-        container = _render9.container;
-
-    expect(container.firstChild).not.toContainElement(document.querySelector('.icon-component'));
-  });
   it('should change size', function () {
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_["default"], {
       label: "B",
       width: "56px",
       height: "56px"
     })),
-        container = _render10.container;
+        container = _render9.container;
 
     expect(container.firstChild).toHaveStyle('width: 56px; height:56px');
   });
   it('should open dropdown and render chilren', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-    var mockAvatar, _render11, container;
+    var mockAvatar, _render10, container;
 
     return regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
@@ -146,7 +135,7 @@ describe('Avatar', function () {
               text: "Itemlist sem \xEDcone Disabled",
               disabled: true
             })));
-            _render11 = (0, _react2.render)(mockAvatar), container = _render11.container;
+            _render10 = (0, _react2.render)(mockAvatar), container = _render10.container;
 
             _react2.fireEvent.click(container.firstChild);
 
@@ -169,11 +158,11 @@ describe('Avatar', function () {
   it('should callback function onClick', function () {
     var mockOnClick = jest.fn();
 
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_["default"], {
       label: "B",
       onClick: mockOnClick
     })),
-        container = _render12.container;
+        container = _render11.container;
 
     _react2.fireEvent.click(container.firstChild);
 

package/lib/avatar/index.js

@@ -85,7 +85,7 @@ var Avatar = function Avatar(props) {
       backgroundColor: "".concat(color),
       cursor: "".concat(dropdown ? 'pointer' : 'normal')
     }, style)
-  }, (iconName || icon) && !src && getIcon(iconName, icon), src && /*#__PURE__*/_react["default"].createElement("img", {
+  }, (iconName || icon) && getIcon(iconName, icon), src && /*#__PURE__*/_react["default"].createElement("img", {
     className: "imgavatar",
     style: {
       width: "".concat(width),

package/lib/buttons/DefaultButton.js

@@ -69,8 +69,7 @@ var DefaultButton = function DefaultButton(props) {
       boxShadow = props.boxShadow,
       transparent = props.transparent,
       round = props.round,
-      permissionAttr = props.permissionAttr,
-      _onBlur = props.onBlur;
+      permissionAttr = props.permissionAttr;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -148,9 +147,6 @@ var DefaultButton = function DefaultButton(props) {
       if (dropdown) showDropdown();
       if (_onClick && toggleable) setActiveButton(!activeButton);
     },
-    onBlur: function onBlur(e) {
-      if (_onBlur) _onBlur(e);
-    },
     disabled: shouldDisable(),
     className: "".concat(getClass(), " ").concat(activeButton ? '-toggleable' : ''),
     ref: function ref(r) {
@@ -180,7 +176,6 @@ DefaultButton.propTypes = {
   boxShadow: _propTypes["default"].bool,
   icon: _propTypes["default"].instanceOf(Object),
   onClick: _propTypes["default"].func,
-  onBlur: _propTypes["default"].func,
   targetRef: _propTypes["default"].func,
   tabIndex: _propTypes["default"].string,
   dropdown: _propTypes["default"].bool,
@@ -216,7 +211,6 @@ DefaultButton.defaultProps = {
   icon: null,
   content: null,
   onClick: null,
-  onBlur: null,
   targetRef: undefined,
   tabIndex: undefined,
   isLoading: false,

package/lib/checkbox/index.js

@@ -13,8 +13,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _gridlayout = _interopRequireDefault(require("../gridlayout"));
 
-var _Label = _interopRequireDefault(require("./Label"));
-
 require("../assets/styles/checkbox.scss");
 
 var _permissionValidations = require("../permissionValidations");
@@ -54,10 +52,7 @@ var CheckBox = function CheckBox(props) {
       id = props.id,
       gridLayout = props.gridLayout,
       checked = props.checked,
-      permissionAttr = props.permissionAttr,
-      tooltip = props.tooltip,
-      tooltipPosition = props.tooltipPosition,
-      tooltipWidth = props.tooltipWidth;
+      permissionAttr = props.permissionAttr;
 
   var _useState = (0, _react.useState)(checked),
       _useState2 = _slicedToArray(_useState, 2),
@@ -127,12 +122,9 @@ var CheckBox = function CheckBox(props) {
       value: value,
       id: id,
       onChange: function onChange() {}
-    }), /*#__PURE__*/_react["default"].createElement("span", null), label && /*#__PURE__*/_react["default"].createElement(_Label["default"], {
-      label: label,
-      tooltip: tooltip,
-      tooltipWidth: tooltipWidth,
-      tooltipPosition: tooltipPosition
-    })), hint && /*#__PURE__*/_react["default"].createElement("div", {
+    }), /*#__PURE__*/_react["default"].createElement("span", null), label && /*#__PURE__*/_react["default"].createElement("span", {
+      className: "checkbox-description"
+    }, label)), hint && /*#__PURE__*/_react["default"].createElement("div", {
       className: "checkbox-hint"
     }, hint));
   };
@@ -157,10 +149,7 @@ CheckBox.propTypes = {
   autofocus: _propTypes["default"].bool,
   hint: _propTypes["default"].string,
   gridLayout: _propTypes["default"].string,
-  permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)]),
-  tooltip: _propTypes["default"].string,
-  tooltipPosition: _propTypes["default"].string,
-  tooltipWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
+  permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)])
 };
 CheckBox.defaultProps = {
   label: '',
@@ -175,10 +164,7 @@ CheckBox.defaultProps = {
   hint: undefined,
   id: undefined,
   gridLayout: undefined,
-  permissionAttr: undefined,
-  tooltip: '',
-  tooltipPosition: 'top',
-  tooltipWidth: 'auto'
+  permissionAttr: undefined
 };
 var _default = CheckBox;
 exports["default"] = _default;