@transferwise/components 46.74.0 → 46.75.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/alert/Alert.js +3 -1
- package/build/alert/Alert.js.map +1 -1
- package/build/alert/Alert.mjs +3 -1
- package/build/alert/Alert.mjs.map +1 -1
- package/build/dimmer/Dimmer.js +3 -1
- package/build/dimmer/Dimmer.js.map +1 -1
- package/build/dimmer/Dimmer.mjs +3 -1
- package/build/dimmer/Dimmer.mjs.map +1 -1
- package/build/drawer/Drawer.js +2 -0
- package/build/drawer/Drawer.js.map +1 -1
- package/build/drawer/Drawer.mjs +2 -0
- package/build/drawer/Drawer.mjs.map +1 -1
- package/build/field/Field.js +2 -0
- package/build/field/Field.js.map +1 -1
- package/build/field/Field.mjs +2 -0
- package/build/field/Field.mjs.map +1 -1
- package/build/i18n/en.json +5 -0
- package/build/i18n/en.json.js +5 -0
- package/build/i18n/en.json.js.map +1 -1
- package/build/i18n/en.json.mjs +5 -0
- package/build/i18n/en.json.mjs.map +1 -1
- package/build/inlineAlert/InlineAlert.js +3 -1
- package/build/inlineAlert/InlineAlert.js.map +1 -1
- package/build/inlineAlert/InlineAlert.mjs +3 -1
- package/build/inlineAlert/InlineAlert.mjs.map +1 -1
- package/build/modal/Modal.js +3 -0
- package/build/modal/Modal.js.map +1 -1
- package/build/modal/Modal.mjs +3 -0
- package/build/modal/Modal.mjs.map +1 -1
- package/build/statusIcon/StatusIcon.js +50 -16
- package/build/statusIcon/StatusIcon.js.map +1 -1
- package/build/statusIcon/StatusIcon.messages.js +24 -0
- package/build/statusIcon/StatusIcon.messages.js.map +1 -0
- package/build/statusIcon/StatusIcon.messages.mjs +22 -0
- package/build/statusIcon/StatusIcon.messages.mjs.map +1 -0
- package/build/statusIcon/StatusIcon.mjs +48 -14
- package/build/statusIcon/StatusIcon.mjs.map +1 -1
- package/build/types/alert/Alert.d.ts +6 -1
- package/build/types/alert/Alert.d.ts.map +1 -1
- package/build/types/dimmer/Dimmer.d.ts +2 -1
- package/build/types/dimmer/Dimmer.d.ts.map +1 -1
- package/build/types/drawer/Drawer.d.ts +2 -1
- package/build/types/drawer/Drawer.d.ts.map +1 -1
- package/build/types/field/Field.d.ts +6 -1
- package/build/types/field/Field.d.ts.map +1 -1
- package/build/types/inlineAlert/InlineAlert.d.ts +2 -1
- package/build/types/inlineAlert/InlineAlert.d.ts.map +1 -1
- package/build/types/modal/Modal.d.ts +2 -1
- package/build/types/modal/Modal.d.ts.map +1 -1
- package/build/types/statusIcon/StatusIcon.d.ts +7 -1
- package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
- package/build/types/statusIcon/StatusIcon.messages.d.ts +29 -0
- package/build/types/statusIcon/StatusIcon.messages.d.ts.map +1 -0
- package/build/types/upload/Upload.d.ts +5 -0
- package/build/types/upload/Upload.d.ts.map +1 -1
- package/build/types/upload/steps/uploadImageStep/uploadImageStep.d.ts +1 -0
- package/build/types/upload/steps/uploadImageStep/uploadImageStep.d.ts.map +1 -1
- package/build/types/uploadInput/UploadInput.d.ts +9 -0
- package/build/types/uploadInput/UploadInput.d.ts.map +1 -1
- package/build/types/uploadInput/uploadItem/UploadItem.d.ts +16 -1
- package/build/types/uploadInput/uploadItem/UploadItem.d.ts.map +1 -1
- package/build/types/uploadInput/uploadItem/UploadItemLink.d.ts.map +1 -1
- package/build/upload/Upload.js +4 -2
- package/build/upload/Upload.js.map +1 -1
- package/build/upload/Upload.mjs +4 -2
- package/build/upload/Upload.mjs.map +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.js +6 -3
- package/build/upload/steps/uploadImageStep/uploadImageStep.js.map +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.mjs +6 -3
- package/build/upload/steps/uploadImageStep/uploadImageStep.mjs.map +1 -1
- package/build/uploadInput/UploadInput.js +71 -66
- package/build/uploadInput/UploadInput.js.map +1 -1
- package/build/uploadInput/UploadInput.mjs +72 -67
- package/build/uploadInput/UploadInput.mjs.map +1 -1
- package/build/uploadInput/uploadItem/UploadItem.js +13 -4
- package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
- package/build/uploadInput/uploadItem/UploadItem.mjs +13 -4
- package/build/uploadInput/uploadItem/UploadItem.mjs.map +1 -1
- package/build/uploadInput/uploadItem/UploadItemLink.js +1 -0
- package/build/uploadInput/uploadItem/UploadItemLink.js.map +1 -1
- package/build/uploadInput/uploadItem/UploadItemLink.mjs +1 -0
- package/build/uploadInput/uploadItem/UploadItemLink.mjs.map +1 -1
- package/package.json +1 -1
- package/src/alert/Alert.spec.tsx +10 -0
- package/src/alert/Alert.tsx +7 -1
- package/src/dimmer/Dimmer.spec.js +8 -0
- package/src/dimmer/Dimmer.tsx +4 -0
- package/src/drawer/Drawer.spec.js +25 -6
- package/src/drawer/Drawer.tsx +3 -1
- package/src/field/Field.spec.tsx +19 -0
- package/src/field/Field.story.tsx +20 -4
- package/src/field/Field.tsx +7 -1
- package/src/i18n/en.json +5 -0
- package/src/inlineAlert/InlineAlert.spec.tsx +12 -1
- package/src/inlineAlert/InlineAlert.tsx +5 -1
- package/src/modal/Modal.spec.js +19 -1
- package/src/modal/Modal.tsx +4 -0
- package/src/statusIcon/StatusIcon.docs.mdx +28 -0
- package/src/statusIcon/StatusIcon.messages.ts +34 -0
- package/src/statusIcon/StatusIcon.spec.tsx +39 -4
- package/src/statusIcon/StatusIcon.story.tsx +15 -6
- package/src/statusIcon/StatusIcon.tsx +63 -14
- package/src/upload/Upload.spec.js +19 -0
- package/src/upload/Upload.tsx +7 -0
- package/src/upload/steps/uploadImageStep/uploadImageStep.spec.js +13 -0
- package/src/upload/steps/uploadImageStep/uploadImageStep.tsx +15 -4
- package/src/uploadInput/UploadInput.spec.tsx +121 -9
- package/src/uploadInput/UploadInput.tests.story.tsx +207 -140
- package/src/uploadInput/UploadInput.tsx +110 -77
- package/src/uploadInput/uploadItem/UploadItem.spec.tsx +1 -0
- package/src/uploadInput/uploadItem/UploadItem.tsx +30 -6
- package/src/uploadInput/uploadItem/UploadItemLink.tsx +9 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"uploadImageStep.js","sources":["../../../../src/upload/steps/uploadImageStep/uploadImageStep.tsx"],"sourcesContent":["import { Upload as UploadIcon } from '@transferwise/icons';\nimport { createRef, PureComponent } from 'react';\nimport StatusIcon from '../../../statusIcon';\nimport { Sentiment, Size } from '../../../common';\nimport InlineAlert from '../../../inlineAlert';\n\nexport interface UploadImageStepProps {\n fileDropped: (file: File) => void;\n isComplete: boolean;\n usAccept: string;\n usButtonText: string;\n usDisabled: boolean;\n usHelpImage: React.ReactNode;\n usLabel: string;\n usPlaceholder: string;\n errorMessage?: string | string[];\n}\n\nexport default class UploadImageStep extends PureComponent<UploadImageStepProps> {\n uploadInputRef = createRef<HTMLInputElement>();\n\n onManualUpload = () => {\n const { fileDropped } = this.props;\n const file = this.uploadInputRef.current?.files?.[0];\n if (file != null) {\n fileDropped(file);\n }\n };\n\n getImage = () => {\n const { usHelpImage, usLabel } = this.props;\n const { errorMessage } = this.props;\n\n if (errorMessage) {\n return (\n <div className=\"d-flex flex-column align-items-center\">\n <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} />\n </div>\n );\n }\n\n if (!usHelpImage) {\n return (\n <div className=\"circle circle-sm circle-inverse p-t-1\">\n <UploadIcon size={24} />\n </div>\n );\n }\n\n if (typeof usHelpImage === 'string') {\n return <img src={usHelpImage} alt={usLabel} className=\"thumbnail text-xs-center\" />;\n }\n\n return usHelpImage;\n };\n\n render() {\n const {
|
|
1
|
+
{"version":3,"file":"uploadImageStep.js","sources":["../../../../src/upload/steps/uploadImageStep/uploadImageStep.tsx"],"sourcesContent":["import { Upload as UploadIcon } from '@transferwise/icons';\nimport { createRef, PureComponent } from 'react';\nimport StatusIcon from '../../../statusIcon';\nimport { Sentiment, Size } from '../../../common';\nimport InlineAlert from '../../../inlineAlert';\n\nexport interface UploadImageStepProps {\n fileDropped: (file: File) => void;\n isComplete: boolean;\n usAccept: string;\n usButtonText: string;\n usDisabled: boolean;\n usHelpImage: React.ReactNode;\n usLabel: string;\n usPlaceholder: string;\n errorMessage?: string | string[];\n errorIconLabel?: string;\n}\n\nexport default class UploadImageStep extends PureComponent<UploadImageStepProps> {\n uploadInputRef = createRef<HTMLInputElement>();\n\n onManualUpload = () => {\n const { fileDropped } = this.props;\n const file = this.uploadInputRef.current?.files?.[0];\n if (file != null) {\n fileDropped(file);\n }\n };\n\n getImage = () => {\n const { usHelpImage, usLabel } = this.props;\n const { errorMessage } = this.props;\n\n if (errorMessage) {\n return (\n <div className=\"d-flex flex-column align-items-center\">\n <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} iconLabel={null} />\n </div>\n );\n }\n\n if (!usHelpImage) {\n return (\n <div className=\"circle circle-sm circle-inverse p-t-1\">\n <UploadIcon size={24} />\n </div>\n );\n }\n\n if (typeof usHelpImage === 'string') {\n return <img src={usHelpImage} alt={usLabel} className=\"thumbnail text-xs-center\" />;\n }\n\n return usHelpImage;\n };\n\n render() {\n const {\n errorMessage,\n isComplete,\n errorIconLabel,\n usAccept,\n usButtonText,\n usDisabled,\n usLabel,\n usPlaceholder,\n } = this.props;\n\n return (\n <div className=\"droppable-default-card\" aria-hidden={isComplete}>\n <div className=\"droppable-card-content\">\n <div className=\"m-b-3\">{this.getImage()}</div>\n {usLabel && <h4 className=\"np-text-title-body m-b-1\">{usLabel}</h4>}\n {usPlaceholder && <p className=\"np-text-body-large m-b-3\">{String(usPlaceholder)}</p>}\n <label\n className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}\n role=\"button\"\n aria-disabled={usDisabled}\n tabIndex={0}\n >\n {usButtonText ? (\n <span>{usButtonText}</span>\n ) : (\n <UploadIcon size={24} className=\"m-r-0\" />\n )}\n <input\n ref={this.uploadInputRef}\n type=\"file\"\n accept={usAccept === '*' ? undefined : usAccept}\n className=\"tw-droppable-input hidden\"\n disabled={usDisabled}\n name=\"file-upload\"\n onChange={() => this.onManualUpload()}\n />\n </label>\n {errorMessage && (\n <div className=\"upload-error-message\">\n <div className=\"m-t-3 has-error\">\n <InlineAlert type={Sentiment.NEGATIVE} iconLabel={errorIconLabel}>\n {errorMessage}\n </InlineAlert>\n </div>\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"],"names":["UploadImageStep","PureComponent","uploadInputRef","createRef","onManualUpload","fileDropped","props","file","current","files","getImage","usHelpImage","usLabel","errorMessage","_jsx","className","children","StatusIcon","size","Size","LARGE","sentiment","Sentiment","NEGATIVE","iconLabel","UploadIcon","src","alt","render","isComplete","errorIconLabel","usAccept","usButtonText","usDisabled","usPlaceholder","_jsxs","String","role","tabIndex","ref","type","accept","undefined","disabled","name","onChange","InlineAlert"],"mappings":"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"}
|
|
@@ -30,7 +30,8 @@ class UploadImageStep extends PureComponent {
|
|
|
30
30
|
className: "d-flex flex-column align-items-center",
|
|
31
31
|
children: /*#__PURE__*/jsx(StatusIcon, {
|
|
32
32
|
size: Size.LARGE,
|
|
33
|
-
sentiment: Sentiment.NEGATIVE
|
|
33
|
+
sentiment: Sentiment.NEGATIVE,
|
|
34
|
+
iconLabel: null
|
|
34
35
|
})
|
|
35
36
|
});
|
|
36
37
|
}
|
|
@@ -53,13 +54,14 @@ class UploadImageStep extends PureComponent {
|
|
|
53
54
|
};
|
|
54
55
|
render() {
|
|
55
56
|
const {
|
|
57
|
+
errorMessage,
|
|
56
58
|
isComplete,
|
|
59
|
+
errorIconLabel,
|
|
57
60
|
usAccept,
|
|
58
61
|
usButtonText,
|
|
59
62
|
usDisabled,
|
|
60
63
|
usLabel,
|
|
61
|
-
usPlaceholder
|
|
62
|
-
errorMessage
|
|
64
|
+
usPlaceholder
|
|
63
65
|
} = this.props;
|
|
64
66
|
return /*#__PURE__*/jsx("div", {
|
|
65
67
|
className: "droppable-default-card",
|
|
@@ -100,6 +102,7 @@ class UploadImageStep extends PureComponent {
|
|
|
100
102
|
className: "m-t-3 has-error",
|
|
101
103
|
children: /*#__PURE__*/jsx(InlineAlert, {
|
|
102
104
|
type: Sentiment.NEGATIVE,
|
|
105
|
+
iconLabel: errorIconLabel,
|
|
103
106
|
children: errorMessage
|
|
104
107
|
})
|
|
105
108
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"uploadImageStep.mjs","sources":["../../../../src/upload/steps/uploadImageStep/uploadImageStep.tsx"],"sourcesContent":["import { Upload as UploadIcon } from '@transferwise/icons';\nimport { createRef, PureComponent } from 'react';\nimport StatusIcon from '../../../statusIcon';\nimport { Sentiment, Size } from '../../../common';\nimport InlineAlert from '../../../inlineAlert';\n\nexport interface UploadImageStepProps {\n fileDropped: (file: File) => void;\n isComplete: boolean;\n usAccept: string;\n usButtonText: string;\n usDisabled: boolean;\n usHelpImage: React.ReactNode;\n usLabel: string;\n usPlaceholder: string;\n errorMessage?: string | string[];\n}\n\nexport default class UploadImageStep extends PureComponent<UploadImageStepProps> {\n uploadInputRef = createRef<HTMLInputElement>();\n\n onManualUpload = () => {\n const { fileDropped } = this.props;\n const file = this.uploadInputRef.current?.files?.[0];\n if (file != null) {\n fileDropped(file);\n }\n };\n\n getImage = () => {\n const { usHelpImage, usLabel } = this.props;\n const { errorMessage } = this.props;\n\n if (errorMessage) {\n return (\n <div className=\"d-flex flex-column align-items-center\">\n <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} />\n </div>\n );\n }\n\n if (!usHelpImage) {\n return (\n <div className=\"circle circle-sm circle-inverse p-t-1\">\n <UploadIcon size={24} />\n </div>\n );\n }\n\n if (typeof usHelpImage === 'string') {\n return <img src={usHelpImage} alt={usLabel} className=\"thumbnail text-xs-center\" />;\n }\n\n return usHelpImage;\n };\n\n render() {\n const {
|
|
1
|
+
{"version":3,"file":"uploadImageStep.mjs","sources":["../../../../src/upload/steps/uploadImageStep/uploadImageStep.tsx"],"sourcesContent":["import { Upload as UploadIcon } from '@transferwise/icons';\nimport { createRef, PureComponent } from 'react';\nimport StatusIcon from '../../../statusIcon';\nimport { Sentiment, Size } from '../../../common';\nimport InlineAlert from '../../../inlineAlert';\n\nexport interface UploadImageStepProps {\n fileDropped: (file: File) => void;\n isComplete: boolean;\n usAccept: string;\n usButtonText: string;\n usDisabled: boolean;\n usHelpImage: React.ReactNode;\n usLabel: string;\n usPlaceholder: string;\n errorMessage?: string | string[];\n errorIconLabel?: string;\n}\n\nexport default class UploadImageStep extends PureComponent<UploadImageStepProps> {\n uploadInputRef = createRef<HTMLInputElement>();\n\n onManualUpload = () => {\n const { fileDropped } = this.props;\n const file = this.uploadInputRef.current?.files?.[0];\n if (file != null) {\n fileDropped(file);\n }\n };\n\n getImage = () => {\n const { usHelpImage, usLabel } = this.props;\n const { errorMessage } = this.props;\n\n if (errorMessage) {\n return (\n <div className=\"d-flex flex-column align-items-center\">\n <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} iconLabel={null} />\n </div>\n );\n }\n\n if (!usHelpImage) {\n return (\n <div className=\"circle circle-sm circle-inverse p-t-1\">\n <UploadIcon size={24} />\n </div>\n );\n }\n\n if (typeof usHelpImage === 'string') {\n return <img src={usHelpImage} alt={usLabel} className=\"thumbnail text-xs-center\" />;\n }\n\n return usHelpImage;\n };\n\n render() {\n const {\n errorMessage,\n isComplete,\n errorIconLabel,\n usAccept,\n usButtonText,\n usDisabled,\n usLabel,\n usPlaceholder,\n } = this.props;\n\n return (\n <div className=\"droppable-default-card\" aria-hidden={isComplete}>\n <div className=\"droppable-card-content\">\n <div className=\"m-b-3\">{this.getImage()}</div>\n {usLabel && <h4 className=\"np-text-title-body m-b-1\">{usLabel}</h4>}\n {usPlaceholder && <p className=\"np-text-body-large m-b-3\">{String(usPlaceholder)}</p>}\n <label\n className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}\n role=\"button\"\n aria-disabled={usDisabled}\n tabIndex={0}\n >\n {usButtonText ? (\n <span>{usButtonText}</span>\n ) : (\n <UploadIcon size={24} className=\"m-r-0\" />\n )}\n <input\n ref={this.uploadInputRef}\n type=\"file\"\n accept={usAccept === '*' ? undefined : usAccept}\n className=\"tw-droppable-input hidden\"\n disabled={usDisabled}\n name=\"file-upload\"\n onChange={() => this.onManualUpload()}\n />\n </label>\n {errorMessage && (\n <div className=\"upload-error-message\">\n <div className=\"m-t-3 has-error\">\n <InlineAlert type={Sentiment.NEGATIVE} iconLabel={errorIconLabel}>\n {errorMessage}\n </InlineAlert>\n </div>\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"],"names":["UploadImageStep","PureComponent","uploadInputRef","createRef","onManualUpload","fileDropped","props","file","current","files","getImage","usHelpImage","usLabel","errorMessage","_jsx","className","children","StatusIcon","size","Size","LARGE","sentiment","Sentiment","NEGATIVE","iconLabel","UploadIcon","src","alt","render","isComplete","errorIconLabel","usAccept","usButtonText","usDisabled","usPlaceholder","_jsxs","String","role","tabIndex","ref","type","accept","undefined","disabled","name","onChange","InlineAlert"],"mappings":";;;;;;;;AAmBqB,MAAAA,eAAgB,SAAQC,aAAmC,CAAA;EAC9EC,cAAc,gBAAGC,SAAS,EAAoB,CAAA;EAE9CC,cAAc,GAAGA,MAAK;IACpB,MAAM;AAAEC,MAAAA,WAAAA;KAAa,GAAG,IAAI,CAACC,KAAK,CAAA;IAClC,MAAMC,IAAI,GAAG,IAAI,CAACL,cAAc,CAACM,OAAO,EAAEC,KAAK,GAAG,CAAC,CAAC,CAAA;IACpD,IAAIF,IAAI,IAAI,IAAI,EAAE;MAChBF,WAAW,CAACE,IAAI,CAAC,CAAA;AACnB,KAAA;GACD,CAAA;EAEDG,QAAQ,GAAGA,MAAK;IACd,MAAM;MAAEC,WAAW;AAAEC,MAAAA,OAAAA;KAAS,GAAG,IAAI,CAACN,KAAK,CAAA;IAC3C,MAAM;AAAEO,MAAAA,YAAAA;KAAc,GAAG,IAAI,CAACP,KAAK,CAAA;AAEnC,IAAA,IAAIO,YAAY,EAAE;AAChB,MAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AAAKC,QAAAA,SAAS,EAAC,uCAAuC;QAAAC,QAAA,eACpDF,GAAA,CAACG,UAAU,EAAA;UAACC,IAAI,EAAEC,IAAI,CAACC,KAAM;UAACC,SAAS,EAAEC,SAAS,CAACC,QAAS;AAACC,UAAAA,SAAS,EAAE,IAAA;SAC1E,CAAA;AAAA,OAAK,CAAC,CAAA;AAEV,KAAA;IAEA,IAAI,CAACb,WAAW,EAAE;AAChB,MAAA,oBACEG,GAAA,CAAA,KAAA,EAAA;AAAKC,QAAAA,SAAS,EAAC,uCAAuC;QAAAC,QAAA,eACpDF,GAAA,CAACW,MAAU,EAAA;AAACP,UAAAA,IAAI,EAAE,EAAA;SACpB,CAAA;AAAA,OAAK,CAAC,CAAA;AAEV,KAAA;AAEA,IAAA,IAAI,OAAOP,WAAW,KAAK,QAAQ,EAAE;AACnC,MAAA,oBAAOG,GAAA,CAAA,KAAA,EAAA;AAAKY,QAAAA,GAAG,EAAEf,WAAY;AAACgB,QAAAA,GAAG,EAAEf,OAAQ;AAACG,QAAAA,SAAS,EAAC,0BAAA;AAA0B,QAAG,CAAA;AACrF,KAAA;AAEA,IAAA,OAAOJ,WAAW,CAAA;GACnB,CAAA;AAEDiB,EAAAA,MAAMA,GAAA;IACJ,MAAM;MACJf,YAAY;MACZgB,UAAU;MACVC,cAAc;MACdC,QAAQ;MACRC,YAAY;MACZC,UAAU;MACVrB,OAAO;AACPsB,MAAAA,aAAAA;KACD,GAAG,IAAI,CAAC5B,KAAK,CAAA;AAEd,IAAA,oBACEQ,GAAA,CAAA,KAAA,EAAA;AAAKC,MAAAA,SAAS,EAAC,wBAAwB;AAAC,MAAA,aAAA,EAAac,UAAW;AAAAb,MAAAA,QAAA,eAC9DmB,IAAA,CAAA,KAAA,EAAA;AAAKpB,QAAAA,SAAS,EAAC,wBAAwB;AAAAC,QAAAA,QAAA,gBACrCF,GAAA,CAAA,KAAA,EAAA;AAAKC,UAAAA,SAAS,EAAC,OAAO;AAAAC,UAAAA,QAAA,EAAE,IAAI,CAACN,QAAQ,EAAA;AAAE,SAAM,CAC7C,EAACE,OAAO,iBAAIE,GAAA,CAAA,IAAA,EAAA;AAAIC,UAAAA,SAAS,EAAC,0BAA0B;AAAAC,UAAAA,QAAA,EAAEJ,OAAAA;AAAO,SAAK,CAAC,EAClEsB,aAAa,iBAAIpB,GAAA,CAAA,GAAA,EAAA;AAAGC,UAAAA,SAAS,EAAC,0BAA0B;UAAAC,QAAA,EAAEoB,MAAM,CAACF,aAAa,CAAA;SAAK,CAAC,eACrFC,IAAA,CAAA,OAAA,EAAA;AACEpB,UAAAA,SAAS,EAAE,CAA0BkB,uBAAAA,EAAAA,UAAU,GAAG,UAAU,GAAG,EAAE,CAAG,CAAA;AACpEI,UAAAA,IAAI,EAAC,QAAQ;AACb,UAAA,eAAA,EAAeJ,UAAW;AAC1BK,UAAAA,QAAQ,EAAE,CAAE;UAAAtB,QAAA,EAAA,CAEXgB,YAAY,gBACXlB,GAAA,CAAA,MAAA,EAAA;AAAAE,YAAAA,QAAA,EAAOgB,YAAAA;AAAY,WAAO,CAAC,gBAE3BlB,GAAA,CAACW,MAAU,EAAA;AAACP,YAAAA,IAAI,EAAE,EAAG;AAACH,YAAAA,SAAS,EAAC,OAAA;WAAO,CACxC,eACDD,GAAA,CAAA,OAAA,EAAA;YACEyB,GAAG,EAAE,IAAI,CAACrC,cAAe;AACzBsC,YAAAA,IAAI,EAAC,MAAM;AACXC,YAAAA,MAAM,EAAEV,QAAQ,KAAK,GAAG,GAAGW,SAAS,GAAGX,QAAS;AAChDhB,YAAAA,SAAS,EAAC,2BAA2B;AACrC4B,YAAAA,QAAQ,EAAEV,UAAW;AACrBW,YAAAA,IAAI,EAAC,aAAa;AAClBC,YAAAA,QAAQ,EAAEA,MAAM,IAAI,CAACzC,cAAc,EAAE;AAAC,WAE1C,CAAA,CAAA;AAAA,SAAO,CACP,EAACS,YAAY,iBACXC,GAAA,CAAA,KAAA,EAAA;AAAKC,UAAAA,SAAS,EAAC,sBAAsB;AAAAC,UAAAA,QAAA,eACnCF,GAAA,CAAA,KAAA,EAAA;AAAKC,YAAAA,SAAS,EAAC,iBAAiB;YAAAC,QAAA,eAC9BF,GAAA,CAACgC,WAAW,EAAA;cAACN,IAAI,EAAElB,SAAS,CAACC,QAAS;AAACC,cAAAA,SAAS,EAAEM,cAAe;AAAAd,cAAAA,QAAA,EAC9DH,YAAAA;aACU,CAAA;WACV,CAAA;AACP,SAAK,CACN,CAAA;OACE,CAAA;AACP,KAAK,CAAC,CAAA;AAEV,GAAA;AACD;;;;"}
|
|
@@ -24,6 +24,15 @@ function generateFileId(file) {
|
|
|
24
24
|
const uploadTimeStamp = new Date().getTime();
|
|
25
25
|
return `${name}_${size}_${uploadTimeStamp}`;
|
|
26
26
|
}
|
|
27
|
+
/**
|
|
28
|
+
* The component allows users to upload files, manage the list of uploaded files,
|
|
29
|
+
* and handle file validation and deletion.
|
|
30
|
+
*
|
|
31
|
+
* @param {UploadInputProps} props - The properties for the UploadInput component.
|
|
32
|
+
*
|
|
33
|
+
* @see {@link UploadInput} for further information.
|
|
34
|
+
* @see {@link https://storybook.wise.design/?path=/docs/forms-uploadinput--docs|Storybook Wise Design}
|
|
35
|
+
*/
|
|
27
36
|
const UploadInput = ({
|
|
28
37
|
files = [],
|
|
29
38
|
fileInputName = 'file',
|
|
@@ -49,64 +58,53 @@ const UploadInput = ({
|
|
|
49
58
|
nonLabelable: true
|
|
50
59
|
});
|
|
51
60
|
const [markedFileForDelete, setMarkedFileForDelete] = React.useState(null);
|
|
52
|
-
const [fileToRemoveIndex, setFileToRemoveIndex] = React.useState(null);
|
|
53
61
|
const [mounted, setMounted] = React.useState(false);
|
|
54
62
|
const {
|
|
55
63
|
formatMessage
|
|
56
64
|
} = reactIntl.useIntl();
|
|
57
|
-
const itemRefs = React.useRef([]);
|
|
58
65
|
const uploadInputRef = React.useRef(null);
|
|
66
|
+
let fileRefs = [];
|
|
59
67
|
const PROGRESS_STATUSES = new Set([status.Status.PENDING, status.Status.PROCESSING]);
|
|
60
68
|
const [uploadedFiles, setUploadedFiles] = React.useState(multiple || files.length === 0 ? files : [files[0]]);
|
|
61
69
|
const uploadedFilesListReference = React.useRef(multiple || files.length === 0 ? files : [files[0]]);
|
|
70
|
+
function updateFileList(updateFn) {
|
|
71
|
+
setUploadedFiles(updateFn);
|
|
72
|
+
uploadedFilesListReference.current = updateFn(uploadedFilesListReference.current);
|
|
73
|
+
}
|
|
62
74
|
function addFileToList(recentUploadedFile) {
|
|
63
|
-
|
|
64
|
-
return [...listToAddTo, recentUploadedFile];
|
|
65
|
-
}
|
|
66
|
-
setUploadedFiles(addToList);
|
|
67
|
-
uploadedFilesListReference.current = addToList(uploadedFilesListReference.current);
|
|
75
|
+
updateFileList(list => [...list, recentUploadedFile]);
|
|
68
76
|
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
...updates
|
|
81
|
-
} : fileInList;
|
|
82
|
-
});
|
|
83
|
-
setUploadedFiles(updateListItem);
|
|
84
|
-
uploadedFilesListReference.current = updateListItem(uploadedFilesListReference.current);
|
|
85
|
-
};
|
|
86
|
-
const [fileToRemove, setFileToRemove] = React.useState(null);
|
|
87
|
-
const removeFile = file => {
|
|
77
|
+
function removeFileFromList(file) {
|
|
78
|
+
updateFileList(list => list.filter(fileInList => file !== fileInList && file.id !== fileInList.id));
|
|
79
|
+
fileRefs = fileRefs.filter(ref => ref && ref.id !== file.id);
|
|
80
|
+
}
|
|
81
|
+
function modifyFileInList(file, updates) {
|
|
82
|
+
updateFileList(list => list.map(fileInList => fileInList === file || fileInList.id === file.id ? {
|
|
83
|
+
...file,
|
|
84
|
+
...updates
|
|
85
|
+
} : fileInList));
|
|
86
|
+
}
|
|
87
|
+
const removeFile = async file => {
|
|
88
88
|
const {
|
|
89
89
|
id,
|
|
90
90
|
status: status$1
|
|
91
91
|
} = file;
|
|
92
|
-
|
|
93
|
-
setFileToRemoveIndex(index);
|
|
92
|
+
fileRefs = fileRefs.filter(item => item && item.id !== file.id);
|
|
94
93
|
if (status$1 === status.Status.FAILED) {
|
|
95
94
|
removeFileFromList(file);
|
|
96
|
-
|
|
97
|
-
}
|
|
95
|
+
return Promise.resolve();
|
|
96
|
+
}
|
|
97
|
+
if (onDeleteFile && id) {
|
|
98
98
|
modifyFileInList(file, {
|
|
99
99
|
status: status.Status.PROCESSING,
|
|
100
100
|
error: undefined
|
|
101
101
|
});
|
|
102
|
-
onDeleteFile(id).then(() => {
|
|
102
|
+
return onDeleteFile(id).then(() => {
|
|
103
103
|
removeFileFromList(file);
|
|
104
104
|
}).catch(error => {
|
|
105
105
|
modifyFileInList(file, {
|
|
106
106
|
error: error
|
|
107
107
|
});
|
|
108
|
-
}).finally(() => {
|
|
109
|
-
setFileToRemove(file);
|
|
110
108
|
});
|
|
111
109
|
}
|
|
112
110
|
};
|
|
@@ -114,9 +112,8 @@ const UploadInput = ({
|
|
|
114
112
|
const {
|
|
115
113
|
name
|
|
116
114
|
} = file;
|
|
117
|
-
const id = generateFileId(file);
|
|
118
115
|
const failedUpload = {
|
|
119
|
-
id,
|
|
116
|
+
id: generateFileId(file),
|
|
120
117
|
filename: name,
|
|
121
118
|
status: status.Status.FAILED,
|
|
122
119
|
error: failureMessage
|
|
@@ -138,22 +135,16 @@ const UploadInput = ({
|
|
|
138
135
|
const numberOfValidFiles = getNumberOfFilesUploaded();
|
|
139
136
|
return numberOfValidFiles >= maxFiles;
|
|
140
137
|
}
|
|
141
|
-
// One or more files selected, create entries for them
|
|
142
138
|
const addFiles = selectedFiles => {
|
|
143
139
|
for (let i = 0; i < selectedFiles.length; i += 1) {
|
|
144
140
|
const file = selectedFiles.item(i);
|
|
145
|
-
// Returning a FormData[] array instead of FileList so we can filter out incorrect files
|
|
146
141
|
const formData = new FormData();
|
|
147
142
|
if (file) {
|
|
148
|
-
generateFileId(file);
|
|
149
143
|
const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');
|
|
150
|
-
// Check if file type is valid
|
|
151
144
|
if (!isTypeValid.isTypeValid(file, allowedFileTypes)) {
|
|
152
145
|
handleFileUploadFailure(file, formatMessage(UploadInput_messages.fileTypeNotSupported));
|
|
153
146
|
continue;
|
|
154
147
|
}
|
|
155
|
-
// Check if the filesize is valid
|
|
156
|
-
// Convert to rough bytes
|
|
157
148
|
if (!isSizeValid.isSizeValid(file, sizeLimit * 1000)) {
|
|
158
149
|
const failureMessage = sizeLimitErrorMessage || formatMessage(UploadInput_messages.fileIsTooLarge);
|
|
159
150
|
handleFileUploadFailure(file, failureMessage);
|
|
@@ -166,13 +157,10 @@ const UploadInput = ({
|
|
|
166
157
|
handleFileUploadFailure(file, failureMessage);
|
|
167
158
|
continue;
|
|
168
159
|
}
|
|
169
|
-
// Check if the file is already in the list
|
|
170
160
|
const existingFile = uploadedFiles.find(f => f.filename === file.name);
|
|
171
161
|
if (existingFile) {
|
|
172
|
-
// Remove the file from the list before adding it again
|
|
173
162
|
removeFileFromList(existingFile);
|
|
174
163
|
}
|
|
175
|
-
// Add the file to the list
|
|
176
164
|
formData.append(fileInputName, file);
|
|
177
165
|
const pendingFile = {
|
|
178
166
|
id: generateFileId(file),
|
|
@@ -180,13 +168,11 @@ const UploadInput = ({
|
|
|
180
168
|
status: status.Status.PENDING
|
|
181
169
|
};
|
|
182
170
|
addFileToList(pendingFile);
|
|
183
|
-
// Start uploading the file
|
|
184
171
|
onUploadFile(formData).then(({
|
|
185
172
|
id,
|
|
186
173
|
url,
|
|
187
174
|
error
|
|
188
175
|
}) => {
|
|
189
|
-
// Replace the temporary id with the final one received from the API, and also set any errors
|
|
190
176
|
modifyFileInList(pendingFile, {
|
|
191
177
|
id,
|
|
192
178
|
url,
|
|
@@ -200,27 +186,11 @@ const UploadInput = ({
|
|
|
200
186
|
});
|
|
201
187
|
});
|
|
202
188
|
if (!multiple) {
|
|
203
|
-
// Only upload a single file
|
|
204
189
|
break;
|
|
205
190
|
}
|
|
206
191
|
}
|
|
207
192
|
}
|
|
208
193
|
};
|
|
209
|
-
React.useLayoutEffect(() => {
|
|
210
|
-
if (fileToRemove && fileToRemoveIndex !== null) {
|
|
211
|
-
requestAnimationFrame(() => {
|
|
212
|
-
const nextFocusIndex = Math.min(fileToRemoveIndex, uploadedFiles.length - 1);
|
|
213
|
-
if (itemRefs.current[nextFocusIndex]) {
|
|
214
|
-
itemRefs.current[nextFocusIndex].focus(); // Focus the next UploadItem
|
|
215
|
-
} else {
|
|
216
|
-
// If there's only one item left, focus the UploadButton
|
|
217
|
-
uploadInputRef.current?.focus();
|
|
218
|
-
}
|
|
219
|
-
});
|
|
220
|
-
setFileToRemove(null); // Reset the state
|
|
221
|
-
setFileToRemoveIndex(null); // Reset the index
|
|
222
|
-
}
|
|
223
|
-
}, [uploadedFiles, fileToRemove, fileToRemoveIndex, itemRefs, uploadInputRef]);
|
|
224
194
|
React.useEffect(() => {
|
|
225
195
|
setMounted(true);
|
|
226
196
|
}, []);
|
|
@@ -229,6 +199,33 @@ const UploadInput = ({
|
|
|
229
199
|
onFilesChange([...uploadedFiles]);
|
|
230
200
|
}
|
|
231
201
|
}, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
202
|
+
const [nextFocusable, setNextFocusable] = React.useState(uploadInputRef.current);
|
|
203
|
+
const handleFocus = fileId => {
|
|
204
|
+
fileRefs = fileRefs.filter(ref => {
|
|
205
|
+
return ref && ref.id !== markedFileForDelete?.id;
|
|
206
|
+
});
|
|
207
|
+
const filesCount = fileRefs.length;
|
|
208
|
+
let next = uploadInputRef.current;
|
|
209
|
+
if (filesCount > 1) {
|
|
210
|
+
const currentFileIndex = fileRefs.findIndex(file => file?.id === fileId);
|
|
211
|
+
const currentFileId = fileRefs?.[currentFileIndex]?.id;
|
|
212
|
+
const lastFileId = fileRefs?.[filesCount - 1]?.id;
|
|
213
|
+
// if last file, select a previous one
|
|
214
|
+
if (currentFileId === lastFileId) {
|
|
215
|
+
next = fileRefs[filesCount - 2];
|
|
216
|
+
} else {
|
|
217
|
+
next = fileRefs[currentFileIndex + 1];
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
setNextFocusable(next);
|
|
221
|
+
};
|
|
222
|
+
const handleRefocus = () => {
|
|
223
|
+
if (nextFocusable && 'focus' in nextFocusable && typeof nextFocusable.focus === 'function') {
|
|
224
|
+
setTimeout(() => {
|
|
225
|
+
nextFocusable.focus();
|
|
226
|
+
}, 0);
|
|
227
|
+
}
|
|
228
|
+
};
|
|
232
229
|
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
233
230
|
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
234
231
|
role: "group",
|
|
@@ -243,13 +240,19 @@ const UploadInput = ({
|
|
|
243
240
|
role: "region",
|
|
244
241
|
children: uploadedFiles.map((file, index) => /*#__PURE__*/jsxRuntime.jsx(UploadItem.default, {
|
|
245
242
|
ref: el => {
|
|
246
|
-
|
|
243
|
+
if (el && el.id !== markedFileForDelete?.id && !fileRefs.some(ref => ref && ref.id === el.id) && el.status !== 'processing') {
|
|
244
|
+
fileRefs.push(el);
|
|
245
|
+
}
|
|
247
246
|
},
|
|
248
247
|
file: file,
|
|
249
248
|
singleFileUpload: !multiple,
|
|
250
249
|
canDelete: (!!onDeleteFile || file.status === status.Status.FAILED) && (!file.status || !PROGRESS_STATUSES.has(file.status)),
|
|
251
|
-
onDelete: file.status === status.Status.FAILED ?
|
|
252
|
-
|
|
250
|
+
onDelete: file.status === status.Status.FAILED ? async () => {
|
|
251
|
+
await removeFile(file);
|
|
252
|
+
handleRefocus();
|
|
253
|
+
} : () => setMarkedFileForDelete(file),
|
|
254
|
+
onDownload: onDownload,
|
|
255
|
+
onFocus: () => handleFocus(file.id)
|
|
253
256
|
}, file.id))
|
|
254
257
|
}), (multiple || !multiple && !uploadedFiles.length) && /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
255
258
|
className: "np-upload-input__section np-upload-input__section--uploader",
|
|
@@ -282,15 +285,17 @@ const UploadInput = ({
|
|
|
282
285
|
block: true,
|
|
283
286
|
priority: control.Priority.SECONDARY,
|
|
284
287
|
type: control.ControlType.NEGATIVE,
|
|
288
|
+
tabIndex: markedFileForDelete ? 0 : -1,
|
|
285
289
|
onClick: () => {
|
|
286
290
|
if (markedFileForDelete) {
|
|
287
|
-
removeFile(markedFileForDelete);
|
|
291
|
+
void removeFile(markedFileForDelete);
|
|
288
292
|
}
|
|
289
293
|
setMarkedFileForDelete(null);
|
|
290
294
|
},
|
|
291
295
|
children: deleteConfirm?.confirmText || formatMessage(UploadInput_messages.deleteModalConfirmButtonText)
|
|
292
296
|
})]
|
|
293
297
|
}),
|
|
298
|
+
onUnmount: handleRefocus,
|
|
294
299
|
onClose: () => {
|
|
295
300
|
setMarkedFileForDelete(null);
|
|
296
301
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadInput.js","sources":["../../src/uploadInput/UploadInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, useState, useLayoutEffect } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Button from '../button';\nimport { CommonProps, ControlType, Priority, Status } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport Modal from '../modal';\nimport { isSizeValid } from '../upload/utils/isSizeValid';\nimport { isTypeValid } from '../upload/utils/isTypeValid';\n\nimport MESSAGES from './UploadInput.messages';\nimport { UploadedFile, UploadError, UploadResponse } from './types';\nimport UploadButton, { UploadButtonProps } from './uploadButton/UploadButton';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './uploadButton/defaults';\nimport UploadItem, { UploadItemProps } from './uploadItem/UploadItem';\n\nexport type UploadInputProps = {\n /**\n * List of already existing, failed or in progress files\n */\n files?: readonly UploadedFile[];\n\n /**\n * The key of the file in the returned FormData object (default: file)\n */\n fileInputName?: string;\n\n /**\n * Callback that handles form submission\n *\n * @param formData\n */\n onUploadFile: (formData: FormData) => Promise<UploadResponse>;\n\n /**\n * Provide a callback if the file can be removed/deleted from the server\n * Your app is responsible for reloading the uploaded files list and updating the component to ensure that the file has in fact been deleted successfully\n *\n * @param id\n */\n onDeleteFile?: (id: string | number) => Promise<any>;\n\n /**\n * Provide a callback to trigger on validation error\n *\n * @param file\n */\n onValidationError?: (file: UploadedFile) => void;\n\n /**\n * Provide a callback to trigger on change whenever the files are updated\n *\n * @param files\n */\n onFilesChange?: (files: UploadedFile[]) => void;\n\n /**\n * Confirmation modal displayed on delete\n */\n deleteConfirm?: {\n /**\n * The title of the confirmation modal on delete\n */\n title?: string;\n\n /**\n * The body of the confirmation modal on delete\n */\n body?: React.ReactNode;\n\n /**\n * The confirm button text of the confirmation modal on delete\n */\n confirmText?: string;\n\n /**\n * The cancel button text of the confirmation modal on delete\n */\n cancelText?: string;\n };\n\n /**\n * Maximum number of files allowed, if provided, shows error below file item\n */\n maxFiles?: number;\n\n /**\n * Error message to show when the maximum number of files are uploaded already\n */\n maxFilesErrorMessage?: string;\n\n /**\n * Error message to show when files over a allowed size limit are uploaded\n */\n sizeLimitErrorMessage?: string;\n} & Pick<\n UploadButtonProps,\n 'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description' | 'id' | 'uploadButtonTitle'\n> & { onDownload?: UploadItemProps['onDownload'] } & CommonProps;\n\ninterface UploadItemRef {\n focus: () => void;\n}\n\nfunction generateFileId(file: File) {\n const { name, size } = file;\n const uploadTimeStamp = new Date().getTime();\n return `${name}_${size}_${uploadTimeStamp}`;\n}\n\nconst UploadInput = ({\n files = [],\n fileInputName = 'file',\n className,\n deleteConfirm,\n disabled,\n multiple = false,\n fileTypes = imageFileTypes,\n sizeLimit = DEFAULT_SIZE_LIMIT,\n description,\n onUploadFile,\n onDeleteFile,\n onValidationError,\n onFilesChange,\n onDownload,\n maxFiles,\n maxFilesErrorMessage,\n id,\n sizeLimitErrorMessage,\n uploadButtonTitle,\n}: UploadInputProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);\n const [fileToRemoveIndex, setFileToRemoveIndex] = useState<number | null>(null);\n const [mounted, setMounted] = useState(false);\n const { formatMessage } = useIntl();\n const itemRefs = useRef<(HTMLDivElement | UploadItemRef | null)[]>([]);\n const uploadInputRef = useRef<HTMLInputElement | null>(null);\n\n const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);\n\n const [uploadedFiles, setUploadedFiles] = useState<readonly UploadedFile[]>(\n multiple || files.length === 0 ? files : [files[0]],\n );\n\n const uploadedFilesListReference = useRef(multiple || files.length === 0 ? files : [files[0]]);\n\n function addFileToList(recentUploadedFile: UploadedFile) {\n function addToList(listToAddTo: readonly UploadedFile[]) {\n return [...listToAddTo, recentUploadedFile];\n }\n\n setUploadedFiles(addToList);\n uploadedFilesListReference.current = addToList(uploadedFilesListReference.current);\n }\n\n const removeFileFromList = (file: UploadedFile) => {\n function filterOutFrom(listToFilterFrom: readonly UploadedFile[]) {\n return listToFilterFrom.filter(\n (fileInList) => file !== fileInList && file.id !== fileInList.id,\n );\n }\n\n setUploadedFiles(filterOutFrom);\n uploadedFilesListReference.current = filterOutFrom(uploadedFilesListReference.current);\n };\n\n const modifyFileInList = (file: UploadedFile, updates: Partial<UploadedFile>) => {\n const updateListItem = (listToUpdate: readonly UploadedFile[]) =>\n listToUpdate.map((fileInList) => {\n return fileInList === file || fileInList.id === file.id\n ? { ...file, ...updates }\n : fileInList;\n });\n\n setUploadedFiles(updateListItem);\n uploadedFilesListReference.current = updateListItem(uploadedFilesListReference.current);\n };\n\n const [fileToRemove, setFileToRemove] = useState<UploadedFile | null>(null);\n\n const removeFile = (file: UploadedFile) => {\n const { id, status } = file;\n const index = uploadedFiles.findIndex((f) => f.id === file.id);\n setFileToRemoveIndex(index);\n\n if (status === Status.FAILED) {\n removeFileFromList(file);\n setFileToRemove(file);\n } else if (onDeleteFile && id) {\n modifyFileInList(file, { status: Status.PROCESSING, error: undefined });\n\n onDeleteFile(id)\n .then(() => {\n removeFileFromList(file);\n })\n .catch((error) => {\n modifyFileInList(file, { error: error as UploadError });\n })\n .finally(() => {\n setFileToRemove(file);\n });\n }\n };\n\n function handleFileUploadFailure(file: File, failureMessage: string) {\n const { name } = file;\n const id = generateFileId(file);\n const failedUpload = {\n id,\n filename: name,\n status: Status.FAILED,\n error: failureMessage,\n };\n\n addFileToList(failedUpload);\n\n if (onValidationError) {\n onValidationError(failedUpload);\n }\n }\n\n function getNumberOfFilesUploaded() {\n const uploadInitiatedStatus = new Set([Status.SUCCEEDED, Status.PENDING]);\n const validFiles = uploadedFilesListReference.current.filter(\n (file) => file.status && uploadInitiatedStatus.has(file.status),\n );\n return validFiles.length;\n }\n\n function areMaximumFilesUploadedAlready() {\n if (!maxFiles) {\n return false;\n }\n\n const numberOfValidFiles = getNumberOfFilesUploaded();\n return numberOfValidFiles >= maxFiles;\n }\n\n // One or more files selected, create entries for them\n const addFiles = (selectedFiles: FileList) => {\n for (let i = 0; i < selectedFiles.length; i += 1) {\n const file = selectedFiles.item(i);\n\n // Returning a FormData[] array instead of FileList so we can filter out incorrect files\n const formData = new FormData();\n\n if (file) {\n const { name } = file;\n const id = generateFileId(file);\n\n const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');\n\n // Check if file type is valid\n if (!isTypeValid(file, allowedFileTypes)) {\n handleFileUploadFailure(file, formatMessage(MESSAGES.fileTypeNotSupported));\n continue;\n }\n\n // Check if the filesize is valid\n // Convert to rough bytes\n if (!isSizeValid(file, sizeLimit * 1000)) {\n const failureMessage = sizeLimitErrorMessage || formatMessage(MESSAGES.fileIsTooLarge);\n handleFileUploadFailure(file, failureMessage);\n continue;\n }\n\n if (areMaximumFilesUploadedAlready()) {\n const failureMessage =\n maxFilesErrorMessage ||\n formatMessage(MESSAGES.maximumFilesAlreadyUploaded, { maxFilesAllowed: maxFiles });\n handleFileUploadFailure(file, failureMessage);\n continue;\n }\n\n // Check if the file is already in the list\n const existingFile = uploadedFiles.find((f) => f.filename === file.name);\n if (existingFile) {\n // Remove the file from the list before adding it again\n removeFileFromList(existingFile);\n }\n\n // Add the file to the list\n formData.append(fileInputName, file);\n const pendingFile = {\n id: generateFileId(file),\n filename: file.name,\n status: Status.PENDING,\n };\n\n addFileToList(pendingFile);\n\n // Start uploading the file\n onUploadFile(formData)\n .then(({ id, url, error }: UploadResponse) => {\n // Replace the temporary id with the final one received from the API, and also set any errors\n modifyFileInList(pendingFile, { id, url, error, status: Status.SUCCEEDED });\n })\n .catch((error) => {\n modifyFileInList(pendingFile, { error: error as UploadError, status: Status.FAILED });\n });\n\n if (!multiple) {\n // Only upload a single file\n break;\n }\n }\n }\n };\n\n useLayoutEffect(() => {\n if (fileToRemove && fileToRemoveIndex !== null) {\n requestAnimationFrame(() => {\n const nextFocusIndex = Math.min(fileToRemoveIndex, uploadedFiles.length - 1);\n if (itemRefs.current[nextFocusIndex]) {\n itemRefs.current[nextFocusIndex].focus(); // Focus the next UploadItem\n } else {\n // If there's only one item left, focus the UploadButton\n uploadInputRef.current?.focus();\n }\n });\n setFileToRemove(null); // Reset the state\n setFileToRemoveIndex(null); // Reset the index\n }\n }, [uploadedFiles, fileToRemove, fileToRemoveIndex, itemRefs, uploadInputRef]);\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n useEffect(() => {\n if (onFilesChange && mounted) {\n onFilesChange([...uploadedFiles]);\n }\n }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <>\n <div\n role=\"group\"\n className={clsx('np-upload-input', className, { disabled })}\n {...inputAttributes}\n >\n <div\n className=\"np-upload-input__section\"\n aria-live=\"polite\"\n aria-relevant=\"all\"\n role=\"region\"\n >\n {uploadedFiles.map((file, index) => (\n <UploadItem\n key={file.id}\n ref={(el: UploadItemRef | null) => {\n itemRefs.current[index] = el;\n }}\n file={file}\n singleFileUpload={!multiple}\n canDelete={\n (!!onDeleteFile || file.status === Status.FAILED) &&\n (!file.status || !PROGRESS_STATUSES.has(file.status))\n }\n onDelete={\n file.status === Status.FAILED\n ? () => removeFile(file)\n : () => setMarkedFileForDelete(file)\n }\n onDownload={onDownload}\n />\n ))}\n </div>\n {(multiple || (!multiple && !uploadedFiles.length)) && (\n <div className=\"np-upload-input__section np-upload-input__section--uploader\">\n <UploadButton\n ref={uploadInputRef}\n id={id}\n uploadButtonTitle={uploadButtonTitle}\n disabled={areMaximumFilesUploadedAlready() || disabled}\n multiple={multiple}\n fileTypes={fileTypes}\n sizeLimit={sizeLimit}\n description={description}\n maxFiles={maxFiles}\n withEntries={Boolean(uploadedFiles.length)}\n onChange={addFiles}\n />\n </div>\n )}\n </div>\n <Modal\n title={\n deleteConfirm?.title !== undefined\n ? deleteConfirm.title\n : formatMessage(MESSAGES.deleteModalTitle)\n }\n body={\n deleteConfirm?.body !== undefined\n ? deleteConfirm.body\n : formatMessage(MESSAGES.deleteModalBody)\n }\n open={!!markedFileForDelete}\n footer={\n <>\n <Button\n block\n onClick={() => {\n setMarkedFileForDelete(null);\n }}\n >\n {deleteConfirm?.cancelText || formatMessage(MESSAGES.deleteModalCancelButtonText)}\n </Button>\n <Button\n block\n priority={Priority.SECONDARY}\n type={ControlType.NEGATIVE}\n onClick={() => {\n if (markedFileForDelete) {\n removeFile(markedFileForDelete);\n }\n setMarkedFileForDelete(null);\n }}\n >\n {deleteConfirm?.confirmText || formatMessage(MESSAGES.deleteModalConfirmButtonText)}\n </Button>\n </>\n }\n onClose={() => {\n setMarkedFileForDelete(null);\n }}\n />\n </>\n );\n};\n\nexport default UploadInput;\n"],"names":["generateFileId","file","name","size","uploadTimeStamp","Date","getTime","UploadInput","files","fileInputName","className","deleteConfirm","disabled","multiple","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","description","onUploadFile","onDeleteFile","onValidationError","onFilesChange","onDownload","maxFiles","maxFilesErrorMessage","id","sizeLimitErrorMessage","uploadButtonTitle","inputAttributes","useInputAttributes","nonLabelable","markedFileForDelete","setMarkedFileForDelete","useState","fileToRemoveIndex","setFileToRemoveIndex","mounted","setMounted","formatMessage","useIntl","itemRefs","useRef","uploadInputRef","PROGRESS_STATUSES","Set","Status","PENDING","PROCESSING","uploadedFiles","setUploadedFiles","length","uploadedFilesListReference","addFileToList","recentUploadedFile","addToList","listToAddTo","current","removeFileFromList","filterOutFrom","listToFilterFrom","filter","fileInList","modifyFileInList","updates","updateListItem","listToUpdate","map","fileToRemove","setFileToRemove","removeFile","status","index","findIndex","f","FAILED","error","undefined","then","catch","finally","handleFileUploadFailure","failureMessage","failedUpload","filename","getNumberOfFilesUploaded","uploadInitiatedStatus","SUCCEEDED","validFiles","has","areMaximumFilesUploadedAlready","numberOfValidFiles","addFiles","selectedFiles","i","item","formData","FormData","allowedFileTypes","join","isTypeValid","MESSAGES","fileTypeNotSupported","isSizeValid","fileIsTooLarge","maximumFilesAlreadyUploaded","maxFilesAllowed","existingFile","find","append","pendingFile","url","useLayoutEffect","requestAnimationFrame","nextFocusIndex","Math","min","focus","useEffect","_jsxs","_Fragment","children","role","clsx","_jsx","UploadItem","ref","el","singleFileUpload","canDelete","onDelete","UploadButton","withEntries","Boolean","onChange","Modal","title","deleteModalTitle","body","deleteModalBody","open","footer","Button","block","onClick","cancelText","deleteModalCancelButtonText","priority","Priority","SECONDARY","type","ControlType","NEGATIVE","confirmText","deleteModalConfirmButtonText","onClose"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"UploadInput.js","sources":["../../src/uploadInput/UploadInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Button from '../button';\nimport { CommonProps, ControlType, Priority, Status } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport Modal from '../modal';\nimport { isSizeValid } from '../upload/utils/isSizeValid';\nimport { isTypeValid } from '../upload/utils/isTypeValid';\n\nimport MESSAGES from './UploadInput.messages';\nimport { UploadedFile, UploadError, UploadResponse } from './types';\nimport UploadButton, { UploadButtonProps } from './uploadButton/UploadButton';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './uploadButton/defaults';\nimport UploadItem, { UploadItemProps } from './uploadItem/UploadItem';\n\nexport type UploadInputProps = {\n /**\n * List of already existing, failed or in progress files\n */\n files?: readonly UploadedFile[];\n\n /**\n * The key of the file in the returned FormData object (default: file)\n */\n fileInputName?: string;\n\n /**\n * Callback that handles form submission\n *\n * @param formData\n */\n onUploadFile: (formData: FormData) => Promise<UploadResponse>;\n\n /**\n * Provide a callback if the file can be removed/deleted from the server\n * Your app is responsible for reloading the uploaded files list and updating the component to ensure that the file has in fact been deleted successfully\n *\n * @param id\n */\n onDeleteFile?: (id: string | number) => Promise<any>;\n\n /**\n * Provide a callback to trigger on validation error\n *\n * @param file\n */\n onValidationError?: (file: UploadedFile) => void;\n\n /**\n * Provide a callback to trigger on change whenever the files are updated\n *\n * @param files\n */\n onFilesChange?: (files: UploadedFile[]) => void;\n\n /**\n * Confirmation modal displayed on delete\n */\n deleteConfirm?: {\n /**\n * The title of the confirmation modal on delete\n */\n title?: string;\n\n /**\n * The body of the confirmation modal on delete\n */\n body?: React.ReactNode;\n\n /**\n * The confirm button text of the confirmation modal on delete\n */\n confirmText?: string;\n\n /**\n * The cancel button text of the confirmation modal on delete\n */\n cancelText?: string;\n };\n\n /**\n * Maximum number of files allowed, if provided, shows error below file item\n */\n maxFiles?: number;\n\n /**\n * Error message to show when the maximum number of files are uploaded already\n */\n maxFilesErrorMessage?: string;\n\n /**\n * Error message to show when files over a allowed size limit are uploaded\n */\n sizeLimitErrorMessage?: string;\n} & Pick<\n UploadButtonProps,\n 'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description' | 'id' | 'uploadButtonTitle'\n> & { onDownload?: UploadItemProps['onDownload'] } & CommonProps;\n\n/**\n * Interface representing a reference to an UploadItem component.\n * Provides a method to focus the UploadItem.\n */\ninterface UploadItemRef {\n /**\n * Focuses the UploadItem component.\n */\n focus: () => void;\n\n /**\n * Required id of the UploadItem component.\n */\n id: string | number;\n\n /**\n * Optional status of the UploadItem component.\n */\n status?: string;\n}\n\n/**\n * Generates a unique ID for a file based on its name, size, and the current timestamp\n */\nfunction generateFileId(file: File) {\n const { name, size } = file;\n const uploadTimeStamp = new Date().getTime();\n return `${name}_${size}_${uploadTimeStamp}`;\n}\n\n/**\n * The component allows users to upload files, manage the list of uploaded files,\n * and handle file validation and deletion.\n *\n * @param {UploadInputProps} props - The properties for the UploadInput component.\n *\n * @see {@link UploadInput} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/forms-uploadinput--docs|Storybook Wise Design}\n */\nconst UploadInput = ({\n files = [],\n fileInputName = 'file',\n className,\n deleteConfirm,\n disabled,\n multiple = false,\n fileTypes = imageFileTypes,\n sizeLimit = DEFAULT_SIZE_LIMIT,\n description,\n onUploadFile,\n onDeleteFile,\n onValidationError,\n onFilesChange,\n onDownload,\n maxFiles,\n maxFilesErrorMessage,\n id,\n sizeLimitErrorMessage,\n uploadButtonTitle,\n}: UploadInputProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);\n const [mounted, setMounted] = useState(false);\n const { formatMessage } = useIntl();\n const uploadInputRef = useRef<HTMLInputElement | null>(null);\n let fileRefs: (HTMLDivElement | UploadItemRef | null)[] = [];\n\n const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);\n\n const [uploadedFiles, setUploadedFiles] = useState<readonly UploadedFile[]>(\n multiple || files.length === 0 ? files : [files[0]],\n );\n\n const uploadedFilesListReference = useRef(multiple || files.length === 0 ? files : [files[0]]);\n\n function updateFileList(updateFn: (list: readonly UploadedFile[]) => readonly UploadedFile[]) {\n setUploadedFiles(updateFn);\n uploadedFilesListReference.current = updateFn(uploadedFilesListReference.current);\n }\n\n function addFileToList(recentUploadedFile: UploadedFile) {\n updateFileList((list) => [...list, recentUploadedFile]);\n }\n\n function removeFileFromList(file: UploadedFile) {\n updateFileList((list) =>\n list.filter((fileInList) => file !== fileInList && file.id !== fileInList.id),\n );\n fileRefs = fileRefs.filter((ref) => ref && ref.id !== file.id);\n }\n\n function modifyFileInList(file: UploadedFile, updates: Partial<UploadedFile>) {\n updateFileList((list) =>\n list.map((fileInList) =>\n fileInList === file || fileInList.id === file.id ? { ...file, ...updates } : fileInList,\n ),\n );\n }\n\n const removeFile = async (file: UploadedFile) => {\n const { id, status } = file;\n fileRefs = fileRefs.filter((item) => item && item.id !== file.id);\n\n if (status === Status.FAILED) {\n removeFileFromList(file);\n return Promise.resolve();\n }\n\n if (onDeleteFile && id) {\n modifyFileInList(file, { status: Status.PROCESSING, error: undefined });\n\n return onDeleteFile(id)\n .then(() => {\n removeFileFromList(file);\n })\n .catch((error) => {\n modifyFileInList(file, { error: error as UploadError });\n });\n }\n };\n\n function handleFileUploadFailure(file: File, failureMessage: string) {\n const { name } = file;\n\n const failedUpload = {\n id: generateFileId(file),\n filename: name,\n status: Status.FAILED,\n error: failureMessage,\n };\n\n addFileToList(failedUpload);\n\n if (onValidationError) {\n onValidationError(failedUpload);\n }\n }\n\n function getNumberOfFilesUploaded() {\n const uploadInitiatedStatus = new Set([Status.SUCCEEDED, Status.PENDING]);\n const validFiles = uploadedFilesListReference.current.filter(\n (file) => file.status && uploadInitiatedStatus.has(file.status),\n );\n return validFiles.length;\n }\n\n function areMaximumFilesUploadedAlready() {\n if (!maxFiles) {\n return false;\n }\n\n const numberOfValidFiles = getNumberOfFilesUploaded();\n return numberOfValidFiles >= maxFiles;\n }\n\n const addFiles = (selectedFiles: FileList) => {\n for (let i = 0; i < selectedFiles.length; i += 1) {\n const file = selectedFiles.item(i);\n\n const formData = new FormData();\n\n if (file) {\n const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');\n\n if (!isTypeValid(file, allowedFileTypes)) {\n handleFileUploadFailure(file, formatMessage(MESSAGES.fileTypeNotSupported));\n continue;\n }\n\n if (!isSizeValid(file, sizeLimit * 1000)) {\n const failureMessage = sizeLimitErrorMessage || formatMessage(MESSAGES.fileIsTooLarge);\n handleFileUploadFailure(file, failureMessage);\n continue;\n }\n\n if (areMaximumFilesUploadedAlready()) {\n const failureMessage =\n maxFilesErrorMessage ||\n formatMessage(MESSAGES.maximumFilesAlreadyUploaded, { maxFilesAllowed: maxFiles });\n handleFileUploadFailure(file, failureMessage);\n continue;\n }\n\n const existingFile = uploadedFiles.find((f) => f.filename === file.name);\n if (existingFile) {\n removeFileFromList(existingFile);\n }\n\n formData.append(fileInputName, file);\n const pendingFile = {\n id: generateFileId(file),\n filename: file.name,\n status: Status.PENDING,\n };\n\n addFileToList(pendingFile);\n\n onUploadFile(formData)\n .then(({ id, url, error }: UploadResponse) => {\n modifyFileInList(pendingFile, { id, url, error, status: Status.SUCCEEDED });\n })\n .catch((error) => {\n modifyFileInList(pendingFile, { error: error as UploadError, status: Status.FAILED });\n });\n\n if (!multiple) {\n break;\n }\n }\n }\n };\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n useEffect(() => {\n if (onFilesChange && mounted) {\n onFilesChange([...uploadedFiles]);\n }\n }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const [nextFocusable, setNextFocusable] = useState<HTMLDivElement | UploadItemRef | null>(\n uploadInputRef.current,\n );\n\n const handleFocus = (fileId: string | number) => {\n fileRefs = fileRefs.filter((ref) => {\n return ref && ref.id !== markedFileForDelete?.id;\n });\n\n const filesCount = fileRefs.length;\n let next: HTMLDivElement | UploadItemRef | null = uploadInputRef.current;\n\n if (filesCount > 1) {\n const currentFileIndex = fileRefs.findIndex((file) => file?.id === fileId);\n const currentFileId = fileRefs?.[currentFileIndex]?.id;\n const lastFileId = fileRefs?.[filesCount - 1]?.id;\n\n // if last file, select a previous one\n if (currentFileId === lastFileId) {\n next = fileRefs[filesCount - 2];\n } else {\n next = fileRefs[currentFileIndex + 1];\n }\n }\n setNextFocusable(next);\n };\n\n const handleRefocus = () => {\n if (nextFocusable && 'focus' in nextFocusable && typeof nextFocusable.focus === 'function') {\n setTimeout(() => {\n nextFocusable.focus();\n }, 0);\n }\n };\n\n return (\n <>\n <div\n role=\"group\"\n className={clsx('np-upload-input', className, { disabled })}\n {...inputAttributes}\n >\n <div\n className=\"np-upload-input__section\"\n aria-live=\"polite\"\n aria-relevant=\"all\"\n role=\"region\"\n >\n {uploadedFiles.map((file, index) => (\n <UploadItem\n key={file.id}\n ref={(el: UploadItemRef | null) => {\n if (\n el &&\n el.id !== markedFileForDelete?.id &&\n !fileRefs.some((ref) => ref && ref.id === el.id) &&\n el.status !== 'processing'\n ) {\n fileRefs.push(el);\n }\n }}\n file={file}\n singleFileUpload={!multiple}\n canDelete={\n (!!onDeleteFile || file.status === Status.FAILED) &&\n (!file.status || !PROGRESS_STATUSES.has(file.status))\n }\n onDelete={\n file.status === Status.FAILED\n ? async () => {\n await removeFile(file);\n handleRefocus();\n }\n : () => setMarkedFileForDelete(file)\n }\n onDownload={onDownload}\n onFocus={() => handleFocus(file.id)}\n />\n ))}\n </div>\n {(multiple || (!multiple && !uploadedFiles.length)) && (\n <div className=\"np-upload-input__section np-upload-input__section--uploader\">\n <UploadButton\n ref={uploadInputRef}\n id={id}\n uploadButtonTitle={uploadButtonTitle}\n disabled={areMaximumFilesUploadedAlready() || disabled}\n multiple={multiple}\n fileTypes={fileTypes}\n sizeLimit={sizeLimit}\n description={description}\n maxFiles={maxFiles}\n withEntries={Boolean(uploadedFiles.length)}\n onChange={addFiles}\n />\n </div>\n )}\n </div>\n <Modal\n title={\n deleteConfirm?.title !== undefined\n ? deleteConfirm.title\n : formatMessage(MESSAGES.deleteModalTitle)\n }\n body={\n deleteConfirm?.body !== undefined\n ? deleteConfirm.body\n : formatMessage(MESSAGES.deleteModalBody)\n }\n open={!!markedFileForDelete}\n footer={\n <>\n <Button\n block\n onClick={() => {\n setMarkedFileForDelete(null);\n }}\n >\n {deleteConfirm?.cancelText || formatMessage(MESSAGES.deleteModalCancelButtonText)}\n </Button>\n <Button\n block\n priority={Priority.SECONDARY}\n type={ControlType.NEGATIVE}\n tabIndex={markedFileForDelete ? 0 : -1}\n onClick={() => {\n if (markedFileForDelete) {\n void removeFile(markedFileForDelete);\n }\n setMarkedFileForDelete(null);\n }}\n >\n {deleteConfirm?.confirmText || formatMessage(MESSAGES.deleteModalConfirmButtonText)}\n </Button>\n </>\n }\n onUnmount={handleRefocus}\n onClose={() => {\n setMarkedFileForDelete(null);\n }}\n />\n </>\n );\n};\n\nexport default UploadInput;\n"],"names":["generateFileId","file","name","size","uploadTimeStamp","Date","getTime","UploadInput","files","fileInputName","className","deleteConfirm","disabled","multiple","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","description","onUploadFile","onDeleteFile","onValidationError","onFilesChange","onDownload","maxFiles","maxFilesErrorMessage","id","sizeLimitErrorMessage","uploadButtonTitle","inputAttributes","useInputAttributes","nonLabelable","markedFileForDelete","setMarkedFileForDelete","useState","mounted","setMounted","formatMessage","useIntl","uploadInputRef","useRef","fileRefs","PROGRESS_STATUSES","Set","Status","PENDING","PROCESSING","uploadedFiles","setUploadedFiles","length","uploadedFilesListReference","updateFileList","updateFn","current","addFileToList","recentUploadedFile","list","removeFileFromList","filter","fileInList","ref","modifyFileInList","updates","map","removeFile","status","item","FAILED","Promise","resolve","error","undefined","then","catch","handleFileUploadFailure","failureMessage","failedUpload","filename","getNumberOfFilesUploaded","uploadInitiatedStatus","SUCCEEDED","validFiles","has","areMaximumFilesUploadedAlready","numberOfValidFiles","addFiles","selectedFiles","i","formData","FormData","allowedFileTypes","join","isTypeValid","MESSAGES","fileTypeNotSupported","isSizeValid","fileIsTooLarge","maximumFilesAlreadyUploaded","maxFilesAllowed","existingFile","find","f","append","pendingFile","url","useEffect","nextFocusable","setNextFocusable","handleFocus","fileId","filesCount","next","currentFileIndex","findIndex","currentFileId","lastFileId","handleRefocus","focus","setTimeout","_jsxs","_Fragment","children","role","clsx","_jsx","index","UploadItem","el","some","push","singleFileUpload","canDelete","onDelete","onFocus","UploadButton","withEntries","Boolean","onChange","Modal","title","deleteModalTitle","body","deleteModalBody","open","footer","Button","block","onClick","cancelText","deleteModalCancelButtonText","priority","Priority","SECONDARY","type","ControlType","NEGATIVE","tabIndex","confirmText","deleteModalConfirmButtonText","onUnmount","onClose"],"mappings":"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"}
|