@sphereon/ui-components.ssi-react 0.1.3-unstable.144 → 0.1.3-unstable.145

package/dist/components/fields/ComboBox/index.js

@@ -9,7 +9,7 @@ const ComboBox = (props) => {
             isValidNewOption: () => true,
             onCreateOption: inlineOption.onCreate,
             createOptionPosition: 'last',
-            formatCreateLabel: (inputValue) => `${inlineOption.caption}`,
+            formatCreateLabel: () => `${inlineOption.caption}`,
         }
         : {};
     return (_jsx(CreatableSelect, { styles: {

package/dist/components/fields/FileSelection/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getFileSizeDisplay, Localization } from '@sphereon/ui-components.core';
 import ComboBox from '../ComboBox';
 import DocumentIcon from '../../assets/icons/DocumentIcon';
 import ImageIcon from '../../assets/icons/ImageIcon';
@@ -6,23 +7,9 @@ import CrossIcon from '../../assets/icons/CrossIcon';
 import { FileSelectionFieldContainerStyled as Container, FileSelectionFieldContentContainerStyled as ContentContainer, FileSelectionFieldRemoveContainerStyled as RemoveContainer, FileSelectionFieldRemoveButtonStyled as RemoveButton, FileSelectionFieldRemoveButtonCircleIconStyled as RemoveButtonCircleIcon, FileSelectionFieldIconContainerStyled as IconContainer, FileSelectionFieldFileDataContainerStyled as FileDataContainer, FileSelectionFieldFileNameCaptionStyled as FileNameCaption, FileSelectionFieldFileSizeCaptionStyled as FileSizeCaption, FileSelectionFieldPermissionSelectionContainerStyled as PermissionSelectionContainer } from '../../../styles';
 import { FileSelectionFieldType } from '../../../types';
 const filePermissions = [
-    { label: 'Public', value: 'public' },
-    { label: 'Private', value: 'private' },
+    { label: Localization.translate('file_permission_public_label'), value: 'public' },
+    { label: Localization.translate('file_permission_private_label'), value: 'private' },
 ];
-const getFileSizeDisplay = (bytes) => {
-    if (bytes < 1024) {
-        return `${bytes} B`;
-    }
-    else if (bytes <= 1024 * 1024) {
-        return `${(bytes / 1024).toFixed(1)} KB`;
-    }
-    else if (bytes <= 1024 * 1024 * 1024) {
-        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-    }
-    else {
-        return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
-    }
-};
 const FileSelection = (props) => {
     const { file, fileType = FileSelectionFieldType.FILE, permission, onPermissionChange, onRemove, style } = props;
     const onChange = async (selection) => {

package/dist/components/fields/JSONForms/PassportPhotoControl/index.js

@@ -2,24 +2,24 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { and, isObjectControl, optionIs, rankWith, } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { base64toFile, Localization } from '@sphereon/ui-components.core';
+import { Localization, parseBase64Uri } from '@sphereon/ui-components.core';
 import DragAndDropBox from '../../DragAndDropBox';
 import PersonPlaceholder from '../../../assets/placeholders/PersonPlaceholder';
 import FileSelection from '../../FileSelection';
+import { base64UriToFile } from '../../../../utils';
 import { PassportPhotoControlContainerStyled as Container, PassportPhotoControlDragAndDropBoxContainerStyled as DragAndDropBoxContainer, PassportPhotoControlPassportPhotoContainerStyled as PassportPhotoContainer, PassportPhotoControlPassportPhotoImageStyled as PassportPhotoImage } from '../../../../styles';
 import { FileSelectionFieldType } from '../../../../types';
 const PassportPhotoControl = (props) => {
     const { data, handleChange, path } = props;
-    const [image, setImage] = useState(data && { file: base64toFile(data.base64, data.fileName, data.mimeType), base64: data.base64 });
+    const [image, setImage] = useState(data && { file: base64UriToFile(data.base64Uri, data.fileName, data.mimeType), base64Uri: data.base64Uri });
     const onAddImage = async (file) => {
         const reader = new FileReader();
         reader.onload = () => {
             const result = reader.result;
             if (typeof result === 'string') {
-                const base64Parts = result.split(';base64,');
-                const mimeType = base64Parts[0].replace("data:", "");
-                setImage({ file, base64: result });
-                handleChange(path, { fileName: file.name, mimeType, base64: result });
+                const parsedBase64Uri = parseBase64Uri(result);
+                setImage({ file, base64Uri: result });
+                handleChange(path, { fileName: file.name, mimeType: parsedBase64Uri.mimeType, base64Uri: result });
             }
         };
         reader.readAsDataURL(file);
@@ -29,7 +29,7 @@ const PassportPhotoControl = (props) => {
         handleChange(path, undefined);
     };
     return (_jsxs(Container, { children: [_jsxs(DragAndDropBoxContainer, { children: [_jsx(DragAndDropBox, { caption: Localization.translate('drag_and_drop_upload_image_caption'), description: Localization.translate('credential_attach_image_description'), onChangeFile: onAddImage }), _jsx(PassportPhotoContainer, { children: image
-                            ? _jsx(PassportPhotoImage, { src: image.base64, alt: Localization.translate('passport_photo_alt') })
+                            ? _jsx(PassportPhotoImage, { src: image.base64Uri, alt: Localization.translate('passport_photo_alt') })
                             : _jsx(PersonPlaceholder, {}) })] }), image &&
                 _jsx(FileSelection, { file: image.file, fileType: FileSelectionFieldType.IMAGE, onRemove: onRemoveImage })] }));
 };

package/dist/index.d.ts

@@ -40,4 +40,5 @@ import { Row } from '@tanstack/react-table';
 export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
+export * from './utils';
 export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, };

package/dist/index.js

@@ -38,4 +38,5 @@ import PaginationControlsProps from './components/views/SSITableView/PaginationC
 export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
+export * from './utils';
 export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, };

package/dist/types/field/index.d.ts

@@ -12,10 +12,10 @@ export declare enum FileSelectionFieldType {
 }
 export type PassportPhoto = {
     file: File;
-    base64: string;
+    base64Uri: string;
 };
 export type PassportPhotoControlData = {
     fileName: string;
     mimeType: string;
-    base64: string;
+    base64Uri: string;
 };

package/dist/utils/FileUtils.d.ts

@@ -0,0 +1 @@
+export declare const base64UriToFile: (base64Uri: string, filename: string, mimeType: string) => File;

package/dist/utils/FileUtils.js

@@ -0,0 +1,7 @@
+import { fromString } from 'uint8arrays';
+export const base64UriToFile = (base64Uri, filename, mimeType) => {
+    const base64 = base64Uri.split(',')[1];
+    const uint8Array = fromString(base64, 'base64');
+    const blob = new Blob([uint8Array]);
+    return new File([blob], filename, { type: mimeType });
+};

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './FileUtils';

package/dist/utils/index.js

@@ -0,0 +1 @@
+export * from './FileUtils';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.1.3-unstable.144+18cddf4",
+  "version": "0.1.3-unstable.145+66bd1c4",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -40,12 +40,13 @@
     "@mui/styled-engine-sc": "^5.14.12",
     "@mui/system": "^5.15.12",
     "@mui/x-date-pickers": "^6.19.5",
-    "@sphereon/ui-components.core": "0.1.3-unstable.144+18cddf4",
+    "@sphereon/ui-components.core": "0.1.3-unstable.145+66bd1c4",
     "@tanstack/react-table": "^8.9.3",
     "react-loader-spinner": "^5.4.5",
     "react-select": "^5.8.0",
     "react-toastify": "^9.1.3",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.3",
+    "uint8arrays": "^3.1.1"
   },
   "devDependencies": {
     "@types/react": "~18.0.14",
@@ -57,5 +58,5 @@
   "peerDependencies": {
     "react": ">= 16.8.0"
   },
-  "gitHead": "18cddf4c2d9265f91657a7c00d98674340ca5260"
+  "gitHead": "66bd1c46e40b7a5930b8f02404d2924d36954110"
 }