When trying to find the mdbreact repository, I get redirected to this repo, so the questions are:

1. Is this a new version of mdbreact (if yes, then why not keeping up with semantic versioning?)
2. If it is a successor of mdbreact are there any breaking changes? What is the migration guide?
3. What happens with the old mdbreact library?

It seems that we are lacking some clear communication about what happened and this might confuse a lot of developers that use this library.

It started failing after update from 1.0.0-beta7 to 1.0.0

mdb-react-ui-kit.esm.js:95 Uncaught TypeError: p is not a function
    at eval (mdb-react-ui-kit.esm.js:95)
eval @ mdb-react-ui-kit.esm.js:95
setTimeout (async)
eval @ mdb-react-ui-kit.esm.js:95
eval @ mdb-react-ui-kit.esm.js:95
invokePassiveEffectCreate @ react-dom.development.js:23482
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23569
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23442
performSyncWorkOnRoot @ react-dom.development.js:22264
eval @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
unbatchedUpdates @ react-dom.development.js:22433
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26015
render @ react-dom.development.js:26098
eval @ app.tsx:14
./resources/assets/user_account/app.tsx @ app.js:18
options.factory @ manifest.js:614
__webpack_require__ @ manifest.js:36
__webpack_exec__ @ app.js:553
(anonymous) @ app.js:554
__webpack_require__.O @ manifest.js:90
(anonymous) @ app.js:555
webpackJsonpCallback @ manifest.js:1268
(anonymous) @ app.js:9

JSX:

<MDBModal staticBackdrop show={debugModalContent !== null} tabIndex='-1'>
    <MDBModalDialog size="xl" centered>
        <MDBModalContent>
        </MDBModalContent>
    </MDBModalDialog>
</MDBModal>

It fails even like this

<MDBModal/>

Env

$ npm --version
7.9.0

Steps To Reproduce:

Create the base app:

$ mkdir test-table && cd test-table
$ create-react-app --template=typescript ./
$ npm i --save mdbreact --legacy-peer-deps

Change the App.tsx to:

import './App.css';
import {MDBDataTable} from 'mdbreact';

function App() {
    return (
        <MDBDataTable
            data={{
                columns:[{
                    label: 'temp',
                    field: 'key2'
                }],
                rows: [{
                    key1: "value1",
                    key2: "value2",
                    message: "the-message"
                }]
            }}
        />
    );
}

export default App;

Start app:

$ npm start

Observed Behavior

The table displays "the-message"

Expected Behavior

The table should display "value2"

Questions:

Is there some magic field in MDBDataTable called message ? Is this just a bug that should have surfaced up by now, but somehow, hasn't ? Or am I just doing something terribly stupid here (lack of sleep and high caffeine maybe) ?

import React, { useState } from 'react';
import { MDBBtn,
  MDBModal,
  MDBModalDialog,
  MDBModalContent,
  MDBModalHeader,
  MDBModalTitle,
  MDBModalBody,
  MDBModalFooter,
} from 'mdb-react-ui-kit';

export default function App() {
  const [basicModal, setBasicModal] = useState(false);

  const toggleShow = () => setBasicModal(!basicModal);

  return (
    <>
    <MDBBtn onClick={toggleShow}>LAUNCH DEMO MODAL</MDBBtn>
    <MDBModal show={basicModal} getOpenState={(e: any) => setBasicModal(e)} tabIndex='-1'>
      <MDBModalDialog>
        <MDBModalContent>
          <MDBModalHeader>
            <MDBModalTitle>Modal title</MDBModalTitle>
            <MDBBtn className='btn-close' color='none' onClick={toggleShow}></MDBBtn>
          </MDBModalHeader>
          <MDBModalBody>...</MDBModalBody>

          <MDBModalFooter>
            <MDBBtn color='secondary' onClick={toggleShow}>
              Close
            </MDBBtn>
            <MDBBtn>Save changes</MDBBtn>
          </MDBModalFooter>
        </MDBModalContent>
      </MDBModalDialog>
    </MDBModal>
    <div style={{ height: "1080px" }}></div>
    </>
  );
}

label overlap input box border border When the input box is in a Modal. sorry for my english is bad.

import React, { useState, useEffect } from "react";
import {
  MDBInput,
  MDBBtn,
  MDBModal,
  MDBModalDialog,
  MDBModalContent,
  MDBModalHeader,
  MDBModalTitle,
  MDBModalBody,
  MDBModalFooter,
} from "mdb-react-ui-kit";

export default function App() {
  const [basicModal, setBasicModal] = useState(false);

  const toggleShow = () => setBasicModal(!basicModal);
  return (
    <>
      <MDBInput label="Text input" id="typeText" type="text" />
      <br />
      <MDBBtn onClick={toggleShow}>LAUNCH DEMO MODAL</MDBBtn>
      <MDBModal
        show={basicModal}
        getOpenState={(e: any) => setBasicModal(e)}
        tabIndex="-1"
      >
        <MDBModalDialog>
          <MDBModalContent>
            <MDBModalHeader>
              <MDBModalTitle>Modal title</MDBModalTitle>
              <MDBBtn
                className="btn-close"
                color="none"
                onClick={toggleShow}
              ></MDBBtn>
            </MDBModalHeader>
            <MDBModalBody>
              <MDBInput label="Example label" id="form1" type="text" />
            </MDBModalBody>

            <MDBModalFooter>
              <MDBBtn color="secondary" onClick={toggleShow}>
                Close
              </MDBBtn>
              <MDBBtn>Save changes</MDBBtn>
            </MDBModalFooter>
          </MDBModalContent>
        </MDBModalDialog>
      </MDBModal>
    </>
  );
}

Wondering what's the relationship is with the other project https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design ??

It's not visible this one uses that one. It has very little stars.

<MDBInput
  label=Email
  type="email"
  ref={formRegisteredEmail.ref}
  onChange={formRegisteredEmail.onChange}
  onBlur={formRegisteredEmail.onBlur}
  name={formRegisteredEmail.name}
  id="Email"
 />

With the free theme, if I change the value of $font-size-base to 1.25rm, checkboxes look a little bit offset from the text :

I can think of two solutions to this problems (but I don't know which one is preferable in the general case) :

• Either scale the checkbox with the text
• Or work on the alignment so it stays on the baseline

Possible workaround : For now, I have achieved to implement the first solution in my own project by overriding the default values to take into account the text size. Maybe those would make better default values.

$form-check-input-margin-left: $font-size-base * 1.79;
$form-check-input-radio-margin-left: $font-size-base * 1.85;
$form-check-input-width-md: $font-size-base * 1.125;
$form-check-input-border-width: $font-size-base * 0.125;
$form-check-input-before-width: $font-size-base * 0.875;

$form-check-input-checkbox-border-radius: $font-size-base * 0.125;
$form-check-input-checkbox-focus-after-width: $font-size-base * 0.875;

$form-check-input-checkbox-checked-after-border-width: $font-size-base * 0.125;
$form-check-input-checkbox-checked-after-width: $font-size-base * 0.375;
$form-check-input-checkbox-checked-after-height: $font-size-base * 0.8125;
$form-check-input-checkbox-checked-after-margin-left: $font-size-base * 0.25;

$form-check-input-indeterminate-checked-after-border-width: $font-size-base * 0.125;
$form-check-input-indeterminate-checked-after-width: $font-size-base * 0.125;
$form-check-input-indeterminate-checked-after-height: $font-size-base * 0.875;
$form-check-input-indeterminate-checked-after-margin-left: $font-size-base 0.375;

$form-check-input-radio-width: $font-size-base * 1.25;

$form-check-input-radio-before-width: $font-size-base;
$form-check-input-radio-checked-after-width: $font-size-base * 0.625;
$form-check-input-radio-checked-after-margin-top: $font-size-base * 0.1875;
$form-check-input-radio-checked-after-margin-left: $font-size-base * 0.1875;

Also, thank you for making this awesome library available for free !

1. Carousel with 1 slide magically slides to 2nd non-existing slide and then never slides again showing black screen
2. Carousel should have an option to disable autosliding at all - there are lots of stuations when autosliding is not needed (for example simple image gallery for shop item)
3. Carosuel prev and next buttons use font awesome. If font awesome is not used in project - icons are not shown. Maybe 2 props like 'nextIcon' and prevIcon can be added to allow customization.
4. In documentation interval is placed on <MDBCarousel showControls interval={10000}> while in reality interval prop should be placed on each <MDBCarouselItem interval={10000}>. I've verified the code of MDBCarousel and there are no interval prop or its usage there.
5. MDBCarouselItem should use MDBCarousel's interval unless it has its own interval.

carousel disappearing after showing all pictures. I need my images to be dynamic, so I use map function, but then it doesn't work

import React, { useState, useEffect } from "react";
import {
  MDBCarousel,
  MDBCarouselInner,
  MDBCarouselItem,
  MDBCarouselElement,
  MDBCarouselCaption,
} from "mdb-react-ui-kit";
import axios from "axios";

export default function Carousel() {
  const [carouselList, setCarouselList] = useState([]);
  useEffect(() => {
    axios.get(url).then((response) => setCarouselList(response.data))
  }, []);
  return (
    <MDBCarousel showIndicators showControls fade>
      <MDBCarouselInner>
        {carouselList.map((key, index) => {
          return (
            <MDBCarouselItem itemId={index}>
              <MDBCarouselElement
                className="carousel-img"
                src={key.imgSrc}
                alt={key.imgAlt}
              />
                <MDBCarouselCaption>
                  <h5>slide label</h5>
                  <p>slide {index}</p>
              </MDBCarouselItem>
            </MDBCarouselItem>
          )
        })}
      </MDBCarouselInner>
    </MDBCarousel>
  )
}

Lets assume we have next button

<MDBBtn color="success" outline >
   text
</MDBBtn>

Expected behavior is that ripple will have any color except white. Perfectly - it should have success color, You can see it yourself in docs: https://mdbootstrap.com/docs/b5/react/components/buttons/#section-outline

I'm getting 1 low and 1 high vulnerability with the updated version of reactjs which also has an issue that produce 86 vulnerability I also had a project with the earlier version of reactjs and the both vulnerabilities is also shown even with the command npm audit fix or npm update

I don't know if this is a problem in react itself or the mdb.

Edit: MDBBtn is also not working with hooks.