Generate version 1.4.0

Author: Krzysztof Wilk

README.txt

@@ -1,6 +1,6 @@
 MDB 5 React
 
-Version: FREE 1.3.0
+Version: FREE 1.4.0
 
 Documentation:
 https://mdbootstrap.com/docs/b5/react/

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-react-ui-kit-demo",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "main": "index.js",
   "repository": {
     "type": "git",

app/src/components/Badge/Badge.tsx

@@ -5,11 +5,13 @@ import ReactDOM from 'react-dom';
 
 const MDBModal: React.FC<ModalProps> = ({
   animationDirection,
+  appendToBody,
   backdrop,
   children,
   className,
   closeOnEsc,
   getOpenState,
+  leaveHiddenModal,
   modalRef,
   show,
   staticBackdrop,
@@ -125,9 +127,9 @@ const MDBModal: React.FC<ModalProps> = ({
     };
   }, [handleKeydown, handleClickOutside]);
 
-  return (
+  const appendToBodyTemplate = (
     <>
-      {(show || innerShow) &&
+      {(leaveHiddenModal || show || innerShow) &&
         ReactDOM.createPortal(
           <>
             <Tag
@@ -144,6 +146,26 @@ const MDBModal: React.FC<ModalProps> = ({
         )}
     </>
   );
+
+  const modalTemplate = (
+    <>
+      {(leaveHiddenModal || show || innerShow) && (
+        <>
+          <Tag
+            className={classes}
+            ref={modalReference}
+            style={{ display: innerShow || show ? 'block' : 'none' }}
+            {...props}
+          >
+            {children}
+          </Tag>
+          {ReactDOM.createPortal(backdrop && innerShow && <div className={backdropClasses}></div>, document.body)}
+        </>
+      )}
+    </>
+  );
+
+  return <>{appendToBody ? appendToBodyTemplate : modalTemplate}</>;
 };
-MDBModal.defaultProps = { tag: 'div', backdrop: true, closeOnEsc: true };
+MDBModal.defaultProps = { tag: 'div', backdrop: true, closeOnEsc: true, leaveHiddenModal: true };
 export default MDBModal;

app/src/components/Badge/index.d.ts

@@ -5,6 +5,8 @@ declare const MDBModal: React.FunctionComponent<{
   backdrop?: boolean;
   className?: string;
   closeOnEsc?: boolean;
+  leaveHiddenModal?: boolean;
+  appendToBody?: boolean;
   tabIndex?: string;
   show?: boolean;
   staticBackdrop?: boolean;

app/src/components/Badge/types.tsx

@@ -3,6 +3,8 @@ type ModalProps = {
   backdrop?: boolean;
   className?: string;
   closeOnEsc?: boolean;
+  leaveHiddenModal?: boolean;
+  appendToBody?: boolean;
   tabIndex?: string;
   show?: boolean;
   staticBackdrop?: boolean;

app/src/components/Button/Button.tsx

@@ -8,6 +8,7 @@ import MDBBtn from '../Button/Button';
 const MDBTooltip: React.FC<TooltipProps> = ({
   className,
   children,
+  disableMouseDown,
   tag: Tag,
   tooltipTag: TooltipTag,
   options,
@@ -79,11 +80,13 @@ const MDBTooltip: React.FC<TooltipProps> = ({
   );
 
   useEffect(() => {
-    document.addEventListener('mousedown', handleClick);
-    return () => {
-      document.removeEventListener('mousedown', handleClick);
-    };
-  }, [handleClick]);
+    if (!disableMouseDown) {
+      document.addEventListener('mousedown', handleClick);
+      return () => {
+        document.removeEventListener('mousedown', handleClick);
+      };
+    }
+  }, [handleClick, disableMouseDown]);
 
   return (
     <>

app/src/components/Button/index.d.ts

@@ -22,6 +22,7 @@ declare const MDBTooltip: React.FunctionComponent<{
     | 'left-end'
     | undefined;
   options?: Record<string, unknown>;
+  disableMouseDown?: boolean;
   title?: string | React.ReactNode;
   wrapperProps?: Record<string, unknown>;
   wrapperClass?: string;

app/src/components/Button/types.tsx

@@ -20,6 +20,7 @@ type TooltipProps = {
     | 'left-end'
     | undefined;
   options?: Record<string, unknown>;
+  disableMouseDown?: boolean;
   title?: string | React.ReactNode;
   wrapperProps?: Record<string, unknown>;
   wrapperClass?: string;

app/src/components/ButtonGroup/ButtonGroup.tsx

@@ -27,7 +27,6 @@ const MDBInput: React.FC<InputProps> = ({
   btnClasses,
   btnOnClick,
   btnRef,
-  btnChildren,
   onBlur,
   readonly,
   btn,
@@ -42,7 +41,7 @@ const MDBInput: React.FC<InputProps> = ({
   const btnReference = btnRef ? btnRef : btnEl;
   const inputReference = inputRef ? inputRef : textarea ? textareaEl : inputEl;
 
-  const [oldValue, setNewValue] = useState(value);
+  const [oldValue, setNewValue] = useState(value || defaultValue);
   const [labelWidth, setLabelWidth] = useState(0);
   const [active, setActive] = useState(
     (value !== undefined && value.length > 0) || (defaultValue !== undefined && defaultValue.length) > 0 ? true : false
@@ -86,18 +85,15 @@ const MDBInput: React.FC<InputProps> = ({
   };
 
   const handleBlur = useCallback(
-    (e) => {
-      if (
-        (oldValue !== undefined && oldValue.length > 0) ||
-        (value !== undefined && value.length > 0 && defaultValue !== undefined && defaultValue.length > 0)
-      ) {
+    (e: any) => {
+      if ((oldValue !== undefined && oldValue.length > 0) || (value !== undefined && value.length > 0)) {
         setActive(true);
       } else {
         setActive(false);
       }
       onBlur && onBlur(e);
     },
-    [oldValue, value, defaultValue, onBlur]
+    [oldValue, value, onBlur]
   );
 
   return (

app/src/components/ButtonGroup/index.d.ts

@@ -174,6 +174,7 @@ declare const MDBListGroupItem: React$1.FunctionComponent<{
 
 declare const MDBTooltip: React$1.FunctionComponent<{
   className?: string;
+  disableMouseDown?: boolean;
   tag?: React$1.ComponentProps<any>;
   tooltipTag?: React$1.ComponentProps<any>;
   placement?:
@@ -194,6 +195,7 @@ declare const MDBTooltip: React$1.FunctionComponent<{
     | 'left-end'
     | undefined;
   options?: Record<string, unknown>;
+  disableMouseDown?: boolean;
   title?: string | React$1.ReactNode;
   wrapperProps?: Record<string, unknown>;
   wrapperClass?: string;
@@ -493,6 +495,7 @@ declare const MDBInput: React$1.FunctionComponent<{
   readonly?: boolean;
   contrast?: boolean;
   value?: string;
+  defaultValue?: string;
   name?: string;
   validation?: string;
   invalid?: boolean;
@@ -519,6 +522,7 @@ declare const MDBCheckbox: React$1.FunctionComponent<{
   invalid?: boolean;
   btn?: boolean;
   btnColor?: string;
+  disableWrapper?: boolean;
   [rest: string]: any;
 }>;
 
@@ -638,6 +642,8 @@ declare const MDBModal: React$1.FunctionComponent<{
   backdrop?: boolean;
   className?: string;
   closeOnEsc?: boolean;
+  leaveHiddenModal?: boolean;
+  appendToBody?: boolean;
   tabIndex?: string;
   show?: boolean;
   staticBackdrop?: boolean;

app/src/components/ButtonGroup/types.tsx

@@ -1,6 +1,6 @@
 {
   "name": "mdb-react-ui-kit",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "main": "./dist/mdb-react-ui-kit.js",
   "module": "./dist/mdb-react-ui-kit.esm.js",
   "types": "./dist/index.d.ts",