@reykjavik/hanna-react 0.10.158 → 0.10.159

package/CHANGELOG.md

@@ -4,20 +4,21 @@
 
 - ... <!-- Add new lines here. -->
 
-## 0.10.158
+## 0.10.159
 
-_2025-09-16_
+_2025-10-09_
 
-- `Multiselect`
-  - feat: Add prop `onDropdown` prop
-  - fix: Scope "global" keyboard event listener to the component's element
+- `FileUpload`:
+  - feat: Add prop `unstable_confirmReplace` for multi-upload name-conflicts
 
-## 0.10.157
+## 0.10.157 – 0.10.158
 
 _2025-09-16_
 
 - `Multiselect`
+  - feat: Add prop `onDropdown` prop
   - fix: Sync `.checked` prop of keyboard-toggled `input`s with visual state
+  - fix: Scope "global" keyboard event listener to the component's element
 - `Selectbox`:
   - fix: Remove stray `modifier` prop from `SelectboxProps`
 - docs: Add JSDoc comments for `FormfieldProps.renderInput` parameters

package/FileInput/_FileInput.utils.d.ts

@@ -21,8 +21,6 @@ export declare const formatBytes: (bytes: number, lang?: string, decimals?: numb
  * Figures out how to handle adding files to a FileInput
  * Which files to retaine, which too delete, and
  * what the updated fileList should look like.
- *
- *
  */
 export declare const getFileListUpdate: (oldFileList: Array<File>, added: Array<File>, replaceMode: boolean) => {
     fileList: File[];

package/FileInput/_FileInput.utils.js

@@ -46,8 +46,6 @@ exports.formatBytes = formatBytes;
  * Figures out how to handle adding files to a FileInput
  * Which files to retaine, which too delete, and
  * what the updated fileList should look like.
- *
- *
  */
 const getFileListUpdate = (oldFileList, added, 
 /**

package/FileInput.d.ts

@@ -23,7 +23,8 @@ export type FileInputProps = FormFieldWrappingProps & {
     onFilesUpdated?: (
     /** Updated, full list of Files. */
     files: Array<File>, 
-    /** Information about which Files were added or removed during with this update.
+    /**
+     * Information about which Files were added or removed during this update.
      *
      * NOTE: When a diff contains both added and deleted files, this indicates a
      * name-conflict occurred — i.e. one of the added files has a name that
@@ -36,6 +37,12 @@ export type FileInputProps = FormFieldWrappingProps & {
         deleted?: Array<File>;
         added?: Array<File>;
     }) => void;
+    /**
+     * Confirm replacing existing (name-conflicting) files in multi-upload mode
+     *
+     * This feature is "unstable" because its behavior might change in the future.
+     */
+    unstable_confirmReplace?: boolean;
     onFilesRejected?: (rejectedFiles: Array<File>) => void;
     name?: string;
     value?: ReadonlyArray<File>;

package/FileInput.js

@@ -29,6 +29,11 @@ const defaultDropzoneText = {
         react_1.default.createElement("strong", null, "kliknij"),
         " by wybra\u0107.")),
 };
+const replaceFileTest = {
+    is: 'Yfirskrifa núverandi skrá',
+    en: 'Replace existing file',
+    pl: 'Zastąp istniejący plik',
+};
 const defaultOnFilesRejected = (rejectedFiles) => {
     window.alert(`Error:\n${rejectedFiles
         .map((elm) => {
@@ -49,7 +54,7 @@ const FileInput = (props) => {
     const _d = (0, FormField_js_1.groupFormFieldWrapperProps)(props), { dropzoneProps, // eslint-disable-line deprecation/deprecation
     multiple = (_b = (_a = props.dropzoneProps) === null || _a === void 0 ? void 0 : _a.multiple) !== null && _b !== void 0 ? _b : true, // eslint-disable-line deprecation/deprecation
     accept = (_c = props.dropzoneProps) === null || _c === void 0 ? void 0 : _c.accept, // eslint-disable-line deprecation/deprecation
-    dropzoneText = defaultDropzoneText[lang](), removeFileText = defaultRemoveFileText[lang], FileList = _FileInputFileList_js_1.DefaultFileList, onFilesUpdated = () => undefined, onFilesRejected, showFileSize, showImagePreviews, value = [], fieldWrapperProps } = _d, inputElementProps = tslib_1.__rest(_d, ["dropzoneProps", "multiple", "accept", "dropzoneText", "removeFileText", "FileList", "onFilesUpdated", "onFilesRejected", "showFileSize", "showImagePreviews", "value", "fieldWrapperProps"]);
+    dropzoneText = defaultDropzoneText[lang](), unstable_confirmReplace, removeFileText = defaultRemoveFileText[lang], FileList = _FileInputFileList_js_1.DefaultFileList, onFilesUpdated = () => undefined, onFilesRejected, showFileSize, showImagePreviews, value = [], fieldWrapperProps } = _d, inputElementProps = tslib_1.__rest(_d, ["dropzoneProps", "multiple", "accept", "dropzoneText", "unstable_confirmReplace", "removeFileText", "FileList", "onFilesUpdated", "onFilesRejected", "showFileSize", "showImagePreviews", "value", "fieldWrapperProps"]);
     const domid = (0, useDomid_js_1.useDomid)(props.id);
     const fileInputWrapper = (0, react_1.useRef)(null);
     const fileInput = (0, react_1.useRef)(null);
@@ -113,14 +118,24 @@ const FileInput = (props) => {
     };
     const addFiles = (added) => {
         const { fileList, diff } = (0, _FileInput_utils_js_1.getFileListUpdate)(files, added, !multiple);
+        let updatedFileList = fileList;
+        if (diff.deleted && multiple && props.unstable_confirmReplace) {
+            diff.deleted = diff.deleted.filter((file) => window.confirm(`${replaceFileTest} "${file.name}"?`));
+            // When unstable_confirmReplace becomes stable, we should stop returning
+            // `fileList` from getFileListUpdate and just always do this thing.
+            // That change will require changing the tests too, so let's wait.
+            updatedFileList = files
+                .filter((file) => !diff.deleted.includes(file))
+                .concat(added);
+        }
         if (fileInput.current) {
-            fileInput.current.files = arrayToFileList(fileList);
+            fileInput.current.files = arrayToFileList(updatedFileList);
         }
         if (inputRef.current) {
             // Empty on every add
             inputRef.current.files = arrayToFileList([]);
         }
-        onFilesUpdated(fileList, diff);
+        onFilesUpdated(updatedFileList, diff);
     };
     return (react_1.default.createElement(FormField_js_1.default, Object.assign({ extraClassName: (0, hanna_utils_1.modifiedClass)('FileInput', [multiple && 'multi']) }, fieldWrapperProps, { id: `${domid}-fake`, LabelTag: "h4", renderInput: (className, inputProps /* , addFocusProps */) => {
             return (react_1.default.createElement("div", { className: className.control, ref: fileInputWrapper },

package/esm/FileInput/_FileInput.utils.d.ts

@@ -21,8 +21,6 @@ export declare const formatBytes: (bytes: number, lang?: string, decimals?: numb
  * Figures out how to handle adding files to a FileInput
  * Which files to retaine, which too delete, and
  * what the updated fileList should look like.
- *
- *
  */
 export declare const getFileListUpdate: (oldFileList: Array<File>, added: Array<File>, replaceMode: boolean) => {
     fileList: File[];

package/esm/FileInput/_FileInput.utils.js

@@ -40,8 +40,6 @@ export const formatBytes = (bytes, lang = 'is', decimals = 2) => {
  * Figures out how to handle adding files to a FileInput
  * Which files to retaine, which too delete, and
  * what the updated fileList should look like.
- *
- *
  */
 export const getFileListUpdate = (oldFileList, added, 
 /**

package/esm/FileInput.d.ts

@@ -23,7 +23,8 @@ export type FileInputProps = FormFieldWrappingProps & {
     onFilesUpdated?: (
     /** Updated, full list of Files. */
     files: Array<File>, 
-    /** Information about which Files were added or removed during with this update.
+    /**
+     * Information about which Files were added or removed during this update.
      *
      * NOTE: When a diff contains both added and deleted files, this indicates a
      * name-conflict occurred — i.e. one of the added files has a name that
@@ -36,6 +37,12 @@ export type FileInputProps = FormFieldWrappingProps & {
         deleted?: Array<File>;
         added?: Array<File>;
     }) => void;
+    /**
+     * Confirm replacing existing (name-conflicting) files in multi-upload mode
+     *
+     * This feature is "unstable" because its behavior might change in the future.
+     */
+    unstable_confirmReplace?: boolean;
     onFilesRejected?: (rejectedFiles: Array<File>) => void;
     name?: string;
     value?: ReadonlyArray<File>;

package/esm/FileInput.js

@@ -26,6 +26,11 @@ const defaultDropzoneText = {
         React.createElement("strong", null, "kliknij"),
         " by wybra\u0107.")),
 };
+const replaceFileTest = {
+    is: 'Yfirskrifa núverandi skrá',
+    en: 'Replace existing file',
+    pl: 'Zastąp istniejący plik',
+};
 const defaultOnFilesRejected = (rejectedFiles) => {
     window.alert(`Error:\n${rejectedFiles
         .map((elm) => {
@@ -46,7 +51,7 @@ export const FileInput = (props) => {
     const _d = groupFormFieldWrapperProps(props), { dropzoneProps, // eslint-disable-line deprecation/deprecation
     multiple = (_b = (_a = props.dropzoneProps) === null || _a === void 0 ? void 0 : _a.multiple) !== null && _b !== void 0 ? _b : true, // eslint-disable-line deprecation/deprecation
     accept = (_c = props.dropzoneProps) === null || _c === void 0 ? void 0 : _c.accept, // eslint-disable-line deprecation/deprecation
-    dropzoneText = defaultDropzoneText[lang](), removeFileText = defaultRemoveFileText[lang], FileList = DefaultFileList, onFilesUpdated = () => undefined, onFilesRejected, showFileSize, showImagePreviews, value = [], fieldWrapperProps } = _d, inputElementProps = __rest(_d, ["dropzoneProps", "multiple", "accept", "dropzoneText", "removeFileText", "FileList", "onFilesUpdated", "onFilesRejected", "showFileSize", "showImagePreviews", "value", "fieldWrapperProps"]);
+    dropzoneText = defaultDropzoneText[lang](), unstable_confirmReplace, removeFileText = defaultRemoveFileText[lang], FileList = DefaultFileList, onFilesUpdated = () => undefined, onFilesRejected, showFileSize, showImagePreviews, value = [], fieldWrapperProps } = _d, inputElementProps = __rest(_d, ["dropzoneProps", "multiple", "accept", "dropzoneText", "unstable_confirmReplace", "removeFileText", "FileList", "onFilesUpdated", "onFilesRejected", "showFileSize", "showImagePreviews", "value", "fieldWrapperProps"]);
     const domid = useDomid(props.id);
     const fileInputWrapper = useRef(null);
     const fileInput = useRef(null);
@@ -110,14 +115,24 @@ export const FileInput = (props) => {
     };
     const addFiles = (added) => {
         const { fileList, diff } = getFileListUpdate(files, added, !multiple);
+        let updatedFileList = fileList;
+        if (diff.deleted && multiple && props.unstable_confirmReplace) {
+            diff.deleted = diff.deleted.filter((file) => window.confirm(`${replaceFileTest} "${file.name}"?`));
+            // When unstable_confirmReplace becomes stable, we should stop returning
+            // `fileList` from getFileListUpdate and just always do this thing.
+            // That change will require changing the tests too, so let's wait.
+            updatedFileList = files
+                .filter((file) => !diff.deleted.includes(file))
+                .concat(added);
+        }
         if (fileInput.current) {
-            fileInput.current.files = arrayToFileList(fileList);
+            fileInput.current.files = arrayToFileList(updatedFileList);
         }
         if (inputRef.current) {
             // Empty on every add
             inputRef.current.files = arrayToFileList([]);
         }
-        onFilesUpdated(fileList, diff);
+        onFilesUpdated(updatedFileList, diff);
     };
     return (React.createElement(FormField, Object.assign({ extraClassName: modifiedClass('FileInput', [multiple && 'multi']) }, fieldWrapperProps, { id: `${domid}-fake`, LabelTag: "h4", renderInput: (className, inputProps /* , addFocusProps */) => {
             return (React.createElement("div", { className: className.control, ref: fileInputWrapper },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.158",
+	"version": "0.10.159",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",