@helsenorge/file-upload - npm Package Compare versions

Comparing version 31.0.0 to 32.0.2

components/file-upload/example.js

@@ -0,1 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable no-console */
@@ -7,2 +8,3 @@ import * as React from 'react';
 import Label, { Sublabel } from '@helsenorge/designsystem-react/components/Label';
+import Spacer from '@helsenorge/designsystem-react/components/Spacer';
 import Title from '@helsenorge/designsystem-react/components/Title';
@@ -14,3 +16,2 @@ import Validation from '@helsenorge/designsystem-react/components/Validation';
 export const FileUploadExample = () => {
-    var _a, _b;
     const [defaultFiles] = React.useState([new UploadFile([], 'hello2.jpeg', 'id123', 200000, { type: 'image/jpeg' })]);
@@ -20,3 +21,3 @@ const [acceptedFiles1, setAcceptedFiles1] = React.useState([]);
     const [disableButton2, setDisableButton2] = React.useState(false);
-    const useFormReturn = useForm({ mode: 'all' });
+    const useFormReturn = useForm({ mode: 'onSubmit' });
     const fileupload = 'fileupload';
@@ -65,20 +66,4 @@ const fileupload2 = 'fileupload2';
     };
-    return (React.createElement("form", { onSubmit: useFormReturn.handleSubmit(onSubmit) },
-        React.createElement(Title, { htmlMarkup: 'h2', appearance: 'title2' }, '(Støtter react-hook-form):'),
-        React.createElement("br", null),
-        React.createElement(Title, { htmlMarkup: 'h2', appearance: 'title2' }, 'Uten validering'),
-        React.createElement("br", null),
-        React.createElement(FileUpload, { "aria-describedby": sublabelId2, inputId: "fileupload2", label: React.createElement(Label, { labelTexts: [{ text: 'Last opp hva du vil', type: 'semibold' }], sublabel: React.createElement(Sublabel, { id: sublabelId, sublabelTexts: [{ text: 'Ingen begrensninger her' }] }) }), shouldUploadMultiple: true, acceptedFiles: acceptedFiles1, onDeleteFile: onDelete1, onOpenFile: onOpenFile, onRequestLink: onRequestLink, onChangeFile: onChange1 }),
-        React.createElement(Title, { htmlMarkup: 'h2', appearance: 'title2' }, 'Med validering'),
-        React.createElement(Validation, { errorTitle: !useFormReturn.formState.isValid ? 'Sjekk at alt er riktig utfylt' : undefined },
-            React.createElement(Title, { htmlMarkup: 'h3', appearance: 'title3' }, 'Uten dropzone'),
-            React.createElement("br", null),
-            React.createElement(FileUpload, Object.assign({ "aria-describedby": sublabelId2, disabled: disableButton2, errorText: (_a = useFormReturn.formState.errors.fileupload2) === null || _a === void 0 ? void 0 : _a.message, inputId: "fileupload2", label: React.createElement(Label, { labelTexts: [{ text: 'Last opp et bilde', type: 'semibold' }], sublabel: React.createElement(Sublabel, { id: sublabelId, sublabelTexts: [{ text: 'Gyldige filformater er jpeg, png og pdf, maks 300kb' }] }) }), acceptedFiles: useFileUpload2.acceptedFiles, rejectedFiles: useFileUpload2.rejectedFiles, onDeleteFile: onDelete2, onOpenFile: onOpenFile, onRequestLink: onRequestLink, validFileTypes: validFileTypes1 }, useFileUpload2.register(fileupload2, { validate: () => true }), { onChangeFile: onChange2 })),
-            React.createElement(Title, { htmlMarkup: 'h3', appearance: 'title3' }, 'Med dropzone (Er også wrappet av FormGroup, dette trengs ikke, men støttes)'),
-            React.createElement("br", null),
-            React.createElement(FormGroup, { error: (_b = useFormReturn.formState.errors.fileupload) === null || _b === void 0 ? void 0 : _b.message },
-                React.createElement(FileUpload, Object.assign({ "aria-describedby": sublabelId, defaultFiles: defaultFiles, disabled: disableButton, dropzoneStatusText: dropzoneText, error: !!useFormReturn.formState.errors.fileupload, inputId: "fileupload1", label: React.createElement(Label, { labelTexts: [{ text: 'Last opp en eller to bilder', type: 'semibold' }], sublabel: React.createElement(Sublabel, { id: sublabelId, sublabelTexts: [{ text: 'Gyldige filformater er jpeg, png og pdf, maks 300kb per fil og maks 400kb over alle filer' }] }) }), visualDropZone: true, acceptedFiles: useFileUpload1.acceptedFiles, rejectedFiles: useFileUpload1.rejectedFiles, onDeleteFile: onDelete2, onOpenFile: onOpenFile, onRequestLink: onRequestLink, shouldUploadMultiple: true, validFileTypes: validFileTypes1 }, useFileUpload1.register(fileupload, { validate: () => true }), { onChangeFile: onChange2 })))),
-        React.createElement(Button, { type: "submit" }, 'Send inn')));
+    return (_jsxs("form", { onSubmit: useFormReturn.handleSubmit(onSubmit), children: [_jsx(Title, { htmlMarkup: 'h2', appearance: 'title2', children: '(Støtter react-hook-form):' }), _jsx("br", {}), _jsx(Title, { htmlMarkup: 'h2', appearance: 'title2', children: 'Uten validering' }), _jsx("br", {}), _jsx(FileUpload, { "aria-describedby": sublabelId, inputId: "fileupload2", label: _jsx(Label, { labelTexts: [{ text: 'Last opp hva du vil', type: 'semibold' }], sublabel: _jsx(Sublabel, { id: sublabelId, sublabelTexts: [{ text: 'Ingen begrensninger her' }] }) }), shouldUploadMultiple: true, acceptedFiles: acceptedFiles1, onDeleteFile: onDelete1, onOpenFile: onOpenFile, onRequestLink: onRequestLink, onChangeFile: onChange1 }), _jsx(Title, { htmlMarkup: 'h2', appearance: 'title2', children: 'Med validering' }), _jsxs(Validation, { errorTitle: !useFormReturn.formState.isValid ? 'Sjekk at alt er riktig utfylt' : undefined, children: [_jsx(Title, { htmlMarkup: 'h3', appearance: 'title3', children: 'Uten dropzone' }), _jsx("br", {}), _jsx(FileUpload, { "aria-describedby": sublabelId2, disabled: disableButton2, errorText: useFormReturn.formState.errors.fileupload2?.message, inputId: "fileupload2", label: _jsx(Label, { labelTexts: [{ text: 'Last opp et bilde', type: 'semibold' }], sublabel: _jsx(Sublabel, { id: sublabelId2, sublabelTexts: [{ text: 'Gyldige filformater er jpeg, png og pdf, maks 300kb' }] }) }), acceptedFiles: useFileUpload2.acceptedFiles, rejectedFiles: useFileUpload2.rejectedFiles, onDeleteFile: onDelete2, onOpenFile: onOpenFile, onRequestLink: onRequestLink, validFileTypes: validFileTypes1, ...useFileUpload2.register(fileupload2, { validate: () => true }), onChangeFile: onChange2 }), _jsx(Title, { htmlMarkup: 'h3', appearance: 'title3', children: 'Med dropzone (Er også wrappet av FormGroup, dette trengs ikke, men støttes)' }), _jsx("br", {}), _jsx(FormGroup, { error: useFormReturn.formState.errors.fileupload?.message, children: _jsx(FileUpload, { "aria-describedby": sublabelId, defaultFiles: defaultFiles, disabled: disableButton, dropzoneStatusText: dropzoneText, error: !!useFormReturn.formState.errors.fileupload, inputId: "fileupload1", label: _jsx(Label, { labelTexts: [{ text: 'Last opp en eller to bilder', type: 'semibold' }], sublabel: _jsx(Sublabel, { id: sublabelId, sublabelTexts: [{ text: 'Gyldige filformater er jpeg, png og pdf, maks 300kb per fil og maks 400kb over alle filer' }] }) }), visualDropZone: true, acceptedFiles: useFileUpload1.acceptedFiles, rejectedFiles: useFileUpload1.rejectedFiles, onDeleteFile: onDelete2, onOpenFile: onOpenFile, onRequestLink: onRequestLink, shouldUploadMultiple: true, validFileTypes: validFileTypes1, ...useFileUpload1.register(fileupload, { validate: () => true }), onChangeFile: onChange2 }) })] }), _jsx(Spacer, {}), _jsx(Button, { type: "submit", children: 'Send inn' })] }));
 };
 export default FileUploadExample;
-//# sourceMappingURL=example.js.map

components/file-upload/file.d.ts

@@ -32,8 +32,8 @@ import * as React from 'react';
     onDeleteLightboxClose: () => void;
-    renderConfirmDelete: () => false | "" | React.JSX.Element | undefined;
-    renderDeleteButton(): React.JSX.Element | undefined;
-    renderFile(): string | React.JSX.Element | undefined;
-    render(): JSX.Element | null;
+    renderConfirmDelete: () => false | "" | import("react/jsx-runtime").JSX.Element | undefined;
+    renderDeleteButton(): import("react/jsx-runtime").JSX.Element | undefined;
+    renderFile(): string | import("react/jsx-runtime").JSX.Element | undefined;
+    render(): React.JSX.Element | null;
 }
 export {};
 //# sourceMappingURL=file.d.ts.map

components/file-upload/file.js

@@ -0,1 +1,2 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
@@ -26,16 +27,16 @@ import classNames from 'classnames';
             case 'doc':
-                return React.createElement(Icon, { svgIcon: WordDocument, className: className });
+                return _jsx(Icon, { svgIcon: WordDocument, className: className });
             case 'jpg':
             case 'jpeg':
-                return React.createElement(Icon, { svgIcon: JpgFile, className: className });
+                return _jsx(Icon, { svgIcon: JpgFile, className: className });
             case 'pdf':
-                return React.createElement(Icon, { svgIcon: PdfFile, className: className });
+                return _jsx(Icon, { svgIcon: PdfFile, className: className });
             case 'png':
-                return React.createElement(Icon, { svgIcon: PngFile, className: className });
+                return _jsx(Icon, { svgIcon: PngFile, className: className });
             case 'rtf':
-                return React.createElement(Icon, { svgIcon: RtfFile, className: className });
+                return _jsx(Icon, { svgIcon: RtfFile, className: className });
             case 'xml':
-                return React.createElement(Icon, { svgIcon: XmlFile, className: className });
+                return _jsx(Icon, { svgIcon: XmlFile, className: className });
             default:
-                return React.createElement(Icon, { svgIcon: ImgFile, className: className });
+                return _jsx(Icon, { svgIcon: ImgFile, className: className });
         }
@@ -49,12 +50,27 @@ }
         super(props);
-        this.setConfirmDelete = () => {
-            this.setState({ showDeleteLightbox: true });
-        };
-        this.onDeleteLightboxClose = () => {
-            this.setState({ showDeleteLightbox: false });
-        };
-        this.renderConfirmDelete = () => {
-            return (this.state.showDeleteLightbox &&
-                this.props.verifyDeleteText && (React.createElement(Modal, { title: this.props.verifyDeleteText, secondaryButtonText: this.props.cancelText, primaryButtonText: this.props.confirmText, onSuccess: this.deleteFile, onClose: this.onDeleteLightboxClose })));
-        };
+        Object.defineProperty(this, "setConfirmDelete", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.setState({ showDeleteLightbox: true });
+            }
+        });
+        Object.defineProperty(this, "onDeleteLightboxClose", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.setState({ showDeleteLightbox: false });
+            }
+        });
+        Object.defineProperty(this, "renderConfirmDelete", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                return (this.state.showDeleteLightbox &&
+                    this.props.verifyDeleteText && (_jsx(Modal, { title: this.props.verifyDeleteText, secondaryButtonText: this.props.cancelText, primaryButtonText: this.props.confirmText, onSuccess: this.deleteFile, onClose: this.onDeleteLightboxClose })));
+            }
+        });
         this.state = {
@@ -84,9 +100,5 @@ showDeleteLightbox: false,
         if (shouldRenderDeleteButton && !loading) {
-            return (React.createElement(Button, { variant: "borderless", concept: 'destructive', wrapperClassName: classNames(styles.dropzone__deleteButton, {
+            return (_jsxs(Button, { variant: "borderless", concept: 'destructive', wrapperClassName: classNames(styles.dropzone__deleteButton, {
                     [`${this.props.customClass}__button`]: this.props.customClass,
-                }), onClick: confirmDelete ? this.setConfirmDelete : this.deleteFile },
-                React.createElement(Icon, { color: theme.palette.cherry500, svgIcon: TrashCan }),
-                React.createElement(React.Fragment, null,
-                    deleteText,
-                    !dontShowHardcodedText && 'Slett')));
+                }), onClick: confirmDelete ? this.setConfirmDelete : this.deleteFile, children: [_jsx(Icon, { color: theme.palette.cherry500, svgIcon: TrashCan }), _jsxs(_Fragment, { children: [deleteText, !dontShowHardcodedText && 'Slett'] })] }));
         }
@@ -99,5 +111,5 @@ }
             if (attachmentLink) {
-                return (React.createElement("a", { href: attachmentLink, className: classNames({
+                return (_jsx("a", { href: attachmentLink, className: classNames({
                         [`${this.props.customClass}__link`]: this.props.customClass,
-                    }), onClick: this.handleClick }, fileName));
+                    }), onClick: this.handleClick, children: fileName }));
             }
@@ -108,16 +120,10 @@ return fileName;
     render() {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("li", { className: classNames({
-                    [styles['dropzone__files__file']]: !this.props.customClass,
-                    [`${this.props.customClass}`]: this.props.customClass,
-                    [`${this.props.customClass}--${this.props.type}`]: this.props.customClass,
-                }) },
-                fileType(this.props.fileName, classNames({
-                    [`${this.props.customClass}__svgicon`]: this.props.customClass,
-                })),
-                this.renderFile(),
-                this.renderDeleteButton()),
-            this.props.confirmDelete && this.renderConfirmDelete()));
+        return (_jsxs(React.Fragment, { children: [_jsxs("li", { className: classNames({
+                        [styles['dropzone__files__file']]: !this.props.customClass,
+                        [`${this.props.customClass}`]: this.props.customClass,
+                        [`${this.props.customClass}--${this.props.type}`]: this.props.customClass,
+                    }), children: [fileType(this.props.fileName, classNames({
+                            [`${this.props.customClass}__svgicon`]: this.props.customClass,
+                        })), this.renderFile(), this.renderDeleteButton()] }), this.props.confirmDelete && this.renderConfirmDelete()] }));
     }
 }
-//# sourceMappingURL=file.js.map

components/file-upload/index.js

@@ -1,2 +0,2 @@
-import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
@@ -11,2 +11,3 @@ import classNames from 'classnames';
 import { usePseudoClasses } from '@helsenorge/designsystem-react/hooks/usePseudoClasses';
+import { getAriaDescribedBy } from '@helsenorge/designsystem-react/utils/accessibility';
 import { isMutableRefObject, mergeRefs } from '@helsenorge/designsystem-react/utils/refs';
@@ -19,2 +20,14 @@ import { FormMode, useUuid } from '@helsenorge/designsystem-react';
         super(fileBits, fileName, options);
+        Object.defineProperty(this, "id", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "fileSize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.id = id || fileName;
@@ -25,3 +38,3 @@ this.fileSize = fileSize || this.size;
 const FileUpload = React.forwardRef((props, ref) => {
-    const { acceptedFiles = [], rejectedFiles = [], cancelText, children, chooseFilesText, confirmDelete, confirmText, defaultFiles, deleteText, disabled, dropzoneStatusText, error, errorText, errorTextId, fileElementClassName, helpElement, hideDeleteButton, inputId, label, loading, onChangeFile, onDeleteFile, onOpenFile, onRequestLink, shouldUploadMultiple, uploadButtonClassName, validFileTypes, verifyDeleteText, visualDropZone, wrapperClassName, wrapperTestId } = props, rest = __rest(props, ["acceptedFiles", "rejectedFiles", "cancelText", "children", "chooseFilesText", "confirmDelete", "confirmText", "defaultFiles", "deleteText", "disabled", "dropzoneStatusText", "error", "errorText", "errorTextId", "fileElementClassName", "helpElement", "hideDeleteButton", "inputId", "label", "loading", "onChangeFile", "onDeleteFile", "onOpenFile", "onRequestLink", "shouldUploadMultiple", "uploadButtonClassName", "validFileTypes", "verifyDeleteText", "visualDropZone", "wrapperClassName", "wrapperTestId"]);
+    const { acceptedFiles = [], rejectedFiles = [], cancelText, children, chooseFilesText, confirmDelete, confirmText, defaultFiles, deleteText, disabled, dropzoneStatusText, error, errorText, errorTextId, fileElementClassName, helpElement, hideDeleteButton, inputId, label, loading, onChangeFile, onDeleteFile, onOpenFile, onRequestLink, shouldUploadMultiple, uploadButtonClassName, validFileTypes, verifyDeleteText, visualDropZone, wrapperClassName, wrapperTestId, ...rest } = props;
     const [dragover, setDragover] = React.useState(false);
@@ -61,4 +74,4 @@ const [calledFakeOnChange, setCalledFakeOnChange] = React.useState(false);
         files.forEach(f => typeof f.fileSize === 'undefined' && (f.fileSize = f.size));
-        const filteredNewFiles = (acceptedFiles === null || acceptedFiles === void 0 ? void 0 : acceptedFiles.length) ? files.filter(file => acceptedFiles.every(af => file.id !== af.id)) : files;
-        return (rejectedFiles === null || rejectedFiles === void 0 ? void 0 : rejectedFiles.length) ? filteredNewFiles.filter(file => rejectedFiles.every(rf => file.id !== rf.id)) : filteredNewFiles;
+        const filteredNewFiles = acceptedFiles?.length ? files.filter(file => acceptedFiles.every(af => file.id !== af.id)) : files;
+        return rejectedFiles?.length ? filteredNewFiles.filter(file => rejectedFiles.every(rf => file.id !== rf.id)) : filteredNewFiles;
     };
@@ -111,10 +124,6 @@ /** Fyller inn <input/> med de nye filene */
     const renderUploadButton = () => {
-        return (React.createElement(Button, { "aria-describedby": [dropzoneTextId, props['aria-describedby'] || '', errorTextUuid].join(' '), variant: "borderless", concept: error ? 'destructive' : 'normal', id: inputButtonId, disabled: disabled, onClick: onOpenClick, wrapperClassName: classNames(styles.dropzone__uploadButton, {
-                [styles['dropzone__visual-dropzone__button--visible']]: !!visualDropZone,
-            }, uploadButtonClassName) },
-            React.createElement(Icon, { svgIcon: Upload }),
-            chooseFilesText || 'Last opp'));
+        return (_jsxs(Button, { "aria-describedby": [dropzoneTextId, getAriaDescribedBy(props, errorTextUuid)].filter(Boolean).join(' '), variant: "borderless", concept: error ? 'destructive' : 'normal', id: inputButtonId, disabled: disabled, onClick: onOpenClick, wrapperClassName: classNames(styles.dropzone__uploadButton, uploadButtonClassName), children: [_jsx(Icon, { svgIcon: Upload }), chooseFilesText || 'Last opp'] }));
     };
     const renderDropzone = () => {
-        return (React.createElement("div", { onDrop: (e) => {
+        return (_jsxs("div", { onDrop: (e) => {
                 setDragover(false);
@@ -130,8 +139,5 @@ onDropHandler(e);
                 [styles['dropzone__visual-dropzone--dragover']]: dragover,
-            }) },
-            visualDropZone && renderUploadButton(),
-            React.createElement("span", { id: dropzoneTextId, className: classNames(styles['dropzone__visual-dropzone__label'], {
-                    [styles['dropzone__visual-dropzone__label--visible']]: !!visualDropZone,
-                }) }, dropzoneStatusText),
-            React.createElement("input", Object.assign({ id: inputId, className: styles['dropzone__visual-dropzone__input'], type: "file", ref: mergedRefs, multiple: shouldUploadMultiple, accept: validFileTypesToString() }, rest, { onChange: onChangeHandler }))));
+            }), children: [visualDropZone && renderUploadButton(), _jsx("span", { id: dropzoneTextId, className: classNames(styles['dropzone__visual-dropzone__label'], {
+                        [styles['dropzone__visual-dropzone__label--visible']]: !!visualDropZone,
+                    }), children: dropzoneStatusText }), _jsx("input", { id: inputId, className: styles['dropzone__visual-dropzone__input'], type: "file", ref: mergedRefs, multiple: shouldUploadMultiple, accept: validFileTypesToString(), ...rest, onChange: onChangeHandler })] }));
     };
@@ -141,21 +147,10 @@ const renderFiles = () => {
             return;
-        return (React.createElement("ul", { className: styles.dropzone__files },
-            rejectedFiles &&
-                rejectedFiles.map((rf, i) => (React.createElement(FileElement, { key: rf.name + i, fileId: rf.id, type: Type.rejected, fileName: rf.name, loading: !!loading, shouldRenderDeleteButton: true, deleteFile: onDeleteHandler, onOpenFile: onOpenFile, onRequestLink: onRequestLink, deleteText: deleteText, verifyDeleteText: verifyDeleteText, confirmText: confirmText, cancelText: cancelText, confirmDelete: confirmDelete, dontShowHardcodedText: !!deleteText, customClass: fileElementClassName }))),
-            acceptedFiles &&
-                acceptedFiles.map((af, i) => (React.createElement(FileElement, { key: `${af.name}${i}`, fileId: af.id, type: Type.verified, fileName: af.name, loading: !!loading, shouldRenderDeleteButton: !hideDeleteButton, deleteFile: onDeleteHandler, onOpenFile: onOpenFile, onRequestLink: onRequestLink, deleteText: deleteText, verifyDeleteText: verifyDeleteText, confirmText: confirmText, cancelText: cancelText, confirmDelete: confirmDelete, dontShowHardcodedText: !!deleteText, customClass: fileElementClassName })))));
+        return (_jsxs("ul", { className: styles.dropzone__files, children: [rejectedFiles &&
+                    rejectedFiles.map((rf, i) => (_jsx(FileElement, { fileId: rf.id, type: Type.rejected, fileName: rf.name, loading: !!loading, shouldRenderDeleteButton: true, deleteFile: onDeleteHandler, onOpenFile: onOpenFile, onRequestLink: onRequestLink, deleteText: deleteText, verifyDeleteText: verifyDeleteText, confirmText: confirmText, cancelText: cancelText, confirmDelete: confirmDelete, dontShowHardcodedText: !!deleteText, customClass: fileElementClassName }, rf.name + i))), acceptedFiles &&
+                    acceptedFiles.map((af, i) => (_jsx(FileElement, { fileId: af.id, type: Type.verified, fileName: af.name, loading: !!loading, shouldRenderDeleteButton: !hideDeleteButton, deleteFile: onDeleteHandler, onOpenFile: onOpenFile, onRequestLink: onRequestLink, deleteText: deleteText, verifyDeleteText: verifyDeleteText, confirmText: confirmText, cancelText: cancelText, confirmDelete: confirmDelete, dontShowHardcodedText: !!deleteText, customClass: fileElementClassName }, `${af.name}${i}`)))] }));
     };
     const wrapperClasses = classNames(styles.dropzone, wrapperClassName);
-    return (React.createElement(ErrorWrapper, { errorText: errorText, errorTextId: errorTextUuid },
-        React.createElement("div", { className: wrapperClasses, "data-testid": wrapperTestId },
-            renderLabel(label, inputButtonId, FormMode.onwhite),
-            helpElement,
-            loading && React.createElement(Loader, { size: 'tiny', className: styles.dropzone__loader }),
-            renderFiles(),
-            !visualDropZone && renderUploadButton(),
-            renderDropzone(),
-            children)));
+    return (_jsx(ErrorWrapper, { errorText: errorText, errorTextId: errorTextUuid, children: _jsxs("div", { className: wrapperClasses, "data-testid": wrapperTestId, children: [renderLabel(label, inputButtonId, FormMode.onwhite), helpElement, loading && _jsx(Loader, { size: 'tiny', className: styles.dropzone__loader }), renderFiles(), !visualDropZone && renderUploadButton(), renderDropzone(), children] }) }));
 });
 FileUpload.displayName = 'FileUpload';
 export default FileUpload;
-//# sourceMappingURL=index.js.map

components/file-upload/styles.module.scss.d.ts

@@ -1,28 +0,21 @@
-// autogenerated by typings-for-css-modules-loader.
-// Please do not change this file!
-declare namespace ToolkitstylesModuleScssNamespace {
-  export interface IToolkitstylesModuleScss {
-    dropzone: string;
-    dropzone__acceptedFormats: string;
-    dropzone__deleteButton: string;
-    dropzone__errormessage: string;
-    dropzone__files: string;
-    dropzone__files__file: string;
-    dropzone__loader: string;
-    dropzone__uploadButton: string;
-    'dropzone__visual-dropzone': string;
-    'dropzone__visual-dropzone--dragover': string;
-    'dropzone__visual-dropzone--visible': string;
-    'dropzone__visual-dropzone__button': string;
-    'dropzone__visual-dropzone__button--visible': string;
-    'dropzone__visual-dropzone__label': string;
-    'dropzone__visual-dropzone__label--visible': string;
-  }
-}
-
-declare const ToolkitstylesModuleScssModule: ToolkitstylesModuleScssNamespace.IToolkitstylesModuleScss & {
-  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
-  locals: ToolkitstylesModuleScssNamespace.IToolkitstylesModuleScss;
+export type Styles = {
+  dropzone: string;
+  dropzone__deleteButton: string;
+  dropzone__files: string;
+  dropzone__files__file: string;
+  dropzone__loader: string;
+  dropzone__uploadButton: string;
+  'dropzone__visual-dropzone': string;
+  'dropzone__visual-dropzone__input': string;
+  'dropzone__visual-dropzone__label': string;
+  'dropzone__visual-dropzone__label--visible': string;
+  'dropzone__visual-dropzone--dragover': string;
+  'dropzone__visual-dropzone--visible': string;
+  'dropzone__visual-dropzone--visible--error': string;
 };
 
-export = ToolkitstylesModuleScssModule;
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

components/file-upload/useFileUpload.js

@@ -1,2 +0,1 @@
-import { __awaiter } from "tslib";
 import React from 'react';
@@ -44,10 +43,49 @@ /**
     };
-    const registerInterceptor = (ref, rules) => {
-        const originalValidate = rules === null || rules === void 0 ? void 0 : rules.validate;
-        if (originalValidate && typeof originalValidate === 'function') {
-            rules.validate = (value) => __awaiter(void 0, void 0, void 0, function* () {
-                return validateFiles(value);
-            });
-        }
-        return register(ref, rules);
+    const registerInterceptor = (name, rules) => {
+        const registeredField = register(name, {
+            ...rules,
+            validate: async (value, formValues) => {
+                const validationResult = validateFiles(value);
+                const originalValidate = rules?.validate;
+                if (originalValidate) {
+                    if (typeof originalValidate === 'function') {
+                        const originalResult = await originalValidate(value, formValues);
+                        if (originalResult !== true) {
+                            return originalResult;
+                        }
+                    }
+                    else if (typeof originalValidate === 'object') {
+                        for (const key in originalValidate) {
+                            if (Object.prototype.hasOwnProperty.call(originalValidate, key)) {
+                                const result = await originalValidate[key](value, formValues);
+                                if (result !== true) {
+                                    return result;
+                                }
+                            }
+                        }
+                    }
+                }
+                return validationResult;
+            },
+        });
+        const { onChange, onBlur, ...rest } = registeredField;
+        // Vi validerer og kjører den originale onChange handleren
+        const handleChange = event => {
+            const files = Array.from(event.target.files || []);
+            validateFiles(files);
+            onChange(event);
+        };
+        // Vi validerer og kjører den originale onBlur handleren
+        const handleBlur = event => {
+            const files = Array.from(event.target.files || []);
+            validateFiles(files);
+            onBlur(event); // Call the original onBlur handler
+        };
+        return {
+            ...rest,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onChange: handleChange,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onBlur: handleBlur,
+        };
     };
@@ -62,2 +100,1 @@ return {
 };
-//# sourceMappingURL=useFileUpload.js.map

components/file-upload/validate-utils.d.ts

@@ -5,9 +5,9 @@ import { UploadFile, MimeTypes } from '.';
 /** react-hook-form filtype validering - trengs bare ved bruk av visuell dropzone - med dialog knapp holder det å bruke prop til FileUpload */
-export declare const validateFileType: (validFileTypes: MimeTypes[], errorMessage: string) => (file: UploadFile) => string | true;
+export declare const validateFileType: (validFileTypes: MimeTypes[], errorMessage: string) => ((file: UploadFile) => string | true);
 /** react-hook-form filstørrelse validering */
-export declare const validateFileSize: (minByteSize: number, maxByteSize: number, errorMessage: string) => (file: UploadFile) => true | string;
+export declare const validateFileSize: (minByteSize: number, maxByteSize: number, errorMessage: string) => ((file: UploadFile) => true | string);
 /** react-hook-form total filstørrelse validering */
-export declare const validateTotalFileSize: (minByteSize: number, maxByteSize: number, errorMessage: string) => (data: UploadFile[]) => true | string;
+export declare const validateTotalFileSize: (minByteSize: number, maxByteSize: number, errorMessage: string) => ((data: UploadFile[]) => true | string);
 /** react-hook-form antall filer validering */
-export declare const validateNumberOfFiles: (minFiles: number, maxFiles: number, errorMessage: string) => (data: UploadFile[]) => true | string;
+export declare const validateNumberOfFiles: (minFiles: number, maxFiles: number, errorMessage: string) => ((data: UploadFile[]) => true | string);
 //# sourceMappingURL=validate-utils.d.ts.map

components/file-upload/validate-utils.js

@@ -44,2 +44,1 @@ /** react-hook-form filtype validering - trengs bare ved bruk av visuell dropzone - med dialog knapp holder det å bruke prop til FileUpload */
 };
-//# sourceMappingURL=validate-utils.js.map

examples/index.js

 export * from '../components/file-upload/example';
-//# sourceMappingURL=index.js.map

package.json

 {
   "name": "@helsenorge/file-upload",
   "author": "Norsk helsenett SF",
-  "version": "31.0.0",
-  "main": "./index.js",
+  "version": "32.0.2",
+  "main": "index.js",
+  "sideEffects": false,
   "repository": {
@@ -12,6 +13,6 @@ "type": "git",
   "peerDependencies": {
-    "@helsenorge/core-utils": "^31.0.0",
-    "@helsenorge/designsystem-react": "^7.0.0",
-    "react": ">=17.0.2",
-    "react-dom": ">=17.0.2"
+    "@helsenorge/core-utils": "^32.0.0",
+    "@helsenorge/designsystem-react": "^8.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
@@ -18,0 +19,0 @@ "publishConfig": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Lines of code

658

increased by3.46%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

42597

decreased by-33.71%

Number of package files

22

decreased by-21.43%

No dependency changes