@norges-domstoler/dds-components 11.2.0 → 11.3.0

package/dist/cjs/components/FileUploader/useFileUploader.d.ts

@@ -3,8 +3,12 @@ import { FileUploaderFile } from './fileUploaderReducer';
 import { Accept, FileList } from './types';
 export type FileUploaderHookProps = {
     id: string | undefined;
-    /**Dersom komponenten styres utenfra. En liste over filer som skal være med ved første render. */
+    /**Dersom komponenten skal styres internt. Utgangspunktet for filene som har blitt lastet opp. */
     initialFiles: FileList | undefined;
+    /**Dersom komponenten styres utenfra. Filene som har blitt lastet opp. */
+    value: FileList | undefined;
+    /**Callback for når fil-listen endres. */
+    onChange: (newFiles: FileList) => void;
     /**Hvilke filendelser eller mime-typer som filopplasteren skal akseptere. */
     accept: Accept[] | undefined;
     /**Om filopplasteren er avslått eller ikke */

package/dist/cjs/index.js

@@ -11251,6 +11251,8 @@ var calcRootErrors = function calcRootErrors(files, maxFiles, errorMessage) {
 };
 var useFileUploader = function useFileUploader(props) {
   var initialFiles = props.initialFiles,
+    value = props.value,
+    onChange = props.onChange,
     accept = props.accept,
     maxFiles = props.maxFiles,
     disabled = props.disabled,
@@ -11258,6 +11260,7 @@ var useFileUploader = function useFileUploader(props) {
   var rootRef = React.useRef(null);
   var inputRef = React.useRef(null);
   var buttonRef = React.useRef(null);
+  var isControlled = !!value;
   var initialFileUploaderFiles = React.useMemo(function () {
     return (initialFiles !== null && initialFiles !== void 0 ? initialFiles : []).map(function (f) {
       return {
@@ -11277,6 +11280,21 @@ var useFileUploader = function useFileUploader(props) {
     state = _useReducer2[0],
     dispatch = _useReducer2[1];
   var stateFiles = state.files;
+  React.useEffect(function () {
+    if (isControlled) {
+      var files = value.map(function (file) {
+        var accepted = isFileAccepted(file, accept);
+        return {
+          file: file,
+          errors: accepted ? [] : [getInvalidFileTypeErrorMessage()]
+        };
+      });
+      dispatch({
+        type: 'onSetFiles',
+        payload: files
+      });
+    }
+  }, [value, isControlled, accept, dispatch]);
   React.useEffect(function () {
     dispatch({
       type: 'setRootErrors',
@@ -11349,7 +11367,7 @@ var useFileUploader = function useFileUploader(props) {
           case 0:
             evt.preventDefault();
             if (!isEventWithFiles(evt)) {
-              _context2.next = 8;
+              _context2.next = 9;
               break;
             }
             existingFileNames = stateFiles.map(function (f) {
@@ -11368,17 +11386,22 @@ var useFileUploader = function useFileUploader(props) {
                 errors: accepted ? [] : [getInvalidFileTypeErrorMessage()]
               };
             }).concat(stateFiles);
-            dispatch({
-              type: 'onSetFiles',
-              payload: newFiles
-            });
-          case 8:
+            onChange(newFiles.map(function (f) {
+              return f.file;
+            }));
+            if (!isControlled) {
+              dispatch({
+                type: 'onSetFiles',
+                payload: newFiles
+              });
+            }
+          case 9:
           case "end":
             return _context2.stop();
         }
       }, _callee2);
     }));
-  }, [stateFiles, maxFiles, accept, errorMessage, dispatch]);
+  }, [stateFiles, isControlled, accept, errorMessage, maxFiles, onChange, dispatch]);
   var openFileDialog = React.useCallback(function () {
     if (inputRef.current) {
       inputRef.current.value = '';
@@ -11388,11 +11411,16 @@ var useFileUploader = function useFileUploader(props) {
   var removeFile = React.useCallback(function (file) {
     var newFiles = _toConsumableArray(stateFiles);
     newFiles.splice(stateFiles.indexOf(file), 1);
-    dispatch({
-      type: 'onRemoveFile',
-      payload: newFiles
-    });
-  }, [stateFiles, maxFiles, errorMessage]);
+    onChange(newFiles.map(function (f) {
+      return f.file;
+    }));
+    if (!isControlled) {
+      dispatch({
+        type: 'onRemoveFile',
+        payload: newFiles
+      });
+    }
+  }, [stateFiles, isControlled, maxFiles, errorMessage, onChange, dispatch]);
   var getRootProps = React.useCallback(function () {
     return {
       onBlur: onRootBlur,
@@ -11473,6 +11501,7 @@ var FileUploader = function FileUploader(props) {
     _props$required = props.required,
     required = _props$required === void 0 ? false : _props$required,
     initialFiles = props.initialFiles,
+    value = props.value,
     accept = props.accept,
     maxFiles = props.maxFiles,
     disabled = props.disabled,
@@ -11484,6 +11513,8 @@ var FileUploader = function FileUploader(props) {
   var _useFileUploader = useFileUploader({
       id: id,
       initialFiles: initialFiles,
+      value: value,
+      onChange: onChange,
       accept: accept,
       disabled: disabled,
       maxFiles: maxFiles,
@@ -11497,11 +11528,6 @@ var FileUploader = function FileUploader(props) {
     getInputProps = _useFileUploader.getInputProps,
     getButtonProps = _useFileUploader.getButtonProps,
     _removeFile = _useFileUploader.removeFile;
-  React.useEffect(function () {
-    onChange(stateFiles.map(function (f) {
-      return f.file;
-    }));
-  }, [stateFiles]);
   var hasLabel = label !== undefined;
   var hasTip = tip !== undefined;
   var hasRootErrors = rootErrors.length > 0;

package/dist/components/FileUploader/FileUploader.js

@@ -1,6 +1,6 @@
 import { toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useId, useEffect } from 'react';
+import { useId } from 'react';
 import styled from 'styled-components';
 import 'tslib';
 import '../../icons/utils/StyledSvg.js';
@@ -58,6 +58,7 @@ var FileUploader = function FileUploader(props) {
     _props$required = props.required,
     required = _props$required === void 0 ? false : _props$required,
     initialFiles = props.initialFiles,
+    value = props.value,
     accept = props.accept,
     maxFiles = props.maxFiles,
     disabled = props.disabled,
@@ -69,6 +70,8 @@ var FileUploader = function FileUploader(props) {
   var _useFileUploader = useFileUploader({
       id: id,
       initialFiles: initialFiles,
+      value: value,
+      onChange: onChange,
       accept: accept,
       disabled: disabled,
       maxFiles: maxFiles,
@@ -82,11 +85,6 @@ var FileUploader = function FileUploader(props) {
     getInputProps = _useFileUploader.getInputProps,
     getButtonProps = _useFileUploader.getButtonProps,
     _removeFile = _useFileUploader.removeFile;
-  useEffect(function () {
-    onChange(stateFiles.map(function (f) {
-      return f.file;
-    }));
-  }, [stateFiles]);
   var hasLabel = label !== undefined;
   var hasTip = tip !== undefined;
   var hasRootErrors = rootErrors.length > 0;

package/dist/components/FileUploader/useFileUploader.d.ts

@@ -3,8 +3,12 @@ import { FileUploaderFile } from './fileUploaderReducer';
 import { Accept, FileList } from './types';
 export type FileUploaderHookProps = {
     id: string | undefined;
-    /**Dersom komponenten styres utenfra. En liste over filer som skal være med ved første render. */
+    /**Dersom komponenten skal styres internt. Utgangspunktet for filene som har blitt lastet opp. */
     initialFiles: FileList | undefined;
+    /**Dersom komponenten styres utenfra. Filene som har blitt lastet opp. */
+    value: FileList | undefined;
+    /**Callback for når fil-listen endres. */
+    onChange: (newFiles: FileList) => void;
     /**Hvilke filendelser eller mime-typer som filopplasteren skal akseptere. */
     accept: Accept[] | undefined;
     /**Om filopplasteren er avslått eller ikke */

package/dist/components/FileUploader/useFileUploader.js

@@ -3,7 +3,7 @@ import { __awaiter } from 'tslib';
 import { useRef, useMemo, useReducer, useEffect, useCallback } from 'react';
 import { fileUploaderReducer } from './fileUploaderReducer.js';
 import { fromEvent } from 'file-selector';
-import { preventDefaults, isEventWithFiles, isFileAccepted, getInvalidFileTypeErrorMessage, getTooManyFilesErrorMessage } from './utils.js';
+import { isFileAccepted, getInvalidFileTypeErrorMessage, preventDefaults, isEventWithFiles, getTooManyFilesErrorMessage } from './utils.js';
 
 var calcRootErrors = function calcRootErrors(files, maxFiles, errorMessage) {
   var errors = [];
@@ -17,6 +17,8 @@ var calcRootErrors = function calcRootErrors(files, maxFiles, errorMessage) {
 };
 var useFileUploader = function useFileUploader(props) {
   var initialFiles = props.initialFiles,
+    value = props.value,
+    onChange = props.onChange,
     accept = props.accept,
     maxFiles = props.maxFiles,
     disabled = props.disabled,
@@ -24,6 +26,7 @@ var useFileUploader = function useFileUploader(props) {
   var rootRef = useRef(null);
   var inputRef = useRef(null);
   var buttonRef = useRef(null);
+  var isControlled = !!value;
   var initialFileUploaderFiles = useMemo(function () {
     return (initialFiles !== null && initialFiles !== void 0 ? initialFiles : []).map(function (f) {
       return {
@@ -43,6 +46,21 @@ var useFileUploader = function useFileUploader(props) {
     state = _useReducer2[0],
     dispatch = _useReducer2[1];
   var stateFiles = state.files;
+  useEffect(function () {
+    if (isControlled) {
+      var files = value.map(function (file) {
+        var accepted = isFileAccepted(file, accept);
+        return {
+          file: file,
+          errors: accepted ? [] : [getInvalidFileTypeErrorMessage()]
+        };
+      });
+      dispatch({
+        type: 'onSetFiles',
+        payload: files
+      });
+    }
+  }, [value, isControlled, accept, dispatch]);
   useEffect(function () {
     dispatch({
       type: 'setRootErrors',
@@ -115,7 +133,7 @@ var useFileUploader = function useFileUploader(props) {
           case 0:
             evt.preventDefault();
             if (!isEventWithFiles(evt)) {
-              _context2.next = 8;
+              _context2.next = 9;
               break;
             }
             existingFileNames = stateFiles.map(function (f) {
@@ -134,17 +152,22 @@ var useFileUploader = function useFileUploader(props) {
                 errors: accepted ? [] : [getInvalidFileTypeErrorMessage()]
               };
             }).concat(stateFiles);
-            dispatch({
-              type: 'onSetFiles',
-              payload: newFiles
-            });
-          case 8:
+            onChange(newFiles.map(function (f) {
+              return f.file;
+            }));
+            if (!isControlled) {
+              dispatch({
+                type: 'onSetFiles',
+                payload: newFiles
+              });
+            }
+          case 9:
           case "end":
             return _context2.stop();
         }
       }, _callee2);
     }));
-  }, [stateFiles, maxFiles, accept, errorMessage, dispatch]);
+  }, [stateFiles, isControlled, accept, errorMessage, maxFiles, onChange, dispatch]);
   var openFileDialog = useCallback(function () {
     if (inputRef.current) {
       inputRef.current.value = '';
@@ -154,11 +177,16 @@ var useFileUploader = function useFileUploader(props) {
   var removeFile = useCallback(function (file) {
     var newFiles = _toConsumableArray(stateFiles);
     newFiles.splice(stateFiles.indexOf(file), 1);
-    dispatch({
-      type: 'onRemoveFile',
-      payload: newFiles
-    });
-  }, [stateFiles, maxFiles, errorMessage]);
+    onChange(newFiles.map(function (f) {
+      return f.file;
+    }));
+    if (!isControlled) {
+      dispatch({
+        type: 'onRemoveFile',
+        payload: newFiles
+      });
+    }
+  }, [stateFiles, isControlled, maxFiles, errorMessage, onChange, dispatch]);
   var getRootProps = useCallback(function () {
     return {
       onBlur: onRootBlur,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "11.2.0",
+  "version": "11.3.0",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",
@@ -71,13 +71,13 @@
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.11",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.52.0",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.0",
     "babel-loader": "^9.1.2",
     "babel-plugin-styled-components": "^2.0.7",
     "concurrently": "^7.4.0",
     "eslint": "^8.24.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "^8.7.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-storybook": "^0.6.4",