@veracity/vui 2.23.0 → 2.24.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.23.0",
+  "version": "2.24.0-beta.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/dragAndDrop/dragAndDrop.tsx

@@ -23,8 +23,9 @@ const DragAndDropBase = styled.labelBox`
 export const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {
   const {
     accept,
-    icon = defaultIcon,
     className,
+    icon = defaultIcon,
+    isFolderUpload,
     onFilesAdded,
     multiple = true,
     text = defaultText,
@@ -35,7 +36,10 @@ export const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {
   const fileInput = useRef<HTMLInputElement>(null)
   const styles = useStyleConfig('DragAndDrop', props)
 
-  const processFiles = (files: FileList): File[] => Array.from(files).map(file => file)
+  const processFiles = (files: FileList): File[] => {
+    console.log('files', files)
+    return Array.from(files).map(file => file)
+  }
 
   const handleFileInput = (e: ChangeEvent<HTMLInputElement>) => {
     e.preventDefault()
@@ -76,14 +80,15 @@ export const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {
           {text}
         </T>
       )}
-      <v.input
+      <input
         accept={accept}
         className="vui-drag-and-drop-hidden-input"
-        display="none"
         multiple={multiple}
         onChange={handleFileInput}
         ref={fileInput}
+        style={{ display: 'none' }}
         type={inputType}
+        {...(isFolderUpload && { webkitdirectory: 'true', directory: 'true' })}
       />
     </DragAndDropBase>
   )

package/src/dragAndDrop/dragAndDrop.types.ts

@@ -10,6 +10,8 @@ export type DragAndDropProps = Omit<BoxProps, 'variant'> &
     disabled?: boolean
     /** The message icon. @default `falCloudUpload` */
     icon?: IconProp
+    /** Allow folder upload @default `false` */
+    isFolderUpload?: boolean
     /** Allows to select multiple files when the drop zone is clicked.. @default `true` */
     multiple?: boolean
     /** The message text. @default `Click or drag files to this area` */