release: 7.1.0

mdbootstrap · Jan 8, 2024 · 02524ae · 02524ae
1 parent ee3d7c5
commit 02524ae
Show file tree

Hide file tree

Showing 30 changed files with 885 additions and 807 deletions.
diff --git a/README.txt b/README.txt
@@ -1,6 +1,6 @@
 MDB 5 React
 
-Version: FREE 7.0.0
+Version: FREE 7.1.0
 
 Documentation:
 https://mdbootstrap.com/docs/b5/react/

diff --git a/app/package.json b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mdb-react-ui-kit-demo",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "main": "index.js",
   "repository": {
     "type": "git",

diff --git a/app/src/free/components/Dropdown/Dropdown.tsx b/app/src/free/components/Dropdown/Dropdown.tsx
@@ -5,10 +5,10 @@ import { DropdownProvider } from './contexts/DropdownContext';
 import { DropdownBody } from './DropdownBody/DropdownBody';
 import type { DropdownProps } from './types';
 
-const MDBDropdown = ({ animation, onClose, onOpen, ...props }: DropdownProps) => {
+const MDBDropdown = ({ animation, onClose, onOpen, wrapper = true, ...props }: DropdownProps) => {
   return (
     <DropdownProvider animation={animation} onClose={onClose} onOpen={onOpen} {...props}>
-      <DropdownBody {...props} />
+      <DropdownBody wrapper={wrapper} {...props} />
     </DropdownProvider>
   );
 };

diff --git a/app/src/free/components/Dropdown/DropdownBody/DropdownBody.tsx b/app/src/free/components/Dropdown/DropdownBody/DropdownBody.tsx
@@ -13,6 +13,7 @@ export const DropdownBody = ({
   dropup,
   dropright,
   dropleft,
+  wrapper,
   ...props
 }: DropdownProps) => {
   useClickOutside();
@@ -25,9 +26,11 @@ export const DropdownBody = ({
     className
   );
 
-  return (
+  return wrapper ? (
     <Tag className={classes} {...props}>
       {children}
     </Tag>
+  ) : (
+    <>{children}</>
   );
 };
diff --git a/app/src/free/components/Dropdown/DropdownMenu/DropdownMenu.tsx b/app/src/free/components/Dropdown/DropdownMenu/DropdownMenu.tsx
@@ -85,7 +85,7 @@ const MDBDropdownMenu = ({
     >
       {Children.map(children, (child, idx) =>
         cloneElement(child, {
-          tabIndex: 1,
+          tabIndex: 0,
           'data-active': activeIndex === idx && true,
           className: clsx(activeIndex === idx ? 'active' : '', child.props.className),
         })

diff --git a/app/src/free/components/Dropdown/contexts/types.tsx b/app/src/free/components/Dropdown/contexts/types.tsx
@@ -19,7 +19,7 @@ export interface Dropdown {
 }
 
 export interface DropdownProviderProps {
-  children: ReactNode;
+  children?: ReactNode;
   isOpen?: boolean;
   options?: Record<string, unknown>;
   animation?: boolean;

diff --git a/app/src/free/components/Dropdown/types.tsx b/app/src/free/components/Dropdown/types.tsx
@@ -13,4 +13,5 @@ export interface DropdownProps extends BaseComponent {
   tag?: ComponentProps<any>;
   onClose?: (e: MouseEvent | SyntheticEvent | KeyboardEvent) => any;
   onOpen?: (e: MouseEvent | SyntheticEvent | KeyboardEvent) => any;
+  wrapper?: boolean;
 }
diff --git a/app/src/free/forms/File/File.tsx b/app/src/free/forms/File/File.tsx
@@ -1,21 +1,27 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
 import type { FileProps } from './types';
 
-const MDBFile: React.FC<FileProps> = ({ className, labelClass, labelStyle, inputRef, size, label, id, ...props }) => {
-  const inputClasses = clsx('form-control', `form-control-${size}`, className);
-  const labelClasses = clsx('form-label', labelClass);
+const MDBFile: React.FC<FileProps> = forwardRef<HTMLInputElement, FileProps>(
+  ({ className, labelClass, labelStyle, inputRef: inputRefProp, size, label, id, ...props }, ref) => {
+    const inputClasses = clsx('form-control', `form-control-${size}`, className);
+    const labelClasses = clsx('form-label', labelClass);
+    const inputRef = useRef<HTMLInputElement>(null);
 
-  return (
-    <>
-      {label && (
-        <label className={labelClasses} style={labelStyle} htmlFor={id}>
-          {label}
-        </label>
-      )}
-      <input className={inputClasses} type='file' id={id} ref={inputRef} {...props} />
-    </>
-  );
-};
+    useImperativeHandle(ref, () => inputRef.current || inputRefProp?.current);
 
+    return (
+      <>
+        {label && (
+          <label className={labelClasses} style={labelStyle} htmlFor={id}>
+            {label}
+          </label>
+        )}
+        <input className={inputClasses} type='file' id={id} ref={inputRef} {...props} />
+      </>
+    );
+  }
+);
+
+MDBFile.displayName = 'MDBFile';
 export default MDBFile;
diff --git a/app/src/free/forms/Input/Input.tsx b/app/src/free/forms/Input/Input.tsx
@@ -1,7 +1,16 @@
 'use client';
 
 import clsx from 'clsx';
-import React, { useState, useEffect, useRef, FocusEvent, ChangeEvent, useCallback, useImperativeHandle } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  FocusEvent,
+  ChangeEvent,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+} from 'react';
 import type { InputProps } from './types';
 import { useOnScreen } from '../../../utils/hooks';
 
@@ -11,7 +20,7 @@ const MDBInput: React.FC<InputProps> = React.forwardRef<HTMLInputElement, InputP
       className,
       size,
       contrast,
-      value,
+      value: valueProp,
       defaultValue,
       id,
       labelClass,
@@ -31,20 +40,24 @@ const MDBInput: React.FC<InputProps> = React.forwardRef<HTMLInputElement, InputP
     },
     ref
   ) => {
-    const [newValue, setNewValue] = useState(value || defaultValue);
+    const [valueState, setValueState] = useState(defaultValue);
+    const value = useMemo(() => {
+      if (valueProp !== undefined) {
+        return valueProp;
+      }
+      return valueState;
+    }, [valueProp, valueState]);
+
     const [labelWidth, setLabelWidth] = useState(0);
     const [active, setActive] = useState(false);
     const [counter, setCounter] = useState(0);
-
     const innerRef = useRef<HTMLInputElement>(null);
     const isVisible = useOnScreen(innerRef);
-
-    useImperativeHandle(ref, () => innerRef.current as HTMLInputElement);
-
     const labelEl = useRef<HTMLLabelElement>(null);
-
     const labelReference = labelRef ? labelRef : labelEl;
 
+    useImperativeHandle(ref, () => innerRef.current as HTMLInputElement);
+
     const wrapperClasses = clsx('form-outline', contrast && 'form-white', wrapperClass);
     const inputClasses = clsx(
       'form-control',
@@ -55,58 +68,42 @@ const MDBInput: React.FC<InputProps> = React.forwardRef<HTMLInputElement, InputP
     );
     const labelClasses = clsx('form-label', labelClass);
 
-    useEffect(() => {
-      if (!innerRef.current) return;
-
-      const { value } = innerRef.current;
-
-      value != '' ? setActive(true) : setActive(false);
-    }, [innerRef.current?.value]);
-
-    useEffect(() => {
-      if (value === undefined) return;
-      value != '' ? setActive(true) : setActive(false);
-    }, [value]);
-
-    useEffect(() => {
-      if (defaultValue === undefined) return;
-      defaultValue != '' ? setActive(true) : setActive(false);
-    }, [defaultValue]);
-
     const setWidth = useCallback(() => {
       if (labelReference.current?.clientWidth) {
         setLabelWidth(labelReference.current.clientWidth * 0.8 + 8);
       }
     }, [labelReference]);
 
-    useEffect(() => {
-      setWidth();
-    }, [labelReference.current?.clientWidth, setWidth, isVisible]);
-
     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-      setNewValue(e.target.value);
+      setValueState(e.target.value);
       showCounter && setCounter(e.target.value.length);
       onChange?.(e);
     };
 
     const handleBlur = useCallback(
       (e: FocusEvent<HTMLInputElement, Element>) => {
         if (!innerRef.current) return;
-
-        if (
-          (newValue !== undefined && newValue != '') ||
-          (value !== undefined && value != '') ||
-          innerRef.current.value != ''
-        ) {
+        if (value) {
           setActive(true);
         } else {
           setActive(false);
         }
         onBlur && onBlur(e);
       },
-      [newValue, value, onBlur]
+      [value, onBlur]
     );
 
+    useEffect(() => {
+      setWidth();
+    }, [labelReference.current?.clientWidth, setWidth, isVisible]);
+
+    useEffect(() => {
+      if (value) {
+        return setActive(true);
+      }
+      setActive(false);
+    }, [value]);
+
     return (
       <WrapperTag className={wrapperClasses} style={wrapperStyle}>
         <input
@@ -116,7 +113,7 @@ const MDBInput: React.FC<InputProps> = React.forwardRef<HTMLInputElement, InputP
           onBlur={handleBlur}
           onChange={handleChange}
           onFocus={setWidth}
-          value={value}
+          value={valueProp}
           defaultValue={defaultValue}
           id={id}
           ref={innerRef}

diff --git a/app/src/free/forms/InputTemplate/InputTemplate.tsx b/app/src/free/forms/InputTemplate/InputTemplate.tsx
@@ -1,68 +1,74 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import type { InputTemplateProps } from './types';
 
-const InputTemplate: React.FC<InputTemplateProps> = ({
-  className,
-  inputRef,
-  labelClass,
-  wrapperClass,
-  labelStyle,
-  wrapperTag: WrapperTag = 'div',
-  wrapperStyle,
-  label,
-  inline,
-  btn,
-  id,
-  btnColor,
-  disableWrapper,
-  toggleSwitch,
-  ...props
-}) => {
-  let inputStyle = 'form-check-input';
-  let labelClassName = 'form-check-label';
+const InputTemplate: React.FC<InputTemplateProps> = forwardRef(
+  (
+    {
+      className,
+      inputRef,
+      labelClass,
+      wrapperClass,
+      labelStyle,
+      wrapperTag: WrapperTag = 'div',
+      wrapperStyle,
+      label,
+      inline,
+      btn,
+      id,
+      btnColor,
+      disableWrapper,
+      toggleSwitch,
+      ...props
+    },
+    ref
+  ) => {
+    let inputStyle = 'form-check-input';
+    let labelClassName = 'form-check-label';
 
-  if (btn) {
-    inputStyle = 'btn-check';
+    if (btn) {
+      inputStyle = 'btn-check';
 
-    if (btnColor) {
-      labelClassName = `btn btn-${btnColor}`;
-    } else {
-      labelClassName = 'btn btn-primary';
+      if (btnColor) {
+        labelClassName = `btn btn-${btnColor}`;
+      } else {
+        labelClassName = 'btn btn-primary';
+      }
     }
-  }
 
-  const wrapperClasses = clsx(
-    label && !btn && 'form-check',
-    inline && !btn && 'form-check-inline',
-    toggleSwitch && 'form-switch',
-    wrapperClass
-  );
-  const inputClasses = clsx(inputStyle, className);
-  const labelClasses = clsx(labelClassName, labelClass);
+    const wrapperClasses = clsx(
+      label && !btn && 'form-check',
+      inline && !btn && 'form-check-inline',
+      toggleSwitch && 'form-switch',
+      wrapperClass
+    );
+    const inputClasses = clsx(inputStyle, className);
+    const labelClasses = clsx(labelClassName, labelClass);
 
-  const inputBody = (
-    <>
-      <input className={inputClasses} id={id} ref={inputRef} {...props} />
-      {label && (
-        <label className={labelClasses} style={labelStyle} htmlFor={id}>
-          {label}
-        </label>
-      )}
-    </>
-  );
+    const inputBody = (
+      <>
+        <input className={inputClasses} id={id} ref={inputRef} {...props} />
+        {label && (
+          <label className={labelClasses} style={labelStyle} htmlFor={id}>
+            {label}
+          </label>
+        )}
+      </>
+    );
 
-  return (
-    <>
-      {disableWrapper ? (
-        inputBody
-      ) : (
-        <WrapperTag style={wrapperStyle} className={wrapperClasses}>
-          {inputBody}
-        </WrapperTag>
-      )}
-    </>
-  );
-};
+    return (
+      <>
+        {disableWrapper ? (
+          inputBody
+        ) : (
+          <WrapperTag style={wrapperStyle} className={wrapperClasses} ref={ref}>
+            {inputBody}
+          </WrapperTag>
+        )}
+      </>
+    );
+  }
+);
 
+InputTemplate.displayName = 'InputTemplate';
 export default InputTemplate;