@@ -0,0 +1,62 @@
+### [@coreui/react](https://coreui.io/) changelog
+
+##### `v2.0.8`
+- refactor(SidebarMinimizer): extract `togglePs` method
+- refactor(SidebarMinimizer): for use `togglePs` method
+- fix(SidebarMinimizer): add `componentDidMount` with `togglePs`
+- refactor(AsideToggler): extract `toggle` method
+- fix(AsideToggler): add missing `defaultOpen` prop
+- fix(Aside): deprecate `hidden` prop in v2 as conflicting with HTML5 `hidden` attribute
+- fix(Aside): `displayBreakpoint` behaviour
+- update `@coreui/coreui` to `^2.0.14`
+- update `reactstrap` to `^6.5.0`
+- update `enzyme` to `3.7.0`
+- update `enzyme-adapter-react-16` to `1.6.0`
+
+##### `v2.0.7`
+- fix(SidebarNav): dirty fix for rtl ps scrollingX issue
+
+##### `v2.0.6`
+- update `@coreui/coreui` to `^2.0.12`
+- update `@coreui/icons` to `0.3.0`
+- update `react-perfect-scrollbar` to `^1.2.2`
+- update `reactstrap` to `^6.4.0`
+- update `babel-eslint` to `^10.0.1`
+- update `enzyme` to `^3.6.0`
+- update `enzyme-adapter-react-16` to `^1.5.0`
+- update `eslint` to `^5.6.1`
+- update `eslint-plugin-import` to `^2.14.0`
+- update `eslint-plugin-react` to `^7.11.1`
+- update `nwb` to `^0.23.0`
+- update `react` to `^16.5.2`
+- update `react-dom` to `^16.5.2`
+- update `sinon` to `^5.1.1`
+
+##### `v2.0.5`
+- feat: hide onclick outside mobile sidebar
+- refactor: toggle-classes force
+- refactor: Shared/classes.js *Breakpoints
+- refactor: element-closest IE polyfill added
+- chore: dependencies update
+
+##### `v2.0.4`
+- refactor(Breadcrumb): fix for dynamic url like `/path/:id`
+- chore: update `prop-types` to `^15.6.2
+
+##### `v2.0.3`
+- fix: rollback to @coreui/icons v0.2.0
+
+##### `v2.0.2`
+- fix: remove AppLayout export as not production ready
+- chore: dependencies update
+- fix(Switch): not updating on props change - thanks @IceOnFire
+
+##### `v2.0.1`
+- chore: dependencies update
+
+##### `v2.0.0`
+- chore: dependencies update
+- refactor(demo): `@coreui/icons`
+
+##### `v2.0.0-rc.1`
+-fix: minimized sidebar scrollbar issue

@@ -84,7 +84,7 @@ class DefaultLayout extends Component {
 </Switch>
 </Container>
 </main>
-<AppAside fixed hidden display="lg">
+<AppAside fixed>
 Aside
 </AppAside>
 </div>

@@ -1,6 +1,6 @@
 {
 "name": "@coreui/react",
-"version": "2.0.7",
+"version": "2.0.8",
 "description": "CoreUI React Bootstrap 4 components",
 "license": "MIT",
 "author": {
@@ -43,16 +43,16 @@
 "react-onclickout": "^2.0.8",
 "react-perfect-scrollbar": "^1.2.2",
 "react-router-dom": "^4.3.1",
-"reactstrap": "^6.4.0"
+"reactstrap": "^6.5.0"
 },
 "peerDependencies": {
 "@coreui/coreui": "^2.0.14",
 "react": "16.x"
 },
 "devDependencies": {
 "babel-eslint": "^10.0.1",
-"enzyme": "^3.6.0",
-"enzyme-adapter-react-16": "^1.5.0",
+"enzyme": "^3.7.0",
+"enzyme-adapter-react-16": "^1.6.0",
 "eslint": "^5.6.1",
 "eslint-plugin-import": "^2.14.0",
 "eslint-plugin-react": "^7.11.1",

@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { asideMenuCssClasses } from './Shared';
+import { asideMenuCssClasses, checkBreakpoint, validBreakpoints } from './Shared';
+import toggleClasses from './Shared/toggle-classes';
 
 const propTypes = {
 children: PropTypes.node,
 className: PropTypes.string,
 display: PropTypes.string,
 fixed: PropTypes.bool,
-hidden: PropTypes.bool,
 isOpen: PropTypes.bool,
 offCanvas: PropTypes.bool,
 tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
@@ -18,7 +18,6 @@ const defaultProps = {
 tag: 'aside',
 display: '',
 fixed: false,
-hidden: false,
 isOpen: false,
 offCanvas: true
 };
@@ -28,22 +27,16 @@ class AppAside extends Component {
 super(props);
 
 this.isFixed = this.isFixed.bind(this);
-this.isHidden = this.isHidden.bind(this);
 this.isOffCanvas = this.isOffCanvas.bind(this);
 this.displayBreakpoint = this.displayBreakpoint.bind(this);
 }
 
 componentDidMount() {
 this.isFixed(this.props.fixed);
-this.isHidden(this.props.hidden);
 this.isOffCanvas(this.props.offCanvas);
 this.displayBreakpoint(this.props.display);
 }
 
-isHidden(hidden) {
-if (hidden) { document.body.classList.add('aside-menu-hidden'); }
-}
-
 isFixed(fixed) {
 if (fixed) { document.body.classList.add('aside-menu-fixed'); }
 }
@@ -53,20 +46,17 @@ class AppAside extends Component {
 }
 
 displayBreakpoint(display) {
-const cssTemplate = `aside-menu-${display}-show`;
-let [cssClass] = asideMenuCssClasses[0];
-if (display && asideMenuCssClasses.indexOf(cssTemplate) > -1) {
-cssClass = cssTemplate;
+if (display && checkBreakpoint(display, validBreakpoints)) {
+const cssClass = `aside-menu-${display}-show`
+toggleClasses(cssClass, asideMenuCssClasses, true)
 }
-document.body.classList.add(cssClass);
 }
 
 render() {
 const { className, children, tag: Tag, ...attributes } = this.props;
 
 delete attributes.display
 delete attributes.fixed
-delete attributes.hidden
 delete attributes.offCanvas
 delete attributes.isOpen
 

@@ -2,11 +2,11 @@
 
 | prop | default |
 | ------- | ---------
-| children |
+| children |
 | className | `aside-menu`
-| display | `sm, md, lg, xl, ""`
+| display | `sm, md, lg, xl, ""`
 | fixed | `false`
-| hidden | `false`
+| hidden | `false` *deprecated* in v2 as conflicting with HTML5 `hidden` attribute
 | isOpen | `false`
 | offCanvas | `true`
 | tag | `aside`

@@ -1,19 +1,21 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { asideMenuCssClasses } from './Shared/index';
+import { asideMenuCssClasses, validBreakpoints, checkBreakpoint } from './Shared/index';
 import toggleClasses from './Shared/toggle-classes';
 
 const propTypes = {
 children: PropTypes.node,
 className: PropTypes.string,
+defaultOpen: PropTypes.bool,
 display: PropTypes.any,
 mobile: PropTypes.bool,
 tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 type: PropTypes.string
 };
 
 const defaultProps = {
+defaultOpen: false,
 display: 'lg',
 mobile: false,
 tag: 'button',
@@ -28,27 +30,30 @@ class AppAsideToggler extends Component {
 this.state = {};
 }
 
-asideToggle(e) {
-e.preventDefault();
+componentDidMount() {
+this.toggle(this.props.defaultOpen)
+}
 
-if (this.props.mobile) {
-document.body.classList.toggle('aside-menu-show');
-} else {
-const display = this.props.display;
-const cssTemplate = `aside-menu-${display}-show`;
-let [cssClass] = asideMenuCssClasses[0];
-if (display && asideMenuCssClasses.indexOf(cssTemplate) > -1) {
-cssClass = cssTemplate;
-}
-toggleClasses(cssClass, asideMenuCssClasses);
+toggle (force) {
+const [display, mobile] = [this.props.display, this.props.mobile];
+let cssClass = asideMenuCssClasses[0];
+if (!mobile && display && checkBreakpoint(display, validBreakpoints)) {
+cssClass = `aside-menu-${display}-show`
 }
+toggleClasses(cssClass, asideMenuCssClasses, force)
+}
+
+asideToggle(e) {
+e.preventDefault();
+this.toggle()
 }
 
 render() {
 const { className, children, type, tag: Tag, ...attributes } = this.props;
 
-delete attributes.display
-delete attributes.mobile
+delete attributes.defaultOpen;
+delete attributes.display;
+delete attributes.mobile;
 
 const classes = classNames(className, 'navbar-toggler');
 

@@ -5,6 +5,7 @@ prop | default
 --- | ---
 children | `<span className="navbar-toggler-icon" />`
 className | `navbar-toggler`
+defaultOpen| `false`
 display | `lg`
 mobile | `false`
 tag | `button`

@@ -20,14 +20,27 @@ class AppSidebarMinimizer extends Component {
 
 this.handleClick = this.handleClick.bind(this);
 }
+
+componentDidMount() {
+const isMinimized = document.body.classList.contains('sidebar-minimized');
+this.togglePs(!isMinimized)
+}
+
 sidebarMinimize() {
-document.body.classList.toggle('sidebar-minimized');
+const isMinimized = document.body.classList.toggle('sidebar-minimized');
+this.togglePs(!isMinimized)
+}
+
+togglePs(toggle) {
 const sidebar = document.querySelector('.sidebar-nav')
 if (sidebar) {
-const toggleOn = sidebar.classList.toggle('ps');
-sidebar.classList.toggle('scrollbar-container', toggleOn);
-sidebar.classList.toggle('ps--active-y', toggleOn);
+if (toggle) {
+sidebar.classList.add('ps', 'ps-container', 'ps--active-y')
+} else {
+sidebar.classList.remove('ps', 'ps-container', 'ps--active-y')
+}
 }
+
 }
 
 brandMinimize() {

@@ -12,20 +12,15 @@ configure({ adapter: new Adapter() });
 
 describe('AppAside', () => {
 it('renders aside with class="aside-menu"', () => {
-expect(render(<AppAside fixed hidden offCanvas display="lg">aside</AppAside>))
+expect(render(<AppAside fixed offCanvas display="lg">aside</AppAside>))
 .toContain('<aside class="aside-menu">aside</aside>')
 });
 it('calls componentDidMount', () => {
 spy(AppAside., 'componentDidMount');
 
-const wrapper = mount(<AppAside fixed hidden display="lg" />);
+const wrapper = mount(<AppAside fixed />);
 expect(AppAside..componentDidMount.calledOnce).toEqual(true);
 });
-it('should call isHidden()', () => {
-const isHidden = spy(AppAside., 'isHidden');
-shallow(<AppAside />);
-expect(isHidden.called).toBe(true);
-});
 it('should call isOffCanvas()', () => {
 const isOffCanvas = spy(AppAside., 'isOffCanvas');
 shallow(<AppAside offCanvas={false}/>);