@entur/fileupload 0.3.43 → 0.3.46

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.3.46](https://bitbucket.org/enturas/design-system/compare/@entur/fileupload@0.3.45...@entur/fileupload@0.3.46) (2022-08-31)
+
+### Bug Fixes
+
+- **file upload:** add descriptive screen reader text to remove file button ([42c37d1](https://bitbucket.org/enturas/design-system/commits/42c37d131e2db5f712b1ce7cf3336b6d536cadd2))
+
+## [0.3.45](https://bitbucket.org/enturas/design-system/compare/@entur/fileupload@0.3.44...@entur/fileupload@0.3.45) (2022-08-24)
+
+**Note:** Version bump only for package @entur/fileupload
+
+## [0.3.44](https://bitbucket.org/enturas/design-system/compare/@entur/fileupload@0.3.43...@entur/fileupload@0.3.44) (2022-08-09)
+
+**Note:** Version bump only for package @entur/fileupload
+
 ## [0.3.43](https://bitbucket.org/enturas/design-system/compare/@entur/fileupload@0.3.42...@entur/fileupload@0.3.43) (2022-07-05)
 
 **Note:** Version bump only for package @entur/fileupload

package/dist/FileUpload.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DropzoneOptions, FileRejection, DropEvent } from 'react-dropzone';
+import { DropzoneOptions, FileRejection, DropEvent, FileWithPath } from 'react-dropzone';
 import './FileUpload.scss';
 declare type FileUploadProps = DropzoneOptions & {
     /** Tekst som vises ved fullført opplasting
@@ -21,7 +21,7 @@ declare type FileUploadProps = DropzoneOptions & {
     /** Callback for når en fil legges til */
     onDrop?<T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent): void;
     /** Callback for når en fil slettes fra lista */
-    onDelete: (file: File) => void;
+    onDelete: (file: FileWithPath) => void;
     /** Hvilken filtyper som skal aksepteres */
     accept?: string | string[];
     /** Filene som er aktive i komponenten */
@@ -34,6 +34,10 @@ declare type FileUploadProps = DropzoneOptions & {
     minSize?: number;
     /**Største filstørrelse */
     maxSize?: number;
+    /**Tekst som leses opp av skjermleser på søppelbøtte-ikonet
+     * @default "Fjern fil"
+     */
+    removeFileButtonDescription?: string;
     [key: string]: any;
 };
 export declare const FileUpload: React.FC<FileUploadProps>;

package/dist/fileupload.cjs.development.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var utils = require('@entur/utils');
 var React = require('react');
 var reactDropzone = require('react-dropzone');
+var classNames = require('classnames');
 var icons = require('@entur/icons');
 var button = require('@entur/button');
 var typography = require('@entur/typography');
-var classNames = require('classnames');
+var a11y = require('@entur/a11y');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -48,7 +49,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded = ["standbyText", "errorText", "successText", "errorUpload", "onDrop", "onDelete", "accept", "files", "label", "style"];
+var _excluded = ["standbyText", "errorText", "successText", "errorUpload", "onDrop", "onDelete", "accept", "files", "label", "removeFileButtonDescription", "style"];
 var FileUpload = function FileUpload(_ref) {
   var _ref$standbyText = _ref.standbyText,
       standbyText = _ref$standbyText === void 0 ? 'Dra fil eller klikk for å laste opp' : _ref$standbyText,
@@ -68,6 +69,8 @@ var FileUpload = function FileUpload(_ref) {
       _ref$files = _ref.files,
       files = _ref$files === void 0 ? [] : _ref$files,
       label = _ref.label,
+      _ref$removeFileButton = _ref.removeFileButtonDescription,
+      removeFileButtonDescription = _ref$removeFileButton === void 0 ? 'Fjern fil' : _ref$removeFileButton,
       style = _ref.style,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
@@ -97,7 +100,7 @@ var FileUpload = function FileUpload(_ref) {
     }, {
       'eds-file-upload__dropzone--reject': isDragReject
     }, {
-      'eds-file-uploadg__dropzone--error': errorUpload
+      'eds-file-upload__dropzone--error': errorUpload
     })
   }, success ? successText : errorUpload ? errorText : standbyText)), React__default["default"].createElement("div", {
     className: "eds-file-upload__file-list"
@@ -113,7 +116,7 @@ var FileUpload = function FileUpload(_ref) {
       onClick: function onClick() {
         return onDelete(file);
       }
-    }, React__default["default"].createElement(icons.DeleteIcon, null)));
+    }, React__default["default"].createElement(a11y.VisuallyHidden, null, removeFileButtonDescription, ", ", file.name), React__default["default"].createElement(icons.DeleteIcon, null)));
   })));
 };
 

package/dist/fileupload.cjs.development.js.map

@@ -1 +1 @@
-{"version":3,"file":"fileupload.cjs.development.js","sources":["../src/FileUpload.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  useDropzone,\n  DropzoneOptions,\n  FileRejection,\n  DropEvent,\n} from 'react-dropzone';\nimport { FileIcon, DeleteIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport { Label } from '@entur/typography';\nimport classNames from 'classnames';\nimport './FileUpload.scss';\n\ntype FileUploadProps = DropzoneOptions & {\n  /** Tekst som vises ved fullført opplasting\n   * @default \"Opplasting fullført\"\n   */\n  successText?: string;\n  /** Tekst som vises om opplasting feilet\n   * @default \"Feil ved opplasting av fil\"\n   */\n  errorText?: string;\n  /** Tekst som vises før man laster opp noe\n   * @default \"Dra fil eller klikk for å laste opp\"\n   */\n  standbyText?: string;\n  /** Boolean for hvis opplastingen feiler.\n   * @default false\n   */\n  errorUpload?: boolean;\n  /** Callback for når en fil legges til */\n  onDrop?<T extends File>(\n    acceptedFiles: T[],\n    fileRejections: FileRejection[],\n    event: DropEvent,\n  ): void;\n  /** Callback for når en fil slettes fra lista */\n  onDelete: (file: File) => void;\n  /** Hvilken filtyper som skal aksepteres */\n  accept?: string | string[];\n  /** Filene som er aktive i komponenten */\n  files: File[];\n  /** Beskrivende tekst som forklarer feltet */\n  label?: string;\n  /** Mulighet for å laste opp flere filer */\n  multiple?: boolean;\n  /**Minste filstørrelse */\n  minSize?: number;\n  /**Største filstørrelse */\n  maxSize?: number;\n  [key: string]: any;\n};\n\nexport const FileUpload: React.FC<FileUploadProps> = ({\n  standbyText = 'Dra fil eller klikk for å laste opp',\n  errorText = 'Feil ved opplasting av fil',\n  successText = 'Opplasting fullført',\n  errorUpload = false,\n  onDrop,\n  onDelete = file => console.log(file),\n  accept = '',\n  files = [],\n  label,\n  style,\n  ...rest\n}) => {\n  const { getRootProps, getInputProps, isDragActive, isDragReject } =\n    useDropzone({\n      onDrop,\n      accept: accept,\n      ...rest,\n    });\n\n  const success = files.length > 0;\n\n  return (\n    <div className=\"eds-file-upload__wrapper\" {...style}>\n      <div className=\"eds-file-upload__input\" {...getRootProps()}>\n        {label && <Label style={{ display: 'flex' }}>{label}</Label>}\n        <input {...getInputProps()} />\n        <span\n          className={classNames(\n            'eds-file-upload__dropzone',\n            {\n              'eds-file-upload__dropzone--success': success,\n            },\n            { 'eds-file-upload__dropzone--active': isDragActive },\n            { 'eds-file-upload__dropzone--reject': isDragReject },\n            { 'eds-file-uploadg__dropzone--error': errorUpload },\n          )}\n        >\n          {success ? successText : errorUpload ? errorText : standbyText}\n        </span>\n      </div>\n      <div className=\"eds-file-upload__file-list\">\n        {files.map((file: any, index) => (\n          <div className=\"eds-file-upload__file-name\" key={index}>\n            <FileIcon className=\"eds-file-upload__file-name-icon\" />\n            <span className=\"eds-field-upload__file-name-path\">\n              {file.path} - {convertSizeToHuman(file.size)}{' '}\n            </span>\n            <IconButton onClick={() => onDelete(file)}>\n              <DeleteIcon />\n            </IconButton>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nfunction convertSizeToHuman(size: number) {\n  if (size < 1000) {\n    return size + 'bytes;';\n  } else if (size < 1000000) {\n    return `${size / 1000}  KB`;\n  } else {\n    return `${(size / 1000000).toPrecision(4)} MB`;\n  }\n}\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('fileupload');\n\nexport * from './FileUpload';\n"],"names":["FileUpload","standbyText","errorText","successText","errorUpload","onDrop","onDelete","file","console","log","accept","files","label","style","rest","useDropzone","getRootProps","getInputProps","isDragActive","isDragReject","success","length","React","className","Label","display","classNames","map","index","key","FileIcon","path","convertSizeToHuman","size","IconButton","onClick","DeleteIcon","toPrecision","warnAboutMissingStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqDaA,UAAU,GAA8B,SAAxCA,UAAwC;8BACnDC;MAAAA,4CAAc;4BACdC;MAAAA,wCAAY;8BACZC;MAAAA,4CAAc;8BACdC;MAAAA,4CAAc;MACdC,cAAAA;2BACAC;MAAAA,sCAAW,UAAAC,IAAI;AAAA,WAAIC,OAAO,CAACC,GAAR,CAAYF,IAAZ,CAAJ;AAAA;yBACfG;MAAAA,kCAAS;wBACTC;MAAAA,gCAAQ;MACRC,aAAAA;MACAC,aAAAA;MACGC;;AAEH,qBACEC,yBAAW;AACTV,IAAAA,MAAM,EAANA,MADS;AAETK,IAAAA,MAAM,EAAEA;AAFC,KAGNI,IAHM,EADb;AAAA,MAAQE,YAAR,gBAAQA,YAAR;AAAA,MAAsBC,aAAtB,gBAAsBA,aAAtB;AAAA,MAAqCC,YAArC,gBAAqCA,YAArC;AAAA,MAAmDC,YAAnD,gBAAmDA,YAAnD;;AAOA,MAAMC,OAAO,GAAGT,KAAK,CAACU,MAAN,GAAe,CAA/B;AAEA,SACEC,uCAAA,MAAA;AAAKC,IAAAA,SAAS,EAAC;AAAf,KAA8CV,KAA9C,GACES,uCAAA,MAAA;AAAKC,IAAAA,SAAS,EAAC;AAAf,KAA4CP,YAAY,EAAxD,GACGJ,KAAK,IAAIU,uCAAA,CAACE,gBAAD;AAAOX,IAAAA,KAAK,EAAE;AAAEY,MAAAA,OAAO,EAAE;AAAX;GAAd,EAAoCb,KAApC,CADZ,EAEEU,uCAAA,QAAA,eAAWL,aAAa,EAAxB,EAFF,EAGEK,uCAAA,OAAA;AACEC,IAAAA,SAAS,EAAEG,8BAAU,CACnB,2BADmB,EAEnB;AACE,4CAAsCN;AADxC,KAFmB,EAKnB;AAAE,2CAAqCF;AAAvC,KALmB,EAMnB;AAAE,2CAAqCC;AAAvC,KANmB,EAOnB;AAAE,2CAAqCf;AAAvC,KAPmB;GADvB,EAWGgB,OAAO,GAAGjB,WAAH,GAAiBC,WAAW,GAAGF,SAAH,GAAeD,WAXrD,CAHF,CADF,EAkBEqB,uCAAA,MAAA;AAAKC,IAAAA,SAAS,EAAC;GAAf,EACGZ,KAAK,CAACgB,GAAN,CAAU,UAACpB,IAAD,EAAYqB,KAAZ;AAAA,WACTN,uCAAA,MAAA;AAAKC,MAAAA,SAAS,EAAC;AAA6BM,MAAAA,GAAG,EAAED;KAAjD,EACEN,uCAAA,CAACQ,cAAD;AAAUP,MAAAA,SAAS,EAAC;KAApB,CADF,EAEED,uCAAA,OAAA;AAAMC,MAAAA,SAAS,EAAC;KAAhB,EACGhB,IAAI,CAACwB,IADR,OAAA,EACiBC,kBAAkB,CAACzB,IAAI,CAAC0B,IAAN,CADnC,EACgD,GADhD,CAFF,EAKEX,uCAAA,CAACY,iBAAD;AAAYC,MAAAA,OAAO,EAAE;AAAA,eAAM7B,QAAQ,CAACC,IAAD,CAAd;AAAA;KAArB,EACEe,uCAAA,CAACc,gBAAD,MAAA,CADF,CALF,CADS;AAAA,GAAV,CADH,CAlBF,CADF;AAkCD;;AAED,SAASJ,kBAAT,CAA4BC,IAA5B;AACE,MAAIA,IAAI,GAAG,IAAX,EAAiB;AACf,WAAOA,IAAI,GAAG,QAAd;AACD,GAFD,MAEO,IAAIA,IAAI,GAAG,OAAX,EAAoB;AACzB,WAAUA,IAAI,GAAG,IAAjB;AACD,GAFM,MAEA;AACL,WAAU,CAACA,IAAI,GAAG,OAAR,EAAiBI,WAAjB,CAA6B,CAA7B,CAAV;AACD;AACF;;ACpHDC,4BAAsB,CAAC,YAAD,CAAtB;;;;"}
+{"version":3,"file":"fileupload.cjs.development.js","sources":["../src/FileUpload.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  useDropzone,\n  DropzoneOptions,\n  FileRejection,\n  DropEvent,\n  FileWithPath,\n} from 'react-dropzone';\nimport classNames from 'classnames';\n\nimport { FileIcon, DeleteIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport { Label } from '@entur/typography';\nimport { VisuallyHidden } from '@entur/a11y';\n\nimport './FileUpload.scss';\n\ntype FileUploadProps = DropzoneOptions & {\n  /** Tekst som vises ved fullført opplasting\n   * @default \"Opplasting fullført\"\n   */\n  successText?: string;\n  /** Tekst som vises om opplasting feilet\n   * @default \"Feil ved opplasting av fil\"\n   */\n  errorText?: string;\n  /** Tekst som vises før man laster opp noe\n   * @default \"Dra fil eller klikk for å laste opp\"\n   */\n  standbyText?: string;\n  /** Boolean for hvis opplastingen feiler.\n   * @default false\n   */\n  errorUpload?: boolean;\n  /** Callback for når en fil legges til */\n  onDrop?<T extends File>(\n    acceptedFiles: T[],\n    fileRejections: FileRejection[],\n    event: DropEvent,\n  ): void;\n  /** Callback for når en fil slettes fra lista */\n  onDelete: (file: FileWithPath) => void;\n  /** Hvilken filtyper som skal aksepteres */\n  accept?: string | string[];\n  /** Filene som er aktive i komponenten */\n  files: File[];\n  /** Beskrivende tekst som forklarer feltet */\n  label?: string;\n  /** Mulighet for å laste opp flere filer */\n  multiple?: boolean;\n  /**Minste filstørrelse */\n  minSize?: number;\n  /**Største filstørrelse */\n  maxSize?: number;\n  /**Tekst som leses opp av skjermleser på søppelbøtte-ikonet\n   * @default \"Fjern fil\"\n   */\n  removeFileButtonDescription?: string;\n  [key: string]: any;\n};\n\nexport const FileUpload: React.FC<FileUploadProps> = ({\n  standbyText = 'Dra fil eller klikk for å laste opp',\n  errorText = 'Feil ved opplasting av fil',\n  successText = 'Opplasting fullført',\n  errorUpload = false,\n  onDrop,\n  onDelete = file => console.log(file),\n  accept = '',\n  files = [],\n  label,\n  removeFileButtonDescription = 'Fjern fil',\n  style,\n  ...rest\n}) => {\n  const { getRootProps, getInputProps, isDragActive, isDragReject } =\n    useDropzone({\n      onDrop,\n      accept: accept,\n      ...rest,\n    });\n\n  const success = files.length > 0;\n\n  return (\n    <div className=\"eds-file-upload__wrapper\" {...style}>\n      <div className=\"eds-file-upload__input\" {...getRootProps()}>\n        {label && <Label style={{ display: 'flex' }}>{label}</Label>}\n        <input {...getInputProps()} />\n        <span\n          className={classNames(\n            'eds-file-upload__dropzone',\n            {\n              'eds-file-upload__dropzone--success': success,\n            },\n            { 'eds-file-upload__dropzone--active': isDragActive },\n            { 'eds-file-upload__dropzone--reject': isDragReject },\n            { 'eds-file-upload__dropzone--error': errorUpload },\n          )}\n        >\n          {success ? successText : errorUpload ? errorText : standbyText}\n        </span>\n      </div>\n      <div className=\"eds-file-upload__file-list\">\n        {files.map((file: FileWithPath, index) => (\n          <div className=\"eds-file-upload__file-name\" key={index}>\n            <FileIcon className=\"eds-file-upload__file-name-icon\" />\n            <span className=\"eds-field-upload__file-name-path\">\n              {file.path} - {convertSizeToHuman(file.size)}{' '}\n            </span>\n            <IconButton onClick={() => onDelete(file)}>\n              <VisuallyHidden>\n                {removeFileButtonDescription}, {file.name}\n              </VisuallyHidden>\n              <DeleteIcon />\n            </IconButton>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nfunction convertSizeToHuman(size: number) {\n  if (size < 1000) {\n    return size + 'bytes;';\n  } else if (size < 1000000) {\n    return `${size / 1000}  KB`;\n  } else {\n    return `${(size / 1000000).toPrecision(4)} MB`;\n  }\n}\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('fileupload');\n\nexport * from './FileUpload';\n"],"names":["FileUpload","standbyText","errorText","successText","errorUpload","onDrop","onDelete","file","console","log","accept","files","label","removeFileButtonDescription","style","rest","useDropzone","getRootProps","getInputProps","isDragActive","isDragReject","success","length","React","className","Label","display","classNames","map","index","key","FileIcon","path","convertSizeToHuman","size","IconButton","onClick","VisuallyHidden","name","DeleteIcon","toPrecision","warnAboutMissingStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6DaA,UAAU,GAA8B,SAAxCA,UAAwC;8BACnDC;MAAAA,4CAAc;4BACdC;MAAAA,wCAAY;8BACZC;MAAAA,4CAAc;8BACdC;MAAAA,4CAAc;MACdC,cAAAA;2BACAC;MAAAA,sCAAW,UAAAC,IAAI;AAAA,WAAIC,OAAO,CAACC,GAAR,CAAYF,IAAZ,CAAJ;AAAA;yBACfG;MAAAA,kCAAS;wBACTC;MAAAA,gCAAQ;MACRC,aAAAA;mCACAC;MAAAA,iEAA8B;MAC9BC,aAAAA;MACGC;;AAEH,qBACEC,yBAAW;AACTX,IAAAA,MAAM,EAANA,MADS;AAETK,IAAAA,MAAM,EAAEA;AAFC,KAGNK,IAHM,EADb;AAAA,MAAQE,YAAR,gBAAQA,YAAR;AAAA,MAAsBC,aAAtB,gBAAsBA,aAAtB;AAAA,MAAqCC,YAArC,gBAAqCA,YAArC;AAAA,MAAmDC,YAAnD,gBAAmDA,YAAnD;;AAOA,MAAMC,OAAO,GAAGV,KAAK,CAACW,MAAN,GAAe,CAA/B;AAEA,SACEC,uCAAA,MAAA;AAAKC,IAAAA,SAAS,EAAC;AAAf,KAA8CV,KAA9C,GACES,uCAAA,MAAA;AAAKC,IAAAA,SAAS,EAAC;AAAf,KAA4CP,YAAY,EAAxD,GACGL,KAAK,IAAIW,uCAAA,CAACE,gBAAD;AAAOX,IAAAA,KAAK,EAAE;AAAEY,MAAAA,OAAO,EAAE;AAAX;GAAd,EAAoCd,KAApC,CADZ,EAEEW,uCAAA,QAAA,eAAWL,aAAa,EAAxB,EAFF,EAGEK,uCAAA,OAAA;AACEC,IAAAA,SAAS,EAAEG,8BAAU,CACnB,2BADmB,EAEnB;AACE,4CAAsCN;AADxC,KAFmB,EAKnB;AAAE,2CAAqCF;AAAvC,KALmB,EAMnB;AAAE,2CAAqCC;AAAvC,KANmB,EAOnB;AAAE,0CAAoChB;AAAtC,KAPmB;GADvB,EAWGiB,OAAO,GAAGlB,WAAH,GAAiBC,WAAW,GAAGF,SAAH,GAAeD,WAXrD,CAHF,CADF,EAkBEsB,uCAAA,MAAA;AAAKC,IAAAA,SAAS,EAAC;GAAf,EACGb,KAAK,CAACiB,GAAN,CAAU,UAACrB,IAAD,EAAqBsB,KAArB;AAAA,WACTN,uCAAA,MAAA;AAAKC,MAAAA,SAAS,EAAC;AAA6BM,MAAAA,GAAG,EAAED;KAAjD,EACEN,uCAAA,CAACQ,cAAD;AAAUP,MAAAA,SAAS,EAAC;KAApB,CADF,EAEED,uCAAA,OAAA;AAAMC,MAAAA,SAAS,EAAC;KAAhB,EACGjB,IAAI,CAACyB,IADR,OAAA,EACiBC,kBAAkB,CAAC1B,IAAI,CAAC2B,IAAN,CADnC,EACgD,GADhD,CAFF,EAKEX,uCAAA,CAACY,iBAAD;AAAYC,MAAAA,OAAO,EAAE;AAAA,eAAM9B,QAAQ,CAACC,IAAD,CAAd;AAAA;KAArB,EACEgB,uCAAA,CAACc,mBAAD,MAAA,EACGxB,2BADH,MAAA,EACkCN,IAAI,CAAC+B,IADvC,CADF,EAIEf,uCAAA,CAACgB,gBAAD,MAAA,CAJF,CALF,CADS;AAAA,GAAV,CADH,CAlBF,CADF;AAqCD;;AAED,SAASN,kBAAT,CAA4BC,IAA5B;AACE,MAAIA,IAAI,GAAG,IAAX,EAAiB;AACf,WAAOA,IAAI,GAAG,QAAd;AACD,GAFD,MAEO,IAAIA,IAAI,GAAG,OAAX,EAAoB;AACzB,WAAUA,IAAI,GAAG,IAAjB;AACD,GAFM,MAEA;AACL,WAAU,CAACA,IAAI,GAAG,OAAR,EAAiBM,WAAjB,CAA6B,CAA7B,CAAV;AACD;AACF;;AChIDC,4BAAsB,CAAC,YAAD,CAAtB;;;;"}

package/dist/fileupload.cjs.production.min.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),t=require("react"),l=require("react-dropzone"),r=require("@entur/icons"),a=require("@entur/button"),o=require("@entur/typography"),n=require("classnames");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=i(t),u=i(n);function d(){return d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var r in l)Object.prototype.hasOwnProperty.call(l,r)&&(e[r]=l[r])}return e},d.apply(this,arguments)}var c=["standbyText","errorText","successText","errorUpload","onDrop","onDelete","accept","files","label","style"];e.warnAboutMissingStyles("fileupload"),exports.FileUpload=function(e){var t=e.standbyText,n=void 0===t?"Dra fil eller klikk for å laste opp":t,i=e.errorText,p=void 0===i?"Feil ved opplasting av fil":i,f=e.successText,v=void 0===f?"Opplasting fullført":f,_=e.errorUpload,m=void 0!==_&&_,y=e.onDrop,g=e.onDelete,b=void 0===g?function(e){return console.log(e)}:g,E=e.accept,x=void 0===E?"":E,D=e.files,h=void 0===D?[]:D,z=e.label,j=e.style,q=function(e,t){if(null==e)return{};var l,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(l=o[r])>=0||(a[l]=e[l]);return a}(e,c),N=l.useDropzone(d({onDrop:y,accept:x},q)),O=N.getRootProps,k=N.getInputProps,T=N.isDragActive,P=N.isDragReject,I=h.length>0;return s.default.createElement("div",d({className:"eds-file-upload__wrapper"},j),s.default.createElement("div",d({className:"eds-file-upload__input"},O()),z&&s.default.createElement(o.Label,{style:{display:"flex"}},z),s.default.createElement("input",d({},k())),s.default.createElement("span",{className:u.default("eds-file-upload__dropzone",{"eds-file-upload__dropzone--success":I},{"eds-file-upload__dropzone--active":T},{"eds-file-upload__dropzone--reject":P},{"eds-file-uploadg__dropzone--error":m})},I?v:m?p:n)),s.default.createElement("div",{className:"eds-file-upload__file-list"},h.map((function(e,t){return s.default.createElement("div",{className:"eds-file-upload__file-name",key:t},s.default.createElement(r.FileIcon,{className:"eds-file-upload__file-name-icon"}),s.default.createElement("span",{className:"eds-field-upload__file-name-path"},e.path," - ",(l=e.size)<1e3?l+"bytes;":l<1e6?l/1e3+"  KB":(l/1e6).toPrecision(4)+" MB"," "),s.default.createElement(a.IconButton,{onClick:function(){return b(e)}},s.default.createElement(r.DeleteIcon,null)));var l}))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),t=require("react"),l=require("react-dropzone"),r=require("classnames"),a=require("@entur/icons"),n=require("@entur/button"),o=require("@entur/typography"),i=require("@entur/a11y");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=s(t),d=s(r);function c(){return c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var r in l)Object.prototype.hasOwnProperty.call(l,r)&&(e[r]=l[r])}return e},c.apply(this,arguments)}var p=["standbyText","errorText","successText","errorUpload","onDrop","onDelete","accept","files","label","removeFileButtonDescription","style"];e.warnAboutMissingStyles("fileupload"),exports.FileUpload=function(e){var t=e.standbyText,r=void 0===t?"Dra fil eller klikk for å laste opp":t,s=e.errorText,f=void 0===s?"Feil ved opplasting av fil":s,v=e.successText,m=void 0===v?"Opplasting fullført":v,_=e.errorUpload,y=void 0!==_&&_,b=e.onDrop,g=e.onDelete,D=void 0===g?function(e){return console.log(e)}:g,E=e.accept,x=void 0===E?"":E,h=e.files,j=void 0===h?[]:h,q=e.label,z=e.removeFileButtonDescription,N=void 0===z?"Fjern fil":z,O=e.style,k=function(e,t){if(null==e)return{};var l,r,a={},n=Object.keys(e);for(r=0;r<n.length;r++)t.indexOf(l=n[r])>=0||(a[l]=e[l]);return a}(e,p),F=l.useDropzone(c({onDrop:b,accept:x},k)),T=F.getRootProps,B=F.getInputProps,P=F.isDragActive,I=F.isDragReject,w=j.length>0;return u.default.createElement("div",c({className:"eds-file-upload__wrapper"},O),u.default.createElement("div",c({className:"eds-file-upload__input"},T()),q&&u.default.createElement(o.Label,{style:{display:"flex"}},q),u.default.createElement("input",c({},B())),u.default.createElement("span",{className:d.default("eds-file-upload__dropzone",{"eds-file-upload__dropzone--success":w},{"eds-file-upload__dropzone--active":P},{"eds-file-upload__dropzone--reject":I},{"eds-file-upload__dropzone--error":y})},w?m:y?f:r)),u.default.createElement("div",{className:"eds-file-upload__file-list"},j.map((function(e,t){return u.default.createElement("div",{className:"eds-file-upload__file-name",key:t},u.default.createElement(a.FileIcon,{className:"eds-file-upload__file-name-icon"}),u.default.createElement("span",{className:"eds-field-upload__file-name-path"},e.path," - ",(l=e.size)<1e3?l+"bytes;":l<1e6?l/1e3+"  KB":(l/1e6).toPrecision(4)+" MB"," "),u.default.createElement(n.IconButton,{onClick:function(){return D(e)}},u.default.createElement(i.VisuallyHidden,null,N,", ",e.name),u.default.createElement(a.DeleteIcon,null)));var l}))))};
 //# sourceMappingURL=fileupload.cjs.production.min.js.map

package/dist/fileupload.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"fileupload.cjs.production.min.js","sources":["../src/index.tsx","../src/FileUpload.tsx"],"sourcesContent":["import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('fileupload');\n\nexport * from './FileUpload';\n","import React from 'react';\nimport {\n  useDropzone,\n  DropzoneOptions,\n  FileRejection,\n  DropEvent,\n} from 'react-dropzone';\nimport { FileIcon, DeleteIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport { Label } from '@entur/typography';\nimport classNames from 'classnames';\nimport './FileUpload.scss';\n\ntype FileUploadProps = DropzoneOptions & {\n  /** Tekst som vises ved fullført opplasting\n   * @default \"Opplasting fullført\"\n   */\n  successText?: string;\n  /** Tekst som vises om opplasting feilet\n   * @default \"Feil ved opplasting av fil\"\n   */\n  errorText?: string;\n  /** Tekst som vises før man laster opp noe\n   * @default \"Dra fil eller klikk for å laste opp\"\n   */\n  standbyText?: string;\n  /** Boolean for hvis opplastingen feiler.\n   * @default false\n   */\n  errorUpload?: boolean;\n  /** Callback for når en fil legges til */\n  onDrop?<T extends File>(\n    acceptedFiles: T[],\n    fileRejections: FileRejection[],\n    event: DropEvent,\n  ): void;\n  /** Callback for når en fil slettes fra lista */\n  onDelete: (file: File) => void;\n  /** Hvilken filtyper som skal aksepteres */\n  accept?: string | string[];\n  /** Filene som er aktive i komponenten */\n  files: File[];\n  /** Beskrivende tekst som forklarer feltet */\n  label?: string;\n  /** Mulighet for å laste opp flere filer */\n  multiple?: boolean;\n  /**Minste filstørrelse */\n  minSize?: number;\n  /**Største filstørrelse */\n  maxSize?: number;\n  [key: string]: any;\n};\n\nexport const FileUpload: React.FC<FileUploadProps> = ({\n  standbyText = 'Dra fil eller klikk for å laste opp',\n  errorText = 'Feil ved opplasting av fil',\n  successText = 'Opplasting fullført',\n  errorUpload = false,\n  onDrop,\n  onDelete = file => console.log(file),\n  accept = '',\n  files = [],\n  label,\n  style,\n  ...rest\n}) => {\n  const { getRootProps, getInputProps, isDragActive, isDragReject } =\n    useDropzone({\n      onDrop,\n      accept: accept,\n      ...rest,\n    });\n\n  const success = files.length > 0;\n\n  return (\n    <div className=\"eds-file-upload__wrapper\" {...style}>\n      <div className=\"eds-file-upload__input\" {...getRootProps()}>\n        {label && <Label style={{ display: 'flex' }}>{label}</Label>}\n        <input {...getInputProps()} />\n        <span\n          className={classNames(\n            'eds-file-upload__dropzone',\n            {\n              'eds-file-upload__dropzone--success': success,\n            },\n            { 'eds-file-upload__dropzone--active': isDragActive },\n            { 'eds-file-upload__dropzone--reject': isDragReject },\n            { 'eds-file-uploadg__dropzone--error': errorUpload },\n          )}\n        >\n          {success ? successText : errorUpload ? errorText : standbyText}\n        </span>\n      </div>\n      <div className=\"eds-file-upload__file-list\">\n        {files.map((file: any, index) => (\n          <div className=\"eds-file-upload__file-name\" key={index}>\n            <FileIcon className=\"eds-file-upload__file-name-icon\" />\n            <span className=\"eds-field-upload__file-name-path\">\n              {file.path} - {convertSizeToHuman(file.size)}{' '}\n            </span>\n            <IconButton onClick={() => onDelete(file)}>\n              <DeleteIcon />\n            </IconButton>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nfunction convertSizeToHuman(size: number) {\n  if (size < 1000) {\n    return size + 'bytes;';\n  } else if (size < 1000000) {\n    return `${size / 1000}  KB`;\n  } else {\n    return `${(size / 1000000).toPrecision(4)} MB`;\n  }\n}\n"],"names":["warnAboutMissingStyles","standbyText","errorText","successText","errorUpload","onDrop","onDelete","file","console","log","accept","files","label","style","rest","useDropzone","getRootProps","getInputProps","isDragActive","isDragReject","success","length","React","className","Label","display","classNames","map","index","key","FileIcon","path","size","toPrecision","IconButton","onClick","DeleteIcon"],"mappings":"0pBAGAA,yBAAuB,iCCkD8B,oBACnDC,YAAAA,aAAc,4CACdC,UAAAA,aAAY,mCACZC,YAAAA,aAAc,4BACdC,YAAAA,gBACAC,IAAAA,WACAC,SAAAA,aAAW,SAAAC,UAAQC,QAAQC,IAAIF,UAC/BG,OAAAA,aAAS,SACTC,MAAAA,aAAQ,KACRC,IAAAA,MACAC,IAAAA,MACGC,4IAGDC,iBACEV,OAAAA,EACAK,OAAQA,GACLI,IAJCE,IAAAA,aAAcC,IAAAA,cAAeC,IAAAA,aAAcC,IAAAA,aAO7CC,EAAUT,EAAMU,OAAS,SAG7BC,iCAAKC,UAAU,4BAA+BV,GAC5CS,iCAAKC,UAAU,0BAA6BP,KACzCJ,GAASU,wBAACE,SAAMX,MAAO,CAAEY,QAAS,SAAWb,GAC9CU,qCAAWL,MACXK,gCACEC,UAAWG,UACT,4BACA,sCACwCN,GAExC,qCAAuCF,GACvC,qCAAuCC,GACvC,qCAAuCf,KAGxCgB,EAAUjB,EAAcC,EAAcF,EAAYD,IAGvDqB,+BAAKC,UAAU,8BACZZ,EAAMgB,KAAI,SAACpB,EAAWqB,UACrBN,+BAAKC,UAAU,6BAA6BM,IAAKD,GAC/CN,wBAACQ,YAASP,UAAU,oCACpBD,gCAAMC,UAAU,oCACbhB,EAAKwB,YAYQC,EAZoBzB,EAAKyB,MAaxC,IACFA,EAAO,SACLA,EAAO,IACNA,EAAO,YAENA,EAAO,KAASC,YAAY,SAlBiB,KAEhDX,wBAACY,cAAWC,QAAS,kBAAM7B,EAASC,KAClCe,wBAACc,qBASf,IAA4BJ"}
+{"version":3,"file":"fileupload.cjs.production.min.js","sources":["../src/index.tsx","../src/FileUpload.tsx"],"sourcesContent":["import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('fileupload');\n\nexport * from './FileUpload';\n","import React from 'react';\nimport {\n  useDropzone,\n  DropzoneOptions,\n  FileRejection,\n  DropEvent,\n  FileWithPath,\n} from 'react-dropzone';\nimport classNames from 'classnames';\n\nimport { FileIcon, DeleteIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport { Label } from '@entur/typography';\nimport { VisuallyHidden } from '@entur/a11y';\n\nimport './FileUpload.scss';\n\ntype FileUploadProps = DropzoneOptions & {\n  /** Tekst som vises ved fullført opplasting\n   * @default \"Opplasting fullført\"\n   */\n  successText?: string;\n  /** Tekst som vises om opplasting feilet\n   * @default \"Feil ved opplasting av fil\"\n   */\n  errorText?: string;\n  /** Tekst som vises før man laster opp noe\n   * @default \"Dra fil eller klikk for å laste opp\"\n   */\n  standbyText?: string;\n  /** Boolean for hvis opplastingen feiler.\n   * @default false\n   */\n  errorUpload?: boolean;\n  /** Callback for når en fil legges til */\n  onDrop?<T extends File>(\n    acceptedFiles: T[],\n    fileRejections: FileRejection[],\n    event: DropEvent,\n  ): void;\n  /** Callback for når en fil slettes fra lista */\n  onDelete: (file: FileWithPath) => void;\n  /** Hvilken filtyper som skal aksepteres */\n  accept?: string | string[];\n  /** Filene som er aktive i komponenten */\n  files: File[];\n  /** Beskrivende tekst som forklarer feltet */\n  label?: string;\n  /** Mulighet for å laste opp flere filer */\n  multiple?: boolean;\n  /**Minste filstørrelse */\n  minSize?: number;\n  /**Største filstørrelse */\n  maxSize?: number;\n  /**Tekst som leses opp av skjermleser på søppelbøtte-ikonet\n   * @default \"Fjern fil\"\n   */\n  removeFileButtonDescription?: string;\n  [key: string]: any;\n};\n\nexport const FileUpload: React.FC<FileUploadProps> = ({\n  standbyText = 'Dra fil eller klikk for å laste opp',\n  errorText = 'Feil ved opplasting av fil',\n  successText = 'Opplasting fullført',\n  errorUpload = false,\n  onDrop,\n  onDelete = file => console.log(file),\n  accept = '',\n  files = [],\n  label,\n  removeFileButtonDescription = 'Fjern fil',\n  style,\n  ...rest\n}) => {\n  const { getRootProps, getInputProps, isDragActive, isDragReject } =\n    useDropzone({\n      onDrop,\n      accept: accept,\n      ...rest,\n    });\n\n  const success = files.length > 0;\n\n  return (\n    <div className=\"eds-file-upload__wrapper\" {...style}>\n      <div className=\"eds-file-upload__input\" {...getRootProps()}>\n        {label && <Label style={{ display: 'flex' }}>{label}</Label>}\n        <input {...getInputProps()} />\n        <span\n          className={classNames(\n            'eds-file-upload__dropzone',\n            {\n              'eds-file-upload__dropzone--success': success,\n            },\n            { 'eds-file-upload__dropzone--active': isDragActive },\n            { 'eds-file-upload__dropzone--reject': isDragReject },\n            { 'eds-file-upload__dropzone--error': errorUpload },\n          )}\n        >\n          {success ? successText : errorUpload ? errorText : standbyText}\n        </span>\n      </div>\n      <div className=\"eds-file-upload__file-list\">\n        {files.map((file: FileWithPath, index) => (\n          <div className=\"eds-file-upload__file-name\" key={index}>\n            <FileIcon className=\"eds-file-upload__file-name-icon\" />\n            <span className=\"eds-field-upload__file-name-path\">\n              {file.path} - {convertSizeToHuman(file.size)}{' '}\n            </span>\n            <IconButton onClick={() => onDelete(file)}>\n              <VisuallyHidden>\n                {removeFileButtonDescription}, {file.name}\n              </VisuallyHidden>\n              <DeleteIcon />\n            </IconButton>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nfunction convertSizeToHuman(size: number) {\n  if (size < 1000) {\n    return size + 'bytes;';\n  } else if (size < 1000000) {\n    return `${size / 1000}  KB`;\n  } else {\n    return `${(size / 1000000).toPrecision(4)} MB`;\n  }\n}\n"],"names":["warnAboutMissingStyles","standbyText","errorText","successText","errorUpload","onDrop","onDelete","file","console","log","accept","files","label","removeFileButtonDescription","style","rest","useDropzone","getRootProps","getInputProps","isDragActive","isDragReject","success","length","React","className","Label","display","classNames","map","index","key","FileIcon","path","size","toPrecision","IconButton","onClick","VisuallyHidden","name","DeleteIcon"],"mappings":"itBAGAA,yBAAuB,iCC0D8B,oBACnDC,YAAAA,aAAc,4CACdC,UAAAA,aAAY,mCACZC,YAAAA,aAAc,4BACdC,YAAAA,gBACAC,IAAAA,WACAC,SAAAA,aAAW,SAAAC,UAAQC,QAAQC,IAAIF,UAC/BG,OAAAA,aAAS,SACTC,MAAAA,aAAQ,KACRC,IAAAA,UACAC,4BAAAA,aAA8B,cAC9BC,IAAAA,MACGC,4IAGDC,iBACEX,OAAAA,EACAK,OAAQA,GACLK,IAJCE,IAAAA,aAAcC,IAAAA,cAAeC,IAAAA,aAAcC,IAAAA,aAO7CC,EAAUV,EAAMW,OAAS,SAG7BC,iCAAKC,UAAU,4BAA+BV,GAC5CS,iCAAKC,UAAU,0BAA6BP,KACzCL,GAASW,wBAACE,SAAMX,MAAO,CAAEY,QAAS,SAAWd,GAC9CW,qCAAWL,MACXK,gCACEC,UAAWG,UACT,4BACA,sCACwCN,GAExC,qCAAuCF,GACvC,qCAAuCC,GACvC,oCAAsChB,KAGvCiB,EAAUlB,EAAcC,EAAcF,EAAYD,IAGvDsB,+BAAKC,UAAU,8BACZb,EAAMiB,KAAI,SAACrB,EAAoBsB,UAC9BN,+BAAKC,UAAU,6BAA6BM,IAAKD,GAC/CN,wBAACQ,YAASP,UAAU,oCACpBD,gCAAMC,UAAU,oCACbjB,EAAKyB,YAeQC,EAfoB1B,EAAK0B,MAgBxC,IACFA,EAAO,SACLA,EAAO,IACNA,EAAO,YAENA,EAAO,KAASC,YAAY,SArBiB,KAEhDX,wBAACY,cAAWC,QAAS,kBAAM9B,EAASC,KAClCgB,wBAACc,sBACExB,OAA+BN,EAAK+B,MAEvCf,wBAACgB,qBASf,IAA4BN"}

package/dist/fileupload.esm.js

@@ -1,10 +1,11 @@
 import { warnAboutMissingStyles } from '@entur/utils';
 import React from 'react';
 import { useDropzone } from 'react-dropzone';
+import classNames from 'classnames';
 import { FileIcon, DeleteIcon } from '@entur/icons';
 import { IconButton } from '@entur/button';
 import { Label } from '@entur/typography';
-import classNames from 'classnames';
+import { VisuallyHidden } from '@entur/a11y';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -39,7 +40,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded = ["standbyText", "errorText", "successText", "errorUpload", "onDrop", "onDelete", "accept", "files", "label", "style"];
+var _excluded = ["standbyText", "errorText", "successText", "errorUpload", "onDrop", "onDelete", "accept", "files", "label", "removeFileButtonDescription", "style"];
 var FileUpload = function FileUpload(_ref) {
   var _ref$standbyText = _ref.standbyText,
       standbyText = _ref$standbyText === void 0 ? 'Dra fil eller klikk for å laste opp' : _ref$standbyText,
@@ -59,6 +60,8 @@ var FileUpload = function FileUpload(_ref) {
       _ref$files = _ref.files,
       files = _ref$files === void 0 ? [] : _ref$files,
       label = _ref.label,
+      _ref$removeFileButton = _ref.removeFileButtonDescription,
+      removeFileButtonDescription = _ref$removeFileButton === void 0 ? 'Fjern fil' : _ref$removeFileButton,
       style = _ref.style,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
@@ -88,7 +91,7 @@ var FileUpload = function FileUpload(_ref) {
     }, {
       'eds-file-upload__dropzone--reject': isDragReject
     }, {
-      'eds-file-uploadg__dropzone--error': errorUpload
+      'eds-file-upload__dropzone--error': errorUpload
     })
   }, success ? successText : errorUpload ? errorText : standbyText)), React.createElement("div", {
     className: "eds-file-upload__file-list"
@@ -104,7 +107,7 @@ var FileUpload = function FileUpload(_ref) {
       onClick: function onClick() {
         return onDelete(file);
       }
-    }, React.createElement(DeleteIcon, null)));
+    }, React.createElement(VisuallyHidden, null, removeFileButtonDescription, ", ", file.name), React.createElement(DeleteIcon, null)));
   })));
 };
 

package/dist/fileupload.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"fileupload.esm.js","sources":["../src/FileUpload.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  useDropzone,\n  DropzoneOptions,\n  FileRejection,\n  DropEvent,\n} from 'react-dropzone';\nimport { FileIcon, DeleteIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport { Label } from '@entur/typography';\nimport classNames from 'classnames';\nimport './FileUpload.scss';\n\ntype FileUploadProps = DropzoneOptions & {\n  /** Tekst som vises ved fullført opplasting\n   * @default \"Opplasting fullført\"\n   */\n  successText?: string;\n  /** Tekst som vises om opplasting feilet\n   * @default \"Feil ved opplasting av fil\"\n   */\n  errorText?: string;\n  /** Tekst som vises før man laster opp noe\n   * @default \"Dra fil eller klikk for å laste opp\"\n   */\n  standbyText?: string;\n  /** Boolean for hvis opplastingen feiler.\n   * @default false\n   */\n  errorUpload?: boolean;\n  /** Callback for når en fil legges til */\n  onDrop?<T extends File>(\n    acceptedFiles: T[],\n    fileRejections: FileRejection[],\n    event: DropEvent,\n  ): void;\n  /** Callback for når en fil slettes fra lista */\n  onDelete: (file: File) => void;\n  /** Hvilken filtyper som skal aksepteres */\n  accept?: string | string[];\n  /** Filene som er aktive i komponenten */\n  files: File[];\n  /** Beskrivende tekst som forklarer feltet */\n  label?: string;\n  /** Mulighet for å laste opp flere filer */\n  multiple?: boolean;\n  /**Minste filstørrelse */\n  minSize?: number;\n  /**Største filstørrelse */\n  maxSize?: number;\n  [key: string]: any;\n};\n\nexport const FileUpload: React.FC<FileUploadProps> = ({\n  standbyText = 'Dra fil eller klikk for å laste opp',\n  errorText = 'Feil ved opplasting av fil',\n  successText = 'Opplasting fullført',\n  errorUpload = false,\n  onDrop,\n  onDelete = file => console.log(file),\n  accept = '',\n  files = [],\n  label,\n  style,\n  ...rest\n}) => {\n  const { getRootProps, getInputProps, isDragActive, isDragReject } =\n    useDropzone({\n      onDrop,\n      accept: accept,\n      ...rest,\n    });\n\n  const success = files.length > 0;\n\n  return (\n    <div className=\"eds-file-upload__wrapper\" {...style}>\n      <div className=\"eds-file-upload__input\" {...getRootProps()}>\n        {label && <Label style={{ display: 'flex' }}>{label}</Label>}\n        <input {...getInputProps()} />\n        <span\n          className={classNames(\n            'eds-file-upload__dropzone',\n            {\n              'eds-file-upload__dropzone--success': success,\n            },\n            { 'eds-file-upload__dropzone--active': isDragActive },\n            { 'eds-file-upload__dropzone--reject': isDragReject },\n            { 'eds-file-uploadg__dropzone--error': errorUpload },\n          )}\n        >\n          {success ? successText : errorUpload ? errorText : standbyText}\n        </span>\n      </div>\n      <div className=\"eds-file-upload__file-list\">\n        {files.map((file: any, index) => (\n          <div className=\"eds-file-upload__file-name\" key={index}>\n            <FileIcon className=\"eds-file-upload__file-name-icon\" />\n            <span className=\"eds-field-upload__file-name-path\">\n              {file.path} - {convertSizeToHuman(file.size)}{' '}\n            </span>\n            <IconButton onClick={() => onDelete(file)}>\n              <DeleteIcon />\n            </IconButton>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nfunction convertSizeToHuman(size: number) {\n  if (size < 1000) {\n    return size + 'bytes;';\n  } else if (size < 1000000) {\n    return `${size / 1000}  KB`;\n  } else {\n    return `${(size / 1000000).toPrecision(4)} MB`;\n  }\n}\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('fileupload');\n\nexport * from './FileUpload';\n"],"names":["FileUpload","standbyText","errorText","successText","errorUpload","onDrop","onDelete","file","console","log","accept","files","label","style","rest","useDropzone","getRootProps","getInputProps","isDragActive","isDragReject","success","length","React","className","Label","display","classNames","map","index","key","FileIcon","path","convertSizeToHuman","size","IconButton","onClick","DeleteIcon","toPrecision","warnAboutMissingStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqDaA,UAAU,GAA8B,SAAxCA,UAAwC;8BACnDC;MAAAA,4CAAc;4BACdC;MAAAA,wCAAY;8BACZC;MAAAA,4CAAc;8BACdC;MAAAA,4CAAc;MACdC,cAAAA;2BACAC;MAAAA,sCAAW,UAAAC,IAAI;AAAA,WAAIC,OAAO,CAACC,GAAR,CAAYF,IAAZ,CAAJ;AAAA;yBACfG;MAAAA,kCAAS;wBACTC;MAAAA,gCAAQ;MACRC,aAAAA;MACAC,aAAAA;MACGC;;AAEH,qBACEC,WAAW;AACTV,IAAAA,MAAM,EAANA,MADS;AAETK,IAAAA,MAAM,EAAEA;AAFC,KAGNI,IAHM,EADb;AAAA,MAAQE,YAAR,gBAAQA,YAAR;AAAA,MAAsBC,aAAtB,gBAAsBA,aAAtB;AAAA,MAAqCC,YAArC,gBAAqCA,YAArC;AAAA,MAAmDC,YAAnD,gBAAmDA,YAAnD;;AAOA,MAAMC,OAAO,GAAGT,KAAK,CAACU,MAAN,GAAe,CAA/B;AAEA,SACEC,mBAAA,MAAA;AAAKC,IAAAA,SAAS,EAAC;AAAf,KAA8CV,KAA9C,GACES,mBAAA,MAAA;AAAKC,IAAAA,SAAS,EAAC;AAAf,KAA4CP,YAAY,EAAxD,GACGJ,KAAK,IAAIU,mBAAA,CAACE,KAAD;AAAOX,IAAAA,KAAK,EAAE;AAAEY,MAAAA,OAAO,EAAE;AAAX;GAAd,EAAoCb,KAApC,CADZ,EAEEU,mBAAA,QAAA,eAAWL,aAAa,EAAxB,EAFF,EAGEK,mBAAA,OAAA;AACEC,IAAAA,SAAS,EAAEG,UAAU,CACnB,2BADmB,EAEnB;AACE,4CAAsCN;AADxC,KAFmB,EAKnB;AAAE,2CAAqCF;AAAvC,KALmB,EAMnB;AAAE,2CAAqCC;AAAvC,KANmB,EAOnB;AAAE,2CAAqCf;AAAvC,KAPmB;GADvB,EAWGgB,OAAO,GAAGjB,WAAH,GAAiBC,WAAW,GAAGF,SAAH,GAAeD,WAXrD,CAHF,CADF,EAkBEqB,mBAAA,MAAA;AAAKC,IAAAA,SAAS,EAAC;GAAf,EACGZ,KAAK,CAACgB,GAAN,CAAU,UAACpB,IAAD,EAAYqB,KAAZ;AAAA,WACTN,mBAAA,MAAA;AAAKC,MAAAA,SAAS,EAAC;AAA6BM,MAAAA,GAAG,EAAED;KAAjD,EACEN,mBAAA,CAACQ,QAAD;AAAUP,MAAAA,SAAS,EAAC;KAApB,CADF,EAEED,mBAAA,OAAA;AAAMC,MAAAA,SAAS,EAAC;KAAhB,EACGhB,IAAI,CAACwB,IADR,OAAA,EACiBC,kBAAkB,CAACzB,IAAI,CAAC0B,IAAN,CADnC,EACgD,GADhD,CAFF,EAKEX,mBAAA,CAACY,UAAD;AAAYC,MAAAA,OAAO,EAAE;AAAA,eAAM7B,QAAQ,CAACC,IAAD,CAAd;AAAA;KAArB,EACEe,mBAAA,CAACc,UAAD,MAAA,CADF,CALF,CADS;AAAA,GAAV,CADH,CAlBF,CADF;AAkCD;;AAED,SAASJ,kBAAT,CAA4BC,IAA5B;AACE,MAAIA,IAAI,GAAG,IAAX,EAAiB;AACf,WAAOA,IAAI,GAAG,QAAd;AACD,GAFD,MAEO,IAAIA,IAAI,GAAG,OAAX,EAAoB;AACzB,WAAUA,IAAI,GAAG,IAAjB;AACD,GAFM,MAEA;AACL,WAAU,CAACA,IAAI,GAAG,OAAR,EAAiBI,WAAjB,CAA6B,CAA7B,CAAV;AACD;AACF;;ACpHDC,sBAAsB,CAAC,YAAD,CAAtB;;;;"}
+{"version":3,"file":"fileupload.esm.js","sources":["../src/FileUpload.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  useDropzone,\n  DropzoneOptions,\n  FileRejection,\n  DropEvent,\n  FileWithPath,\n} from 'react-dropzone';\nimport classNames from 'classnames';\n\nimport { FileIcon, DeleteIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport { Label } from '@entur/typography';\nimport { VisuallyHidden } from '@entur/a11y';\n\nimport './FileUpload.scss';\n\ntype FileUploadProps = DropzoneOptions & {\n  /** Tekst som vises ved fullført opplasting\n   * @default \"Opplasting fullført\"\n   */\n  successText?: string;\n  /** Tekst som vises om opplasting feilet\n   * @default \"Feil ved opplasting av fil\"\n   */\n  errorText?: string;\n  /** Tekst som vises før man laster opp noe\n   * @default \"Dra fil eller klikk for å laste opp\"\n   */\n  standbyText?: string;\n  /** Boolean for hvis opplastingen feiler.\n   * @default false\n   */\n  errorUpload?: boolean;\n  /** Callback for når en fil legges til */\n  onDrop?<T extends File>(\n    acceptedFiles: T[],\n    fileRejections: FileRejection[],\n    event: DropEvent,\n  ): void;\n  /** Callback for når en fil slettes fra lista */\n  onDelete: (file: FileWithPath) => void;\n  /** Hvilken filtyper som skal aksepteres */\n  accept?: string | string[];\n  /** Filene som er aktive i komponenten */\n  files: File[];\n  /** Beskrivende tekst som forklarer feltet */\n  label?: string;\n  /** Mulighet for å laste opp flere filer */\n  multiple?: boolean;\n  /**Minste filstørrelse */\n  minSize?: number;\n  /**Største filstørrelse */\n  maxSize?: number;\n  /**Tekst som leses opp av skjermleser på søppelbøtte-ikonet\n   * @default \"Fjern fil\"\n   */\n  removeFileButtonDescription?: string;\n  [key: string]: any;\n};\n\nexport const FileUpload: React.FC<FileUploadProps> = ({\n  standbyText = 'Dra fil eller klikk for å laste opp',\n  errorText = 'Feil ved opplasting av fil',\n  successText = 'Opplasting fullført',\n  errorUpload = false,\n  onDrop,\n  onDelete = file => console.log(file),\n  accept = '',\n  files = [],\n  label,\n  removeFileButtonDescription = 'Fjern fil',\n  style,\n  ...rest\n}) => {\n  const { getRootProps, getInputProps, isDragActive, isDragReject } =\n    useDropzone({\n      onDrop,\n      accept: accept,\n      ...rest,\n    });\n\n  const success = files.length > 0;\n\n  return (\n    <div className=\"eds-file-upload__wrapper\" {...style}>\n      <div className=\"eds-file-upload__input\" {...getRootProps()}>\n        {label && <Label style={{ display: 'flex' }}>{label}</Label>}\n        <input {...getInputProps()} />\n        <span\n          className={classNames(\n            'eds-file-upload__dropzone',\n            {\n              'eds-file-upload__dropzone--success': success,\n            },\n            { 'eds-file-upload__dropzone--active': isDragActive },\n            { 'eds-file-upload__dropzone--reject': isDragReject },\n            { 'eds-file-upload__dropzone--error': errorUpload },\n          )}\n        >\n          {success ? successText : errorUpload ? errorText : standbyText}\n        </span>\n      </div>\n      <div className=\"eds-file-upload__file-list\">\n        {files.map((file: FileWithPath, index) => (\n          <div className=\"eds-file-upload__file-name\" key={index}>\n            <FileIcon className=\"eds-file-upload__file-name-icon\" />\n            <span className=\"eds-field-upload__file-name-path\">\n              {file.path} - {convertSizeToHuman(file.size)}{' '}\n            </span>\n            <IconButton onClick={() => onDelete(file)}>\n              <VisuallyHidden>\n                {removeFileButtonDescription}, {file.name}\n              </VisuallyHidden>\n              <DeleteIcon />\n            </IconButton>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nfunction convertSizeToHuman(size: number) {\n  if (size < 1000) {\n    return size + 'bytes;';\n  } else if (size < 1000000) {\n    return `${size / 1000}  KB`;\n  } else {\n    return `${(size / 1000000).toPrecision(4)} MB`;\n  }\n}\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('fileupload');\n\nexport * from './FileUpload';\n"],"names":["FileUpload","standbyText","errorText","successText","errorUpload","onDrop","onDelete","file","console","log","accept","files","label","removeFileButtonDescription","style","rest","useDropzone","getRootProps","getInputProps","isDragActive","isDragReject","success","length","React","className","Label","display","classNames","map","index","key","FileIcon","path","convertSizeToHuman","size","IconButton","onClick","VisuallyHidden","name","DeleteIcon","toPrecision","warnAboutMissingStyles"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entur/fileupload",
-  "version": "0.3.43",
+  "version": "0.3.46",
   "license": "EUPL-1.2",
   "main": "dist/index.js",
   "module": "dist/fileupload.esm.js",
@@ -23,11 +23,12 @@
     "lint": "dts lint"
   },
   "dependencies": {
-    "@entur/button": "^2.10.0",
-    "@entur/icons": "^4.3.0",
-    "@entur/tokens": "^3.3.2",
-    "@entur/typography": "^1.6.14",
-    "@entur/utils": "^0.4.3",
+    "@entur/a11y": "0.2.47",
+    "@entur/button": "^2.10.2",
+    "@entur/icons": "^4.3.2",
+    "@entur/tokens": "^3.4.1",
+    "@entur/typography": "^1.6.16",
+    "@entur/utils": "^0.4.4",
     "classnames": "^2.3.1",
     "react-dropzone": "^11.3.4"
   },
@@ -35,5 +36,5 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "c58969a2ac3a5429137f84f9fe91888f4c4bcc4b"
+  "gitHead": "f3bffb3de2412430d4d5d37dbd397f4dd995522b"
 }