1.0.0-beta1

Author: unknown

README.txt

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

app/package.json

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

app/src/components/Dropdown/Dropdown.tsx

@@ -70,11 +70,6 @@ const MDBDropdown: React.FC<DropdownProps> = ({
     [isOpenState, popperElement, referenceElement]
   );
 
-  useEffect(() => {
-    const wo = document.body.scrollTop;
-    console.log(wo);
-  });
-
   useEffect(() => {
     document.addEventListener('mousedown', handleClickOutside);
     return () => {

app/src/components/Dropdown/DropdownMenu/DropdownMenu.tsx

@@ -10,7 +10,6 @@ const MDBDropdownMenu: React.FC<DropdownMenuProps> = ({
   tag: Tag,
   children,
   style,
-  wrapperStyle,
   dark,
   responsive,
   ...props
@@ -105,28 +104,27 @@ const MDBDropdownMenu: React.FC<DropdownMenuProps> = ({
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //@ts-ignore
   return attachELements ? (
-    <div
-      className='position-absolute'
-      ref={setPopperElement}
+    <Tag
+      className={classes}
+      style={{ position: 'absolute', zIndex: 1000, ...styles.popper, ...style }}
+      {...props}
       {...attributes.popper}
-      style={{ display: 'block', zIndex: 1000, ...styles.popper, ...wrapperStyle }}
+      ref={setPopperElement}
       tabIndex={-1}
     >
-      <Tag className={classes} style={{ ...style }} {...props} tabIndex={-1}>
-        {React.Children.map(children, (child: any, index) => {
-          if (child?.type === MDBDropdownItem) {
-            return React.cloneElement(child, {
-              tabIndex: 0,
-              'data-active': activeIndex === index && true,
-              'data-index': index,
-              className: activeIndex === index ? 'active' : '',
-            });
-          } else {
-            return child;
-          }
-        })}
-      </Tag>
-    </div>
+      {React.Children.map(children, (child: any, index) => {
+        if (child?.type === MDBDropdownItem) {
+          return React.cloneElement(child, {
+            tabIndex: 0,
+            'data-active': activeIndex === index && true,
+            'data-index': index,
+            className: activeIndex === index ? 'active' : '',
+          });
+        } else {
+          return child;
+        }
+      })}
+    </Tag>
   ) : (
     ''
   );

app/src/components/Dropdown/DropdownMenu/index.d.ts

@@ -3,7 +3,6 @@ import * as React from 'react';
 declare const MDBDropdownMenu: React.FunctionComponent<{
   className?: string;
   style?: Record<string, any>;
-  wrapperStyle?: Record<string, any>;
   dark?: boolean;
   responsive?: string;
   tag?: React.ComponentProps<any>;

app/src/components/Dropdown/DropdownMenu/types.tsx

@@ -1,7 +1,6 @@
 type DropdownMenuProps = {
   className?: string;
   style?: Record<string, any>;
-  wrapperStyle?: Record<string, any>;
   dark?: boolean;
   responsive?: string;
   tag?: React.ComponentProps<any>;

app/src/forms/Checkbox/Checkbox.tsx

@@ -17,7 +17,10 @@ const MDBCheckbox: React.FC<CheckboxProps> = React.forwardRef<HTMLAllCollection,
       id,
       defaultChecked,
       checked,
+      validation,
+      invalid,
       btnColor,
+      toggleSwitch,
       ...props
     },
     ref
@@ -35,9 +38,15 @@ const MDBCheckbox: React.FC<CheckboxProps> = React.forwardRef<HTMLAllCollection,
       }
     }
 
-    const wrapperClasses = clsx(label && !btn && 'form-check', inline && !btn && 'form-check-inline', wrapperClass);
+    const wrapperClasses = clsx(
+      label && !btn && 'form-check',
+      inline && !btn && 'form-check-inline',
+      toggleSwitch && 'form-switch',
+      wrapperClass
+    );
     const inputClasses = clsx(inputStyle, className);
     const labelClasses = clsx(labelStyle, labelClass);
+    const validationClasses = clsx(validation && (invalid ? 'invalid-feedback' : 'valid-feedback'));
 
     return (
       <WrapperTag className={wrapperClasses}>
@@ -55,6 +64,7 @@ const MDBCheckbox: React.FC<CheckboxProps> = React.forwardRef<HTMLAllCollection,
             {label}
           </label>
         )}
+        {validation && <div className={validationClasses}>{validation}</div>}
       </WrapperTag>
     );
   }

app/src/forms/Checkbox/index.d.ts

@@ -13,6 +13,8 @@ declare const MDBCheckbox: React.FunctionComponent<{
   name?: string;
   inline?: boolean;
   checked?: boolean;
+  validation?: string;
+  invalid?: boolean;
   btn?: boolean;
   btnColor?: string;
   [rest: string]: any;

app/src/forms/Checkbox/types.tsx

@@ -12,6 +12,8 @@ type CheckboxProps = {
   value?: string | boolean;
   name?: string;
   inline?: boolean;
+  validation?: string;
+  invalid?: boolean;
   checked?: boolean;
   btn?: boolean;
   btnColor?: string;

app/src/forms/File/File.tsx

@@ -0,0 +1,37 @@
+import clsx from 'clsx';
+import React, { useRef } from 'react';
+import type { FileProps } from './types';
+
+const MDBFile: React.FC<FileProps> = ({
+  className,
+  labelId,
+  labelClass,
+  labelRef,
+  inputRef,
+  size,
+  label,
+  id,
+  ...props
+}) => {
+  const inputClasses = clsx('form-control', `form-control-${size}`, className);
+  const labelClasses = clsx('form-label', labelClass);
+
+  const labelEl = useRef<HTMLLabelElement>(null);
+  const inputEl = useRef<HTMLInputElement>(null);
+
+  const labelReference = labelRef ? labelRef : labelEl;
+  const inputReference = inputRef ? inputRef : inputEl;
+
+  return (
+    <>
+      {label && (
+        <label className={labelClasses} id={labelId} ref={labelReference} htmlFor={id}>
+          {label}
+        </label>
+      )}
+      <input className={inputClasses} type='file' id={id} ref={inputReference} {...props} />
+    </>
+  );
+};
+
+export default MDBFile;