linear-react-components-ui 0.4.76-rc.9 → 0.4.76

package/lib/assets/styles/treeview.scss

@@ -15,6 +15,11 @@
       margin-left: -20px;
       cursor: pointer;
     }
+    .loading {
+      margin-left: -30px;
+      position: absolute;
+      margin-top: -5px;
+    }
   }
 }
 
@@ -42,8 +47,31 @@
   animation: revealelement 0.3s forwards ease-in-out;
   > .label {
     width: auto;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    min-height: 25px;
+    color: $font-color-soft;
+    >.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 {
+      cursor: pointer;
       background-color: rgb(209, 209, 209);
+      text-decoration: underline;
     }
   }
   > .nodelist {
@@ -53,3 +81,16 @@
     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/assets/styles/uitour.scss

@@ -0,0 +1,112 @@
+@import "commons.scss";
+@import "colors.scss";
+@import "effects.scss";
+
+$step-arrow-size: 22px;
+$step-arrow-shadow-size: 26px;
+%step-arrow {
+  content: '';
+  position: absolute;
+  border-bottom: $step-arrow-size solid transparent;
+  border-right: $step-arrow-size solid #fff;
+  border-top: $step-arrow-size solid transparent;
+}
+%step-arrow-shadow {
+  content: '';
+  position: absolute;
+  border-bottom: $step-arrow-shadow-size solid transparent;
+  border-right: $step-arrow-shadow-size solid rgba(0, 0, 0, 0.6);
+  border-top: $step-arrow-shadow-size solid transparent;
+}
+.uitour-component {
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  z-index: 99999999999999999999;
+  > .step {
+    background-color: #fff;
+    position: relative;
+    max-width: 450px;
+    display: flex;
+    flex-direction: column;
+    border: 3px solid rgba(0, 0, 0, 0.6);
+    border-radius: 8px;
+    padding: 5px 0;
+    &.-left {
+      animation: slideRightToLeftWithFade 0.5s;
+      &:before {
+        @extend %step-arrow-shadow;
+        top: 6px;
+        left: -$step-arrow-shadow-size;
+      }
+      &:after {
+        @extend %step-arrow;
+        top: 10px;
+        left: -$step-arrow-size;
+      }
+    }
+    &.-right {
+      animation: slideLeftToRightWithFade 0.5s;
+      &:before {
+        @extend %step-arrow-shadow;
+        top: 6px;
+        right: -$step-arrow-shadow-size;
+        transform: rotate(180deg);
+      }
+      &:after {
+        @extend %step-arrow;
+        top: 10px;
+        right: -$step-arrow-size;
+        transform: rotate(180deg);
+      }
+    }
+    > .closebutton {
+      align-self: flex-end;
+      padding: 0 5px 5px;
+      line-height: 0;
+    }
+    > .content {
+      width: 100%;
+      padding: 0px 20px;
+      margin-bottom: 0;
+      display: flex;
+      > .number {
+        display: flex;
+        width: 40px;
+        height: 40px;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        background-color: $success-color;
+        color: #fff;
+        margin-right: 10px;
+        font-weight: bold;
+        font-size: 20px;
+        line-height: 0;
+      }
+      > .about {
+        flex: 1;
+        margin-bottom: 10px;
+        > h3 {
+          font-size: 16px;
+          font-weight: bold;
+        }
+        > .description {
+          font-size: 14px;
+          line-height: 18px;
+          strong {
+            font-weight: bold;
+          }
+        }
+      }
+    }
+    > .footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: 10px;
+      padding: 5px 10px 10px;
+    }
+  }
+}

package/lib/avatar/avatar.spec.js

@@ -103,18 +103,29 @@ 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 _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_["default"], {
       label: "B",
       width: "56px",
       height: "56px"
     })),
-        container = _render9.container;
+        container = _render10.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, _render10, container;
+    var mockAvatar, _render11, container;
 
     return regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
@@ -135,7 +146,7 @@ describe('Avatar', function () {
               text: "Itemlist sem \xEDcone Disabled",
               disabled: true
             })));
-            _render10 = (0, _react2.render)(mockAvatar), container = _render10.container;
+            _render11 = (0, _react2.render)(mockAvatar), container = _render11.container;
 
             _react2.fireEvent.click(container.firstChild);
 
@@ -158,11 +169,11 @@ describe('Avatar', function () {
   it('should callback function onClick', function () {
     var mockOnClick = jest.fn();
 
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_["default"], {
       label: "B",
       onClick: mockOnClick
     })),
-        container = _render11.container;
+        container = _render12.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) && getIcon(iconName, icon), src && /*#__PURE__*/_react["default"].createElement("img", {
+  }, (iconName || icon) && !src && getIcon(iconName, icon), src && /*#__PURE__*/_react["default"].createElement("img", {
     className: "imgavatar",
     style: {
       width: "".concat(width),

package/lib/buttons/DefaultButton.js

@@ -69,7 +69,9 @@ var DefaultButton = function DefaultButton(props) {
       boxShadow = props.boxShadow,
       transparent = props.transparent,
       round = props.round,
-      permissionAttr = props.permissionAttr;
+      permissionAttr = props.permissionAttr,
+      _onBlur = props.onBlur,
+      skeletonize = props.skeletonize;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -147,8 +149,11 @@ 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' : ''),
+    className: "".concat(getClass(), " ").concat(activeButton ? '-toggleable' : '', " ").concat(skeletonize ? '-skeletonized' : ''),
     ref: function ref(r) {
       if (targetRef) targetRef(r);
       setButtonRef(r);
@@ -176,6 +181,7 @@ 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,
@@ -191,7 +197,8 @@ DefaultButton.propTypes = {
   id: _propTypes["default"].string,
   permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)]),
   className: _propTypes["default"].string,
-  transparent: _propTypes["default"].bool
+  transparent: _propTypes["default"].bool,
+  skeletonize: _propTypes["default"].bool
 };
 DefaultButton.defaultProps = {
   label: '',
@@ -211,6 +218,7 @@ DefaultButton.defaultProps = {
   icon: null,
   content: null,
   onClick: null,
+  onBlur: null,
   targetRef: undefined,
   tabIndex: undefined,
   isLoading: false,
@@ -222,7 +230,8 @@ DefaultButton.defaultProps = {
   id: undefined,
   permissionAttr: undefined,
   className: undefined,
-  transparent: false
+  transparent: false,
+  skeletonize: false
 };
 
 var _default = (0, _withDropdown["default"])((0, _withTooltip["default"])(DefaultButton));

package/lib/buttons/split_button/index.js

@@ -22,13 +22,15 @@ var SplitButton = function SplitButton(props) {
       boxShadow = props.boxShadow,
       dropdownAlign = props.dropdownAlign,
       visible = props.visible,
-      permissionAttr = props.permissionAttr;
+      permissionAttr = props.permissionAttr,
+      skeletonize = props.skeletonize;
   var splitProps = {
     customClass: customClass,
     size: size,
     boxShadow: boxShadow,
     visible: visible,
-    permissionAttr: permissionAttr
+    permissionAttr: permissionAttr,
+    skeletonize: skeletonize
   };
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_DefaultButton["default"], _extends({}, props, {
     style: {
@@ -64,7 +66,8 @@ SplitButton.propTypes = {
   boxShadow: _propTypes["default"].bool,
   dropdownAlign: _propTypes["default"].string,
   visible: _propTypes["default"].bool,
-  permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)])
+  permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)]),
+  skeletonize: _propTypes["default"].bool
 };
 SplitButton.defaultProps = {
   customClass: '',
@@ -73,7 +76,8 @@ SplitButton.defaultProps = {
   boxShadow: true,
   dropdownAlign: 'left',
   visible: true,
-  permissionAttr: undefined
+  permissionAttr: undefined,
+  skeletonize: false
 };
 var _default = SplitButton;
 exports["default"] = _default;

package/lib/checkbox/Label.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _withTooltip = _interopRequireDefault(require("../internals/withTooltip"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var Label = function Label(_ref) {
+  var label = _ref.label,
+      targetRef = _ref.targetRef;
+  return /*#__PURE__*/_react["default"].createElement("span", {
+    className: "description",
+    ref: function ref(r) {
+      return targetRef && targetRef(r);
+    }
+  }, label);
+};
+
+Label.propTypes = {
+  label: _propTypes["default"].string.isRequired,
+  targetRef: _propTypes["default"].func
+};
+Label.defaultProps = {
+  targetRef: undefined
+};
+
+var _default = (0, _withTooltip["default"])(Label);
+
+exports["default"] = _default;

package/lib/checkbox/checkbox.spec.js

@@ -54,31 +54,31 @@ describe('CheckBox', function () {
       var _render2 = (0, _react.render)(CheckBoxTest()),
           container = _render2.container;
 
-      expect(container.firstChild).toContainElement(container.querySelector('.checkbox-hint'));
+      expect(container.firstChild).toContainElement(container.querySelector('.hint'));
     });
     it('should label text match with prop label', function () {
       var _render3 = (0, _react.render)(CheckBoxTest()),
           container = _render3.container;
 
-      expect(container.querySelector('.checkbox-description')).toHaveTextContent('testLabel');
+      expect(container.querySelector('.description')).toHaveTextContent('testLabel');
     });
     it('should checkbox have id ', function () {
       var _render4 = (0, _react.render)(CheckBoxTest()),
           container = _render4.container;
 
-      expect(container.querySelector('.checkbox-component').id).toBe('1');
+      expect(container.querySelector('.input').id).toBe('1');
     });
     it('should checkbox have name test', function () {
       var _render5 = (0, _react.render)(CheckBoxTest()),
           container = _render5.container;
 
-      expect(container.querySelector('.checkbox-component').name).toBe('test');
+      expect(container.querySelector('.input').name).toBe('test');
     });
     it('should checkbox have value', function () {
       var _render6 = (0, _react.render)(CheckBoxTest()),
           container = _render6.container;
 
-      expect(container.querySelector('.checkbox-component').value).toBe('1');
+      expect(container.querySelector('.input').value).toBe('1');
     });
     it('should change checked', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
       var _render7, container;
@@ -88,11 +88,11 @@ describe('CheckBox', function () {
           switch (_context.prev = _context.next) {
             case 0:
               _render7 = (0, _react.render)(CheckBoxTest()), container = _render7.container;
-              expect(container.querySelector('.checkbox-component').checked).toEqual(false);
+              expect(container.querySelector('.input').checked).toEqual(false);
 
-              _react.fireEvent.click(container.querySelector('.checkbox-component'));
+              _react.fireEvent.click(container.querySelector('.input'));
 
-              expect(container.querySelector('.checkbox-component').checked).toEqual(true);
+              expect(container.querySelector('.input').checked).toEqual(true);
 
             case 4:
             case "end":
@@ -111,11 +111,11 @@ describe('CheckBox', function () {
               _render8 = (0, _react.render)(CheckBoxTest({
                 disabled: true
               })), container = _render8.container;
-              expect(container.querySelector('.checkbox-component').checked).toEqual(false);
+              expect(container.querySelector('.input').checked).toEqual(false);
 
-              _react.fireEvent.click(container.querySelector('.checkbox-component'));
+              _react.fireEvent.click(container.querySelector('.input'));
 
-              expect(container.querySelector('.checkbox-component').checked).toEqual(false);
+              expect(container.querySelector('.input').checked).toEqual(false);
 
             case 4:
             case "end":
@@ -134,7 +134,7 @@ describe('CheckBox', function () {
               _render9 = (0, _react.render)(CheckBoxTest({
                 required: true
               })), container = _render9.container;
-              expect(container.querySelector('.checkbox-component').required).toEqual(true);
+              expect(container.querySelector('.input').required).toEqual(true);
 
             case 2:
             case "end":
@@ -153,8 +153,8 @@ describe('CheckBox', function () {
               _render10 = (0, _react.render)(CheckBoxTest({
                 autoFocus: true
               })), container = _render10.container;
-              container.querySelector('.checkbox-component').focus();
-              expect(container.querySelector('.checkbox-component')).toHaveFocus();
+              container.querySelector('.input').focus();
+              expect(container.querySelector('.input')).toHaveFocus();
 
             case 3:
             case "end":
@@ -197,8 +197,8 @@ describe('CheckBox', function () {
 
       _react.fireEvent.click(container.firstChild);
 
-      expect(getByTestId('checkbox-container')).toHaveClass('disabled');
-      expect(container.querySelector('.checkbox-component')).toBeDisabled();
+      expect(getByTestId('checkbox-container')).toBeVisible();
+      expect(container.querySelector('.input')).toBeDisabled();
       expect(mockOnClick).toBeCalledTimes(0);
     });
     it('should check permission, be unavaible and onDenied is unvisible', function () {

package/lib/checkbox/index.js

@@ -13,6 +13,8 @@ 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");
@@ -23,6 +25,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
+function _extends() { _extends = Object.assign || 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); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -52,7 +56,11 @@ var CheckBox = function CheckBox(props) {
       id = props.id,
       gridLayout = props.gridLayout,
       checked = props.checked,
-      permissionAttr = props.permissionAttr;
+      permissionAttr = props.permissionAttr,
+      tooltip = props.tooltip,
+      tooltipPosition = props.tooltipPosition,
+      tooltipWidth = props.tooltipWidth,
+      skeletonize = props.skeletonize;
 
   var _useState = (0, _react.useState)(checked),
       _useState2 = _slicedToArray(_useState, 2),
@@ -100,10 +108,12 @@ var CheckBox = function CheckBox(props) {
   };
 
   var renderInput = function renderInput() {
-    return /*#__PURE__*/_react["default"].createElement("div", getProps(), /*#__PURE__*/_react["default"].createElement("span", {
+    return /*#__PURE__*/_react["default"].createElement("div", _extends({}, getProps(), {
+      className: "checkbox-component ".concat(skeletonize ? '-skeletonized' : '')
+    }), /*#__PURE__*/_react["default"].createElement("span", {
       "data-testid": "checkbox-container",
-      className: shouldDisable() ? 'disabled' : '',
-      onClick: !shouldDisable() ? function () {
+      className: "inputcontent",
+      onClick: !shouldDisable() && !skeletonize ? function () {
         return setIsChecked(!isChecked);
       } : null,
       tabIndex: "-1",
@@ -112,7 +122,7 @@ var CheckBox = function CheckBox(props) {
       onKeyPress: null
     }, /*#__PURE__*/_react["default"].createElement("input", {
       ref: inputRef,
-      className: "checkbox-component",
+      className: "input",
       type: "checkbox",
       autoFocus: autofocus,
       checked: isChecked,
@@ -122,11 +132,14 @@ var CheckBox = function CheckBox(props) {
       value: value,
       id: id,
       onChange: function onChange() {}
-    }), /*#__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));
+    }), /*#__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", {
+      className: "hint"
+    }, /*#__PURE__*/_react["default"].createElement("span", null, hint)));
   };
 
   if (onDenied.unvisible) return null;
@@ -149,7 +162,11 @@ 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)])
+  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]),
+  skeletonize: _propTypes["default"].bool
 };
 CheckBox.defaultProps = {
   label: '',
@@ -164,7 +181,11 @@ CheckBox.defaultProps = {
   hint: undefined,
   id: undefined,
   gridLayout: undefined,
-  permissionAttr: undefined
+  permissionAttr: undefined,
+  tooltip: '',
+  tooltipPosition: 'top',
+  tooltipWidth: 'auto',
+  skeletonize: false
 };
 var _default = CheckBox;
 exports["default"] = _default;

package/lib/dialog/base/index.js

@@ -31,7 +31,8 @@ var BaseDialog = function BaseDialog(props) {
       handlerClose = props.handlerClose,
       closeOnOutsideClick = props.closeOnOutsideClick,
       wrapperClassName = props.wrapperClassName,
-      children = props.children;
+      children = props.children,
+      zIndex = props.zIndex;
   var dialogEl = (0, _react.useRef)(document.createElement('div'));
   dialogEl.current.className = 'dialog';
   dialogEl.current.dataset.testid = 'dialog-component';
@@ -48,25 +49,30 @@ var BaseDialog = function BaseDialog(props) {
 
   var handleClickOutside = function handleClickOutside(event) {
     var target = event.target;
+    var dialogAlert = document.getElementsByClassName('dialog-alert-wrapper');
 
     if (wrapperEl !== null && wrapperEl.current !== null && target !== wrapperEl.current && !wrapperEl.current.contains(target)) {
+      if (dialogAlert.length > 0 && dialogAlert[dialogAlert.length - 1].contains(target) || target.classList.contains('button-component')) return;
       handlerClose();
     }
   };
 
   var handleCloseOnEsc = function handleCloseOnEsc(event) {
-    if (event.keyCode === 27 || event.key === 'ESC') handlerClose();
+    if (event.keyCode === 27 || event.key === 'ESC') {
+      handlerClose();
+    }
   };
 
   var setModalContainer = function setModalContainer() {
     modalContainerEl.current.className = 'modalcontainer';
+    if (zIndex) modalContainerEl.current.style.zIndex = zIndex;
     body.appendChild(modalContainerEl.current);
     modalContainerEl.current.appendChild(dialogEl.current);
   };
 
   var removeModalContainer = function removeModalContainer() {
-    var modalComponent = document.getElementsByClassName('modalcontainer')[0];
-    document.body.removeChild(modalComponent);
+    var modalComponent = document.getElementsByClassName('modalcontainer');
+    document.body.removeChild(modalComponent[modalComponent.length - 1]);
   };
 
   var removeOverlay = function removeOverlay() {
@@ -108,15 +114,18 @@ BaseDialog.propTypes = {
   closeOnEsc: _propTypes["default"].bool,
   closeOnOutsideClick: _propTypes["default"].bool,
   overlay: _propTypes["default"].bool,
+  changedData: _propTypes["default"].bool,
   children: _propTypes["default"].any.isRequired,
-  textAlign: _propTypes["default"].string
+  textAlign: _propTypes["default"].string,
+  zIndex: _propTypes["default"].string
 };
 BaseDialog.defaultProps = {
   closeOnEsc: false,
   closeOnOutsideClick: false,
   overlay: true,
   handlerClose: null,
-  textAlign: 'justify'
+  textAlign: 'justify',
+  zIndex: null
 };
 var _default = BaseDialog;
 exports["default"] = _default;