chore: removed default props from function components

BREAKING CHANGE: defaultProps have been removed from all function components.
It should be backward compatible, but it's safer to release the major version.
The default props of some internal class components have also been rewritten.
Bumped react and react-dom to 18.2.0 in devDependencies.

package.json

@@ -61,8 +61,8 @@
     "husky": "4.3.0",
     "lint-staged": "10.4.0",
     "prettier": "2.1.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rollup": "2.26.5",
     "rollup-plugin-peer-deps-external": "2.2.3",
     "rollup-plugin-terser": "5.3.0",

src/components/ContentEditable/ContentEditable.jsx

@@ -28,8 +28,8 @@ const replaceCaret = (el, activateAfterChange) => {
 };
 
 export class ContentEditable extends Component {
-  constructor({value = undefined, placeholder = "", disabled = false, activateAfterChange = false, autoFocus = false, onChange = () => {}, onKeyPress = () => {}, ...rest}) {
-    super({value, placeholder,disabled, activateAfterChange, autoFocus, onChange, onKeyPress, ...rest});
+  constructor(props) {
+    super(props);
     this.msgRef = React.createRef();
   }
 
@@ -47,7 +47,7 @@ export class ContentEditable extends Component {
     const {
       props: { onKeyPress },
     } = this;
-    onKeyPress(evt);
+    onKeyPress?.(evt);
   };
 
   handleInput = (evt) => {
@@ -56,7 +56,7 @@ export class ContentEditable extends Component {
     } = this;
 
     const target = evt.target;
-    onChange(target.innerHTML, target.textContent, target.innerText);
+    onChange?.(target.innerHTML, target.textContent, target.innerText);
   };
 
   // Public API

src/components/ConversationHeader/ConversationHeaderContent.jsx

@@ -4,10 +4,10 @@ import classNames from "classnames";
 import { prefix } from "../settings";
 
 export const ConversationHeaderContent = ({
-  userName,
+  userName = "",
   info = "",
   children = undefined,
-  className = "",
+  className,
   ...rest
 }) => {
   const cName = `${prefix}-conversation-header__content`;

src/components/Loader/Loader.jsx

@@ -3,7 +3,12 @@ import PropTypes from "prop-types";
 import classNames from "classnames";
 import { prefix } from "../settings";
 
-export const Loader = ({ className = undefined, variant = "default", children = undefined, ...rest }) => {
+export const Loader = ({
+  className = undefined,
+  variant = "default",
+  children,
+  ...rest
+}) => {
   const cName = `${prefix}-loader`;
   const textClass =
     React.Children.count(children) > 0 ? `${cName}--content` : "";

src/components/MessageList/MessageList.jsx

@@ -12,18 +12,8 @@ import MessageSeparator from "../MessageSeparator";
 import MessageListContent from "./MessageListContent";
 
 class MessageListInner extends React.Component {
-  constructor({
-                typingIndicator = undefined,
-                loading = false,
-                loadingMore = false,
-                loadingMorePosition = "top",
-                disableOnYReachWhenNoScroll = false,
-                autoScrollToBottom = true,
-                autoScrollToBottomOnMount = true,
-                scrollBehavior = "auto",
-                ...rest
-  }) {
-    super({typingIndicator, loading, loadingMore, loadingMorePosition, disableOnYReachWhenNoScroll, autoScrollToBottom, autoScrollToBottomOnMount, scrollBehavior, ...rest});
+  constructor(props) {
+    super(props);
 
     this.scrollPointRef = React.createRef();
     this.containerRef = React.createRef();
@@ -410,9 +400,19 @@ MessageList.propTypes = {
   className: PropTypes.string,
 };
 
-
+MessageList.defaultProps = {
+  typingIndicator: undefined,
+  loading: false,
+  loadingMore: false,
+  loadingMorePosition: "top",
+  disableOnYReachWhenNoScroll: false,
+  autoScrollToBottom: true,
+  autoScrollToBottomOnMount: true,
+  scrollBehavior: "auto",
+};
 
 MessageListInner.propTypes = MessageList.propTypes;
+MessageListInner.defaultProps = MessageList.defaultProps;
 
 MessageList.Content = MessageListContent;
 

src/components/Scroll/ReactPerfectScrollbar.jsx

@@ -18,53 +18,15 @@ const handlerNameByEvent = {
 Object.freeze(handlerNameByEvent);
 
 export default class ScrollBar extends Component {
-  constructor({
-    className = "",
-    style = undefined,
-    option = undefined,
-    options = undefined,
-    containerRef = () => {},
-    onScrollY = undefined,
-    onScrollX = undefined,
-    onScrollUp = undefined,
-    onScrollDown = undefined,
-    onScrollLeft = undefined,
-    onScrollRight = undefined,
-    onYReachStart = undefined,
-    onYReachEnd = undefined,
-    onXReachStart = undefined,
-    onXReachEnd = undefined,
-    onSync = (ps) => ps.update(),
-    component = "div",
-    ...rest
-  }) {
-    super({
-      className,
-      style,
-      option,
-      options,
-      containerRef,
-      onScrollX,
-      onScrollY,
-      onScrollUp,
-      onScrollDown,
-      onScrollLeft,
-      onScrollRight,
-      onYReachStart,
-      onYReachEnd,
-      onXReachStart,
-      onXReachEnd,
-      onSync,
-      component,
-      ...rest
-    });
-
+  constructor(props) {
+    super(props);
     this.handleRef = this.handleRef.bind(this);
     this._handlerByEvent = {};
   }
 
   componentDidMount() {
     if (this.props.option) {
+      /* eslint-disable-next-line no-console */
       console.warn(
         'react-perfect-scrollbar: the "option" prop has been deprecated in favor of "options"'
       );
@@ -139,12 +101,17 @@ export default class ScrollBar extends Component {
   }
 
   updateScroll() {
-    this.props.onSync(this._ps);
+    const onSync = this.props.onSync;
+    if (typeof onSync === "function") {
+      onSync(this._ps);
+    } else {
+      this._ps.update();
+    }
   }
 
   handleRef(ref) {
     this._container = ref;
-    this.props.containerRef(ref);
+    this.props.containerRef?.(ref);
   }
 
   render() {
@@ -169,7 +136,8 @@ export default class ScrollBar extends Component {
       children,
       ...remainProps
     } = this.props;
-    const Comp = component;
+
+    const Comp = typeof component === "undefined" ? "div" : component;
 
     return (
       <Comp style={style} ref={this.handleRef} {...remainProps}>

src/components/Scroll/index.jsx

@@ -1,3 +1,3 @@
-import Scrollbar from "./ReactPerfectScrollbar";
+import ScrollBar from "./ReactPerfectScrollbar";
 export * from "./ReactPerfectScrollbar";
-export default Scrollbar;
+export default ScrollBar;