@veracity/vui 2.5.0 → 2.5.1

package/dist/cjs/dragAndDrop/dragAndDrop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dragAndDrop.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAatD,yDAAyD;AACzD,eAAO,MAAM,WAAW,2DA8DtB,CAAA;AAEF,eAAe,WAAW,CAAA"}
+{"version":3,"file":"dragAndDrop.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAetD,yDAAyD;AACzD,eAAO,MAAM,WAAW,2DAmEtB,CAAA;AAEF,eAAe,WAAW,CAAA"}

package/dist/cjs/dragAndDrop/dragAndDrop.js

@@ -45,6 +45,7 @@ const t_1 = __importDefault(require("../t"));
 const utils_1 = require("../utils");
 const defaultIcon = 'falCloudUpload';
 const defaultText = 'Click or drag files to this area';
+const inputType = 'file';
 const DragAndDropBase = core_1.styled.labelBox `
   display: flex;
   min-width: 0;
@@ -63,8 +64,12 @@ exports.DragAndDrop = (0, core_1.vui)((props, ref) => {
         if (disabled)
             return undefined;
         const files = processFiles((_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.files);
-        if (files === null || files === void 0 ? void 0 : files.length)
+        if (files === null || files === void 0 ? void 0 : files.length) {
             onFilesAdded === null || onFilesAdded === void 0 ? void 0 : onFilesAdded(files);
+            // Reseting the input type to allow selecting the same file(s)
+            e.currentTarget.type = '';
+            e.currentTarget.type = inputType;
+        }
     };
     const handleDrop = (e) => {
         var _a;
@@ -79,6 +84,6 @@ exports.DragAndDrop = (0, core_1.vui)((props, ref) => {
         children || (react_1.default.createElement(t_1.default, { display: "flex" },
             react_1.default.createElement(icon_1.default, { mr: 1, name: icon }),
             text)),
-        react_1.default.createElement(core_1.v.input, { accept: accept, className: "vui-drag-and-drop-hidden-input", display: "none", multiple: multiple, onChange: handleFileInput, ref: fileInput, type: "file" })));
+        react_1.default.createElement(core_1.v.input, { accept: accept, className: "vui-drag-and-drop-hidden-input", display: "none", multiple: multiple, onChange: handleFileInput, ref: fileInput, type: inputType })));
 });
 exports.default = exports.DragAndDrop;

package/dist/esm/dragAndDrop/dragAndDrop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dragAndDrop.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAatD,yDAAyD;AACzD,eAAO,MAAM,WAAW,2DA8DtB,CAAA;AAEF,eAAe,WAAW,CAAA"}
+{"version":3,"file":"dragAndDrop.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAetD,yDAAyD;AACzD,eAAO,MAAM,WAAW,2DAmEtB,CAAA;AAEF,eAAe,WAAW,CAAA"}

package/dist/esm/dragAndDrop/dragAndDrop.js

@@ -5,6 +5,7 @@ import T from '../t';
 import { cs } from '../utils';
 const defaultIcon = 'falCloudUpload';
 const defaultText = 'Click or drag files to this area';
+const inputType = 'file';
 const DragAndDropBase = styled.labelBox `
   display: flex;
   min-width: 0;
@@ -22,8 +23,12 @@ export const DragAndDrop = vui((props, ref) => {
         if (disabled)
             return undefined;
         const files = processFiles(e?.currentTarget?.files);
-        if (files?.length)
+        if (files?.length) {
             onFilesAdded?.(files);
+            // Reseting the input type to allow selecting the same file(s)
+            e.currentTarget.type = '';
+            e.currentTarget.type = inputType;
+        }
     };
     const handleDrop = (e) => {
         e.preventDefault();
@@ -37,6 +42,6 @@ export const DragAndDrop = vui((props, ref) => {
         children || (React.createElement(T, { display: "flex" },
             React.createElement(Icon, { mr: 1, name: icon }),
             text)),
-        React.createElement(v.input, { accept: accept, className: "vui-drag-and-drop-hidden-input", display: "none", multiple: multiple, onChange: handleFileInput, ref: fileInput, type: "file" })));
+        React.createElement(v.input, { accept: accept, className: "vui-drag-and-drop-hidden-input", display: "none", multiple: multiple, onChange: handleFileInput, ref: fileInput, type: inputType })));
 });
 export default DragAndDrop;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "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

@@ -10,6 +10,8 @@ const defaultIcon: IconProp = 'falCloudUpload'
 
 const defaultText = 'Click or drag files to this area'
 
+const inputType = 'file'
+
 const DragAndDropBase = styled.labelBox`
   display: flex;
   min-width: 0;
@@ -39,7 +41,12 @@ export const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {
     e.preventDefault()
     if (disabled) return undefined
     const files = processFiles(e?.currentTarget?.files as FileList)
-    if (files?.length) onFilesAdded?.(files)
+    if (files?.length) {
+      onFilesAdded?.(files)
+      // Reseting the input type to allow selecting the same file(s)
+      e.currentTarget.type = ''
+      e.currentTarget.type = inputType
+    }
   }
 
   const handleDrop = (e: DragEvent<HTMLElement>) => {
@@ -76,7 +83,7 @@ export const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {
         multiple={multiple}
         onChange={handleFileInput}
         ref={fileInput}
-        type="file"
+        type={inputType}
       />
     </DragAndDropBase>
   )