@sphereon/ui-components.ssi-react 0.4.1-unstable.65 → 0.4.1-unstable.66

package/dist/components/buttons/SSISwitchItem/index.d.ts

@@ -0,0 +1,10 @@
+import { FC, ReactElement } from 'react';
+type Props = {
+    label: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    tooltip?: ReactElement | string;
+    disabled?: boolean;
+};
+declare const SSISwitchItem: FC<Props>;
+export default SSISwitchItem;

package/dist/components/buttons/SSISwitchItem/index.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Switch, Tooltip } from '@mui/material';
+const SSISwitchItem = (props) => {
+    const { label, checked, onChange, tooltip, disabled = false } = props;
+    const [showTooltip, setShowTooltip] = useState(false);
+    const handleChange = (event) => {
+        onChange(event.target.checked);
+    };
+    const containerStyle = {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: '16px',
+    };
+    const labelStyle = {
+        fontSize: '14px',
+        fontWeight: 400,
+        color: '#1A1A1A',
+        flex: 1,
+    };
+    const content = (_jsxs("div", { style: containerStyle, children: [_jsx("span", { style: labelStyle, children: label }), _jsx(Switch, { checked: checked, onChange: handleChange, disabled: disabled, color: "primary" })] }));
+    if (tooltip) {
+        return (_jsx(Tooltip, { title: tooltip, open: showTooltip, onOpen: () => setShowTooltip(true), onClose: () => setShowTooltip(false), arrow: true, children: _jsx("div", { onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: content }) }));
+    }
+    return content;
+};
+export default SSISwitchItem;

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,33 +1,58 @@
 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';
-const defaultAjv = new Ajv({ useDefaults: true });
-defaultAjv.addKeyword({
-    keyword: 'isoDateFormat',
-    modifying: true,
-    validate: function (schema, data, parentSchema, dataCxt) {
-        if (typeof data === 'string') {
-            const date = data === 'now' ? new Date() : new Date(data);
-            if (!isNaN(date.getTime()) && dataCxt?.parentData && dataCxt.parentDataProperty !== undefined) {
-                dataCxt.parentData[dataCxt.parentDataProperty] =
-                    schema === 'date-time'
-                        ? date.toISOString().slice(0, 19).replace('T', ' ')
-                        : schema === 'date'
-                            ? date.toISOString().slice(0, 10)
-                            : date.toISOString().slice(11, 19);
+import { formatDateToISO } from '../../../helpers';
+const initializeDefaultValues = (schema, currentData = {}) => {
+    const result = { ...currentData };
+    if (!schema.properties) {
+        return result;
+    }
+    Object.entries(schema.properties).forEach(([key, property]) => {
+        if (typeof property === 'object') {
+            if (property.const && (!(key in result) || !result[key])) {
+                result[key] = property.const;
+            }
+            if (property.default !== undefined && !(key in result)) {
+                if (property.format?.startsWith('date') || property.format?.startsWith('time')) {
+                    result[key] = formatDateToISO(property.default, property.format);
+                }
+                else if (typeof property.default === 'object') {
+                    result[key] = Array.isArray(property.default)
+                        ? [...property.default]
+                        : { ...property.default };
+                }
+                else {
+                    result[key] = property.default;
+                }
+            }
+            if (property.properties) {
+                if (!result[key]) {
+                    result[key] = {};
+                }
+                result[key] = initializeDefaultValues(property, result[key]);
             }
-            return true;
         }
-        return false;
-    }
-});
+    });
+    return result;
+};
 const FormView = (props) => {
-    const { data, schema, uiSchema, validationMode = 'ValidateAndShow', renderers = jsonFormsMaterialRenderers, cells = materialCells, style, middleware, ajv = defaultAjv, 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';
@@ -60,6 +59,7 @@ import ActivityIcon from './components/assets/icons/ActivityIcon';
 import ContactIcon from './components/assets/icons/ContactIcon';
 import BellIcon from './components/assets/icons/BellIcon';
 import CredentialIcon from './components/assets/icons/CredentialIcon';
+import SSISwitchItem from './components/buttons/SSISwitchItem';
 import { Row } from '@tanstack/react-table';
 import './styles/css/tailwind.css';
 import './components/views/FormView/styles.css';
@@ -68,4 +68,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, SSISwitchItem };

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';
@@ -60,6 +59,7 @@ import ActivityIcon from './components/assets/icons/ActivityIcon';
 import ContactIcon from './components/assets/icons/ContactIcon';
 import BellIcon from './components/assets/icons/BellIcon';
 import CredentialIcon from './components/assets/icons/CredentialIcon';
+import SSISwitchItem from './components/buttons/SSISwitchItem';
 import './styles/css/tailwind.css';
 import './components/views/FormView/styles.css';
 import '@sphereon/ui-components.core/dist/styles/tokens.css';
@@ -67,4 +67,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, SSISwitchItem };

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.65+dcd820e",
+  "version": "0.4.1-unstable.66+7db9466",
   "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.65+dcd820e",
+    "@sphereon/ui-components.core": "0.4.1-unstable.66+7db9466",
     "@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": "dcd820eb985d5f34747dc784678d7d5739a87fe9"
+  "gitHead": "7db9466d614dee14766ed7f13793f885c770f694"
 }

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 = {}));