dibk-design 1.1.9 → 2.0.0

package/dist/components/CheckBoxListItem.module.scss

@@ -1,67 +1,67 @@
 @import "../style/global.scss";
 
-:local(.checkBoxListItem) {
-  @include box-sizing(content-box);
-  @include border-radius(5px);
-  @include transition(all 0.1s ease-in-out);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  cursor: pointer;
-  font-family: $default-font;
-  position: relative;
-  font-size: 17px;
-  color: #000;
-
-  &:not(:local(.contentOnly)):not(:local(.compact)) {
-    @include box-shadow(0 0 2px $color-dark-blue);
-    background: white;
-    margin-bottom: 10px;
-  }
+.checkBoxListItem {
+    @include box-sizing(content-box);
+    @include border-radius(5px);
+    @include transition(all 0.1s ease-in-out);
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-align-items: flex-start;
+    -webkit-box-align: flex-start;
+    -ms-flex-align: flex-start;
+    align-items: flex-start;
+    cursor: pointer;
+    font-family: $default-font;
+    position: relative;
+    font-size: 17px;
+    color: #000;
 
-  &:local(.contentOnly) {
-    cursor: auto;
-    label {
-      cursor: auto;
-      padding: 5px 10px;
+    &:not(.contentOnly):not(.compact) {
+        @include box-shadow(0 0 2px $color-dark-blue);
+        background: white;
+        margin-bottom: 10px;
     }
-  }
 
-  &:local(.disabled) {
-    label {
-      cursor: auto;
+    &.contentOnly {
+        cursor: auto;
+        label {
+            cursor: auto;
+            padding: 5px 10px;
+        }
     }
-  }
 
-  &:local(.checked):not(:local(.contentOnly)):not(:local(.compact)):not(:local(.disabled)) {
-    @include box-shadow(0 0 0 1px $color-dark-blue, 0 0 4px 0 $color-dark-blue);
-  }
+    &.disabled {
+        label {
+            cursor: auto;
+        }
+    }
 
-  &:not(:local(.checked)):not(:local(.contentOnly)):not(:local(.compact)):not(:local(.disabled)):hover {
-    @include box-shadow(0 0 6px $color-dark-blue);
-  }
+    &.checked:not(.contentOnly):not(.compact):not(.disabled) {
+        @include box-shadow(0 0 0 1px $color-dark-blue, 0 0 4px 0 $color-dark-blue);
+    }
 
-  label {
-    width: 100%;
-    padding: 10px;
-    margin: 0;
-    cursor: pointer;
-  }
+    &:not(.checked):not(.contentOnly):not(.compact):not(.disabled):hover {
+        @include box-shadow(0 0 6px $color-dark-blue);
+    }
 
-  &:local(.compact) {
-    display: table;
     label {
-      padding: 6px 4px;
+        width: 100%;
+        padding: 10px;
+        margin: 0;
+        cursor: pointer;
     }
-  }
 
-  input[type="checkbox"] {
-    opacity: 0;
-    position: absolute;
-  }
+    &.compact {
+        display: table;
+        label {
+            padding: 6px 4px;
+        }
+    }
+
+    input[type="checkbox"] {
+        opacity: 0;
+        position: absolute;
+    }
 }

package/dist/components/Container.js

@@ -1,64 +1,21 @@
 "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 = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _ContainerModule = _interopRequireDefault(require("./Container.module.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; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-var Container = /*#__PURE__*/function (_Component) {
-  _inherits(Container, _Component);
-
-  var _super = _createSuper(Container);
-
-  function Container() {
-    _classCallCheck(this, Container);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(Container, [{
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: _ContainerModule.default.container
-      }, this.props.children);
-    }
-  }]);
-
-  return Container;
-}(_react.Component);
+var Container = function Container(props) {
+  return _react.default.createElement("div", {
+    className: _ContainerModule.default.container
+  }, props.children);
+};
 
 var _default = Container;
 exports.default = _default;

package/dist/components/Container.module.scss

@@ -1,6 +1,6 @@
 @import "../style/global.scss";
 
-:local(.container) {
+.container {
     margin: auto;
     padding: 16px;
     @media (min-width: $screen-sm) {

package/dist/components/ContentBox.js

@@ -1,7 +1,5 @@
 "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
 });
@@ -15,92 +13,55 @@ var _ContentBoxModule = _interopRequireDefault(require("./ContentBox.module.scss
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-var ContentBox = /*#__PURE__*/function (_React$Component) {
-  _inherits(ContentBox, _React$Component);
+var ContentBox = function ContentBox(props) {
+  var _props$content;
 
-  var _super = _createSuper(ContentBox);
+  var renderTitle = function renderTitle() {
+    var className = _ContentBoxModule.default.title + " " + _ContentBoxModule.default[props.titleSize];
 
-  function ContentBox() {
-    _classCallCheck(this, ContentBox);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(ContentBox, [{
-    key: "renderTitle",
-    value: function renderTitle() {
-      var className = _ContentBoxModule.default.title + " " + _ContentBoxModule.default[this.props.titleSize];
-
-      if (this.props.title) {
-        return /*#__PURE__*/_react.default.createElement("h2", {
-          className: className
-        }, this.props.title);
-      } else {
-        return;
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var colorClass = " " + _ContentBoxModule.default[this.props.color];
-      var linkClass = this.props.href ? " " + _ContentBoxModule.default.link : "";
-      var className = _ContentBoxModule.default.contentBox + colorClass + linkClass;
-
-      if (this.props.href) {
-        return /*#__PURE__*/_react.default.createElement("a", {
-          href: this.props.href,
-          className: className
-        }, this.renderTitle(), /*#__PURE__*/_react.default.createElement("div", {
-          className: _ContentBoxModule.default.content
-        }, this.props.content));
-      } else {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: className
-        }, this.renderTitle(), /*#__PURE__*/_react.default.createElement("div", {
-          className: _ContentBoxModule.default.content
-        }, this.props.content));
-      }
+    if (props.title) {
+      return _react.default.createElement("h2", {
+        className: className
+      }, props.title);
+    } else {
+      return;
     }
-  }]);
-
-  return ContentBox;
-}(_react.default.Component);
+  };
+
+  var colorClass = " " + _ContentBoxModule.default[props.color];
+  var linkClass = props.href ? " " + _ContentBoxModule.default.link : "";
+  var className = _ContentBoxModule.default.contentBox + colorClass + linkClass;
+  var bodyContent = (_props$content = props.content) !== null && _props$content !== void 0 && _props$content.length ? props.content : props.children;
+
+  if (props.href) {
+    return _react.default.createElement("a", {
+      href: props.href,
+      className: className
+    }, renderTitle(), _react.default.createElement("div", {
+      className: _ContentBoxModule.default.content
+    }, bodyContent));
+  } else {
+    return _react.default.createElement("div", {
+      className: className
+    }, renderTitle(), _react.default.createElement("div", {
+      className: _ContentBoxModule.default.content
+    }, bodyContent));
+  }
+};
 
 ContentBox.propTypes = {
-  /** Content title inside box */
   title: _propTypes.default.string,
-  titleSize: _propTypes.default.oneOf(['regular', 'large']),
-
-  /** Text content inside box */
+  titleSize: _propTypes.default.oneOf(["regular", "large"]),
   content: _propTypes.default.string,
-  color: _propTypes.default.oneOf(['default', 'primary', 'success', 'warning', 'info', 'lightCyan', 'orange', 'lightOrange', 'lime', 'lightLime'])
+  children: _propTypes.default.any,
+  color: _propTypes.default.oneOf(["default", "primary", "success", "warning", "info", "lightCyan", "orange", "lightOrange", "lime", "lightLime"])
 };
 ContentBox.defaultProps = {
   title: null,
-  titleSize: 'regular',
+  titleSize: "regular",
   href: null,
-  content: '',
-  color: 'default'
+  content: "",
+  color: "default"
 };
 var _default = ContentBox;
 exports.default = _default;

package/dist/components/ContentBox.module.scss

@@ -1,12 +1,12 @@
 @import "../style/global.scss";
 
-:local(.contentBox) {
+.contentBox {
     font-family: $default-font;
     text-decoration: none;
     padding: 20px;
     width: 100%;
     display: block;
-    &:local(.link) {
+    &.link {
         color: $color-primary;
         @include transition(filter 0.3s);
         &:hover,
@@ -17,85 +17,85 @@
             filter: brightness(85%);
         }
     }
-    &:local(.default) {
+    &.default {
         background-color: $color-default;
-        :local(.content),
-        :local(.title) {
+        .content,
+        .title {
             color: #000;
         }
     }
-    &:local(.primary) {
+    &.primary {
         background-color: $color-primary;
         color: #fff;
-        :local(.content),
-        :local(.title) {
+        .content,
+        .title {
             color: #fff;
         }
     }
-    &:local(.success) {
+    &.success {
         background-color: $color-success;
         color: #fff;
-        :local(.content),
-        :local(.title) {
+        .content,
+        .title {
             color: #fff;
         }
     }
-    &:local(.warning) {
+    &.warning {
         background-color: $color-warning;
         color: #fff;
-        :local(.content),
-        :local(.title) {
+        .content,
+        .title {
             color: #fff;
         }
     }
 
-    &:local(.info) {
+    &.info {
         background-color: $color-info;
-        :local(.content),
-        :local(.title) {
+        .content,
+        .title {
             color: #000;
         }
     }
-    &:local(.lightCyan) {
+    &.lightCyan {
         background-color: $color-light-cyan;
-        :local(.content),
-        :local(.title) {
+        .content,
+        .title {
             color: #000;
         }
     }
-    &:local(.orange) {
+    &.orange {
         background-color: $color-orange;
         color: #fff;
-        :local(.content),
-        :local(.title) {
+        .content,
+        .title {
             color: #fff;
         }
     }
-    &:local(.lightOrange) {
+    &.lightOrange {
         background-color: $color-light-orange;
-        :local(.content),
-        :local(.title) {
+        .content,
+        .title {
             color: #000;
         }
     }
-    &:local(.lime) {
+    &.lime {
         background-color: $color-lime;
         color: #fff;
-        :local(.content),
-        :local(.title) {
+        .content,
+        .title {
             color: #fff;
         }
     }
-    &:local(.lightLime) {
+    &.lightLime {
         background-color: $color-light-lime;
-        :local(.content),
-        :local(.title) {
+        .content,
+        .title {
             color: #000;
         }
     }
 
-    :local(.title) {
-        &:local(.regular) {
+    .title {
+        &.regular {
             font-family: $default-font;
             font-weight: bold;
             font-size: 21px;
@@ -104,7 +104,7 @@
             padding-bottom: 10px;
             border-bottom: 1px solid #e5e3e1;
         }
-        &:local(.large) {
+        &.large {
             font-family: $default-font;
             font-weight: normal;
             font-size: 24px;

package/dist/components/Dialog.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -15,130 +15,62 @@ var _DialogModule = _interopRequireDefault(require("./Dialog.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+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 _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+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 _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-var Dialog = /*#__PURE__*/function (_React$Component) {
-  _inherits(Dialog, _React$Component);
-
-  var _super = _createSuper(Dialog);
-
-  function Dialog(props) {
-    var _this;
-
-    _classCallCheck(this, Dialog);
-
-    _this = _super.call(this, props);
-    _this.state = {};
-    _this.setWrapperRef = _this.setWrapperRef.bind(_assertThisInitialized(_this));
-    _this.setHiddenInputWrapperRef = _this.setHiddenInputWrapperRef.bind(_assertThisInitialized(_this));
-    _this.handleClickOutside = _this.handleClickOutside.bind(_assertThisInitialized(_this));
-    _this.keyDownFunction = _this.keyDownFunction.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(Dialog, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      document.addEventListener('mousedown', this.handleClickOutside);
-      document.addEventListener("keydown", this.keyDownFunction, false);
-      this.hiddenInputWrapperRef.tabIndex = -1;
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.removeEventListener('mousedown', this.handleClickOutside);
-      document.removeEventListener("keydown", this.keyDownFunction, false);
-    }
-  }, {
-    key: "keyDownFunction",
-    value: function keyDownFunction(event) {
+var Dialog = function Dialog(props) {
+  var wrapperRef = (0, _react.useRef)();
+  var hiddenInputWrapperRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    var keyDownFunction = function keyDownFunction(event) {
       switch (event.keyCode) {
         case 27:
-          // Escape
-          if (this.props.onClickOutside) this.props.onClickOutside();
+          if (props.onClickOutside) props.onClickOutside();
           break;
 
         default:
           return null;
       }
-    }
-  }, {
-    key: "setWrapperRef",
-    value: function setWrapperRef(node) {
-      this.wrapperRef = node;
-    }
-  }, {
-    key: "setHiddenInputWrapperRef",
-    value: function setHiddenInputWrapperRef(node) {
-      this.hiddenInputWrapperRef = node;
-    }
-  }, {
-    key: "handleClickOutside",
-    value: function handleClickOutside(event) {
-      if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
-        this.props.onClickOutside();
+    };
+
+    var handleClickOutside = function handleClickOutside(event) {
+      if (wrapperRef !== null && wrapperRef !== void 0 && wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        props.onClickOutside();
       }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", keyDownFunction, false);
+    hiddenInputWrapperRef.current.tabIndex = -1;
+  }, [props]);
+  return _react.default.createElement("div", {
+    className: "".concat(_DialogModule.default.dialogOverlay, " ").concat(props.hidden && _DialogModule.default.hidden)
+  }, _react.default.createElement("div", {
+    ref: wrapperRef,
+    className: "".concat(_DialogModule.default.dialogContent, " ").concat(props.noPadding ? _DialogModule.default.noPadding : ""),
+    style: {
+      maxWidth: props.maxWidth
     }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: _DialogModule.default.dialogOverlay
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        ref: this.setWrapperRef,
-        className: "".concat(_DialogModule.default.dialogContent, " ").concat(this.props.noPadding ? _DialogModule.default.noPadding : ''),
-        style: {
-          maxWidth: this.props.maxWidth
-        }
-      }, this.props.closeButton ? /*#__PURE__*/_react.default.createElement("button", {
-        onClick: this.props.onClickOutside,
-        className: _DialogModule.default.closeButton
-      }) : '', /*#__PURE__*/_react.default.createElement("input", {
-        type: "button",
-        ref: this.setHiddenInputWrapperRef,
-        className: _DialogModule.default.hidden,
-        autoFocus: true
-      }), this.props.children));
-    }
-  }]);
-
-  return Dialog;
-}(_react.default.Component);
+  }, props.closeButton ? _react.default.createElement("button", {
+    onClick: props.onClickOutside,
+    className: _DialogModule.default.closeButton
+  }) : "", _react.default.createElement("input", {
+    type: "button",
+    ref: hiddenInputWrapperRef,
+    className: _DialogModule.default.hidden,
+    autoFocus: true
+  }), props.children));
+};
 
-;
 Dialog.propTypes = {
-  /** Sets max width for modal content element */
   maxWidth: _propTypes.default.string,
-
-  /** Removes padding from modal content element */
   noPadding: _propTypes.default.bool,
-
-  /** Displays close button in upper right corner */
   closeButton: _propTypes.default.bool,
-
-  /** Function for click outside modal content element or click on close button element */
   onClickOutside: _propTypes.default.func.isRequired
 };
 Dialog.defaultProps = {
-  maxWidth: 'none'
+  maxWidth: "none"
 };
 var _default = Dialog;
 exports.default = _default;