v2.1.2

CHANGELOG.md

@@ -1,24 +1,33 @@
 ### [@coreui/react](https://coreui.io/) changelog
 
+##### `v2.1.2`
+- refactor: remove `element-closest` dependency issue #37 #50
+- chore: update `core-js` to `2.6.1`
+- chore: update `enzyme` to `3.8.0`
+- chore: update `enzyme-adapter-react-16` to `1.7.1`
+- chore: update `eslint` to `5.10.0`
+- chore: update `react` to `16.7.0`
+- chore: update `react-dom` to `16.7.0`
+
 ##### `v2.1.1`
-chore: update `enzyme-adapter-react-16` to `1.7.0`
-chore: update `eslint` to `5.9.0`
-chore: update `react-dom` to `16.6.3`
-chore: update `react` to `16.6.3`
+- chore: update `enzyme-adapter-react-16` to `1.7.0`
+- chore: update `eslint` to `5.9.0`
+- chore: update `react-dom` to `16.6.3`
+- chore: update `react` to `16.6.3`
 
 ##### `v2.1.0`
 - feat(SidebarNav): navLink `attributes` - optional JS object with valid JS API naming:
   - valid attributes: `rel`, `target`, `hidden`, `disabled`, etc...
   - item example:
-      ```js
-      {
-        name: 'Try CoreUI PRO',
-        url: 'https://coreui.io/pro/react/',
-        icon: 'cui-layers icons',
-        variant: 'danger',
-        attributes: { target: '_blank', rel: "noopener" },
-      },
-      ```
+    ```
+    {
+    name: 'Try CoreUI PRO',
+    url: 'https://coreui.io/pro/react/',
+    icon: 'cui-layers icons',
+    variant: 'danger',
+    attributes: { target: '_blank', rel: "noopener" },
+    },
+    ```
 - update `@coreui/coreui` to `2.1.0` - sidebar-nav-link-disabled-*
 - chore: update `react-perfect-scrollbar` to `1.4.2`
 - chore: update `eslint` to `5.8.0`

demo/src/polyfill.js

@@ -26,8 +26,6 @@ import 'core-js/es7/object'
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
 // import 'core-js/es7/reflect'
 
-import 'element-closest'
-
 // CustomEvent() constructor functionality in IE9, IE10, IE11
 (function () {
 

demo/src/scss/style.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /*!
  * CoreUI - Open Source Dashboard UI Kit
- * @version v2.1.1
+ * @version v2.1.4
  * @link https://coreui.io
  * Copyright (c) 2018 creativeLabs Łukasz Holeczek
  * Licensed under MIT (https://coreui.io/license)
@@ -12,6 +12,7 @@
  * Copyright 2011-2018 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
+
 :root {
   --blue: #20a8d8;
   --indigo: #6610f2;
@@ -12054,12 +12055,19 @@ canvas {
   .sidebar-minimized .sidebar .nav-item:hover > .nav-link .nav-icon {
     color: #fff;
   }
-  .sidebar-minimized .sidebar .nav-item:hover > .nav-link.disabled {
+  .sidebar-minimized .sidebar .nav-item:hover .nav-link.disabled,
+  .sidebar-minimized .sidebar .nav-item:hover .nav-link :disabled {
     background: #2f353a;
   }
-  .sidebar-minimized .sidebar .nav-item:hover > .nav-link.disabled .nav-icon {
+  .sidebar-minimized .sidebar .nav-item:hover .nav-link.disabled .nav-icon,
+  .sidebar-minimized .sidebar .nav-item:hover .nav-link :disabled .nav-icon {
     color: #73818f;
   }
+  .sidebar-minimized .sidebar section :not(.nav-dropdown-items) > .nav-item:last-child::after {
+    display: block;
+    margin-bottom: 50px;
+    content: "";
+  }
   .sidebar-minimized .sidebar .nav-link {
     position: relative;
     padding-left: 0;
@@ -14168,3 +14176,11 @@ body {
   breakpoint-xl: 1200px;
 }
 /*# sourceMappingURL=coreui.css.map */
+
+/* ie11 floating footer temp fix, react only */
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  #demo {
+    display: flex;
+    flex-direction: column;
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "CoreUI React Bootstrap 4 components",
   "license": "MIT",
   "author": {
@@ -37,8 +37,7 @@
   "dependencies": {
     "@coreui/icons": "0.3.0",
     "classnames": "^2.2.6",
-    "core-js": "^2.5.7",
-    "element-closest": "^2.0.2",
+    "core-js": "^2.6.1",
     "prop-types": "^15.6.2",
     "react-onclickout": "^2.0.8",
     "react-perfect-scrollbar": "^1.4.2",
@@ -51,14 +50,14 @@
   },
   "devDependencies": {
     "babel-eslint": "^10.0.1",
-    "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.7.0",
-    "eslint": "^5.9.0",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.7.1",
+    "eslint": "^5.10.0",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-react": "^7.11.1",
     "nwb": "^0.23.0",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
     "sinon": "^5.1.1"
   },
   "repository": {

src/Shared/element-closest.js

@@ -0,0 +1,33 @@
+(function (ElementProto) {
+  if (!ElementProto) {
+    return;
+  }
+  if (typeof ElementProto.matches !== 'function') {
+    ElementProto.matches = ElementProto.msMatchesSelector || ElementProto.mozMatchesSelector || ElementProto.webkitMatchesSelector || function matches(selector) {
+      const element = this;
+      const elements = (element.document || element.ownerDocument).querySelectorAll(selector);
+      let index = 0;
+
+      while (elements[index] && elements[index] !== element) {
+        ++index;
+      }
+
+      return Boolean(elements[index]);
+    };
+  }
+
+  if (typeof ElementProto.closest !== 'function') {
+    ElementProto.closest = function closest(selector) {
+      let element = this;
+
+      while (element && element.nodeType === 1) {
+        if (element.matches(selector)) {
+          return element;
+        }
+        element = element.parentNode;
+      }
+
+      return null;
+    };
+  }
+})(typeof window !== 'undefined' && window.Element.prototype);

src/Sidebar.js

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { sidebarCssClasses } from './Shared';
 import ClickOutHandler from 'react-onclickout'
-import 'element-closest'
+import './Shared/element-closest'
 
 const propTypes = {
   children: PropTypes.node,
@@ -80,10 +80,11 @@ class AppSidebar extends Component {
   }
 
   onClickOut(e) {
-    if (!e.target.closest('[data-sidebar-toggler]')) {
-      this.hideMobile();
+    if (typeof window !== 'undefined' && document.body.classList.contains('sidebar-show')) {
+      if (!e.target.closest('[data-sidebar-toggler]')) {
+        this.hideMobile();
+      }
     }
-
   }
 
   render() {