@transferwise/components 46.86.2 → 46.86.3

package/build/types/uploadInput/uploadButton/getAllowedFileTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getAllowedFileTypes.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,QAAA,MAAM,mBAAmB,cAAe,SAAS,QAAQ,EAAE,GAAG,SAAS,MAAM,EAAE,KAAG,MAAM,EAOrF,CAAC;AAEJ,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"getAllowedFileTypes.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAqBxC,QAAA,MAAM,mBAAmB,cAAe,SAAS,QAAQ,EAAE,GAAG,SAAS,MAAM,EAAE,KAAG,MAAM,EAcpF,CAAC;AAEL,eAAe,mBAAmB,CAAC"}

package/build/uploadInput/uploadButton/getAllowedFileTypes.js

@@ -1,8 +1,28 @@
 'use strict';
 
-const getAllowedFileTypes = fileTypes => fileTypes.map(fileTypeDefinition => fileTypeDefinition.split(',').filter(extension => !extension.includes('/')) // Filter out mime types
-.map(extension => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions
-.join(', '));
+const parseFileType = fileType => {
+  if (fileType?.includes('.')) {
+    return fileType.replace('.', '').toUpperCase();
+  }
+  const mimeType = fileType?.split('/');
+  if (mimeType?.length > 1) {
+    let parsedType = mimeType[1];
+    if (parsedType.toLocaleLowerCase() === 'jpeg') {
+      parsedType = 'jpg, '.concat(parsedType).toUpperCase();
+    }
+    return parsedType.toUpperCase();
+  }
+  return fileType;
+};
+const getAllowedFileTypes = fileTypes => fileTypes.map(fileType => {
+  const splittedFileTypes = fileType?.split(',');
+  if (splittedFileTypes?.length > 1) {
+    // If `fileType` contains `format` and `mime` types, remove mime types, proceed only with format types
+    return splittedFileTypes.filter(splittedFileType => !splittedFileType?.includes('/')).map(splittedFileType => parseFileType(splittedFileType)).join(', ');
+  }
+  // If `fileType` contains only `format` or `mime` type, parse the type
+  return parseFileType(fileType);
+});
 
 module.exports = getAllowedFileTypes;
 //# sourceMappingURL=getAllowedFileTypes.js.map

package/build/uploadInput/uploadButton/getAllowedFileTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"getAllowedFileTypes.js","sources":["../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"sourcesContent":["import { FileType } from '../../common';\n\nconst getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>\n  fileTypes.map((fileTypeDefinition: string) =>\n    fileTypeDefinition\n      .split(',')\n      .filter((extension) => !extension.includes('/')) // Filter out mime types\n      .map((extension) => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions\n      .join(', '),\n  );\n\nexport default getAllowedFileTypes;\n"],"names":["getAllowedFileTypes","fileTypes","map","fileTypeDefinition","split","filter","extension","includes","replace","toUpperCase","join"],"mappings":";;AAEA,MAAMA,mBAAmB,GAAIC,SAAkD,IAC7EA,SAAS,CAACC,GAAG,CAAEC,kBAA0B,IACvCA,kBAAkB,CACfC,KAAK,CAAC,GAAG,CAAC,CACVC,MAAM,CAAEC,SAAS,IAAK,CAACA,SAAS,CAACC,QAAQ,CAAC,GAAG,CAAC,CAAC;AAAC,CAChDL,GAAG,CAAEI,SAAS,IAAKA,SAAS,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAACC,WAAW,EAAE,CAAC;AAAC,CAC7DC,IAAI,CAAC,IAAI,CAAC;;;;"}
+{"version":3,"file":"getAllowedFileTypes.js","sources":["../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"sourcesContent":["import { FileType } from '../../common';\n\nconst parseFileType = (fileType: string): string => {\n  if (fileType?.includes('.')) {\n    return fileType.replace('.', '').toUpperCase();\n  }\n\n  const mimeType = fileType?.split('/');\n  if (mimeType?.length > 1) {\n    let parsedType = mimeType[1];\n\n    if (parsedType.toLocaleLowerCase() === 'jpeg') {\n      parsedType = 'jpg, '.concat(parsedType).toUpperCase();\n    }\n\n    return parsedType.toUpperCase();\n  }\n\n  return fileType;\n};\n\nconst getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>\n  fileTypes.map((fileType: string) => {\n    const splittedFileTypes = fileType?.split(',');\n\n    if (splittedFileTypes?.length > 1) {\n      // If `fileType` contains `format` and `mime` types, remove mime types, proceed only with format types\n      return splittedFileTypes\n        .filter((splittedFileType: string) => !splittedFileType?.includes('/'))\n        .map((splittedFileType: string) => parseFileType(splittedFileType))\n        .join(', ');\n    }\n\n    // If `fileType` contains only `format` or `mime` type, parse the type\n    return parseFileType(fileType);\n  });\n\nexport default getAllowedFileTypes;\n"],"names":["parseFileType","fileType","includes","replace","toUpperCase","mimeType","split","length","parsedType","toLocaleLowerCase","concat","getAllowedFileTypes","fileTypes","map","splittedFileTypes","filter","splittedFileType","join"],"mappings":";;AAEA,MAAMA,aAAa,GAAIC,QAAgB,IAAY;AACjD,EAAA,IAAIA,QAAQ,EAAEC,QAAQ,CAAC,GAAG,CAAC,EAAE;IAC3B,OAAOD,QAAQ,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAACC,WAAW,EAAE,CAAA;AAChD,GAAA;AAEA,EAAA,MAAMC,QAAQ,GAAGJ,QAAQ,EAAEK,KAAK,CAAC,GAAG,CAAC,CAAA;AACrC,EAAA,IAAID,QAAQ,EAAEE,MAAM,GAAG,CAAC,EAAE;AACxB,IAAA,IAAIC,UAAU,GAAGH,QAAQ,CAAC,CAAC,CAAC,CAAA;AAE5B,IAAA,IAAIG,UAAU,CAACC,iBAAiB,EAAE,KAAK,MAAM,EAAE;MAC7CD,UAAU,GAAG,OAAO,CAACE,MAAM,CAACF,UAAU,CAAC,CAACJ,WAAW,EAAE,CAAA;AACvD,KAAA;AAEA,IAAA,OAAOI,UAAU,CAACJ,WAAW,EAAE,CAAA;AACjC,GAAA;AAEA,EAAA,OAAOH,QAAQ,CAAA;AACjB,CAAC,CAAA;AAEKU,MAAAA,mBAAmB,GAAIC,SAAkD,IAC7EA,SAAS,CAACC,GAAG,CAAEZ,QAAgB,IAAI;AACjC,EAAA,MAAMa,iBAAiB,GAAGb,QAAQ,EAAEK,KAAK,CAAC,GAAG,CAAC,CAAA;AAE9C,EAAA,IAAIQ,iBAAiB,EAAEP,MAAM,GAAG,CAAC,EAAE;AACjC;AACA,IAAA,OAAOO,iBAAiB,CACrBC,MAAM,CAAEC,gBAAwB,IAAK,CAACA,gBAAgB,EAAEd,QAAQ,CAAC,GAAG,CAAC,CAAC,CACtEW,GAAG,CAAEG,gBAAwB,IAAKhB,aAAa,CAACgB,gBAAgB,CAAC,CAAC,CAClEC,IAAI,CAAC,IAAI,CAAC,CAAA;AACf,GAAA;AAEA;EACA,OAAOjB,aAAa,CAACC,QAAQ,CAAC,CAAA;AAChC,CAAC;;;;"}

package/build/uploadInput/uploadButton/getAllowedFileTypes.mjs

@@ -1,6 +1,26 @@
-const getAllowedFileTypes = fileTypes => fileTypes.map(fileTypeDefinition => fileTypeDefinition.split(',').filter(extension => !extension.includes('/')) // Filter out mime types
-.map(extension => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions
-.join(', '));
+const parseFileType = fileType => {
+  if (fileType?.includes('.')) {
+    return fileType.replace('.', '').toUpperCase();
+  }
+  const mimeType = fileType?.split('/');
+  if (mimeType?.length > 1) {
+    let parsedType = mimeType[1];
+    if (parsedType.toLocaleLowerCase() === 'jpeg') {
+      parsedType = 'jpg, '.concat(parsedType).toUpperCase();
+    }
+    return parsedType.toUpperCase();
+  }
+  return fileType;
+};
+const getAllowedFileTypes = fileTypes => fileTypes.map(fileType => {
+  const splittedFileTypes = fileType?.split(',');
+  if (splittedFileTypes?.length > 1) {
+    // If `fileType` contains `format` and `mime` types, remove mime types, proceed only with format types
+    return splittedFileTypes.filter(splittedFileType => !splittedFileType?.includes('/')).map(splittedFileType => parseFileType(splittedFileType)).join(', ');
+  }
+  // If `fileType` contains only `format` or `mime` type, parse the type
+  return parseFileType(fileType);
+});
 
 export { getAllowedFileTypes as default };
 //# sourceMappingURL=getAllowedFileTypes.mjs.map

package/build/uploadInput/uploadButton/getAllowedFileTypes.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"getAllowedFileTypes.mjs","sources":["../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"sourcesContent":["import { FileType } from '../../common';\n\nconst getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>\n  fileTypes.map((fileTypeDefinition: string) =>\n    fileTypeDefinition\n      .split(',')\n      .filter((extension) => !extension.includes('/')) // Filter out mime types\n      .map((extension) => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions\n      .join(', '),\n  );\n\nexport default getAllowedFileTypes;\n"],"names":["getAllowedFileTypes","fileTypes","map","fileTypeDefinition","split","filter","extension","includes","replace","toUpperCase","join"],"mappings":"AAEA,MAAMA,mBAAmB,GAAIC,SAAkD,IAC7EA,SAAS,CAACC,GAAG,CAAEC,kBAA0B,IACvCA,kBAAkB,CACfC,KAAK,CAAC,GAAG,CAAC,CACVC,MAAM,CAAEC,SAAS,IAAK,CAACA,SAAS,CAACC,QAAQ,CAAC,GAAG,CAAC,CAAC;AAAC,CAChDL,GAAG,CAAEI,SAAS,IAAKA,SAAS,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAACC,WAAW,EAAE,CAAC;AAAC,CAC7DC,IAAI,CAAC,IAAI,CAAC;;;;"}
+{"version":3,"file":"getAllowedFileTypes.mjs","sources":["../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"sourcesContent":["import { FileType } from '../../common';\n\nconst parseFileType = (fileType: string): string => {\n  if (fileType?.includes('.')) {\n    return fileType.replace('.', '').toUpperCase();\n  }\n\n  const mimeType = fileType?.split('/');\n  if (mimeType?.length > 1) {\n    let parsedType = mimeType[1];\n\n    if (parsedType.toLocaleLowerCase() === 'jpeg') {\n      parsedType = 'jpg, '.concat(parsedType).toUpperCase();\n    }\n\n    return parsedType.toUpperCase();\n  }\n\n  return fileType;\n};\n\nconst getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>\n  fileTypes.map((fileType: string) => {\n    const splittedFileTypes = fileType?.split(',');\n\n    if (splittedFileTypes?.length > 1) {\n      // If `fileType` contains `format` and `mime` types, remove mime types, proceed only with format types\n      return splittedFileTypes\n        .filter((splittedFileType: string) => !splittedFileType?.includes('/'))\n        .map((splittedFileType: string) => parseFileType(splittedFileType))\n        .join(', ');\n    }\n\n    // If `fileType` contains only `format` or `mime` type, parse the type\n    return parseFileType(fileType);\n  });\n\nexport default getAllowedFileTypes;\n"],"names":["parseFileType","fileType","includes","replace","toUpperCase","mimeType","split","length","parsedType","toLocaleLowerCase","concat","getAllowedFileTypes","fileTypes","map","splittedFileTypes","filter","splittedFileType","join"],"mappings":"AAEA,MAAMA,aAAa,GAAIC,QAAgB,IAAY;AACjD,EAAA,IAAIA,QAAQ,EAAEC,QAAQ,CAAC,GAAG,CAAC,EAAE;IAC3B,OAAOD,QAAQ,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAACC,WAAW,EAAE,CAAA;AAChD,GAAA;AAEA,EAAA,MAAMC,QAAQ,GAAGJ,QAAQ,EAAEK,KAAK,CAAC,GAAG,CAAC,CAAA;AACrC,EAAA,IAAID,QAAQ,EAAEE,MAAM,GAAG,CAAC,EAAE;AACxB,IAAA,IAAIC,UAAU,GAAGH,QAAQ,CAAC,CAAC,CAAC,CAAA;AAE5B,IAAA,IAAIG,UAAU,CAACC,iBAAiB,EAAE,KAAK,MAAM,EAAE;MAC7CD,UAAU,GAAG,OAAO,CAACE,MAAM,CAACF,UAAU,CAAC,CAACJ,WAAW,EAAE,CAAA;AACvD,KAAA;AAEA,IAAA,OAAOI,UAAU,CAACJ,WAAW,EAAE,CAAA;AACjC,GAAA;AAEA,EAAA,OAAOH,QAAQ,CAAA;AACjB,CAAC,CAAA;AAEKU,MAAAA,mBAAmB,GAAIC,SAAkD,IAC7EA,SAAS,CAACC,GAAG,CAAEZ,QAAgB,IAAI;AACjC,EAAA,MAAMa,iBAAiB,GAAGb,QAAQ,EAAEK,KAAK,CAAC,GAAG,CAAC,CAAA;AAE9C,EAAA,IAAIQ,iBAAiB,EAAEP,MAAM,GAAG,CAAC,EAAE;AACjC;AACA,IAAA,OAAOO,iBAAiB,CACrBC,MAAM,CAAEC,gBAAwB,IAAK,CAACA,gBAAgB,EAAEd,QAAQ,CAAC,GAAG,CAAC,CAAC,CACtEW,GAAG,CAAEG,gBAAwB,IAAKhB,aAAa,CAACgB,gBAAgB,CAAC,CAAC,CAClEC,IAAI,CAAC,IAAI,CAAC,CAAA;AACf,GAAA;AAEA;EACA,OAAOjB,aAAa,CAACC,QAAQ,CAAC,CAAA;AAChC,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.86.2",
+  "version": "46.86.3",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,8 +92,8 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@wise/components-theming": "1.6.1",
-    "@transferwise/neptune-css": "14.20.1"
+    "@transferwise/neptune-css": "14.20.1",
+    "@wise/components-theming": "1.6.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",

package/src/uploadInput/UploadInput.tests.story.tsx

@@ -4,7 +4,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Status } from '../common';
 import UploadInput, { UploadInputProps } from './UploadInput';
 import { UploadedFile, UploadResponse } from './types';
-import { userEvent, within } from '@storybook/test';
+import { userEvent } from '@storybook/test';
 
 const meta: Meta<typeof UploadInput> = {
   title: 'Forms/UploadInput/Tests',
@@ -65,8 +65,8 @@ const createDelayedPromise = async ({
   });
 
 const props = {
-  onUploadFile: async (formData: FormData) => createDelayedPromise(),
-  onDeleteFile: async (id: string | number) => createDelayedPromise(),
+  onUploadFile: async () => createDelayedPromise(),
+  onDeleteFile: async () => createDelayedPromise(),
 };
 
 export const UploadInputWithDescriptionFromProps: Story = {
@@ -268,7 +268,7 @@ export const DeletingTop: Story = {
     files: [files[0], files[1], files[2]],
     multiple: true,
   },
-  play: async ({ canvasElement }) => {
+  play: async () => {
     await userEvent.tab();
     await triggerModalAndConfirm();
     await triggerModalAndConfirm({ isLink: false });
@@ -282,7 +282,7 @@ export const DeletingBottom: Story = {
     files: [files[0], files[1], files[2]],
     multiple: true,
   },
-  play: async ({ canvasElement }) => {
+  play: async () => {
     await userEvent.tab();
     await userEvent.tab();
     await userEvent.tab();

package/src/uploadInput/uploadButton/getAllowedFileTypes.spec.ts

@@ -38,4 +38,16 @@ describe('getAllowedFileTypes', () => {
       expect(allowedFileTypes).toStrictEqual(['*']);
     });
   });
+
+  describe('using only mime types', () => {
+    const mimeTypes = ['application/json', 'image/jpeg'];
+
+    beforeAll(() => {
+      allowedFileTypes = getAllowedFileTypes(mimeTypes);
+    });
+
+    it('returns the original mime types', () => {
+      expect(allowedFileTypes).toStrictEqual(['JSON', 'JPG, JPEG']);
+    });
+  });
 });

package/src/uploadInput/uploadButton/getAllowedFileTypes.ts

@@ -1,12 +1,38 @@
 import { FileType } from '../../common';
 
+const parseFileType = (fileType: string): string => {
+  if (fileType?.includes('.')) {
+    return fileType.replace('.', '').toUpperCase();
+  }
+
+  const mimeType = fileType?.split('/');
+  if (mimeType?.length > 1) {
+    let parsedType = mimeType[1];
+
+    if (parsedType.toLocaleLowerCase() === 'jpeg') {
+      parsedType = 'jpg, '.concat(parsedType).toUpperCase();
+    }
+
+    return parsedType.toUpperCase();
+  }
+
+  return fileType;
+};
+
 const getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>
-  fileTypes.map((fileTypeDefinition: string) =>
-    fileTypeDefinition
-      .split(',')
-      .filter((extension) => !extension.includes('/')) // Filter out mime types
-      .map((extension) => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions
-      .join(', '),
-  );
+  fileTypes.map((fileType: string) => {
+    const splittedFileTypes = fileType?.split(',');
+
+    if (splittedFileTypes?.length > 1) {
+      // If `fileType` contains `format` and `mime` types, remove mime types, proceed only with format types
+      return splittedFileTypes
+        .filter((splittedFileType: string) => !splittedFileType?.includes('/'))
+        .map((splittedFileType: string) => parseFileType(splittedFileType))
+        .join(', ');
+    }
+
+    // If `fileType` contains only `format` or `mime` type, parse the type
+    return parseFileType(fileType);
+  });
 
 export default getAllowedFileTypes;