[WIP]: Refactor footer, header nad children at Dropzone component

src/files-ui/components/dropzone/components/DropzoneChildren/DropzoneChildren.scss

+.files-ui-dropzone-children-container {
+  width: 100%;
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  flex-wrap: wrap;
+ //padding: 5px 0;
+  background-color: brown;
+}

src/files-ui/components/dropzone/DropzoneChildren.tsx → src/files-ui/components/dropzone/components/DropzoneChildren/DropzoneChildren.tsx

@@ -3,7 +3,8 @@ import {
   DropzoneLocalizerSelector,
   Localization,
   LocalLabels,
-} from "../../core";
+} from "../../../../core";
+import "./DropzoneChildren.scss";
 
 declare type DropzoneChildrenProps = {
   children?: React.ReactNode | [];
@@ -20,12 +21,14 @@ const DropzoneChildren: React.FC<DropzoneChildrenProps> = (
 
   //children will be always consider as more important
   if (children) {
-    return <React.Fragment>{children}</React.Fragment>;
+    return (
+      <div className="files-ui-dropzone-children-container">{children}</div>
+    );
   } else
     return (
-      <React.Fragment>
+      <div className="files-ui-dropzone-children-container">
         <label> {label || (DropzoneLocalizer.defaultLabel as string)}</label>
-      </React.Fragment>
+      </div>
     );
 };
 export default DropzoneChildren;

src/files-ui/components/dropzone/components/dropzone/Dropzone.scss

 @import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900);
 
 .fui-dropzone-root {
-  min-height: 180px;
   width: 100%;
   min-width: 150px;
+  min-height: 180px;
 
   position: relative;
 
   // DISPLAY
   display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
+  //flex-wrap: wrap;
+  flex-direction: column;
   gap: 0 8px;
-  justify-content: center;
-  align-items: center;
-  padding: 23px 0px;
+  //justify-content: center;
+  //align-items: center;
+  //padding: 23px 0px; 
 
   /// label
   color: #646c7f;
@@ -48,10 +48,13 @@
 }
 
 .files-ui-header {
-  height: 22px;
+  //-color: brown;
+  //box-sizing: border-box;
+  /*  height: 22px;
   position: absolute; 
-  cursor: text;
   top: 0;
+  */
+  cursor: text;
   display: flex;
   //width: calc(100% - 10px);
   width: 100%;
@@ -60,11 +63,11 @@
   justify-content: flex-end;
   //font-family: "Poppins", sans-serif;
   font-family: inherit;
-  padding-right: 10px;
+  //padding-right: 10px;
   font-size: 1rem;
   @media (max-width: 960px) {
-    width: calc(100% - 1px);
-    padding-right: 1px;
+    //width: calc(100% - 1px);
+    //padding-right: 1px;
     font-size: 0.8rem;
   }
 }
@@ -73,11 +76,11 @@
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
   box-sizing: border-box;
-  height: 23px;
-  position: absolute;
   cursor: text;
+  /* height: 23px;
+  position: absolute;
   bottom: 0;
-  left: 0;
+  left: 0; */
   // width: calc(100% - 10px);
   width: 100%;
   display: flex;
@@ -97,9 +100,10 @@
   -webkit-line-clamp: 1; /* number of lines to show */
   line-clamp: 1;
   -webkit-box-orient: vertical;
+  //background-color: brown;
 
   @media (max-width: 960px) {
-    width: calc(100% - 1px);
+    //width: calc(100% - 1px);
     padding-left: 1px;
     font-size: 0.9rem;
   }

src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx

@@ -16,7 +16,7 @@ import {
   FunctionLabel,
   ExtFileManager,
   sleepPreparing,
-  UploadResponse,
+  //UploadResponse,
   instantPreparingToUploadOne,
   fakeFuiUpload,
   uploadExtFile,
@@ -35,8 +35,10 @@ import {
   //DropzoneActionButton,
   DropzoneActions,
   DropzoneProps,
+  FooterConfig,
+  HeaderConfig,
 } from "./DropzoneProps";
-import DropzoneChildren from "./../../DropzoneChildren";
+import DropzoneChildren from "../DropzoneChildren/DropzoneChildren";
 import useDropzoneClassName from "./../../useDropzoneClassName";
 import DropzoneDisabledLayer from "../DropzoneDisabledLayer/DropzoneDisabledLayer";
 
@@ -85,8 +87,8 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
     onUploadStart,
     onUploadFinish,
     actionButtons,
-    headerConfig,
-    footerConfg,
+    headerConfig = {},
+    footerConfg = {},
     //advancedConfig,
     ...rest
   } = mergeProps(props, defaultDrozoneProps);
@@ -111,6 +113,24 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
     style: containerStyle,
     className: containerClassName,
   } = actionButtons as DropzoneActions;
+
+  /*  const {
+    cleanFiles: cleanFilesHeader,
+    deleteFiles,
+    maxFileSize: maxFileSizeHeader,
+    uploadFiles,
+    uploading,
+    validFilesCount,
+    customHeader,
+  }: HeaderConfig = headerConfig;
+
+  const {
+    allowedTypesLabel,
+    noMissingFilesLabel,
+    uploadProgressMessage,
+    uploadResultMessage,
+    customFooter,
+  }: FooterConfig = footerConfg; */
   //console.log("Dropzone props", dropOnLayer);
   //localizers
   const DropzoneLocalizer: LocalLabels =