1.0.0-beta1

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;

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+declare const MDBFile: React.FunctionComponent<{
+  className?: string;
+  id?: string;
+  label?: string;
+  disabled?: boolean;
+  labelId?: string;
+  labelClass?: string;
+  size?: string;
+  name?: string;
+  [rest: string]: any;
+}>;
+
+export default MDBFile;

app/src/forms/File/types.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+type FileProps = {
+  className?: string;
+  id?: string;
+  label?: string;
+  disabled?: boolean;
+  labelId?: string;
+  labelClass?: string;
+  size?: string;
+  name?: string;
+  [rest: string]: any;
+};
+
+export { FileProps };

app/src/forms/Input/Input.tsx

@@ -20,6 +20,9 @@ const MDBInput: React.FC<InputProps> = ({
   labelStyle,
   inputRef,
   textarea,
+  validation,
+  invalid,
+  validationTooltip,
   ...props
 }) => {
   const labelEl = useRef<HTMLLabelElement>(null);
@@ -36,6 +39,12 @@ const MDBInput: React.FC<InputProps> = ({
   const wrapperClasses = clsx('form-outline', contrast && 'form-white', wrapperClass);
   const inputClasses = clsx('form-control', active && 'active', size && `form-control-${size}`, className);
   const labelClasses = clsx('form-label', labelClass);
+  const validationClasses = clsx(
+    validation &&
+      (invalid
+        ? `invalid-${validationTooltip ? `tooltip` : `feedback`}`
+        : `valid-${validationTooltip ? `tooltip` : `feedback`}`)
+  );
 
   useEffect(() => {
     if (labelReference.current) {
@@ -91,6 +100,7 @@ const MDBInput: React.FC<InputProps> = ({
           {label}
         </label>
       )}
+      {validation && <div className={validationClasses}>{validation}</div>}
       <div className='form-notch'>
         <div className='form-notch-leading'></div>
         <div className='form-notch-middle' style={{ width: labelWidth }}></div>

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

@@ -17,6 +17,9 @@ declare const MDBInput: React.FunctionComponent<{
   contrast?: boolean;
   value?: string;
   name?: string;
+  validation?: string;
+  invalid?: boolean;
+  validationTooltip?: boolean;
   labelRef?: React.RefObject<HTMLLabelElement>;
   textarea?: boolean;
   [rest: string]: any;

app/src/forms/Input/types.tsx

@@ -17,6 +17,9 @@ type InputProps = {
   contrast?: boolean;
   value?: string;
   name?: string;
+  validation?: string;
+  invalid?: boolean;
+  validationTooltip?: boolean;
   labelRef?: React.RefObject<HTMLLabelElement>;
   textarea?: boolean;
   [rest: string]: any;

app/src/forms/InputGroup/InputGroup.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import clsx from 'clsx';
+import type { InputGroupProps } from './types';
+
+const MDBInputGroup: React.FC<InputGroupProps> = React.forwardRef<HTMLAllCollection, InputGroupProps>(
+  ({ className, children, noWrap, tag: Tag, size, ...props }, ref) => {
+    const classes = clsx('input-group', noWrap && 'flex-nowrap', size && `input-group-${size}`, className);
+
+    return (
+      <Tag className={classes} ref={ref} {...props}>
+        {children}
+      </Tag>
+    );
+  }
+);
+
+MDBInputGroup.defaultProps = { tag: 'div', noWrap: false };
+
+export default MDBInputGroup;

app/src/forms/InputGroup/InputGroupElement/InputGroupElement.tsx

@@ -0,0 +1,23 @@
+import React, { useRef } from 'react';
+import clsx from 'clsx';
+import type { InputGroupElementProps } from './types';
+
+const MDBInputGroupElement: React.FC<InputGroupElementProps> = ({ className, textarea, inputRef, ...props }) => {
+  const classes = clsx('form-control', className);
+
+  const inputEl = useRef<HTMLInputElement>(null);
+
+  const inputReference = inputRef ? inputRef : inputEl;
+
+  return (
+    <>
+      {textarea ? (
+        <textarea className={classes} ref={inputReference} {...props} />
+      ) : (
+        <input className={classes} ref={inputReference} {...props} />
+      )}
+    </>
+  );
+};
+
+export default MDBInputGroupElement;

app/src/forms/InputGroup/InputGroupElement/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+declare const MDBInputGroupElement: React.FunctionComponent<{
+  className?: string;
+  textarea?: boolean;
+  [rest: string]: any;
+}>;
+
+export default MDBInputGroupElement;

app/src/forms/InputGroup/InputGroupElement/types.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+type InputGroupElementProps = {
+  className?: string;
+  textarea?: boolean;
+  [rest: string]: any;
+};
+
+export { InputGroupElementProps };

app/src/forms/InputGroup/InputGroupText/InputGroupText.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import clsx from 'clsx';
+import type { InputGroupTextProps } from './types';
+
+const MDBInputGroupText: React.FC<InputGroupTextProps> = React.forwardRef<HTMLAllCollection, InputGroupTextProps>(
+  ({ className, children, noBorder, tag: Tag, ...props }, ref) => {
+    const classes = clsx('input-group-text', noBorder && 'border-0', className);
+
+    return (
+      <Tag className={classes} ref={ref} {...props}>
+        {children}
+      </Tag>
+    );
+  }
+);
+
+MDBInputGroupText.defaultProps = { tag: 'span', noBorder: false };
+
+export default MDBInputGroupText;

app/src/forms/InputGroup/InputGroupText/index.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+declare const MDBInputGroupText: React.FunctionComponent<{
+  className?: string;
+  noBorder?: boolean;
+  tag?: React.ComponentProps<any>;
+  [rest: string]: any;
+}>;
+
+export default MDBInputGroupText;

app/src/forms/InputGroup/InputGroupText/types.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+type InputGroupTextProps = {
+  className?: string;
+  noBorder?: boolean;
+  tag?: React.ComponentProps<any>;
+  [rest: string]: any;
+};
+
+export { InputGroupTextProps };

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+declare const MDBInputGroup: React.FunctionComponent<{
+  className?: string;
+  noWrap?: boolean;
+  tag?: React.ComponentProps<any>;
+  size?: string;
+  [rest: string]: any;
+}>;
+
+export default MDBInputGroup;