react-titlebar-osx - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

lib/Titlebar.js

@@ -1,120 +0,204 @@
-import React, { PropTypes } from 'react';
-import classNames from 'classnames';
-import './css/Titlebar.scss';
+'use strict';
 
-const KEY_ALT = 18;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-class Titlebar extends React.Component {
-  static defaultProps = {
-    draggable: false,
-    title: null,
-    transparent: false,
-  }
+var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-  constructor(props, defaultProps) {
-    super(props, defaultProps);
+var _react = require('react');
 
-    this.state = {
-      keyAltDown: false,
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* eslint-disable class-methods-use-this */
+
+var KEY_ALT = 18;
+
+var Titlebar = function (_React$Component) {
+  _inherits(Titlebar, _React$Component);
+
+  function Titlebar(props, defaultProps) {
+    _classCallCheck(this, Titlebar);
+
+    var _this = _possibleConstructorReturn(this, (Titlebar.__proto__ || Object.getPrototypeOf(Titlebar)).call(this, props, defaultProps));
+
+    _this.state = {
+      keyAltDown: false
     };
 
-    this.handleMaximize = this.handleMaximize.bind(this);
+    _this.handleMaximize = _this.handleMaximize.bind(_this);
+    return _this;
   }
 
-  componentDidMount() {
-    document.body.addEventListener('keydown', this.handleKeyDown.bind(this));  // eslint-disable-line no-undef
-    document.body.addEventListener('keyup', this.handleKeyUp.bind(this));      // eslint-disable-line no-undef
-  }
+  _createClass(Titlebar, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.setStyleHeader();
 
-  componentWillUnMount() {
-    document.body.removeEventListener('keydown', this.handleKeyDown);  // eslint-disable-line no-undef
-    document.body.removeEventListener('keyup', this.handleKeyUp);      // eslint-disable-line no-undef
-  }
+      document.body.addEventListener('keydown', this.handleKeyDown.bind(this)); // eslint-disable-line no-undef
+      document.body.addEventListener('keyup', this.handleKeyUp.bind(this)); // eslint-disable-line no-undef
+    }
+  }, {
+    key: 'componentWillUnMount',
+    value: function componentWillUnMount() {
+      document.body.removeEventListener('keydown', this.handleKeyDown); // eslint-disable-line no-undef
+      document.body.removeEventListener('keyup', this.handleKeyUp); // eslint-disable-line no-undef
+    }
+  }, {
+    key: 'handleKeyDown',
+    value: function handleKeyDown(e) {
+      if (e.keyCode === KEY_ALT) {
+        this.setState({
+          keyAltDown: true
+        });
+      }
+    }
+  }, {
+    key: 'handleKeyUp',
+    value: function handleKeyUp(e) {
+      if (e.keyCode === KEY_ALT) {
+        this.setState({
+          keyAltDown: false
+        });
+      }
+    }
+  }, {
+    key: 'handleMaximize',
+    value: function handleMaximize() {
+      var _props = this.props,
+          onMaximize = _props.onMaximize,
+          onFullscreen = _props.onFullscreen;
+      var keyAltDown = this.state.keyAltDown;
 
-  handleKeyDown(e) {
-    if (e.keyCode === KEY_ALT) {
-      this.setState({
-        keyAltDown: true,
-      });
+
+      if (keyAltDown) {
+        onMaximize();
+      } else {
+        onFullscreen();
+      }
     }
-  }
 
-  handleKeyUp(e) {
-    if (e.keyCode === KEY_ALT) {
-      this.setState({
-        keyAltDown: false,
+    /**
+     * Set style tag in header
+     * in this way we can insert default css
+     */
+
+  }, {
+    key: 'setStyleHeader',
+    value: function setStyleHeader() {
+      if (!document.getElementsByTagName('head')[0].querySelector('style[id="react-titlebar-osx"]')) {
+        // eslint-disable-line no-undef
+        console.log(this.styles());
+        var tag = document.createElement('style'); // eslint-disable-line no-undef
+        tag.id = 'react-titlebar-osx';
+        tag.innerHTML = this.styles();
+        document.getElementsByTagName('head')[0].appendChild(tag); // eslint-disable-line no-undef
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props2 = this.props,
+          draggable = _props2.draggable,
+          title = _props2.title,
+          transparent = _props2.transparent,
+          onClose = _props2.onClose,
+          onMinimize = _props2.onMinimize;
+      var keyAltDown = this.state.keyAltDown;
+
+
+      var clazz = (0, _classnames2.default)({
+        titlebar: true,
+        'webkit-draggable': draggable,
+        transparent: transparent,
+        alt: keyAltDown
       });
+
+      return _react2.default.createElement(
+        'div',
+        { className: clazz },
+        _react2.default.createElement(
+          'div',
+          { className: 'titlebar-stoplight' },
+          _react2.default.createElement(
+            'div',
+            { className: 'titlebar-close', onClick: onClose },
+            _react2.default.createElement(
+              'svg',
+              { x: '0px', y: '0px', viewBox: '0 0 6.4 6.4' },
+              _react2.default.createElement('polygon', { fill: '#4d0000', points: '6.4,0.8 5.6,0 3.2,2.4 0.8,0 0,0.8 2.4,3.2 0,5.6 0.8,6.4 3.2,4 5.6,6.4 6.4,5.6 4,3.2' })
+            )
+          ),
+          _react2.default.createElement(
+            'div',
+            { className: 'titlebar-minimize', onClick: onMinimize },
+            _react2.default.createElement(
+              'svg',
+              { x: '0px', y: '0px', viewBox: '0 0 8 1.1' },
+              _react2.default.createElement('rect', { fill: '#995700', width: '8', height: '1.1' })
+            )
+          ),
+          _react2.default.createElement(
+            'div',
+            { className: 'titlebar-fullscreen', onClick: this.handleMaximize },
+            _react2.default.createElement(
+              'svg',
+              { className: 'fullscreen-svg', x: '0px', y: '0px', viewBox: '0 0 6 5.9' },
+              _react2.default.createElement('path', { fill: '#006400', d: 'M5.4,0h-4L6,4.5V0.6C5.7,0.6,5.3,0.3,5.4,0z' }),
+              _react2.default.createElement('path', { fill: '#006400', d: 'M0.6,5.9h4L0,1.4l0,3.9C0.3,5.3,0.6,5.6,0.6,5.9z' })
+            ),
+            _react2.default.createElement(
+              'svg',
+              { className: 'maximize-svg', x: '0px', y: '0px', viewBox: '0 0 7.9 7.9' },
+              _react2.default.createElement('polygon', { fill: '#006400', points: '7.9,4.5 7.9,3.4 4.5,3.4 4.5,0 3.4,0 3.4,3.4 0,3.4 0,4.5 3.4,4.5 3.4,7.9 4.5,7.9 4.5,4.5' })
+            )
+          )
+        ),
+        title && _react2.default.createElement(
+          'div',
+          { className: 'titlebar-text' },
+          'title'
+        )
+      );
     }
-  }
 
-  handleMaximize() {
-    const { onMaximize, onFullscreen } = this.props;
-    const { keyAltDown } = this.state;
+    // TODO ugly way to fix the styles
 
-    if (keyAltDown) {
-      onMaximize();
-    } else {
-      onFullscreen();
+  }, {
+    key: 'styles',
+    value: function styles() {
+      return '.titlebar {\n      padding: 0 3px;\n      display: flex;\n      background-color: #f6f6f6; }\n      .titlebar.transparent {\n        background-color: transparent; }\n      .titlebar.webkit-draggable {\n        -webkit-app-region: drag; }\n      .titlebar.alt svg.fullscreen-svg {\n        display: none; }\n      .titlebar.alt svg.maximize-svg {\n        display: block !important; }\n      .titlebar.webkit-draggable .titlebar-close, .titlebar.webkit-draggable .titlebar-minimize, .titlebar.webkit-draggable .titlebar-fullscreen {\n        -webkit-app-region: no-drag; }\n\n    .titlebar-text {\n      flex-grow: 1;\n      text-align: center;\n      font-family: \'Helvetica Neue\', Helvetica;\n      font-size: 14px;\n      line-height: 24px;\n      -webkit-touch-callout: none;\n      -webkit-user-select: none;\n      user-select: none;\n      cursor: default; }\n\n    .titlebar-stoplight {\n      flex-grow: 0;\n      display: flex; }\n      .titlebar-stoplight .titlebar-close,\n      .titlebar-stoplight .titlebar-minimize,\n      .titlebar-stoplight .titlebar-fullscreen {\n        width: 10px;\n        height: 10px;\n        border-radius: 50%;\n        margin: 6px 4px;\n        line-height: 0; }\n      .titlebar-stoplight .titlebar-close {\n        border: 1px solid #e2463f;\n        background-color: #ff5f57;\n        margin-left: 6px; }\n        .titlebar-stoplight .titlebar-close:active {\n          border-color: #ad3934;\n          background-color: #bf4943; }\n        .titlebar-stoplight .titlebar-close svg {\n          width: 6px;\n          height: 6px;\n          margin-top: 2px;\n          margin-left: 2px;\n          opacity: 0; }\n      .titlebar-stoplight .titlebar-minimize {\n        border: 1px solid #e1a116;\n        background-color: #ffbd2e; }\n        .titlebar-stoplight .titlebar-minimize:active {\n          border-color: #ad7d15;\n          background-color: #bf9123; }\n        .titlebar-stoplight .titlebar-minimize svg {\n          width: 8px;\n          height: 8px;\n          margin-top: 1px;\n          margin-left: 1px;\n          opacity: 0; }\n      .titlebar-stoplight .titlebar-fullscreen,\n      .titlebar-stoplight .titlebar-maximize {\n        border: 1px solid #12ac28;\n        background-color: #28c940; }\n      .titlebar-stoplight .titlebar-fullscreen:active {\n        border-color: #128622;\n        background-color: #1f9a31; }\n      .titlebar-stoplight .titlebar-fullscreen svg.fullscreen-svg {\n        width: 6px;\n        height: 6px;\n        margin-top: 2px;\n        margin-left: 2px;\n        opacity: 0; }\n      .titlebar-stoplight .titlebar-fullscreen svg.maximize-svg {\n        width: 8px;\n        height: 8px;\n        margin-top: 1px;\n        margin-left: 1px;\n        opacity: 0;\n        display: none; }\n      .titlebar-stoplight:hover svg, .titlebar-stoplight:hover svg.fullscreen-svg, .titlebar-stoplight:hover svg.maximize-svg {\n        opacity: 1; }\n\n    .titlebar:after,\n    .titlebar-stoplight:after {\n      content: \' \';\n      display: table;\n      clear: both; }\n';
     }
-  }
+  }]);
 
-  render() {
-    const {
-      draggable,
-      title,
-      transparent,
-      onClose,
-      onMinimize,
-    } = this.props;
-    const { keyAltDown } = this.state;
+  return Titlebar;
+}(_react2.default.Component);
 
-    const clazz = classNames({
-      titlebar: true,
-      'webkit-draggable': draggable,
-      transparent,
-      alt: keyAltDown,
-    });
+Titlebar.defaultProps = {
+  draggable: false,
+  title: null,
+  transparent: false
+};
 
-    return (
-      <div className={clazz}>
-        <div className="titlebar-stoplight">
-          <div className="titlebar-close" onClick={onClose}>
-            <svg x="0px" y="0px" viewBox="0 0 6.4 6.4">
-              <polygon fill="#4d0000" points="6.4,0.8 5.6,0 3.2,2.4 0.8,0 0,0.8 2.4,3.2 0,5.6 0.8,6.4 3.2,4 5.6,6.4 6.4,5.6 4,3.2"></polygon>
-            </svg>
-          </div>
-          <div className="titlebar-minimize" onClick={onMinimize}>
-            <svg x="0px" y="0px" viewBox="0 0 8 1.1">
-              <rect fill="#995700" width="8" height="1.1"></rect>
-            </svg>
-          </div>
-          <div className="titlebar-fullscreen" onClick={this.handleMaximize}>
-            <svg className="fullscreen-svg" x="0px" y="0px" viewBox="0 0 6 5.9">
-              <path fill="#006400" d="M5.4,0h-4L6,4.5V0.6C5.7,0.6,5.3,0.3,5.4,0z"></path>
-              <path fill="#006400" d="M0.6,5.9h4L0,1.4l0,3.9C0.3,5.3,0.6,5.6,0.6,5.9z"></path>
-            </svg>
-            <svg className="maximize-svg" x="0px" y="0px" viewBox="0 0 7.9 7.9">
-              <polygon fill="#006400" points="7.9,4.5 7.9,3.4 4.5,3.4 4.5,0 3.4,0 3.4,3.4 0,3.4 0,4.5 3.4,4.5 3.4,7.9 4.5,7.9 4.5,4.5"></polygon>
-            </svg>
-          </div>
-        </div>
-        {
-          title &&
-            <div className="titlebar-text">title</div>
-        }
-      </div>
-    );
-  }
-}
 
 Titlebar.propTypes = {
-  title: PropTypes.string,
-  transparent: PropTypes.bool,
-  draggable: PropTypes.bool,
-  onClose: PropTypes.func.isRequired,
-  onMinimize: PropTypes.func.isRequired,
-  onMaximize: PropTypes.func.isRequired,
-  onFullscreen: PropTypes.func.isRequired,
+  title: _react.PropTypes.string,
+  transparent: _react.PropTypes.bool,
+  draggable: _react.PropTypes.bool,
+  onClose: _react.PropTypes.func.isRequired,
+  onMinimize: _react.PropTypes.func.isRequired,
+  onMaximize: _react.PropTypes.func.isRequired,
+  onFullscreen: _react.PropTypes.func.isRequired
 };
 
-export default Titlebar;
+exports.default = Titlebar;

package.json

 {
   "name": "react-titlebar-osx",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "osx controls to use on electron with react",
-  "main": "./lib/index",
+  "main": "lib/index",
   "scripts": {
@@ -11,7 +11,15 @@ "lint": "eslint 'lib/Titlebar.js'",
     "demo-dev": "npm run demo-watch & http-server demo",
-    "umd-unminified": "webpack --config ./webpack-umd.config.js",
-    "umd-minified": "MINIFY=true webpack --config ./webpack-umd.config.js",
-    "umd": "npm run umd-unminified && npm run umd-minified",
-    "prepublish": "npm run umd"
+    "build:css": "sass --update --sourcemap=none src/css:src/css --style expanded && sass --update --sourcemap=none src/css:lib/css --style expanded",
+    "build:umd:unmin": "webpack --config ./webpack-umd.config.js",
+    "build:umd:min": "MINIFY=true webpack --config ./webpack-umd.config.js",
+    "build:umd": "npm run build:umd:unmin && npm run build:umd:min",
+    "build:commonjs": "mkdir -p lib && babel ./src -d lib",
+    "publish": "npm run build:css && npm run build:commonjs && npm run build:umd"
   },
+  "files": [
+    "*.md",
+    "umd",
+    "lib",
+    "src"
+  ],
   "repository": {
@@ -37,2 +45,3 @@ "type": "git",
     "classnames": "^2.2.5",
+    "defaultcss": "^1.1.1",
     "react": "^15.3.2",
@@ -46,2 +55,3 @@ "react-dom": "^15.3.2"
   "devDependencies": {
+    "babel-cli": "^6.18.0",
     "babel-core": "^6.18.2",
@@ -48,0 +58,0 @@ "babel-eslint": "^7.1.1",

umd/ReactTitlebar.js

@@ -10,3 +10,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 		root["ReactTitlebar"] = factory(root["React"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_7__) {
+})(this, function(__WEBPACK_EXTERNAL_MODULE_3__) {
 return /******/ (function(modules) { // webpackBootstrap
@@ -76,2 +76,4 @@ /******/ 	// The module cache
 
+	var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
 	Object.defineProperty(exports, "__esModule", {
@@ -81,5 +83,13 @@ value: true
 
-	var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+	var _createClass = 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);
+	    }
+	  }return function (Constructor, protoProps, staticProps) {
+	    if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;
+	  };
+	}();
 
-	var _react = __webpack_require__(7);
+	var _react = __webpack_require__(3);
 
@@ -92,12 +102,24 @@ var _react2 = _interopRequireDefault(_react);
 
-	__webpack_require__(6);
+	function _interopRequireDefault(obj) {
+	  return obj && obj.__esModule ? obj : { default: obj };
+	}
 
-	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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+	function _possibleConstructorReturn(self, call) {
+	  if (!self) {
+	    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+	  }return call && ((typeof call === "undefined" ? "undefined" : _typeof(call)) === "object" || typeof call === "function") ? call : self;
+	}
 
-	function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+	function _inherits(subClass, superClass) {
+	  if (typeof superClass !== "function" && superClass !== null) {
+	    throw new TypeError("Super expression must either be null or a function, not " + (typeof superClass === "undefined" ? "undefined" : _typeof(superClass)));
+	  }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+	} /* eslint-disable class-methods-use-this */
 
-	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 	var KEY_ALT = 18;
@@ -124,2 +146,4 @@
 	    value: function componentDidMount() {
+	      this.setStyleHeader();
+
 	      document.body.addEventListener('keydown', this.handleKeyDown.bind(this)); // eslint-disable-line no-undef
@@ -160,3 +184,2 @@ document.body.addEventListener('keyup', this.handleKeyUp.bind(this)); // eslint-disable-line no-undef
 
-
 	      if (keyAltDown) {
@@ -168,3 +191,21 @@ onMaximize();
 	    }
+
+	    /**
+	     * Set style tag in header
+	     * in this way we can insert default css
+	     */
+
 	  }, {
+	    key: 'setStyleHeader',
+	    value: function setStyleHeader() {
+	      if (!document.getElementsByTagName('head')[0].querySelector('style[id="react-titlebar-osx"]')) {
+	        // eslint-disable-line no-undef
+	        console.log(this.styles());
+	        var tag = document.createElement('style'); // eslint-disable-line no-undef
+	        tag.id = 'react-titlebar-osx';
+	        tag.innerHTML = this.styles();
+	        document.getElementsByTagName('head')[0].appendChild(tag); // eslint-disable-line no-undef
+	      }
+	    }
+	  }, {
 	    key: 'render',
@@ -180,3 +221,2 @@ value: function render() {
 
-
 	      var clazz = (0, _classnames2.default)({
@@ -189,49 +229,12 @@ titlebar: true,
 
-	      return _react2.default.createElement(
-	        'div',
-	        { className: clazz },
-	        _react2.default.createElement(
-	          'div',
-	          { className: 'titlebar-stoplight' },
-	          _react2.default.createElement(
-	            'div',
-	            { className: 'titlebar-close', onClick: onClose },
-	            _react2.default.createElement(
-	              'svg',
-	              { x: '0px', y: '0px', viewBox: '0 0 6.4 6.4' },
-	              _react2.default.createElement('polygon', { fill: '#4d0000', points: '6.4,0.8 5.6,0 3.2,2.4 0.8,0 0,0.8 2.4,3.2 0,5.6 0.8,6.4 3.2,4 5.6,6.4 6.4,5.6 4,3.2' })
-	            )
-	          ),
-	          _react2.default.createElement(
-	            'div',
-	            { className: 'titlebar-minimize', onClick: onMinimize },
-	            _react2.default.createElement(
-	              'svg',
-	              { x: '0px', y: '0px', viewBox: '0 0 8 1.1' },
-	              _react2.default.createElement('rect', { fill: '#995700', width: '8', height: '1.1' })
-	            )
-	          ),
-	          _react2.default.createElement(
-	            'div',
-	            { className: 'titlebar-fullscreen', onClick: this.handleMaximize },
-	            _react2.default.createElement(
-	              'svg',
-	              { className: 'fullscreen-svg', x: '0px', y: '0px', viewBox: '0 0 6 5.9' },
-	              _react2.default.createElement('path', { fill: '#006400', d: 'M5.4,0h-4L6,4.5V0.6C5.7,0.6,5.3,0.3,5.4,0z' }),
-	              _react2.default.createElement('path', { fill: '#006400', d: 'M0.6,5.9h4L0,1.4l0,3.9C0.3,5.3,0.6,5.6,0.6,5.9z' })
-	            ),
-	            _react2.default.createElement(
-	              'svg',
-	              { className: 'maximize-svg', x: '0px', y: '0px', viewBox: '0 0 7.9 7.9' },
-	              _react2.default.createElement('polygon', { fill: '#006400', points: '7.9,4.5 7.9,3.4 4.5,3.4 4.5,0 3.4,0 3.4,3.4 0,3.4 0,4.5 3.4,4.5 3.4,7.9 4.5,7.9 4.5,4.5' })
-	            )
-	          )
-	        ),
-	        title && _react2.default.createElement(
-	          'div',
-	          { className: 'titlebar-text' },
-	          'title'
-	        )
-	      );
+	      return _react2.default.createElement('div', { className: clazz }, _react2.default.createElement('div', { className: 'titlebar-stoplight' }, _react2.default.createElement('div', { className: 'titlebar-close', onClick: onClose }, _react2.default.createElement('svg', { x: '0px', y: '0px', viewBox: '0 0 6.4 6.4' }, _react2.default.createElement('polygon', { fill: '#4d0000', points: '6.4,0.8 5.6,0 3.2,2.4 0.8,0 0,0.8 2.4,3.2 0,5.6 0.8,6.4 3.2,4 5.6,6.4 6.4,5.6 4,3.2' }))), _react2.default.createElement('div', { className: 'titlebar-minimize', onClick: onMinimize }, _react2.default.createElement('svg', { x: '0px', y: '0px', viewBox: '0 0 8 1.1' }, _react2.default.createElement('rect', { fill: '#995700', width: '8', height: '1.1' }))), _react2.default.createElement('div', { className: 'titlebar-fullscreen', onClick: this.handleMaximize }, _react2.default.createElement('svg', { className: 'fullscreen-svg', x: '0px', y: '0px', viewBox: '0 0 6 5.9' }, _react2.default.createElement('path', { fill: '#006400', d: 'M5.4,0h-4L6,4.5V0.6C5.7,0.6,5.3,0.3,5.4,0z' }), _react2.default.createElement('path', { fill: '#006400', d: 'M0.6,5.9h4L0,1.4l0,3.9C0.3,5.3,0.6,5.6,0.6,5.9z' })), _react2.default.createElement('svg', { className: 'maximize-svg', x: '0px', y: '0px', viewBox: '0 0 7.9 7.9' }, _react2.default.createElement('polygon', { fill: '#006400', points: '7.9,4.5 7.9,3.4 4.5,3.4 4.5,0 3.4,0 3.4,3.4 0,3.4 0,4.5 3.4,4.5 3.4,7.9 4.5,7.9 4.5,4.5' })))), title && _react2.default.createElement('div', { className: 'titlebar-text' }, 'title'));
 	    }
+
+	    // TODO ugly way to fix the styles
+
+	  }, {
+	    key: 'styles',
+	    value: function styles() {
+	      return '.titlebar {\n      padding: 0 3px;\n      display: flex;\n      background-color: #f6f6f6; }\n      .titlebar.transparent {\n        background-color: transparent; }\n      .titlebar.webkit-draggable {\n        -webkit-app-region: drag; }\n      .titlebar.alt svg.fullscreen-svg {\n        display: none; }\n      .titlebar.alt svg.maximize-svg {\n        display: block !important; }\n      .titlebar.webkit-draggable .titlebar-close, .titlebar.webkit-draggable .titlebar-minimize, .titlebar.webkit-draggable .titlebar-fullscreen {\n        -webkit-app-region: no-drag; }\n\n    .titlebar-text {\n      flex-grow: 1;\n      text-align: center;\n      font-family: \'Helvetica Neue\', Helvetica;\n      font-size: 14px;\n      line-height: 24px;\n      -webkit-touch-callout: none;\n      -webkit-user-select: none;\n      user-select: none;\n      cursor: default; }\n\n    .titlebar-stoplight {\n      flex-grow: 0;\n      display: flex; }\n      .titlebar-stoplight .titlebar-close,\n      .titlebar-stoplight .titlebar-minimize,\n      .titlebar-stoplight .titlebar-fullscreen {\n        width: 10px;\n        height: 10px;\n        border-radius: 50%;\n        margin: 6px 4px;\n        line-height: 0; }\n      .titlebar-stoplight .titlebar-close {\n        border: 1px solid #e2463f;\n        background-color: #ff5f57;\n        margin-left: 6px; }\n        .titlebar-stoplight .titlebar-close:active {\n          border-color: #ad3934;\n          background-color: #bf4943; }\n        .titlebar-stoplight .titlebar-close svg {\n          width: 6px;\n          height: 6px;\n          margin-top: 2px;\n          margin-left: 2px;\n          opacity: 0; }\n      .titlebar-stoplight .titlebar-minimize {\n        border: 1px solid #e1a116;\n        background-color: #ffbd2e; }\n        .titlebar-stoplight .titlebar-minimize:active {\n          border-color: #ad7d15;\n          background-color: #bf9123; }\n        .titlebar-stoplight .titlebar-minimize svg {\n          width: 8px;\n          height: 8px;\n          margin-top: 1px;\n          margin-left: 1px;\n          opacity: 0; }\n      .titlebar-stoplight .titlebar-fullscreen,\n      .titlebar-stoplight .titlebar-maximize {\n        border: 1px solid #12ac28;\n        background-color: #28c940; }\n      .titlebar-stoplight .titlebar-fullscreen:active {\n        border-color: #128622;\n        background-color: #1f9a31; }\n      .titlebar-stoplight .titlebar-fullscreen svg.fullscreen-svg {\n        width: 6px;\n        height: 6px;\n        margin-top: 2px;\n        margin-left: 2px;\n        opacity: 0; }\n      .titlebar-stoplight .titlebar-fullscreen svg.maximize-svg {\n        width: 8px;\n        height: 8px;\n        margin-top: 1px;\n        margin-left: 1px;\n        opacity: 0;\n        display: none; }\n      .titlebar-stoplight:hover svg, .titlebar-stoplight:hover svg.fullscreen-svg, .titlebar-stoplight:hover svg.maximize-svg {\n        opacity: 1; }\n\n    .titlebar:after,\n    .titlebar-stoplight:after {\n      content: \' \';\n      display: table;\n      clear: both; }\n';
+	    }
 	  }]);
@@ -248,3 +251,2 @@
 
-
 	Titlebar.propTypes = {
@@ -318,354 +320,6 @@ title: _react.PropTypes.string,
 /* 3 */
-/***/ function(module, exports, __webpack_require__) {
-
-	exports = module.exports = __webpack_require__(4)();
-	// imports
-
-
-	// module
-	exports.push([module.id, ".titlebar {\n  padding: 0 3px;\n  display: flex;\n  background-color: #f6f6f6; }\n  .titlebar.transparent {\n    background-color: transparent; }\n  .titlebar.webkit-draggable {\n    -webkit-app-region: drag; }\n  .titlebar.alt svg.fullscreen-svg {\n    display: none; }\n  .titlebar.alt svg.maximize-svg {\n    display: block !important; }\n  .titlebar.webkit-draggable .titlebar-close,\n  .titlebar.webkit-draggable .titlebar-minimize,\n  .titlebar.webkit-draggable .titlebar-fullscreen {\n    -webkit-app-region: no-drag; }\n\n.titlebar-text {\n  flex-grow: 1;\n  text-align: center;\n  font-family: 'Helvetica Neue', Helvetica;\n  font-size: 14px;\n  line-height: 24px;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  user-select: none;\n  cursor: default; }\n\n.titlebar-stoplight {\n  flex-grow: 0;\n  display: flex; }\n  .titlebar-stoplight .titlebar-close,\n  .titlebar-stoplight .titlebar-minimize,\n  .titlebar-stoplight .titlebar-fullscreen {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    margin: 6px 4px;\n    line-height: 0; }\n  .titlebar-stoplight .titlebar-close {\n    border: 1px solid #e2463f;\n    background-color: #ff5f57;\n    margin-left: 6px; }\n    .titlebar-stoplight .titlebar-close:active {\n      border-color: #ad3934;\n      background-color: #bf4943; }\n    .titlebar-stoplight .titlebar-close svg {\n      width: 6px;\n      height: 6px;\n      margin-top: 2px;\n      margin-left: 2px;\n      opacity: 0; }\n  .titlebar-stoplight .titlebar-minimize {\n    border: 1px solid #e1a116;\n    background-color: #ffbd2e; }\n    .titlebar-stoplight .titlebar-minimize:active {\n      border-color: #ad7d15;\n      background-color: #bf9123; }\n    .titlebar-stoplight .titlebar-minimize svg {\n      width: 8px;\n      height: 8px;\n      margin-top: 1px;\n      margin-left: 1px;\n      opacity: 0; }\n  .titlebar-stoplight .titlebar-fullscreen,\n  .titlebar-stoplight .titlebar-maximize {\n    border: 1px solid #12ac28;\n    background-color: #28c940; }\n  .titlebar-stoplight .titlebar-fullscreen:active {\n    border-color: #128622;\n    background-color: #1f9a31; }\n  .titlebar-stoplight .titlebar-fullscreen svg.fullscreen-svg {\n    width: 6px;\n    height: 6px;\n    margin-top: 2px;\n    margin-left: 2px;\n    opacity: 0; }\n  .titlebar-stoplight .titlebar-fullscreen svg.maximize-svg {\n    width: 8px;\n    height: 8px;\n    margin-top: 1px;\n    margin-left: 1px;\n    opacity: 0;\n    display: none; }\n  .titlebar-stoplight:hover svg,\n  .titlebar-stoplight:hover svg.fullscreen-svg,\n  .titlebar-stoplight:hover svg.maximize-svg {\n    opacity: 1; }\n\n.titlebar:after,\n.titlebar-stoplight:after {\n  content: ' ';\n  display: table;\n  clear: both; }\n", ""]);
-
-	// exports
-
-
-/***/ },
-/* 4 */
 /***/ function(module, exports) {
 
-	/*
-		MIT License http://www.opensource.org/licenses/mit-license.php
-		Author Tobias Koppers @sokra
-	*/
-	// css base code, injected by the css-loader
-	module.exports = function() {
-		var list = [];
+	module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
 
-		// return the list of modules as css string
-		list.toString = function toString() {
-			var result = [];
-			for(var i = 0; i < this.length; i++) {
-				var item = this[i];
-				if(item[2]) {
-					result.push("@media " + item[2] + "{" + item[1] + "}");
-				} else {
-					result.push(item[1]);
-				}
-			}
-			return result.join("");
-		};
-
-		// import a list of modules into the list
-		list.i = function(modules, mediaQuery) {
-			if(typeof modules === "string")
-				modules = [[null, modules, ""]];
-			var alreadyImportedModules = {};
-			for(var i = 0; i < this.length; i++) {
-				var id = this[i][0];
-				if(typeof id === "number")
-					alreadyImportedModules[id] = true;
-			}
-			for(i = 0; i < modules.length; i++) {
-				var item = modules[i];
-				// skip already imported module
-				// this implementation is not 100% perfect for weird media query combinations
-				//  when a module is imported multiple times with different media queries.
-				//  I hope this will never occur (Hey this way we have smaller bundles)
-				if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
-					if(mediaQuery && !item[2]) {
-						item[2] = mediaQuery;
-					} else if(mediaQuery) {
-						item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
-					}
-					list.push(item);
-				}
-			}
-		};
-		return list;
-	};
-
-
-/***/ },
-/* 5 */
-/***/ function(module, exports, __webpack_require__) {
-
-	/*
-		MIT License http://www.opensource.org/licenses/mit-license.php
-		Author Tobias Koppers @sokra
-	*/
-	var stylesInDom = {},
-		memoize = function(fn) {
-			var memo;
-			return function () {
-				if (typeof memo === "undefined") memo = fn.apply(this, arguments);
-				return memo;
-			};
-		},
-		isOldIE = memoize(function() {
-			return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
-		}),
-		getHeadElement = memoize(function () {
-			return document.head || document.getElementsByTagName("head")[0];
-		}),
-		singletonElement = null,
-		singletonCounter = 0,
-		styleElementsInsertedAtTop = [];
-
-	module.exports = function(list, options) {
-		if(false) {
-			if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
-		}
-
-		options = options || {};
-		// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
-		// tags it will allow on a page
-		if (typeof options.singleton === "undefined") options.singleton = isOldIE();
-
-		// By default, add <style> tags to the bottom of <head>.
-		if (typeof options.insertAt === "undefined") options.insertAt = "bottom";
-
-		var styles = listToStyles(list);
-		addStylesToDom(styles, options);
-
-		return function update(newList) {
-			var mayRemove = [];
-			for(var i = 0; i < styles.length; i++) {
-				var item = styles[i];
-				var domStyle = stylesInDom[item.id];
-				domStyle.refs--;
-				mayRemove.push(domStyle);
-			}
-			if(newList) {
-				var newStyles = listToStyles(newList);
-				addStylesToDom(newStyles, options);
-			}
-			for(var i = 0; i < mayRemove.length; i++) {
-				var domStyle = mayRemove[i];
-				if(domStyle.refs === 0) {
-					for(var j = 0; j < domStyle.parts.length; j++)
-						domStyle.parts[j]();
-					delete stylesInDom[domStyle.id];
-				}
-			}
-		};
-	}
-
-	function addStylesToDom(styles, options) {
-		for(var i = 0; i < styles.length; i++) {
-			var item = styles[i];
-			var domStyle = stylesInDom[item.id];
-			if(domStyle) {
-				domStyle.refs++;
-				for(var j = 0; j < domStyle.parts.length; j++) {
-					domStyle.parts[j](item.parts[j]);
-				}
-				for(; j < item.parts.length; j++) {
-					domStyle.parts.push(addStyle(item.parts[j], options));
-				}
-			} else {
-				var parts = [];
-				for(var j = 0; j < item.parts.length; j++) {
-					parts.push(addStyle(item.parts[j], options));
-				}
-				stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};
-			}
-		}
-	}
-
-	function listToStyles(list) {
-		var styles = [];
-		var newStyles = {};
-		for(var i = 0; i < list.length; i++) {
-			var item = list[i];
-			var id = item[0];
-			var css = item[1];
-			var media = item[2];
-			var sourceMap = item[3];
-			var part = {css: css, media: media, sourceMap: sourceMap};
-			if(!newStyles[id])
-				styles.push(newStyles[id] = {id: id, parts: [part]});
-			else
-				newStyles[id].parts.push(part);
-		}
-		return styles;
-	}
-
-	function insertStyleElement(options, styleElement) {
-		var head = getHeadElement();
-		var lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
-		if (options.insertAt === "top") {
-			if(!lastStyleElementInsertedAtTop) {
-				head.insertBefore(styleElement, head.firstChild);
-			} else if(lastStyleElementInsertedAtTop.nextSibling) {
-				head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling);
-			} else {
-				head.appendChild(styleElement);
-			}
-			styleElementsInsertedAtTop.push(styleElement);
-		} else if (options.insertAt === "bottom") {
-			head.appendChild(styleElement);
-		} else {
-			throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
-		}
-	}
-
-	function removeStyleElement(styleElement) {
-		styleElement.parentNode.removeChild(styleElement);
-		var idx = styleElementsInsertedAtTop.indexOf(styleElement);
-		if(idx >= 0) {
-			styleElementsInsertedAtTop.splice(idx, 1);
-		}
-	}
-
-	function createStyleElement(options) {
-		var styleElement = document.createElement("style");
-		styleElement.type = "text/css";
-		insertStyleElement(options, styleElement);
-		return styleElement;
-	}
-
-	function createLinkElement(options) {
-		var linkElement = document.createElement("link");
-		linkElement.rel = "stylesheet";
-		insertStyleElement(options, linkElement);
-		return linkElement;
-	}
-
-	function addStyle(obj, options) {
-		var styleElement, update, remove;
-
-		if (options.singleton) {
-			var styleIndex = singletonCounter++;
-			styleElement = singletonElement || (singletonElement = createStyleElement(options));
-			update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
-			remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
-		} else if(obj.sourceMap &&
-			typeof URL === "function" &&
-			typeof URL.createObjectURL === "function" &&
-			typeof URL.revokeObjectURL === "function" &&
-			typeof Blob === "function" &&
-			typeof btoa === "function") {
-			styleElement = createLinkElement(options);
-			update = updateLink.bind(null, styleElement);
-			remove = function() {
-				removeStyleElement(styleElement);
-				if(styleElement.href)
-					URL.revokeObjectURL(styleElement.href);
-			};
-		} else {
-			styleElement = createStyleElement(options);
-			update = applyToTag.bind(null, styleElement);
-			remove = function() {
-				removeStyleElement(styleElement);
-			};
-		}
-
-		update(obj);
-
-		return function updateStyle(newObj) {
-			if(newObj) {
-				if(newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap)
-					return;
-				update(obj = newObj);
-			} else {
-				remove();
-			}
-		};
-	}
-
-	var replaceText = (function () {
-		var textStore = [];
-
-		return function (index, replacement) {
-			textStore[index] = replacement;
-			return textStore.filter(Boolean).join('\n');
-		};
-	})();
-
-	function applyToSingletonTag(styleElement, index, remove, obj) {
-		var css = remove ? "" : obj.css;
-
-		if (styleElement.styleSheet) {
-			styleElement.styleSheet.cssText = replaceText(index, css);
-		} else {
-			var cssNode = document.createTextNode(css);
-			var childNodes = styleElement.childNodes;
-			if (childNodes[index]) styleElement.removeChild(childNodes[index]);
-			if (childNodes.length) {
-				styleElement.insertBefore(cssNode, childNodes[index]);
-			} else {
-				styleElement.appendChild(cssNode);
-			}
-		}
-	}
-
-	function applyToTag(styleElement, obj) {
-		var css = obj.css;
-		var media = obj.media;
-
-		if(media) {
-			styleElement.setAttribute("media", media)
-		}
-
-		if(styleElement.styleSheet) {
-			styleElement.styleSheet.cssText = css;
-		} else {
-			while(styleElement.firstChild) {
-				styleElement.removeChild(styleElement.firstChild);
-			}
-			styleElement.appendChild(document.createTextNode(css));
-		}
-	}
-
-	function updateLink(linkElement, obj) {
-		var css = obj.css;
-		var sourceMap = obj.sourceMap;
-
-		if(sourceMap) {
-			// http://stackoverflow.com/a/26603875
-			css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
-		}
-
-		var blob = new Blob([css], { type: "text/css" });
-
-		var oldSrc = linkElement.href;
-
-		linkElement.href = URL.createObjectURL(blob);
-
-		if(oldSrc)
-			URL.revokeObjectURL(oldSrc);
-	}
-
-
-/***/ },
-/* 6 */
-/***/ function(module, exports, __webpack_require__) {
-
-	// style-loader: Adds some css to the DOM by adding a <style> tag
-
-	// load the styles
-	var content = __webpack_require__(3);
-	if(typeof content === 'string') content = [[module.id, content, '']];
-	// add the styles to the DOM
-	var update = __webpack_require__(5)(content, {});
-	if(content.locals) module.exports = content.locals;
-	// Hot Module Replacement
-	if(false) {
-		// When the styles change, update the <style> tags
-		if(!content.locals) {
-			module.hot.accept("!!./../../node_modules/css-loader/index.js!./../../node_modules/sass-loader/index.js!./Titlebar.scss", function() {
-				var newContent = require("!!./../../node_modules/css-loader/index.js!./../../node_modules/sass-loader/index.js!./Titlebar.scss");
-				if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
-				update(newContent);
-			});
-		}
-		// When the module is disposed, remove the <style> tags
-		module.hot.dispose(function() { update(); });
-	}
-
-/***/ },
-/* 7 */
-/***/ function(module, exports) {
-
-	module.exports = __WEBPACK_EXTERNAL_MODULE_7__;
-
 /***/ }
@@ -672,0 +326,0 @@ /******/ ])

umd/ReactTitlebar.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactTitlebar=t(require("react")):e.ReactTitlebar=t(e.React)}(this,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var i=r[n]={exports:{},id:n,loaded:!1};return e[n].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}var i=r(1),o=n(i);e.exports={Titlebar:o.default}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var l=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),s=r(7),p=n(s),c=r(2),u=n(c);r(6);var f=18,d=function(e){function t(e,r){i(this,t);var n=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,r));return n.state={keyAltDown:!1},n.handleMaximize=n.handleMaximize.bind(n),n}return a(t,e),l(t,[{key:"componentDidMount",value:function(){document.body.addEventListener("keydown",this.handleKeyDown.bind(this)),document.body.addEventListener("keyup",this.handleKeyUp.bind(this))}},{key:"componentWillUnMount",value:function(){document.body.removeEventListener("keydown",this.handleKeyDown),document.body.removeEventListener("keyup",this.handleKeyUp)}},{key:"handleKeyDown",value:function(e){e.keyCode===f&&this.setState({keyAltDown:!0})}},{key:"handleKeyUp",value:function(e){e.keyCode===f&&this.setState({keyAltDown:!1})}},{key:"handleMaximize",value:function(){var e=this.props,t=e.onMaximize,r=e.onFullscreen,n=this.state.keyAltDown;n?t():r()}},{key:"render",value:function(){var e=this.props,t=e.draggable,r=e.title,n=e.transparent,i=e.onClose,o=e.onMinimize,a=this.state.keyAltDown,l=(0,u.default)({titlebar:!0,"webkit-draggable":t,transparent:n,alt:a});return p.default.createElement("div",{className:l},p.default.createElement("div",{className:"titlebar-stoplight"},p.default.createElement("div",{className:"titlebar-close",onClick:i},p.default.createElement("svg",{x:"0px",y:"0px",viewBox:"0 0 6.4 6.4"},p.default.createElement("polygon",{fill:"#4d0000",points:"6.4,0.8 5.6,0 3.2,2.4 0.8,0 0,0.8 2.4,3.2 0,5.6 0.8,6.4 3.2,4 5.6,6.4 6.4,5.6 4,3.2"}))),p.default.createElement("div",{className:"titlebar-minimize",onClick:o},p.default.createElement("svg",{x:"0px",y:"0px",viewBox:"0 0 8 1.1"},p.default.createElement("rect",{fill:"#995700",width:"8",height:"1.1"}))),p.default.createElement("div",{className:"titlebar-fullscreen",onClick:this.handleMaximize},p.default.createElement("svg",{className:"fullscreen-svg",x:"0px",y:"0px",viewBox:"0 0 6 5.9"},p.default.createElement("path",{fill:"#006400",d:"M5.4,0h-4L6,4.5V0.6C5.7,0.6,5.3,0.3,5.4,0z"}),p.default.createElement("path",{fill:"#006400",d:"M0.6,5.9h4L0,1.4l0,3.9C0.3,5.3,0.6,5.6,0.6,5.9z"})),p.default.createElement("svg",{className:"maximize-svg",x:"0px",y:"0px",viewBox:"0 0 7.9 7.9"},p.default.createElement("polygon",{fill:"#006400",points:"7.9,4.5 7.9,3.4 4.5,3.4 4.5,0 3.4,0 3.4,3.4 0,3.4 0,4.5 3.4,4.5 3.4,7.9 4.5,7.9 4.5,4.5"})))),r&&p.default.createElement("div",{className:"titlebar-text"},"title"))}}]),t}(p.default.Component);d.defaultProps={draggable:!1,title:null,transparent:!1},d.propTypes={title:s.PropTypes.string,transparent:s.PropTypes.bool,draggable:s.PropTypes.bool,onClose:s.PropTypes.func.isRequired,onMinimize:s.PropTypes.func.isRequired,onMaximize:s.PropTypes.func.isRequired,onFullscreen:s.PropTypes.func.isRequired},t.default=d},function(e,t,r){var n,i;/*!
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactTitlebar=t(require("react")):e.ReactTitlebar=t(e.React)}(this,function(e){return function(e){function t(i){if(n[i])return n[i].exports;var r=n[i]={exports:{},id:i,loaded:!1};return e[i].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}var r=n(1),l=i(r);e.exports={Titlebar:l.default}},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function l(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==("undefined"==typeof t?"undefined":a(t))&&"function"!=typeof t?e:t}function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+("undefined"==typeof t?"undefined":a(t)));e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),c=n(3),p=i(c),u=n(2),d=i(u),f=18,b=function(e){function t(e,n){r(this,t);var i=l(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,n));return i.state={keyAltDown:!1},i.handleMaximize=i.handleMaximize.bind(i),i}return o(t,e),s(t,[{key:"componentDidMount",value:function(){this.setStyleHeader(),document.body.addEventListener("keydown",this.handleKeyDown.bind(this)),document.body.addEventListener("keyup",this.handleKeyUp.bind(this))}},{key:"componentWillUnMount",value:function(){document.body.removeEventListener("keydown",this.handleKeyDown),document.body.removeEventListener("keyup",this.handleKeyUp)}},{key:"handleKeyDown",value:function(e){e.keyCode===f&&this.setState({keyAltDown:!0})}},{key:"handleKeyUp",value:function(e){e.keyCode===f&&this.setState({keyAltDown:!1})}},{key:"handleMaximize",value:function(){var e=this.props,t=e.onMaximize,n=e.onFullscreen,i=this.state.keyAltDown;i?t():n()}},{key:"setStyleHeader",value:function(){if(!document.getElementsByTagName("head")[0].querySelector('style[id="react-titlebar-osx"]')){console.log(this.styles());var e=document.createElement("style");e.id="react-titlebar-osx",e.innerHTML=this.styles(),document.getElementsByTagName("head")[0].appendChild(e)}}},{key:"render",value:function(){var e=this.props,t=e.draggable,n=e.title,i=e.transparent,r=e.onClose,l=e.onMinimize,o=this.state.keyAltDown,a=(0,d.default)({titlebar:!0,"webkit-draggable":t,transparent:i,alt:o});return p.default.createElement("div",{className:a},p.default.createElement("div",{className:"titlebar-stoplight"},p.default.createElement("div",{className:"titlebar-close",onClick:r},p.default.createElement("svg",{x:"0px",y:"0px",viewBox:"0 0 6.4 6.4"},p.default.createElement("polygon",{fill:"#4d0000",points:"6.4,0.8 5.6,0 3.2,2.4 0.8,0 0,0.8 2.4,3.2 0,5.6 0.8,6.4 3.2,4 5.6,6.4 6.4,5.6 4,3.2"}))),p.default.createElement("div",{className:"titlebar-minimize",onClick:l},p.default.createElement("svg",{x:"0px",y:"0px",viewBox:"0 0 8 1.1"},p.default.createElement("rect",{fill:"#995700",width:"8",height:"1.1"}))),p.default.createElement("div",{className:"titlebar-fullscreen",onClick:this.handleMaximize},p.default.createElement("svg",{className:"fullscreen-svg",x:"0px",y:"0px",viewBox:"0 0 6 5.9"},p.default.createElement("path",{fill:"#006400",d:"M5.4,0h-4L6,4.5V0.6C5.7,0.6,5.3,0.3,5.4,0z"}),p.default.createElement("path",{fill:"#006400",d:"M0.6,5.9h4L0,1.4l0,3.9C0.3,5.3,0.6,5.6,0.6,5.9z"})),p.default.createElement("svg",{className:"maximize-svg",x:"0px",y:"0px",viewBox:"0 0 7.9 7.9"},p.default.createElement("polygon",{fill:"#006400",points:"7.9,4.5 7.9,3.4 4.5,3.4 4.5,0 3.4,0 3.4,3.4 0,3.4 0,4.5 3.4,4.5 3.4,7.9 4.5,7.9 4.5,4.5"})))),n&&p.default.createElement("div",{className:"titlebar-text"},"title"))}},{key:"styles",value:function(){return".titlebar {\n      padding: 0 3px;\n      display: flex;\n      background-color: #f6f6f6; }\n      .titlebar.transparent {\n        background-color: transparent; }\n      .titlebar.webkit-draggable {\n        -webkit-app-region: drag; }\n      .titlebar.alt svg.fullscreen-svg {\n        display: none; }\n      .titlebar.alt svg.maximize-svg {\n        display: block !important; }\n      .titlebar.webkit-draggable .titlebar-close, .titlebar.webkit-draggable .titlebar-minimize, .titlebar.webkit-draggable .titlebar-fullscreen {\n        -webkit-app-region: no-drag; }\n\n    .titlebar-text {\n      flex-grow: 1;\n      text-align: center;\n      font-family: 'Helvetica Neue', Helvetica;\n      font-size: 14px;\n      line-height: 24px;\n      -webkit-touch-callout: none;\n      -webkit-user-select: none;\n      user-select: none;\n      cursor: default; }\n\n    .titlebar-stoplight {\n      flex-grow: 0;\n      display: flex; }\n      .titlebar-stoplight .titlebar-close,\n      .titlebar-stoplight .titlebar-minimize,\n      .titlebar-stoplight .titlebar-fullscreen {\n        width: 10px;\n        height: 10px;\n        border-radius: 50%;\n        margin: 6px 4px;\n        line-height: 0; }\n      .titlebar-stoplight .titlebar-close {\n        border: 1px solid #e2463f;\n        background-color: #ff5f57;\n        margin-left: 6px; }\n        .titlebar-stoplight .titlebar-close:active {\n          border-color: #ad3934;\n          background-color: #bf4943; }\n        .titlebar-stoplight .titlebar-close svg {\n          width: 6px;\n          height: 6px;\n          margin-top: 2px;\n          margin-left: 2px;\n          opacity: 0; }\n      .titlebar-stoplight .titlebar-minimize {\n        border: 1px solid #e1a116;\n        background-color: #ffbd2e; }\n        .titlebar-stoplight .titlebar-minimize:active {\n          border-color: #ad7d15;\n          background-color: #bf9123; }\n        .titlebar-stoplight .titlebar-minimize svg {\n          width: 8px;\n          height: 8px;\n          margin-top: 1px;\n          margin-left: 1px;\n          opacity: 0; }\n      .titlebar-stoplight .titlebar-fullscreen,\n      .titlebar-stoplight .titlebar-maximize {\n        border: 1px solid #12ac28;\n        background-color: #28c940; }\n      .titlebar-stoplight .titlebar-fullscreen:active {\n        border-color: #128622;\n        background-color: #1f9a31; }\n      .titlebar-stoplight .titlebar-fullscreen svg.fullscreen-svg {\n        width: 6px;\n        height: 6px;\n        margin-top: 2px;\n        margin-left: 2px;\n        opacity: 0; }\n      .titlebar-stoplight .titlebar-fullscreen svg.maximize-svg {\n        width: 8px;\n        height: 8px;\n        margin-top: 1px;\n        margin-left: 1px;\n        opacity: 0;\n        display: none; }\n      .titlebar-stoplight:hover svg, .titlebar-stoplight:hover svg.fullscreen-svg, .titlebar-stoplight:hover svg.maximize-svg {\n        opacity: 1; }\n\n    .titlebar:after,\n    .titlebar-stoplight:after {\n      content: ' ';\n      display: table;\n      clear: both; }\n"}}]),t}(p.default.Component);b.defaultProps={draggable:!1,title:null,transparent:!1},b.propTypes={title:c.PropTypes.string,transparent:c.PropTypes.bool,draggable:c.PropTypes.bool,onClose:c.PropTypes.func.isRequired,onMinimize:c.PropTypes.func.isRequired,onMaximize:c.PropTypes.func.isRequired,onFullscreen:c.PropTypes.func.isRequired},t.default=b},function(e,t,n){var i,r;/*!
 	  Copyright (c) 2016 Jed Watson.
@@ -6,2 +6,2 @@ Licensed under the MIT License (MIT), see
 	*/
-!function(){"use strict";function r(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var i=typeof n;if("string"===i||"number"===i)e.push(n);else if(Array.isArray(n))e.push(r.apply(null,n));else if("object"===i)for(var a in n)o.call(n,a)&&n[a]&&e.push(a)}}return e.join(" ")}var o={}.hasOwnProperty;"undefined"!=typeof e&&e.exports?e.exports=r:(n=[],i=function(){return r}.apply(t,n),!(void 0!==i&&(e.exports=i)))}()},function(e,t,r){t=e.exports=r(4)(),t.push([e.id,'.titlebar{padding:0 3px;display:flex;background-color:#f6f6f6}.titlebar.transparent{background-color:transparent}.titlebar.webkit-draggable{-webkit-app-region:drag}.titlebar.alt svg.fullscreen-svg{display:none}.titlebar.alt svg.maximize-svg{display:block!important}.titlebar.webkit-draggable .titlebar-close,.titlebar.webkit-draggable .titlebar-fullscreen,.titlebar.webkit-draggable .titlebar-minimize{-webkit-app-region:no-drag}.titlebar-text{flex-grow:1;text-align:center;font-family:Helvetica Neue,Helvetica;font-size:14px;line-height:24px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:default}.titlebar-stoplight{flex-grow:0;display:flex}.titlebar-stoplight .titlebar-close,.titlebar-stoplight .titlebar-fullscreen,.titlebar-stoplight .titlebar-minimize{width:10px;height:10px;border-radius:50%;margin:6px 4px;line-height:0}.titlebar-stoplight .titlebar-close{border:1px solid #e2463f;background-color:#ff5f57;margin-left:6px}.titlebar-stoplight .titlebar-close:active{border-color:#ad3934;background-color:#bf4943}.titlebar-stoplight .titlebar-close svg{width:6px;height:6px;margin-top:2px;margin-left:2px;opacity:0}.titlebar-stoplight .titlebar-minimize{border:1px solid #e1a116;background-color:#ffbd2e}.titlebar-stoplight .titlebar-minimize:active{border-color:#ad7d15;background-color:#bf9123}.titlebar-stoplight .titlebar-minimize svg{width:8px;height:8px;margin-top:1px;margin-left:1px;opacity:0}.titlebar-stoplight .titlebar-fullscreen,.titlebar-stoplight .titlebar-maximize{border:1px solid #12ac28;background-color:#28c940}.titlebar-stoplight .titlebar-fullscreen:active{border-color:#128622;background-color:#1f9a31}.titlebar-stoplight .titlebar-fullscreen svg.fullscreen-svg{width:6px;height:6px;margin-top:2px;margin-left:2px;opacity:0}.titlebar-stoplight .titlebar-fullscreen svg.maximize-svg{width:8px;height:8px;margin-top:1px;margin-left:1px;opacity:0;display:none}.titlebar-stoplight:hover svg,.titlebar-stoplight:hover svg.fullscreen-svg,.titlebar-stoplight:hover svg.maximize-svg{opacity:1}.titlebar-stoplight:after,.titlebar:after{content:" ";display:table;clear:both}',""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var r=this[t];r[2]?e.push("@media "+r[2]+"{"+r[1]+"}"):e.push(r[1])}return e.join("")},e.i=function(t,r){"string"==typeof t&&(t=[[null,t,""]]);for(var n={},i=0;i<this.length;i++){var o=this[i][0];"number"==typeof o&&(n[o]=!0)}for(i=0;i<t.length;i++){var a=t[i];"number"==typeof a[0]&&n[a[0]]||(r&&!a[2]?a[2]=r:r&&(a[2]="("+a[2]+") and ("+r+")"),e.push(a))}},e}},function(e,t,r){function n(e,t){for(var r=0;r<e.length;r++){var n=e[r],i=d[n.id];if(i){i.refs++;for(var o=0;o<i.parts.length;o++)i.parts[o](n.parts[o]);for(;o<n.parts.length;o++)i.parts.push(p(n.parts[o],t))}else{for(var a=[],o=0;o<n.parts.length;o++)a.push(p(n.parts[o],t));d[n.id]={id:n.id,refs:1,parts:a}}}}function i(e){for(var t=[],r={},n=0;n<e.length;n++){var i=e[n],o=i[0],a=i[1],l=i[2],s=i[3],p={css:a,media:l,sourceMap:s};r[o]?r[o].parts.push(p):t.push(r[o]={id:o,parts:[p]})}return t}function o(e,t){var r=g(),n=y[y.length-1];if("top"===e.insertAt)n?n.nextSibling?r.insertBefore(t,n.nextSibling):r.appendChild(t):r.insertBefore(t,r.firstChild),y.push(t);else{if("bottom"!==e.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");r.appendChild(t)}}function a(e){e.parentNode.removeChild(e);var t=y.indexOf(e);t>=0&&y.splice(t,1)}function l(e){var t=document.createElement("style");return t.type="text/css",o(e,t),t}function s(e){var t=document.createElement("link");return t.rel="stylesheet",o(e,t),t}function p(e,t){var r,n,i;if(t.singleton){var o=m++;r=v||(v=l(t)),n=c.bind(null,r,o,!1),i=c.bind(null,r,o,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(r=s(t),n=f.bind(null,r),i=function(){a(r),r.href&&URL.revokeObjectURL(r.href)}):(r=l(t),n=u.bind(null,r),i=function(){a(r)});return n(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;n(e=t)}else i()}}function c(e,t,r,n){var i=r?"":n.css;if(e.styleSheet)e.styleSheet.cssText=x(t,i);else{var o=document.createTextNode(i),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(o,a[t]):e.appendChild(o)}}function u(e,t){var r=t.css,n=t.media;if(n&&e.setAttribute("media",n),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}function f(e,t){var r=t.css,n=t.sourceMap;n&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */");var i=new Blob([r],{type:"text/css"}),o=e.href;e.href=URL.createObjectURL(i),o&&URL.revokeObjectURL(o)}var d={},b=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},h=b(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),g=b(function(){return document.head||document.getElementsByTagName("head")[0]}),v=null,m=0,y=[];e.exports=function(e,t){t=t||{},"undefined"==typeof t.singleton&&(t.singleton=h()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var r=i(e);return n(r,t),function(e){for(var o=[],a=0;a<r.length;a++){var l=r[a],s=d[l.id];s.refs--,o.push(s)}if(e){var p=i(e);n(p,t)}for(var a=0;a<o.length;a++){var s=o[a];if(0===s.refs){for(var c=0;c<s.parts.length;c++)s.parts[c]();delete d[s.id]}}}};var x=function(){var e=[];return function(t,r){return e[t]=r,e.filter(Boolean).join("\n")}}()},function(e,t,r){var n=r(3);"string"==typeof n&&(n=[[e.id,n,""]]);r(5)(n,{});n.locals&&(e.exports=n.locals)},function(t,r){t.exports=e}])});
+!function(){"use strict";function n(){for(var e=[],t=0;t<arguments.length;t++){var i=arguments[t];if(i){var r=typeof i;if("string"===r||"number"===r)e.push(i);else if(Array.isArray(i))e.push(n.apply(null,i));else if("object"===r)for(var o in i)l.call(i,o)&&i[o]&&e.push(o)}}return e.join(" ")}var l={}.hasOwnProperty;"undefined"!=typeof e&&e.exports?e.exports=n:(i=[],r=function(){return n}.apply(t,i),!(void 0!==r&&(e.exports=r)))}()},function(t,n){t.exports=e}])});

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 3 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

3

decreased by-99.25%

Worsened metrics

Total package byte prevSize

51601

decreased by-93.92%

Dependency count

6

increased by20%

Dev dependency count

17

increased by6.25%

Number of package files

11

decreased by-38.89%

Lines of code

874

decreased by-95.68%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addeddefaultcss@^1.1.1

• + Addeddefaultcss@1.1.1(transitive)