@sphereon/ui-components.ssi-react 0.4.1-unstable.63 → 0.4.1-unstable.64

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

@@ -8,7 +8,7 @@ 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, JsonFormsCustomControlKey } from '../../../../types';
+import { FileSelectionFieldType } from '../../../../types';
 const PassportPhotoControl = (props) => {
     const { data, handleChange, path } = props;
     const [image, setImage] = useState(data && { file: base64UriToFile(data.base64Uri, data.fileName, data.mimeType), base64Uri: data.base64Uri });
@@ -30,5 +30,5 @@ const PassportPhotoControl = (props) => {
     };
     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.base64Uri, alt: Localization.translate('passport_photo_alt') }) : _jsx(PersonPlaceholder, {}) })] }), image && _jsx(FileSelection, { file: image.file, fileType: FileSelectionFieldType.IMAGE, onRemove: onRemoveImage })] }));
 };
-export const passportPhotoControlTester = rankWith(3, and(isObjectControl, optionIs('type', JsonFormsCustomControlKey.PASSPORT_PHOTO)));
+export const passportPhotoControlTester = rankWith(3, and(isObjectControl, optionIs('type', 'passportPhoto')));
 export default withJsonFormsControlProps(PassportPhotoControl);

package/dist/components/views/FormView/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { JsonForms } from '@jsonforms/react';
 import { materialCells } from '@jsonforms/material-renderers';
 import { jsonFormsMaterialRenderers } from '../../../renders/jsonFormsRenders';
-import Ajv from 'ajv';
 import { formatDateToISO } from '../../../helpers';
 const initializeDefaultValues = (schema, currentData = {}) => {
     const result = { ...currentData };
@@ -38,13 +38,21 @@ const initializeDefaultValues = (schema, currentData = {}) => {
     return result;
 };
 const FormView = (props) => {
-    const { data, schema, uiSchema, validationMode = 'ValidateAndShow', renderers = jsonFormsMaterialRenderers, cells = materialCells, style, middleware, ajv = new Ajv({
-        useDefaults: true,
-        allErrors: true
-    }), onFormStateChange, readonly = false, config, } = props;
+    const { data, schema, uiSchema, validationMode = 'ValidateAndShow', renderers = jsonFormsMaterialRenderers, cells = materialCells, style, middleware, ajv, onFormStateChange, readonly = false, config, } = props;
+    const [formData, setFormData] = useState(data ?? {});
+    const [initialized, setInitialized] = useState(false);
+    useEffect(() => {
+        const initializedData = initializeDefaultValues(schema, formData);
+        setFormData(initializedData);
+        setInitialized(true);
+    }, [schema]);
     const onFormStateChanged = (state) => {
+        if (!initialized) {
+            return;
+        }
+        setFormData(state.data);
         void onFormStateChange?.(state);
     };
-    return (_jsx("div", { style: style, children: _jsx(JsonForms, { schema: schema, uischema: uiSchema, data: data, renderers: renderers, onChange: onFormStateChanged, ajv: ajv }) }));
+    return (_jsx("div", { style: style, children: _jsx(JsonForms, { schema: schema, uischema: uiSchema, data: formData, renderers: renderers, cells: cells, onChange: onFormStateChanged, validationMode: validationMode, middleware: middleware, ajv: ajv, readonly: readonly, config: config }) }));
 };
 export default FormView;

package/dist/index.d.ts

@@ -37,7 +37,6 @@ import ComboBox from './components/fields/ComboBox';
 import DragAndDropBox from './components/fields/DragAndDropBox';
 import PersonPlaceholder from './components/assets/placeholders/PersonPlaceholder';
 import PassportPhotoControl, { passportPhotoControlTester } from './components/fields/JSONForms/PassportPhotoControl';
-import CustomArrayControl, { customArrayControlTester } from './components/fields/JSONForms/CustomArrayControl';
 import CredentialIssuanceWizardView from './components/views/CredentialIssuanceWizardView';
 import PaginationControls from './components/views/SSITableView/PaginationControls';
 import PaginationControlsProps from './components/views/SSITableView/PaginationControls';
@@ -68,4 +67,4 @@ 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, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CustomArrayControl, customArrayControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem, CapitolIcon, ChevronIcon, ManIcon, LaptopIcon, StoreIcon, RoleIconView, RoleViewItem, Listbox, ActivityIcon, ContactIcon, BellIcon, CredentialIcon };
+export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem, CapitolIcon, ChevronIcon, ManIcon, LaptopIcon, StoreIcon, RoleIconView, RoleViewItem, Listbox, ActivityIcon, ContactIcon, BellIcon, CredentialIcon };

package/dist/index.js

@@ -37,7 +37,6 @@ import ComboBox from './components/fields/ComboBox';
 import DragAndDropBox from './components/fields/DragAndDropBox';
 import PersonPlaceholder from './components/assets/placeholders/PersonPlaceholder';
 import PassportPhotoControl, { passportPhotoControlTester } from './components/fields/JSONForms/PassportPhotoControl';
-import CustomArrayControl, { customArrayControlTester } from './components/fields/JSONForms/CustomArrayControl';
 import CredentialIssuanceWizardView from './components/views/CredentialIssuanceWizardView';
 import PaginationControls from './components/views/SSITableView/PaginationControls';
 import PaginationControlsProps from './components/views/SSITableView/PaginationControls';
@@ -67,4 +66,4 @@ 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, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CustomArrayControl, customArrayControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem, CapitolIcon, ChevronIcon, ManIcon, LaptopIcon, StoreIcon, RoleIconView, RoleViewItem, Listbox, ActivityIcon, ContactIcon, BellIcon, CredentialIcon };
+export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem, CapitolIcon, ChevronIcon, ManIcon, LaptopIcon, StoreIcon, RoleIconView, RoleViewItem, Listbox, ActivityIcon, ContactIcon, BellIcon, CredentialIcon };

package/dist/renders/jsonFormsRenders.js

@@ -1,8 +1,6 @@
 import { materialRenderers } from '@jsonforms/material-renderers';
 import PassportPhotoControl, { passportPhotoControlTester } from '../components/fields/JSONForms/PassportPhotoControl';
-import CustomArrayControl, { customArrayControlTester } from '../components/fields/JSONForms/CustomArrayControl';
 export const jsonFormsMaterialRenderers = [
     ...materialRenderers,
     { tester: passportPhotoControlTester, renderer: PassportPhotoControl },
-    { tester: customArrayControlTester, renderer: CustomArrayControl },
 ];

package/dist/styles/css/tailwind.css

@@ -204,9 +204,6 @@
   .grid {
     display: grid;
   }
-  .hidden {
-    display: none;
-  }
   .inline-block {
     display: inline-block;
   }

package/dist/types/index.d.ts

@@ -5,4 +5,3 @@ export * from './indicator';
 export * from './field';
 export * from './view';
 export * from './icon';
-export * from './jsonForms';

package/dist/types/index.js

@@ -5,4 +5,3 @@ export * from './indicator';
 export * from './field';
 export * from './view';
 export * from './icon';
-export * from './jsonForms';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.4.1-unstable.63+6597aef",
+  "version": "0.4.1-unstable.64+05a010f",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -50,7 +50,7 @@
     "@mui/x-date-pickers": "^6.19.5",
     "@sphereon/ssi-sdk.data-store": "0.34.1-feature.SSISDK.45.94",
     "@sphereon/ssi-types": "0.34.1-feature.SSISDK.45.94",
-    "@sphereon/ui-components.core": "0.4.1-unstable.63+6597aef",
+    "@sphereon/ui-components.core": "0.4.1-unstable.64+05a010f",
     "@tanstack/react-table": "^8.9.3",
     "react-dom": "npm:react-dom@18.3.1",
     "react-json-tree": "^0.18.0",
@@ -70,5 +70,5 @@
   "peerDependencies": {
     "react": ">= 18"
   },
-  "gitHead": "6597aef9236ea7eda4b6e702673666e6240b1397"
+  "gitHead": "05a010f6e5b4679bd61ad4164c37181fc1fee77b"
 }

package/dist/components/fields/JSONForms/CustomArrayControl/index.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { RankedTester } from '@jsonforms/core';
-export declare const customArrayControlTester: RankedTester;
-declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
-export default _default;

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

@@ -1,59 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { JsonFormsDispatch, withJsonFormsControlProps } from '@jsonforms/react';
-import { and, isArrayObjectControl, optionIs, rankWith } from '@jsonforms/core';
-import { ButtonIcon } from '@sphereon/ui-components.core';
-import IconButton from '../../../buttons/IconButton';
-import PrimaryButton from '../../../buttons/PrimaryButton';
-import { JsonFormsCustomControlKey } from '../../../../types';
-const CustomArrayControl = (props) => {
-    const { data = [], handleChange, path, schema, uischema, label } = props;
-    const elements = uischema.options?.detail?.elements || [];
-    const itemSchema = schema.items && !Array.isArray(schema.items) ? schema.items : {};
-    const handleAdd = async () => {
-        handleChange(path, [...data, {}]);
-    };
-    const handleRemove = async (index) => {
-        const newData = data.filter((_, i) => i !== index);
-        handleChange(path, newData);
-    };
-    const getItemElements = () => {
-        return data.map((item, index) => _jsx("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: _jsx("div", { style: { display: 'flex', flexDirection: 'row', borderRadius: 8, overflow: 'hidden', width: '100%' }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 24, width: '100%' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 12 }, children: [_jsx("div", { style: { display: 'flex', flexDirection: 'row', gap: 24, padding: 24, border: '1px solid #C4C4C4', borderRadius: 8, flexGrow: 1, alignItems: 'center' }, children: getFieldElements(elements, `${path}.${index}`) }), _jsx(IconButton, { icon: ButtonIcon.DELETE, onClick: () => handleRemove(index) })] }), item?.type === 'object' &&
-                            _jsx("div", { style: { marginLeft: 24, display: 'flex', flexDirection: 'row' }, children: getChildFieldElements(elements, `${path}.${index}`) })] }) }) }, index));
-    };
-    const getFieldElements = (elements, path) => {
-        return elements
-            .filter(element => element?.options?.type !== JsonFormsCustomControlKey.ARRAY)
-            .map((element, i) => _jsx(JsonFormsDispatch, { uischema: element, schema: itemSchema, path: path }, i));
-    };
-    const getChildFieldElements = (elements, path) => {
-        return elements
-            .filter(element => element?.options?.type === JsonFormsCustomControlKey.ARRAY)
-            .map((element, i) => {
-            const childrenArraySchema = itemSchema.properties?.children;
-            const resolvedChildrenSchema = {
-                ...childrenArraySchema,
-                items: itemSchema
-            };
-            const childrenUiSchema = {
-                ...element,
-                type: "Control",
-                scope: "#",
-                options: {
-                    ...uischema.options,
-                    type: JsonFormsCustomControlKey.ARRAY,
-                    detail: {
-                        elements
-                    }
-                }
-            };
-            return (_jsx(JsonFormsDispatch, { uischema: childrenUiSchema, schema: resolvedChildrenSchema, path: path }, i));
-        });
-    };
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 28, width: '100%' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [_jsx("div", { style: { color: 'black', fontSize: 16, fontWeight: '400' }, children: label }), _jsx(PrimaryButton, { caption: uischema.options?.addLabel || '+', onClick: handleAdd, style: {
-                            marginLeft: 'auto',
-                            height: 33,
-                            width: 120
-                        } })] }), getItemElements()] }));
-};
-export const customArrayControlTester = rankWith(5, and(isArrayObjectControl, optionIs('type', JsonFormsCustomControlKey.ARRAY)));
-export default withJsonFormsControlProps(CustomArrayControl);

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

@@ -1,4 +0,0 @@
-export declare enum JsonFormsCustomControlKey {
-    ARRAY = "array",
-    PASSPORT_PHOTO = "passportPhoto"
-}

package/dist/types/jsonForms/index.js

@@ -1,5 +0,0 @@
-export var JsonFormsCustomControlKey;
-(function (JsonFormsCustomControlKey) {
-    JsonFormsCustomControlKey["ARRAY"] = "array";
-    JsonFormsCustomControlKey["PASSPORT_PHOTO"] = "passportPhoto";
-})(JsonFormsCustomControlKey || (JsonFormsCustomControlKey = {}));