@hig/side-nav - npm Package Compare versions

Comparing version 0.1.0-alpha.57ad3f84 to 0.1.0-alpha.640d189a

build/index.es.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import Icon, { names, sizes } from '@hig/icon';
@@ -8,58 +9,2 @@ import { ThemeContext } from '@hig/themes';
 
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
-
-var classnames = createCommonjsModule(function (module) {
-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; };
-
-/*!
-  Copyright (c) 2016 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
-*/
-/* global define */
-
-(function () {
-
-	var hasOwn = {}.hasOwnProperty;
-
-	function classNames() {
-		var classes = [];
-
-		for (var i = 0; i < arguments.length; i++) {
-			var arg = arguments[i];
-			if (!arg) continue;
-
-			var argType = typeof arg === 'undefined' ? 'undefined' : _typeof(arg);
-
-			if (argType === 'string' || argType === 'number') {
-				classes.push(arg);
-			} else if (Array.isArray(arg)) {
-				classes.push(classNames.apply(null, arg));
-			} else if (argType === 'object') {
-				for (var key in arg) {
-					if (hasOwn.call(arg, key) && arg[key]) {
-						classes.push(key);
-					}
-				}
-			}
-		}
-
-		return classes.join(' ');
-	}
-
-	if ('object' !== 'undefined' && module.exports) {
-		module.exports = classNames;
-	} else if (typeof undefined === 'function' && _typeof(undefined.amd) === 'object' && undefined.amd) {
-		// register as 'classnames', consistent with npm package name
-		undefined('classnames', [], function () {
-			return classNames;
-		});
-	} else {
-		window.classNames = classNames;
-	}
-})();
-});
-
 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; }; }();
@@ -92,3 +37,3 @@
       var classes = function classes(themeClass) {
-        return classnames(themeClass, "hig__side-nav__module__collapse-button", {
+        return cx(themeClass, "hig__side-nav__module__collapse-button", {
           "hig__side-nav__module__collapse-button--collapsed": minimized
@@ -183,6 +128,8 @@ });
     value: function render() {
-      var _this2 = this;
+      var _props = this.props,
+          intro = _props.intro,
+          children = _props.children;
 
       var classes = function classes(themeClass) {
-        return classnames(themeClass, "hig__side-nav__group");
+        return cx(themeClass, "hig__side-nav__group");
       };
@@ -198,3 +145,8 @@
             { className: classes(themeClass) },
-            _this2.props.children
+            intro && React.createElement(
+              "div",
+              { className: "hig__side-nav__group__intro" },
+              intro
+            ),
+            children
           );
@@ -210,2 +162,4 @@ }
 Group.propTypes = {
+  /** A slot for arbitrary content to render above the Modules */
+  intro: PropTypes.node,
   /** One or more SideNav Modules */
@@ -218,2 +172,9 @@ children: PropTypes.node
   "props": {
+    "intro": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "A slot for arbitrary content to render above the Modules"
+    },
     "children": {
@@ -325,5 +286,7 @@ "type": {
       var classes = function classes(themeClass) {
-        return classnames(themeClass, "hig__side-nav__link");
+        return cx(themeClass, "hig__side-nav__link");
       };
 
+      var Wrapper = link ? "a" : "div";
+
       return React.createElement(
@@ -335,3 +298,3 @@ ThemeContext.Consumer,
           return React.createElement(
-            "a",
+            Wrapper,
             {
@@ -478,7 +441,7 @@ className: classes(themeClass),
       var classes = function classes(themeClass) {
-        return classnames(themeClass, "hig__side-nav__module");
+        return cx(themeClass, "hig__side-nav__module");
       };
 
       var linkClasses = function linkClasses(themeClass) {
-        return classnames(themeClass, "hig__side-nav__module__link", {
+        return cx(themeClass, "hig__side-nav__module__link", {
           "hig__side-nav__module__link--active": active,
@@ -489,6 +452,8 @@ "hig__side-nav__module__link--active-children": activeChildren
 
-      var submodulesClasses = classnames("hig__side-nav__module__submodules", {
+      var submodulesClasses = cx("hig__side-nav__module__submodules", {
         "hig__side-nav__module__submodules--no-icon": !icon
       });
 
+      var Wrapper = link ? "a" : "div";
+
       return React.createElement(
@@ -506,3 +471,3 @@ ThemeContext.Consumer,
               React.createElement(
-                "a",
+                Wrapper,
                 {
@@ -914,4 +879,143 @@ className: linkClasses(themeClass),
 
+var ModuleCompact = function (_Component) {
+  _inherits$6(ModuleCompact, _Component);
+
+  function ModuleCompact() {
+    _classCallCheck$6(this, ModuleCompact);
+
+    return _possibleConstructorReturn$6(this, (ModuleCompact.__proto__ || Object.getPrototypeOf(ModuleCompact)).apply(this, arguments));
+  }
+
+  _createClass$6(ModuleCompact, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          active = _props.active,
+          activeChildren = _props.activeChildren,
+          icon = _props.icon,
+          onClickTitle = _props.onClickTitle,
+          onMouseOver = _props.onMouseOver;
+
+      var classes = function classes(themeClass) {
+        return cx(themeClass, "hig__side-nav__module");
+      };
+
+      var linkClasses = function linkClasses(themeClass) {
+        return cx(themeClass, "hig__side-nav__module__link", {
+          "hig__side-nav__module__link--active": active,
+          "hig__side-nav__module__link--active-children": activeChildren
+        });
+      };
+
+      return React.createElement(
+        ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var themeClass = _ref.themeClass;
+          return React.createElement(
+            "div",
+            { className: classes(themeClass), onMouseOver: onMouseOver },
+            React.createElement(
+              "div",
+              { className: "hig__side-nav__module__row" },
+              React.createElement(
+                "div",
+                {
+                  className: linkClasses(themeClass),
+                  onClick: onClickTitle,
+                  role: "button",
+                  tabIndex: 0
+                },
+                React.createElement(
+                  "div",
+                  { className: "hig__side-nav__module__link__icon" },
+                  icon
+                )
+              )
+            )
+          );
+        }
+      );
+    }
+  }]);
+
+  return ModuleCompact;
+}(Component);
+
+ModuleCompact.propTypes = {
+  /** Indicates this module is currently active */
+  active: PropTypes.bool,
+  /** Indicates a nested submodule is currently active */
+  activeChildren: PropTypes.bool,
+  /** An instance of @hig/icon */
+  icon: PropTypes.node.isRequired,
+  /** Called when clicking on the title */
+  onClickTitle: PropTypes.func,
+  /** Called when hovering over the icon */
+  onMouseOver: PropTypes.func
+};
+ModuleCompact.defaultProps = {
+  onClickTitle: function onClickTitle() {},
+  onMouseOver: function onMouseOver() {}
+};
+ModuleCompact.__docgenInfo = {
+  "description": "",
+  "displayName": "ModuleCompact",
+  "props": {
+    "active": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates this module is currently active"
+    },
+    "activeChildren": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates a nested submodule is currently active"
+    },
+    "icon": {
+      "type": {
+        "name": "node"
+      },
+      "required": true,
+      "description": "An instance of @hig/icon"
+    },
+    "onClickTitle": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when clicking on the title",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    },
+    "onMouseOver": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when hovering over the icon",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    }
+  }
+};
+
+var _createClass$7 = 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; }; }();
+
+function _classCallCheck$7(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$7(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$7(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 Submodule = function (_Component) {
-  _inherits$6(Submodule, _Component);
+  _inherits$7(Submodule, _Component);
 
@@ -923,3 +1027,3 @@ function Submodule() {
 
-    _classCallCheck$6(this, Submodule);
+    _classCallCheck$7(this, Submodule);
 
@@ -930,8 +1034,8 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn$6(this, (_ref = Submodule.__proto__ || Object.getPrototypeOf(Submodule)).call.apply(_ref, [this].concat(args))), _this), _this._renderExternalLinkIcon = function () {
+    return _ret = (_temp = (_this = _possibleConstructorReturn$7(this, (_ref = Submodule.__proto__ || Object.getPrototypeOf(Submodule)).call.apply(_ref, [this].concat(args))), _this), _this._renderExternalLinkIcon = function () {
       return _this.props.target === "_blank" && React.createElement(ExternalLinkIcon, { size: sizes.PX_16 });
-    }, _temp), _possibleConstructorReturn$6(_this, _ret);
+    }, _temp), _possibleConstructorReturn$7(_this, _ret);
   }
 
-  _createClass$6(Submodule, [{
+  _createClass$7(Submodule, [{
     key: "render",
@@ -951,3 +1055,3 @@ value: function render() {
       var classes = function classes(themeClass) {
-        return classnames(themeClass, "hig__side-nav__submodule", {
+        return cx(themeClass, "hig__side-nav__submodule", {
           "hig__side-nav__submodule--active": active
@@ -957,2 +1061,4 @@ });
 
+      var Wrapper = link ? "a" : "div";
+
       return React.createElement(
@@ -964,3 +1070,3 @@ ThemeContext.Consumer,
           return React.createElement(
-            "a",
+            Wrapper,
             {
@@ -1060,12 +1166,12 @@ className: classes(themeClass),
 
-var _createClass$7 = 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$8 = 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; }; }();
 
-function _classCallCheck$7(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _classCallCheck$8(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _possibleConstructorReturn$7(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 _possibleConstructorReturn$8(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$7(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; }
+function _inherits$8(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 SideNav = function (_Component) {
-  _inherits$7(SideNav, _Component);
+  _inherits$8(SideNav, _Component);
 
@@ -1077,3 +1183,3 @@ function SideNav() {
 
-    _classCallCheck$7(this, SideNav);
+    _classCallCheck$8(this, SideNav);
 
@@ -1084,3 +1190,3 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn$7(this, (_ref = SideNav.__proto__ || Object.getPrototypeOf(SideNav)).call.apply(_ref, [this].concat(args))), _this), _this._renderHeaders = function () {
+    return _ret = (_temp = (_this = _possibleConstructorReturn$8(this, (_ref = SideNav.__proto__ || Object.getPrototypeOf(SideNav)).call.apply(_ref, [this].concat(args))), _this), _this._renderHeaders = function () {
       var _this$props = _this.props,
@@ -1097,2 +1203,5 @@ headerLabel = _this$props.headerLabel,
 
+      var SuperHeaderWrapper = superHeaderLink ? "a" : "div";
+      var HeaderWrapper = headerLink ? "a" : "div";
+
       return React.createElement(
@@ -1105,3 +1214,3 @@ "div",
           React.createElement(
-            "a",
+            SuperHeaderWrapper,
             {
@@ -1118,4 +1227,7 @@ className: "hig__side-nav__super-header-link",
           React.createElement(
-            "a",
-            { className: "hig__side-nav__header-link", href: headerLink },
+            HeaderWrapper,
+            {
+              className: "hig__side-nav__header-link",
+              href: headerLink
+            },
             headerLabel
@@ -1125,6 +1237,6 @@ )
       );
-    }, _temp), _possibleConstructorReturn$7(_this, _ret);
+    }, _temp), _possibleConstructorReturn$8(_this, _ret);
   }
 
-  _createClass$7(SideNav, [{
+  _createClass$8(SideNav, [{
     key: "render",
@@ -1144,3 +1256,3 @@ value: function render() {
       var classes = function classes(themeClass) {
-        return classnames(themeClass, "hig__side-nav");
+        return cx(themeClass, "hig__side-nav");
       };
@@ -1314,9 +1426,9 @@
 
-var _createClass$8 = 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$9 = 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; }; }();
 
-function _classCallCheck$8(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _classCallCheck$9(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _possibleConstructorReturn$8(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 _possibleConstructorReturn$9(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$8(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; }
+function _inherits$9(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; }
 
@@ -1352,11 +1464,11 @@ var skeletonItemStyles = Object.freeze([{
 var SideNavSkeleton = function (_Component) {
-  _inherits$8(SideNavSkeleton, _Component);
+  _inherits$9(SideNavSkeleton, _Component);
 
   function SideNavSkeleton() {
-    _classCallCheck$8(this, SideNavSkeleton);
+    _classCallCheck$9(this, SideNavSkeleton);
 
-    return _possibleConstructorReturn$8(this, (SideNavSkeleton.__proto__ || Object.getPrototypeOf(SideNavSkeleton)).apply(this, arguments));
+    return _possibleConstructorReturn$9(this, (SideNavSkeleton.__proto__ || Object.getPrototypeOf(SideNavSkeleton)).apply(this, arguments));
   }
 
-  _createClass$8(SideNavSkeleton, [{
+  _createClass$9(SideNavSkeleton, [{
     key: "render",
@@ -1371,3 +1483,3 @@ value: function render() {
             "div",
-            { className: classnames("hig__side-nav-skeleton", themeClass) },
+            { className: cx("hig__side-nav-skeleton", themeClass) },
             skeletonItemStyles.map(function (style, index) {
@@ -1392,26 +1504,30 @@ return (
 
-var _createClass$9 = 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$10 = 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; }; }();
 
-function _classCallCheck$9(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _classCallCheck$10(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _possibleConstructorReturn$9(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 _possibleConstructorReturn$10(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$9(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; }
+function _inherits$10(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 Docked = function (_Component) {
-  _inherits$9(Docked, _Component);
+  _inherits$10(Docked, _Component);
 
   function Docked() {
-    _classCallCheck$9(this, Docked);
+    _classCallCheck$10(this, Docked);
 
-    return _possibleConstructorReturn$9(this, (Docked.__proto__ || Object.getPrototypeOf(Docked)).apply(this, arguments));
+    return _possibleConstructorReturn$10(this, (Docked.__proto__ || Object.getPrototypeOf(Docked)).apply(this, arguments));
   }
 
-  _createClass$9(Docked, [{
+  _createClass$10(Docked, [{
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _props = this.props,
+          children = _props.children,
+          onMouseLeave = _props.onMouseLeave,
+          onMouseEnter = _props.onMouseEnter;
 
+
       var classes = function classes(themeClass) {
-        return classnames(themeClass, "hig__side-nav-container--docked");
+        return cx(themeClass, "hig__side-nav-container--docked");
       };
@@ -1426,4 +1542,8 @@
             "div",
-            { className: classes(themeClass) },
-            _this2.props.children
+            {
+              className: classes(themeClass),
+              onMouseEnter: onMouseEnter,
+              onMouseLeave: onMouseLeave
+            },
+            children
           );
@@ -1440,4 +1560,12 @@ }
   /** A SideNav element */
-  children: PropTypes.node
+  children: PropTypes.node,
+  /** Called when beginning to hover over the container */
+  onMouseEnter: PropTypes.func,
+  /** Called when no longer hovering over the container */
+  onMouseLeave: PropTypes.func
 };
+Docked.defaultProps = {
+  onMouseLeave: function onMouseLeave() {},
+  onMouseEnter: function onMouseEnter() {}
+};
 Docked.__docgenInfo = {
@@ -1453,2 +1581,24 @@ "description": "",
       "description": "A SideNav element"
+    },
+    "onMouseEnter": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when beginning to hover over the container",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    },
+    "onMouseLeave": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when no longer hovering over the container",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
     }
@@ -1458,26 +1608,30 @@ }
 
-var _createClass$10 = 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$11 = 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; }; }();
 
-function _classCallCheck$10(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _classCallCheck$11(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _possibleConstructorReturn$10(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 _possibleConstructorReturn$11(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$10(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; }
+function _inherits$11(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 BelowTopNav = function (_Component) {
-  _inherits$10(BelowTopNav, _Component);
+  _inherits$11(BelowTopNav, _Component);
 
   function BelowTopNav() {
-    _classCallCheck$10(this, BelowTopNav);
+    _classCallCheck$11(this, BelowTopNav);
 
-    return _possibleConstructorReturn$10(this, (BelowTopNav.__proto__ || Object.getPrototypeOf(BelowTopNav)).apply(this, arguments));
+    return _possibleConstructorReturn$11(this, (BelowTopNav.__proto__ || Object.getPrototypeOf(BelowTopNav)).apply(this, arguments));
   }
 
-  _createClass$10(BelowTopNav, [{
+  _createClass$11(BelowTopNav, [{
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _props = this.props,
+          children = _props.children,
+          onMouseLeave = _props.onMouseLeave,
+          onMouseEnter = _props.onMouseEnter;
 
+
       var classes = function classes(themeClass) {
-        return classnames(themeClass, "hig__side-nav-container--below-top-nav");
+        return cx(themeClass, "hig__side-nav-container--below-top-nav");
       };
@@ -1492,4 +1646,8 @@
             "div",
-            { className: classes(themeClass) },
-            _this2.props.children
+            {
+              className: classes(themeClass),
+              onMouseEnter: onMouseEnter,
+              onMouseLeave: onMouseLeave
+            },
+            children
           );
@@ -1506,3 +1664,7 @@ }
   /** A SideNav element */
-  children: PropTypes.node
+  children: PropTypes.node,
+  /** Called when beginning to hover over the container */
+  onMouseEnter: PropTypes.func,
+  /** Called when no longer hovering over the container */
+  onMouseLeave: PropTypes.func
 };
@@ -1519,2 +1681,16 @@ BelowTopNav.__docgenInfo = {
       "description": "A SideNav element"
+    },
+    "onMouseEnter": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when beginning to hover over the container"
+    },
+    "onMouseLeave": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when no longer hovering over the container"
     }
@@ -1524,2 +1700,90 @@ }
 
+var _createClass$12 = 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; }; }();
+
+function _classCallCheck$12(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$12(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$12(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 BelowTopNavCompact = function (_Component) {
+  _inherits$12(BelowTopNavCompact, _Component);
+
+  function BelowTopNavCompact() {
+    _classCallCheck$12(this, BelowTopNavCompact);
+
+    return _possibleConstructorReturn$12(this, (BelowTopNavCompact.__proto__ || Object.getPrototypeOf(BelowTopNavCompact)).apply(this, arguments));
+  }
+
+  _createClass$12(BelowTopNavCompact, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          children = _props.children,
+          onMouseLeave = _props.onMouseLeave,
+          onMouseEnter = _props.onMouseEnter;
+
+
+      var classes = function classes(themeClass) {
+        return cx(themeClass, "hig__side-nav-container--below-top-nav-compact");
+      };
+
+      return React.createElement(
+        ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var themeClass = _ref.themeClass;
+          return React.createElement(
+            "div",
+            {
+              className: classes(themeClass),
+              onMouseEnter: onMouseEnter,
+              onMouseLeave: onMouseLeave
+            },
+            children
+          );
+        }
+      );
+    }
+  }]);
+
+  return BelowTopNavCompact;
+}(Component);
+
+BelowTopNavCompact.propTypes = {
+  /** A SideNav element */
+  children: PropTypes.node,
+  /** Called when beginning to hover over the container */
+  onMouseEnter: PropTypes.func,
+  /** Called when no longer hovering over the container */
+  onMouseLeave: PropTypes.func
+};
+BelowTopNavCompact.__docgenInfo = {
+  "description": "",
+  "displayName": "BelowTopNavCompact",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "A SideNav element"
+    },
+    "onMouseEnter": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when beginning to hover over the container"
+    },
+    "onMouseLeave": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when no longer hovering over the container"
+    }
+  }
+};
+
 SideNav.CollapseButton = CollapseButton;
@@ -1529,5 +1793,6 @@ SideNav.Group = Group;
 SideNav.Module = Module$1;
+SideNav.ModuleCompact = ModuleCompact;
 SideNav.Submodule = Submodule;
 
 export default SideNav;
-export { SideNavSkeleton, Docked, BelowTopNav };
+export { SideNavSkeleton, Docked, BelowTopNav, BelowTopNavCompact };

package.json

 {
   "name": "@hig/side-nav",
-  "version": "0.1.0-alpha.57ad3f84",
+  "version": "0.1.0-alpha.640d189a",
   "description": "HIG SideNav components",
@@ -18,11 +18,12 @@ "author": "Autodesk Inc.",
   "dependencies": {
-    "@hig/icon": "0.1.0-alpha.57ad3f84",
-    "@hig/icon-button": "0.1.0-alpha.57ad3f84",
-    "@hig/skeleton-item": "0.1.0-alpha.57ad3f84",
-    "@hig/themes": "0.1.0-alpha.57ad3f84"
+    "@hig/icon": "0.1.0-alpha.640d189a",
+    "@hig/icon-button": "0.1.0-alpha.640d189a",
+    "@hig/skeleton-item": "0.1.0-alpha.640d189a",
+    "@hig/themes": "0.1.0-alpha.640d189a",
+    "classnames": "^2.2.5"
   },
   "devDependencies": {
-    "@hig/babel-preset": "0.2.0-alpha.57ad3f84",
-    "@hig/scripts": "0.2.0-alpha.57ad3f84",
-    "@hig/styles": "0.1.0-alpha.57ad3f84"
+    "@hig/babel-preset": "0.2.0-alpha.640d189a",
+    "@hig/scripts": "0.2.0-alpha.640d189a",
+    "@hig/styles": "0.1.0-alpha.640d189a"
   },
@@ -29,0 +30,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Improved metrics

Total package byte prevSize

214156

increased by11.27%

Lines of code

4855

increased by13.59%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Addedclassnames@^2.2.5

• + Added@hig/icon@0.1.0-alpha.640d189a(transitive)

• + Added@hig/icon-button@0.1.0-alpha.640d189a(transitive)

• + Added@hig/icons@0.1.0-alpha.640d189a(transitive)

• + Added@hig/skeleton-item@0.1.0-alpha.640d189a(transitive)

• + Added@hig/themes@0.1.0-alpha.640d189a(transitive)

• + Addedclassnames@2.5.1(transitive)

• - Removed@hig/icon@0.1.0-alpha.57ad3f84(transitive)

• - Removed@hig/icon-button@0.1.0-alpha.57ad3f84(transitive)

• - Removed@hig/icons@0.1.0-alpha.57ad3f84(transitive)

• - Removed@hig/skeleton-item@0.1.0-alpha.57ad3f84(transitive)

• - Removed@hig/themes@0.1.0-alpha.57ad3f84(transitive)

• Updated@hig/icon@0.1.0-alpha.640d189a

• Updated@hig/icon-button@0.1.0-alpha.640d189a

• Updated@hig/skeleton-item@0.1.0-alpha.640d189a

• Updated@hig/themes@0.1.0-alpha.640d189a