Generate version v.5.1.0

Chagnelog:
​
Fixed:

Update chart.js plugin to the 2.9.4 version
Remove moment.js from free
Fix invalid hook call error in pro packages.
Update MDBModal API section in the documentation.
Fix MDBModal generator - now it will generate fullWidth prop instead of full-width.
Fix typo in installation guide.
Modal - update adding modal-open class to the body.
Collapse - add tag property.
Dropdown - toggle property in the DropdownItem will work properly now.
Buttons - add rounded property handling.
Datatables - fix sorting direction in the onSort method.
Datatables - update searchLabel type.
Select - add onChange method to the uncontrolled select.

Author: Krzysztof Wilk

README.txt

@@ -1,6 +1,6 @@
 Material Design for Bootstrap
 
-Version: MDB React Pro 5.0.2
+Version: MDB React Pro 5.1.0
 
 Documentation:
 https://mdbootstrap.com/docs/react/

dist/css/mdb.css

@@ -473,6 +473,7 @@ declare class MDBCollapse extends Component<
     className?: string;
     children?: ReactNode;
     delay?: { show: number, hide: number };
+    tag?: string;
     isOpen?: boolean | string;
     id?: string;
     navbar?: boolean;
@@ -536,7 +537,7 @@ declare class MDBDataTable extends Component<
     responsiveLg?: boolean;
     responsiveXl?: boolean;
     searching?: boolean;
-    searchingLabel?: string;
+    searchLabel?: string;
     scrollX?: boolean;
     scrollY?: boolean;
     sortable?: boolean;
@@ -862,15 +863,15 @@ declare class MDBModal extends Component<
     hiddenModal?: () => void;
     hideModal?: () => void;
     id?: string;
-    inline: boolean;
+    inline?: boolean;
     isOpen?: boolean;
     keyboard?: boolean;
     modalClassName?: string;
     modalStyle?: 'success' | 'info' | 'danger' | 'warning';
     modalStylesWithoutBackdrop?: ReactNode;
     modalTransitionTimeout?: number;
-    noClickableBodyWithoutBackdrop: boolean;
-    overflowScroll: boolean;
+    noClickableBodyWithoutBackdrop?: boolean;
+    overflowScroll?: boolean;
     position?: string;
     role?: string;
     showModal?: () => void;

dist/img/overlays/01.png

@@ -42,6 +42,6 @@
   color: #283593;
 }
 
-.nav-link:focus {
+.nav-link:focus{
   outline: none;
 }

dist/img/overlays/02.png

@@ -5,7 +5,6 @@ import 'bootstrap-css-only/css/bootstrap.min.css';
 import '../dist/css/mdb.css';
 import './index.css';
 import App from './App';
-// import AppClear from './App-clear';
 
 import registerServiceWorker from './registerServiceWorker';
 

dist/img/overlays/03.png

@@ -558,6 +558,7 @@ const DatatablePage = () => {
                   data={data()}
                   materialSearch={true}
                   proSelect
+                  onSort={(s) => console.log(s)}
                 />
               </MDBCardBody>
             </MDBCard>

dist/img/overlays/04.png

@@ -526,7 +526,7 @@ class ModalPage extends Component {
           </MDBModal>
         </SectionContainer>
 
-        <SectionContainer header='Modal Events' flexCenter>
+        {/* <SectionContainer header='Modal Events' flexCenter>
           <MDBBtn color='warning' onClick={this.toggle(18)}>
             Modal events
           </MDBBtn>
@@ -550,7 +550,7 @@ class ModalPage extends Component {
               <MDBBtn color='primary'>Save changes</MDBBtn>
             </MDBModalFooter>
           </MDBModal>
-        </SectionContainer>
+        </SectionContainer> */}
       </MDBContainer>
     );
   }

dist/img/overlays/05.png

@@ -1,6 +1,6 @@
 {
   "name": "mdbreact",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "author": "MDBootstrap",
   "repository": "https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design",
   "main": "dist/mdbreact.js",
@@ -38,7 +38,7 @@
     "@fortawesome/fontawesome-free": "^5.12.0",
     "@material-ui/core": "3.9.3",
     "bootstrap-css-only": "4.4.1",
-    "chart.js": "2.9.3",
+    "chart.js": "2.9.4",
     "classnames": "2.2.6",
     "focus-trap-react": "^6.0.0",
     "material-ui-pickers": "2.2.4",

dist/img/overlays/06.png

@@ -54,6 +54,7 @@ const Button = props => {
       'btn-action': action,
       [`btn-${social}`]: social,
       [`btn-${size}`]: size,
+      'btn-rounded': rounded,
       disabled
     },
     className
@@ -99,9 +100,12 @@ Button.propTypes = {
   disabled: PropTypes.bool,
   download: PropTypes.string,
   flat: PropTypes.bool,
+  gradient: PropTypes.string,
   innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   onClick: PropTypes.func,
+  outline: PropTypes.bool,
   role: PropTypes.string,
+  rounded: PropTypes.bool,
   size: PropTypes.string,
   social: PropTypes.string,
   tag: PropTypes.string,

dist/img/overlays/07.png

@@ -5,6 +5,7 @@ declare class MDBCollapse extends React.Component<
     className?: string;
     children?: React.ReactNode;
     delay?: { show: number, hide: number };
+    tag?: string;
     isOpen?: boolean | string;
     id?: string;
     navbar?: boolean;

dist/img/overlays/08.png

@@ -98,7 +98,7 @@ class Collapse extends Component {
   }
 
   render() {
-    const { navbar, children, className, isOpen, delay, onOpened, onClosed, ...attributes } = this.props;
+    const { navbar, children, className, isOpen, delay, tag: Tag, onOpened, onClosed, ...attributes } = this.props;
 
     const { collapse, height } = this.state;
     let collapseClass;
@@ -125,7 +125,7 @@ class Collapse extends Component {
     const style = height === null ? null : { height };
 
     return (
-      <div
+      <Tag
         data-test='collapse'
         {...attributes}
         style={{ ...attributes.style, ...style }}
@@ -135,7 +135,7 @@ class Collapse extends Component {
         }}
       >
         {children}
-      </div>
+      </Tag>
     );
   }
 }
@@ -148,14 +148,16 @@ Collapse.propTypes = {
   isOpen: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   navbar: PropTypes.bool,
   onClosed: PropTypes.func,
-  onOpened: PropTypes.func
+  onOpened: PropTypes.func,
+  tag: PropTypes.string
 };
 
 Collapse.defaultProps = {
   isOpen: '',
   delay: DEFAULT_DELAYS,
   onOpened: () => {},
-  onClosed: () => {}
+  onClosed: () => {},
+  tag: 'div'
 };
 export default Collapse;
 export { Collapse as MDBCollapse };

dist/img/overlays/09.png

@@ -35,7 +35,8 @@ describe('<Collapse />', () => {
       navbar: true,
       delay: { show: 5, hide: 5 },
       onOpened: jest.fn(),
-      onClosed: jest.fn()
+      onClosed: jest.fn(),
+      tag: 'div'
     };
 
     wrapper = mounted(expectedProps);

dist/img/svg/arrow_left.svg

@@ -47,7 +47,7 @@ declare class MDBDataTable extends React.Component<
     responsiveLg?: boolean;
     responsiveXl?: boolean;
     searching?: boolean;
-    searchingLabel?: string;
+    searchLabel?: string;
     scrollX?: boolean;
     scrollY?: boolean;
     sortable?: boolean;

dist/img/svg/arrow_right.svg

@@ -192,7 +192,7 @@ class DataTable extends Component {
       () => this.filterRows()
     );
 
-    onSort && typeof onSort === 'function' && onSort({ column: field, direction: sort === 'desc' ? 'desc' : 'asc' });
+    onSort && typeof onSort === 'function' && onSort({ column: field, direction: this.state.direction === true ? 'asc' : 'desc' });
   };
 
   filterRows = (search = this.state.search) => {

dist/mdbreact.esm.js

@@ -6,13 +6,17 @@ import DropdownContext from '../DropdownContext';
 
 class DropdownItem extends Component {
   onClick = (e, callbackToggle) => {
-    const { disabled, header, divider, onClick } = this.props;
+    const { disabled, header, divider, onClick, toggle } = this.props;
 
     if (disabled || header || divider) {
       e.preventDefault();
       return;
     }
 
+    if (!toggle) {
+      e.stopPropagation();
+    }
+
     if (onClick) {
       onClick(e);
     }

dist/mdbreact.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Fa from '../Fa';
 
-class Input extends React.Component {
+class Input extends React.PureComponent {
   state = {
     innerValue: this.props.value || this.props.valueDefault,
     isFocused: false,

dist/scss/core/_colors.scss

@@ -21,15 +21,15 @@ declare class MDBModal extends React.Component<
     hiddenModal?: () => void;
     hideModal?: () => void;
     id?: string;
-    inline: boolean;
+    inline?: boolean;
     isOpen?: boolean;
     keyboard?: boolean;
     modalClassName?: string;
     modalStyle?: 'success' | 'info' | 'danger' | 'warning';
     modalStylesWithoutBackdrop?: React.ReactNode;
     modalTransitionTimeout?: number;
-    noClickableBodyWithoutBackdrop: boolean;
-    overflowScroll: boolean;
+    noClickableBodyWithoutBackdrop?: boolean;
+    overflowScroll?: boolean;
     position?: string;
     role?: string;
     showModal?: () => void;

dist/scss/core/_global.scss

@@ -13,23 +13,17 @@ class Modal extends Component {
 
   modalContent = React.createRef();
 
-  componentDidMount = () => {
-    document.body.classList.add('modal-open');
-  };
-
-  componentWillUnmount = () => {
-    document.body.classList.remove('modal-open');
-  };
-
   componentDidUpdate = (prevProps, prevState) => {
     const { isOpen, overflowScroll } = this.props;
     const overflowStatement = overflowScroll ? 'overflow-y-scroll' : 'overflow-hidden';
 
     if (prevState.initialIsOpen !== isOpen) {
       this.setState({ initialIsOpen: isOpen }, () => {
         if (isOpen) {
+          document.body.classList.add('modal-open');
           document.body.classList.add(overflowStatement);
         } else {
+          document.body.classList.remove('modal-open');
           document.body.classList.remove(overflowStatement);
         }
       });