fix: props with children

src/Container.tsx

@@ -1,4 +1,4 @@
-import React, { Component, CSSProperties } from 'react';
+import React, { Component, CSSProperties, PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
 import { smoothDnD as container, ContainerOptions, SmoothDnD } from 'smooth-dnd';
 import { dropHandlers } from 'smooth-dnd';
@@ -7,34 +7,34 @@ container.dropHandler = dropHandlers.reactDropHandler().handler;
 container.wrapChild = false;
 
 interface ContainerProps extends ContainerOptions {
-	render?: (rootRef: React.RefObject<any>) => React.ReactElement;
-	style?: CSSProperties;
+  render?: (rootRef: React.RefObject<any>) => React.ReactElement;
+  style?: CSSProperties;
 }
 
-class Container extends Component<ContainerProps> {
-	public static propTypes = {
-		behaviour: PropTypes.oneOf(['move', 'copy', 'drop-zone', 'contain']),
-		groupName: PropTypes.string,
-		orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-		style: PropTypes.object,
-		dragHandleSelector: PropTypes.string,
-		nonDragAreaSelector: PropTypes.string,
-		dragBeginDelay: PropTypes.number,
-		animationDuration: PropTypes.number,
-		autoScrollEnabled: PropTypes.bool,
-		lockAxis: PropTypes.string,
-		dragClass: PropTypes.string,
-		dropClass: PropTypes.string,
-		onDragStart: PropTypes.func,
-		onDragEnd: PropTypes.func,
-		onDrop: PropTypes.func,
-		getChildPayload: PropTypes.func,
-		shouldAnimateDrop: PropTypes.func,
-		shouldAcceptDrop: PropTypes.func,
-		onDragEnter: PropTypes.func,
-		onDragLeave: PropTypes.func,
-		render: PropTypes.func,
-		getGhostParent: PropTypes.func,
+class Container extends Component<PropsWithChildren<ContainerProps>> {
+  public static propTypes = {
+    behaviour: PropTypes.oneOf(['move', 'copy', 'drop-zone', 'contain']),
+    groupName: PropTypes.string,
+    orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+    style: PropTypes.object,
+    dragHandleSelector: PropTypes.string,
+    nonDragAreaSelector: PropTypes.string,
+    dragBeginDelay: PropTypes.number,
+    animationDuration: PropTypes.number,
+    autoScrollEnabled: PropTypes.bool,
+    lockAxis: PropTypes.string,
+    dragClass: PropTypes.string,
+    dropClass: PropTypes.string,
+    onDragStart: PropTypes.func,
+    onDragEnd: PropTypes.func,
+    onDrop: PropTypes.func,
+    getChildPayload: PropTypes.func,
+    shouldAnimateDrop: PropTypes.func,
+    shouldAcceptDrop: PropTypes.func,
+    onDragEnter: PropTypes.func,
+    onDragLeave: PropTypes.func,
+    render: PropTypes.func,
+    getGhostParent: PropTypes.func,
     removeOnDropOut: PropTypes.bool,
     dropPlaceholder: PropTypes.oneOfType([
       PropTypes.shape({
@@ -44,19 +44,19 @@ class Container extends Component<ContainerProps> {
       }),
       PropTypes.bool,
     ]),
-	};
+  };
 
-	public static defaultProps = {
-		behaviour: 'move',
-		orientation: 'vertical',
-	};
+  public static defaultProps = {
+    behaviour: 'move',
+    orientation: 'vertical',
+  };
 
-	prevContainer: null;
-	container: SmoothDnD = null!;
-	containerRef: React.RefObject<any> = React.createRef();
+  prevContainer: null;
+  container: SmoothDnD = null!;
+  containerRef: React.RefObject<any> = React.createRef();
   constructor(props: ContainerProps) {
     super(props);
-		this.getContainerOptions = this.getContainerOptions.bind(this);
+    this.getContainerOptions = this.getContainerOptions.bind(this);
     this.getContainer = this.getContainer.bind(this);
     this.isObjectTypePropsChanged = this.isObjectTypePropsChanged.bind(this);
     this.prevContainer = null;
@@ -106,19 +106,19 @@ class Container extends Component<ContainerProps> {
 
   render() {
     if (this.props.render) {
-			return this.props.render(this.containerRef);
+      return this.props.render(this.containerRef);
     } else {
       return (
         <div style={this.props.style} ref={this.containerRef}>
           {this.props.children}
         </div>
       );
     }
-	}
-	
+  }
+
   getContainer() {
-		return this.containerRef.current;
-	}
+    return this.containerRef.current;
+  }
 
   getContainerOptions(): ContainerOptions {
     return Object.keys(this.props).reduce((result: ContainerOptions, key: string) => {
@@ -134,7 +134,7 @@ class Container extends Component<ContainerProps> {
       }
 
       return result;
-    },{}) as ContainerOptions;
+    }, {}) as ContainerOptions;
   }
 }
 

src/Draggable.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
 import { constants } from 'smooth-dnd';
 const {
@@ -10,7 +10,7 @@ export interface DraggableProps {
 	className?: string;
 }
 
-class Draggable extends Component<DraggableProps> {
+class Draggable extends Component<PropsWithChildren<DraggableProps>> {
 	public static propsTypes = {
 		render: PropTypes.func,
 		className: PropTypes.string,
@@ -20,7 +20,7 @@ class Draggable extends Component<DraggableProps> {
 		if (this.props.render) {
 			return React.cloneElement(this.props.render(), { className: wrapperClass });
 		}
-		
+
 		const clsName = `${this.props.className ? (this.props.className + ' ') : ''}`
 		return (
 			<div {...this.props} className={`${clsName}${wrapperClass}`} >