@nolwenture/formik-jsonschema-form 1.0.6 → 1.0.8

package/dist/cjs/Form/Form.js

@@ -9,7 +9,7 @@ const fields_1 = require("./fields");
 const templates_1 = require("./templates");
 const Form = (props) => {
     const { isSubmitting } = (0, formik_1.useFormikContext)();
-    const { schema, uiSchema = {}, className, children, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, hideSubmit = false, } = props;
+    const { schema, uiSchema = {}, className, children, fields = {}, templates = {}, components = {}, formContext = {}, formOptions = {}, formLocalization = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, hideSubmit = false, } = props;
     const schemaDefinitions = schema.definitions;
     const uiSchemaDefinitions = uiSchema?.definitions;
     const registry = {
@@ -25,6 +25,8 @@ const Form = (props) => {
         definitions: schemaDefinitions,
         uiSchemaDefinitions,
         formContext,
+        formOptions,
+        formLocalization,
         useItemsAsAdditionalItems,
         hideUnmarkedAdditionalProperties,
     };

package/dist/cjs/Form/FormRegistry.js

@@ -13,6 +13,7 @@ exports.FormRegistry = react_1.default.createContext({
     uiSchemaDefinitions: {},
     formContext: {},
     formLocalization: {},
+    formOptions: {},
     useItemsAsAdditionalItems: false,
     hideUnmarkedAdditionalProperties: false,
 });

package/dist/cjs/Form/components/FieldInfo.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const styled_components_1 = require("styled-components");
 const polished_1 = require("polished");
+const FormRegistry_1 = require("../FormRegistry");
 exports.FieldInfoBoxElement = styled_components_1.styled.div `
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
@@ -119,15 +120,21 @@ exports.InlineFieldInfoWrapper = styled_components_1.styled.div `
   margin: ${(props) => `${props.theme.spacing.m} 0`};
   width: 100%;
 `;
-const FieldInfo = ({ label, content, position, display = "tooltip", className, }) => {
+const FieldInfo = ({ label, content, position, display: displayProp, className, }) => {
+    const { formOptions } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     const [isInlineVisible, setIsInlineVisible] = (0, react_1.useState)(false);
+    const config = {
+        display: "tooltip",
+        ...(formOptions?.components?.FieldInfo ?? {}),
+        ...(displayProp && { display: displayProp }),
+    };
     const handleToggle = (e) => {
         e.preventDefault();
-        if (display === "inline") {
+        if (config.display === "inline") {
             setIsInlineVisible((prev) => !prev);
         }
     };
-    if (display === "inline") {
+    if (config.display === "inline") {
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(exports.FieldInfoContainer, { href: "#", onClick: handleToggle, className: className, children: (0, jsx_runtime_1.jsx)(exports.FieldInfoLabel, { children: label ?? "i" }) }), isInlineVisible && ((0, jsx_runtime_1.jsx)(exports.InlineFieldInfoWrapper, { children: (0, jsx_runtime_1.jsx)(exports.InlineFieldInfoBoxInnerElement, { children: content }) }))] }));
     }
     else {

package/dist/cjs/Form/fields/FilesUploadField/FilesUploadField.js

@@ -11,7 +11,8 @@ const FormRegistry_1 = require("../../FormRegistry");
 const FilesUploadField = (props) => {
     const { templates, components: { FilesUploadFieldInput }, formLocalization, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
-    const { name, uiSchema } = props;
+    const { name, uiSchema, schema } = props;
+    const readOnly = schema.readOnly ?? false;
     const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const { setFieldValue, values } = (0, formik_1.useFormikContext)();
     const value = (0, react_1.useMemo)(() => (0, formik_1.getIn)(values, name) ?? [], [values, name]);
@@ -93,6 +94,6 @@ const FilesUploadField = (props) => {
         ...(formLocalization?.fields?.FilesUploadField ?? {}),
         ...(uiSchema["ui:localization"] ?? {}),
     };
-    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-object": name, children: (0, jsx_runtime_1.jsx)(FilesUploadFieldInput, { ...inputProps, acceptedFiletypes: inputProps?.acceptedFiletypes, deleteFileAriaLabel: localization.deleteFileAriaLabel, fileInfoText: localization.fileInfoText, handleFileUpload: handleFileUpload, handleRemoveFile: handleRemoveFile, hideFileTypeIcon: inputProps?.fileTypeIcon?.hidden, hideFileSize: inputProps?.fileSize?.hidden, hideRemoveButton: inputProps?.removeButton?.hidden, hideUploadIcon: inputProps?.uploadIcon?.hidden, infoText: localization.infoText, infoTextSingle: localization.infoTextSingle, allowMultipleFiles: inputProps?.allowMultipleFiles, name: name, orText: localization.orText, removeButton: localization.removeButton, renderFile: inputProps?.renderFile, setFieldValue: setFieldValue, uploadButtonText: localization.uploadButtonText, uploadedFiles: uploadedFiles, uploadProgress: uploadProgress, value: value }) }));
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-object": name, children: (0, jsx_runtime_1.jsx)(FilesUploadFieldInput, { ...inputProps, readOnly: readOnly, acceptedFiletypes: inputProps?.acceptedFiletypes, deleteFileAriaLabel: localization.deleteFileAriaLabel, fileInfoText: localization.fileInfoText, handleFileUpload: handleFileUpload, handleRemoveFile: handleRemoveFile, hideFileTypeIcon: inputProps?.fileTypeIcon?.hidden, hideFileSize: inputProps?.fileSize?.hidden, hideRemoveButton: inputProps?.removeButton?.hidden, hideUploadIcon: inputProps?.uploadIcon?.hidden, infoText: localization.infoText, infoTextSingle: localization.infoTextSingle, allowMultipleFiles: inputProps?.allowMultipleFiles, name: name, orText: localization.orText, removeButton: localization.removeButton, renderFile: inputProps?.renderFile, setFieldValue: setFieldValue, uploadButtonText: localization.uploadButtonText, uploadedFiles: uploadedFiles, uploadProgress: uploadProgress, value: value }) }));
 };
 exports.FilesUploadField = FilesUploadField;

package/dist/cjs/Form/fields/FilesUploadField/FilesUploadFieldInput.js

@@ -62,11 +62,13 @@ const getFileIcon = (mimeType) => {
     }
     return (0, jsx_runtime_1.jsx)(fa_1.FaFile, {});
 };
-const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }) => {
+const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, readOnly, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }) => {
     const { components: { Divider, DividerText, DragOverlay, FileInfoText, FileInfoTextMinimized, FileItemContainer, FileSize, FileTypeIcon, FileUploadButton, FileUploadFieldContainer, FileUploadText, HiddenFileInput, InfoText, ProgressBar, ProgressBarContainer, RemoveButton, RemoveButtonIcon, UploadedFileInfoContainer, UploadedFileItemContainer, UploadedFileName, UploadedFileWrapper, UploadIcon, UploadingFileName, }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     const [isDragging, setIsDragging] = (0, react_1.useState)(false);
     const dragCounter = (0, react_1.useRef)(0);
     const handleDragEnter = (e) => {
+        if (readOnly)
+            return;
         e.preventDefault();
         e.stopPropagation();
         dragCounter.current++;
@@ -75,6 +77,8 @@ const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFileAriaLab
         }
     };
     const handleDragLeave = (e) => {
+        if (readOnly)
+            return;
         e.preventDefault();
         e.stopPropagation();
         dragCounter.current--;
@@ -83,10 +87,14 @@ const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFileAriaLab
         }
     };
     const handleDragOver = (e) => {
+        if (readOnly)
+            return;
         e.preventDefault();
         e.stopPropagation();
     };
     const handleDrop = (e) => {
+        if (readOnly)
+            return;
         e.preventDefault();
         e.stopPropagation();
         setIsDragging(false);
@@ -143,10 +151,10 @@ const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFileAriaLab
             e.dataTransfer.clearData();
         }
     };
-    const defaultRenderFile = (file, progress, onDelete) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: progress === 100 ? ((0, jsx_runtime_1.jsxs)(UploadedFileItemContainer, { children: [(0, jsx_runtime_1.jsxs)(UploadedFileInfoContainer, { children: [!hideFileTypeIcon && ((0, jsx_runtime_1.jsx)(FileTypeIcon, { children: getFileIcon(file.mimeType ?? "") })), (0, jsx_runtime_1.jsxs)(UploadedFileName, { children: [file.name, !hideFileSize && ((0, jsx_runtime_1.jsx)(FileSize, { children: ` | ${file.size ? (file.size / (1024 * 1024)).toFixed(3) : "?"} MB` }))] })] }), !hideRemoveButton && file.id && ((0, jsx_runtime_1.jsx)(RemoveButton, { "aria-label": deleteFileAriaLabel ?? "Delete file", type: "button", onClick: () => onDelete(), ...removeButton?.props, children: removeButton?.content ?? (0, jsx_runtime_1.jsx)(RemoveButtonIcon, {}) }))] })) : ((0, jsx_runtime_1.jsxs)(FileItemContainer, { children: [(0, jsx_runtime_1.jsx)(UploadingFileName, { children: file.name }), (0, jsx_runtime_1.jsx)(ProgressBarContainer, { children: (0, jsx_runtime_1.jsx)(ProgressBar, { "$progress": progress }) })] })) }));
+    const defaultRenderFile = (file, progress, onDelete) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: progress === 100 ? ((0, jsx_runtime_1.jsxs)(UploadedFileItemContainer, { "$readOnly": readOnly, children: [(0, jsx_runtime_1.jsxs)(UploadedFileInfoContainer, { children: [!hideFileTypeIcon && ((0, jsx_runtime_1.jsx)(FileTypeIcon, { children: getFileIcon(file.mimeType ?? "") })), (0, jsx_runtime_1.jsxs)(UploadedFileName, { children: [file.name, !hideFileSize && ((0, jsx_runtime_1.jsx)(FileSize, { children: ` | ${file.size ? (file.size / (1024 * 1024)).toFixed(3) : "?"} MB` }))] })] }), !hideRemoveButton && !readOnly && file.id && ((0, jsx_runtime_1.jsx)(RemoveButton, { "aria-label": deleteFileAriaLabel ?? "Delete file", type: "button", onClick: () => onDelete(), ...removeButton?.props, children: removeButton?.content ?? (0, jsx_runtime_1.jsx)(RemoveButtonIcon, {}) }))] })) : ((0, jsx_runtime_1.jsxs)(FileItemContainer, { children: [(0, jsx_runtime_1.jsx)(UploadingFileName, { children: file.name }), (0, jsx_runtime_1.jsx)(ProgressBarContainer, { children: (0, jsx_runtime_1.jsx)(ProgressBar, { "$progress": progress }) })] })) }));
     const uploadedFile = renderFile ?? defaultRenderFile;
     const fileTypes = acceptedFiletypes ? { accept: acceptedFiletypes } : {};
-    const hideUpload = !allowMultipleFiles && uploadedFiles.length > 0;
+    const hideUpload = !allowMultipleFiles && uploadedFiles.length > 0 || readOnly;
     const acceptedFiletypesValue = react_1.default.useMemo(() => {
         if (!acceptedFiletypes)
             return undefined;
@@ -154,8 +162,8 @@ const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFileAriaLab
             ? acceptedFiletypes.join(',')
             : acceptedFiletypes;
     }, [acceptedFiletypes]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(FileUploadFieldContainer, { className: className, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [isDragging && !hideUpload && ((0, jsx_runtime_1.jsx)(DragOverlay, { children: allowMultipleFiles ? infoText : infoTextSingle })), Array.isArray(uploadedFiles) &&
-                    uploadedFiles.map((file) => ((0, jsx_runtime_1.jsx)(UploadedFileWrapper, { children: uploadedFile(file, uploadProgress[file.progressId], () => handleRemoveFile(file, setFieldValue)) }, file.progressId))), !uploadedFiles || uploadedFiles.length === 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideUploadIcon && (0, jsx_runtime_1.jsx)(UploadIcon, {}), infoText && ((0, jsx_runtime_1.jsx)(InfoText, { children: allowMultipleFiles ? infoText : infoTextSingle })), (0, jsx_runtime_1.jsx)(Divider, { children: (0, jsx_runtime_1.jsx)(DividerText, { children: orText ?? "or" }) }), (0, jsx_runtime_1.jsx)(FileUploadButton, { "aria-label": uploadButtonText ?? "Browse files", type: "button", onClick: () => document.getElementById(name)?.click(), children: uploadButtonText ?? "Browse files" }), fileInfoText && (0, jsx_runtime_1.jsx)(FileInfoText, { children: fileInfoText })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [infoText && !hideUpload && ((0, jsx_runtime_1.jsxs)(InfoText, { children: [`${infoText} ${orText ?? "or"} `, (0, jsx_runtime_1.jsx)(FileUploadText, { "aria-label": uploadButtonText ?? "Browse files", onClick: () => document.getElementById(name)?.click(), children: uploadButtonText ?? "Browse files" })] })), fileInfoText && !hideUpload && ((0, jsx_runtime_1.jsx)(FileInfoTextMinimized, { children: fileInfoText }))] })), !hideUpload && ((0, jsx_runtime_1.jsx)(HiddenFileInput, { ...(allowMultipleFiles && { multiple: true }), accept: acceptedFiletypesValue, id: name, name: name, type: "file", onChange: (event) => {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(FileUploadFieldContainer, { "$readOnly": readOnly, className: className, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [isDragging && !hideUpload && ((0, jsx_runtime_1.jsx)(DragOverlay, { children: allowMultipleFiles ? infoText : infoTextSingle })), Array.isArray(uploadedFiles) &&
+                    uploadedFiles.map((file) => ((0, jsx_runtime_1.jsx)(UploadedFileWrapper, { children: uploadedFile(file, uploadProgress[file.progressId], () => handleRemoveFile(file, setFieldValue)) }, file.progressId))), !uploadedFiles || uploadedFiles.length === 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideUploadIcon && (0, jsx_runtime_1.jsx)(UploadIcon, {}), infoText && ((0, jsx_runtime_1.jsx)(InfoText, { children: allowMultipleFiles ? infoText : infoTextSingle })), (0, jsx_runtime_1.jsx)(Divider, { children: (0, jsx_runtime_1.jsx)(DividerText, { children: orText ?? "or" }) }), (0, jsx_runtime_1.jsx)(FileUploadButton, { "aria-label": uploadButtonText ?? "Browse files", type: "button", disabled: readOnly, onClick: () => !readOnly && document.getElementById(name)?.click(), children: uploadButtonText ?? "Browse files" }), fileInfoText && (0, jsx_runtime_1.jsx)(FileInfoText, { children: fileInfoText })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [infoText && !hideUpload && ((0, jsx_runtime_1.jsxs)(InfoText, { children: [`${infoText} ${orText ?? "or"} `, (0, jsx_runtime_1.jsx)(FileUploadText, { "aria-label": uploadButtonText ?? "Browse files", onClick: () => !readOnly && document.getElementById(name)?.click(), children: uploadButtonText ?? "Browse files" })] })), fileInfoText && !hideUpload && ((0, jsx_runtime_1.jsx)(FileInfoTextMinimized, { children: fileInfoText }))] })), !hideUpload && ((0, jsx_runtime_1.jsx)(HiddenFileInput, { ...(allowMultipleFiles && { multiple: true }), accept: acceptedFiletypesValue, id: name, name: name, type: "file", disabled: readOnly, onChange: (event) => {
                         const files = event.target.files;
                         if (files) {
                             handleFileUpload(files, setFieldValue);

package/dist/cjs/Form/fields/FilesUploadField/styledComponents.js

@@ -10,18 +10,19 @@ const fa_1 = require("react-icons/fa");
 const component_library_1 = require("@nolwenture/component-library");
 exports.FileUploadFieldContainer = styled_components_1.default.div `
   align-items: center;
-  background-color: ${(props) => props.theme.color.background.input};
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
+  background-color: ${(props) => props.$readOnly ? 'transparent' : props.theme.color.background.input};
+  border: ${(props) => props.$readOnly ? 'none' : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
   display: flex;
   flex-direction: column;
   gap: ${(props) => props.theme.spacing.m};
   justify-content: center;
-  padding: ${(props) => props.theme.spacing.xxl};
+  padding: ${(props) => props.$readOnly ? '0' : props.theme.spacing.xxl};
+  margin-top: ${(props) => props.$readOnly ? props.theme.spacing.l : '0'};
   position: relative;
   transition: 0.3s filter ease;
 
   &:hover {
-    filter: brightness(110%);
+    filter: ${(props) => props.$readOnly ? 'none' : 'brightness(110%)'};
   }
 `;
 exports.HiddenFileInput = styled_components_1.default.input `
@@ -98,15 +99,15 @@ exports.FileItemContainer = styled_components_1.default.div `
 `;
 exports.UploadedFileItemContainer = styled_components_1.default.div `
   align-items: center;
-  background-color: ${(props) => props.theme.color.background.default};
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
+  background-color: ${(props) => props.$readOnly ? 'transparent' : props.theme.color.background.default};
+  border: ${(props) => props.$readOnly ? 'none' : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
   display: flex;
   flex-direction: row;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   gap: ${(props) => props.theme.spacing.m};
   justify-content: space-between;
   margin: 0;
-  padding: ${(props) => `${props.theme.spacing.m} ${props.theme.spacing.l}`};
+  padding: ${(props) => props.$readOnly ? '0' : `${props.theme.spacing.m} ${props.theme.spacing.l}`};
   width: 100%;
 `;
 exports.UploadedFileInfoContainer = styled_components_1.default.div `

package/dist/cjs/FormView/FormView.js

@@ -15,7 +15,7 @@ exports.FormWrapper = styled_components_1.default.div `
   //padding: ${(props) => props.theme.spacing.xxxxxl};
 `;
 const FormView = (props) => {
-    const { schema, uiSchema = {}, className, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, } = props;
+    const { schema, uiSchema = {}, className, fields = {}, templates = {}, components = {}, formContext = {}, formOptions = {}, formLocalization = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, } = props;
     const schemaDefinitions = schema.definitions;
     const uiSchemaDefinitions = uiSchema.definitions;
     const registry = {
@@ -25,6 +25,8 @@ const FormView = (props) => {
         definitions: schemaDefinitions,
         uiSchemaDefinitions,
         formContext,
+        formOptions,
+        formLocalization,
         useItemsAsAdditionalItems,
         hideUnmarkedAdditionalProperties,
     };

package/dist/cjs/FormView/FormViewRegistry.js

@@ -12,6 +12,8 @@ exports.FormViewRegistry = react_1.default.createContext({
     definitions: {},
     uiSchemaDefinitions: {},
     formContext: {},
+    formOptions: {},
+    formLocalization: {},
     useItemsAsAdditionalItems: false,
     hideUnmarkedAdditionalProperties: false,
 });

package/dist/esm/Form/Form.js

@@ -6,7 +6,7 @@ import { fields as defaultFields } from "./fields";
 import { templates as defaultTemplates } from "./templates";
 export const Form = (props) => {
     const { isSubmitting } = useFormikContext();
-    const { schema, uiSchema = {}, className, children, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, hideSubmit = false, } = props;
+    const { schema, uiSchema = {}, className, children, fields = {}, templates = {}, components = {}, formContext = {}, formOptions = {}, formLocalization = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, hideSubmit = false, } = props;
     const schemaDefinitions = schema.definitions;
     const uiSchemaDefinitions = uiSchema?.definitions;
     const registry = {
@@ -22,6 +22,8 @@ export const Form = (props) => {
         definitions: schemaDefinitions,
         uiSchemaDefinitions,
         formContext,
+        formOptions,
+        formLocalization,
         useItemsAsAdditionalItems,
         hideUnmarkedAdditionalProperties,
     };

package/dist/esm/Form/FormRegistry.js

@@ -7,6 +7,7 @@ export const FormRegistry = React.createContext({
     uiSchemaDefinitions: {},
     formContext: {},
     formLocalization: {},
+    formOptions: {},
     useItemsAsAdditionalItems: false,
     hideUnmarkedAdditionalProperties: false,
 });

package/dist/esm/Form/components/FieldInfo.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { styled } from "styled-components";
 import { readableColor } from "polished";
+import { FormRegistry } from "../FormRegistry";
 export const FieldInfoBoxElement = styled.div `
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
@@ -116,15 +117,21 @@ export const InlineFieldInfoWrapper = styled.div `
   margin: ${(props) => `${props.theme.spacing.m} 0`};
   width: 100%;
 `;
-export const FieldInfo = ({ label, content, position, display = "tooltip", className, }) => {
+export const FieldInfo = ({ label, content, position, display: displayProp, className, }) => {
+    const { formOptions } = useContext(FormRegistry);
     const [isInlineVisible, setIsInlineVisible] = useState(false);
+    const config = {
+        display: "tooltip",
+        ...(formOptions?.components?.FieldInfo ?? {}),
+        ...(displayProp && { display: displayProp }),
+    };
     const handleToggle = (e) => {
         e.preventDefault();
-        if (display === "inline") {
+        if (config.display === "inline") {
             setIsInlineVisible((prev) => !prev);
         }
     };
-    if (display === "inline") {
+    if (config.display === "inline") {
         return (_jsxs(_Fragment, { children: [_jsx(FieldInfoContainer, { href: "#", onClick: handleToggle, className: className, children: _jsx(FieldInfoLabel, { children: label ?? "i" }) }), isInlineVisible && (_jsx(InlineFieldInfoWrapper, { children: _jsx(InlineFieldInfoBoxInnerElement, { children: content }) }))] }));
     }
     else {

package/dist/esm/Form/fields/FilesUploadField/FilesUploadField.js

@@ -8,7 +8,8 @@ import { FormRegistry } from "../../FormRegistry";
 export const FilesUploadField = (props) => {
     const { templates, components: { FilesUploadFieldInput }, formLocalization, } = useContext(FormRegistry);
     useSetDefault(props);
-    const { name, uiSchema } = props;
+    const { name, uiSchema, schema } = props;
+    const readOnly = schema.readOnly ?? false;
     const { props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const { setFieldValue, values } = useFormikContext();
     const value = useMemo(() => getIn(values, name) ?? [], [values, name]);
@@ -90,5 +91,5 @@ export const FilesUploadField = (props) => {
         ...(formLocalization?.fields?.FilesUploadField ?? {}),
         ...(uiSchema["ui:localization"] ?? {}),
     };
-    return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-object": name, children: _jsx(FilesUploadFieldInput, { ...inputProps, acceptedFiletypes: inputProps?.acceptedFiletypes, deleteFileAriaLabel: localization.deleteFileAriaLabel, fileInfoText: localization.fileInfoText, handleFileUpload: handleFileUpload, handleRemoveFile: handleRemoveFile, hideFileTypeIcon: inputProps?.fileTypeIcon?.hidden, hideFileSize: inputProps?.fileSize?.hidden, hideRemoveButton: inputProps?.removeButton?.hidden, hideUploadIcon: inputProps?.uploadIcon?.hidden, infoText: localization.infoText, infoTextSingle: localization.infoTextSingle, allowMultipleFiles: inputProps?.allowMultipleFiles, name: name, orText: localization.orText, removeButton: localization.removeButton, renderFile: inputProps?.renderFile, setFieldValue: setFieldValue, uploadButtonText: localization.uploadButtonText, uploadedFiles: uploadedFiles, uploadProgress: uploadProgress, value: value }) }));
+    return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-object": name, children: _jsx(FilesUploadFieldInput, { ...inputProps, readOnly: readOnly, acceptedFiletypes: inputProps?.acceptedFiletypes, deleteFileAriaLabel: localization.deleteFileAriaLabel, fileInfoText: localization.fileInfoText, handleFileUpload: handleFileUpload, handleRemoveFile: handleRemoveFile, hideFileTypeIcon: inputProps?.fileTypeIcon?.hidden, hideFileSize: inputProps?.fileSize?.hidden, hideRemoveButton: inputProps?.removeButton?.hidden, hideUploadIcon: inputProps?.uploadIcon?.hidden, infoText: localization.infoText, infoTextSingle: localization.infoTextSingle, allowMultipleFiles: inputProps?.allowMultipleFiles, name: name, orText: localization.orText, removeButton: localization.removeButton, renderFile: inputProps?.renderFile, setFieldValue: setFieldValue, uploadButtonText: localization.uploadButtonText, uploadedFiles: uploadedFiles, uploadProgress: uploadProgress, value: value }) }));
 };

package/dist/esm/Form/fields/FilesUploadField/FilesUploadFieldInput.js

@@ -26,11 +26,13 @@ const getFileIcon = (mimeType) => {
     }
     return _jsx(FaFile, {});
 };
-export const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }) => {
+export const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, readOnly, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }) => {
     const { components: { Divider, DividerText, DragOverlay, FileInfoText, FileInfoTextMinimized, FileItemContainer, FileSize, FileTypeIcon, FileUploadButton, FileUploadFieldContainer, FileUploadText, HiddenFileInput, InfoText, ProgressBar, ProgressBarContainer, RemoveButton, RemoveButtonIcon, UploadedFileInfoContainer, UploadedFileItemContainer, UploadedFileName, UploadedFileWrapper, UploadIcon, UploadingFileName, }, } = useContext(FormRegistry);
     const [isDragging, setIsDragging] = useState(false);
     const dragCounter = useRef(0);
     const handleDragEnter = (e) => {
+        if (readOnly)
+            return;
         e.preventDefault();
         e.stopPropagation();
         dragCounter.current++;
@@ -39,6 +41,8 @@ export const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFile
         }
     };
     const handleDragLeave = (e) => {
+        if (readOnly)
+            return;
         e.preventDefault();
         e.stopPropagation();
         dragCounter.current--;
@@ -47,10 +51,14 @@ export const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFile
         }
     };
     const handleDragOver = (e) => {
+        if (readOnly)
+            return;
         e.preventDefault();
         e.stopPropagation();
     };
     const handleDrop = (e) => {
+        if (readOnly)
+            return;
         e.preventDefault();
         e.stopPropagation();
         setIsDragging(false);
@@ -107,10 +115,10 @@ export const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFile
             e.dataTransfer.clearData();
         }
     };
-    const defaultRenderFile = (file, progress, onDelete) => (_jsx(_Fragment, { children: progress === 100 ? (_jsxs(UploadedFileItemContainer, { children: [_jsxs(UploadedFileInfoContainer, { children: [!hideFileTypeIcon && (_jsx(FileTypeIcon, { children: getFileIcon(file.mimeType ?? "") })), _jsxs(UploadedFileName, { children: [file.name, !hideFileSize && (_jsx(FileSize, { children: ` | ${file.size ? (file.size / (1024 * 1024)).toFixed(3) : "?"} MB` }))] })] }), !hideRemoveButton && file.id && (_jsx(RemoveButton, { "aria-label": deleteFileAriaLabel ?? "Delete file", type: "button", onClick: () => onDelete(), ...removeButton?.props, children: removeButton?.content ?? _jsx(RemoveButtonIcon, {}) }))] })) : (_jsxs(FileItemContainer, { children: [_jsx(UploadingFileName, { children: file.name }), _jsx(ProgressBarContainer, { children: _jsx(ProgressBar, { "$progress": progress }) })] })) }));
+    const defaultRenderFile = (file, progress, onDelete) => (_jsx(_Fragment, { children: progress === 100 ? (_jsxs(UploadedFileItemContainer, { "$readOnly": readOnly, children: [_jsxs(UploadedFileInfoContainer, { children: [!hideFileTypeIcon && (_jsx(FileTypeIcon, { children: getFileIcon(file.mimeType ?? "") })), _jsxs(UploadedFileName, { children: [file.name, !hideFileSize && (_jsx(FileSize, { children: ` | ${file.size ? (file.size / (1024 * 1024)).toFixed(3) : "?"} MB` }))] })] }), !hideRemoveButton && !readOnly && file.id && (_jsx(RemoveButton, { "aria-label": deleteFileAriaLabel ?? "Delete file", type: "button", onClick: () => onDelete(), ...removeButton?.props, children: removeButton?.content ?? _jsx(RemoveButtonIcon, {}) }))] })) : (_jsxs(FileItemContainer, { children: [_jsx(UploadingFileName, { children: file.name }), _jsx(ProgressBarContainer, { children: _jsx(ProgressBar, { "$progress": progress }) })] })) }));
     const uploadedFile = renderFile ?? defaultRenderFile;
     const fileTypes = acceptedFiletypes ? { accept: acceptedFiletypes } : {};
-    const hideUpload = !allowMultipleFiles && uploadedFiles.length > 0;
+    const hideUpload = !allowMultipleFiles && uploadedFiles.length > 0 || readOnly;
     const acceptedFiletypesValue = React.useMemo(() => {
         if (!acceptedFiletypes)
             return undefined;
@@ -118,8 +126,8 @@ export const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFile
             ? acceptedFiletypes.join(',')
             : acceptedFiletypes;
     }, [acceptedFiletypes]);
-    return (_jsx(_Fragment, { children: _jsxs(FileUploadFieldContainer, { className: className, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [isDragging && !hideUpload && (_jsx(DragOverlay, { children: allowMultipleFiles ? infoText : infoTextSingle })), Array.isArray(uploadedFiles) &&
-                    uploadedFiles.map((file) => (_jsx(UploadedFileWrapper, { children: uploadedFile(file, uploadProgress[file.progressId], () => handleRemoveFile(file, setFieldValue)) }, file.progressId))), !uploadedFiles || uploadedFiles.length === 0 ? (_jsxs(_Fragment, { children: [!hideUploadIcon && _jsx(UploadIcon, {}), infoText && (_jsx(InfoText, { children: allowMultipleFiles ? infoText : infoTextSingle })), _jsx(Divider, { children: _jsx(DividerText, { children: orText ?? "or" }) }), _jsx(FileUploadButton, { "aria-label": uploadButtonText ?? "Browse files", type: "button", onClick: () => document.getElementById(name)?.click(), children: uploadButtonText ?? "Browse files" }), fileInfoText && _jsx(FileInfoText, { children: fileInfoText })] })) : (_jsxs(_Fragment, { children: [infoText && !hideUpload && (_jsxs(InfoText, { children: [`${infoText} ${orText ?? "or"} `, _jsx(FileUploadText, { "aria-label": uploadButtonText ?? "Browse files", onClick: () => document.getElementById(name)?.click(), children: uploadButtonText ?? "Browse files" })] })), fileInfoText && !hideUpload && (_jsx(FileInfoTextMinimized, { children: fileInfoText }))] })), !hideUpload && (_jsx(HiddenFileInput, { ...(allowMultipleFiles && { multiple: true }), accept: acceptedFiletypesValue, id: name, name: name, type: "file", onChange: (event) => {
+    return (_jsx(_Fragment, { children: _jsxs(FileUploadFieldContainer, { "$readOnly": readOnly, className: className, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [isDragging && !hideUpload && (_jsx(DragOverlay, { children: allowMultipleFiles ? infoText : infoTextSingle })), Array.isArray(uploadedFiles) &&
+                    uploadedFiles.map((file) => (_jsx(UploadedFileWrapper, { children: uploadedFile(file, uploadProgress[file.progressId], () => handleRemoveFile(file, setFieldValue)) }, file.progressId))), !uploadedFiles || uploadedFiles.length === 0 ? (_jsxs(_Fragment, { children: [!hideUploadIcon && _jsx(UploadIcon, {}), infoText && (_jsx(InfoText, { children: allowMultipleFiles ? infoText : infoTextSingle })), _jsx(Divider, { children: _jsx(DividerText, { children: orText ?? "or" }) }), _jsx(FileUploadButton, { "aria-label": uploadButtonText ?? "Browse files", type: "button", disabled: readOnly, onClick: () => !readOnly && document.getElementById(name)?.click(), children: uploadButtonText ?? "Browse files" }), fileInfoText && _jsx(FileInfoText, { children: fileInfoText })] })) : (_jsxs(_Fragment, { children: [infoText && !hideUpload && (_jsxs(InfoText, { children: [`${infoText} ${orText ?? "or"} `, _jsx(FileUploadText, { "aria-label": uploadButtonText ?? "Browse files", onClick: () => !readOnly && document.getElementById(name)?.click(), children: uploadButtonText ?? "Browse files" })] })), fileInfoText && !hideUpload && (_jsx(FileInfoTextMinimized, { children: fileInfoText }))] })), !hideUpload && (_jsx(HiddenFileInput, { ...(allowMultipleFiles && { multiple: true }), accept: acceptedFiletypesValue, id: name, name: name, type: "file", disabled: readOnly, onChange: (event) => {
                         const files = event.target.files;
                         if (files) {
                             handleFileUpload(files, setFieldValue);

package/dist/esm/Form/fields/FilesUploadField/styledComponents.js

@@ -4,18 +4,19 @@ import { FaCloudUploadAlt, FaTrash } from "react-icons/fa";
 import { Button } from "@nolwenture/component-library";
 export const FileUploadFieldContainer = styled.div `
   align-items: center;
-  background-color: ${(props) => props.theme.color.background.input};
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
+  background-color: ${(props) => props.$readOnly ? 'transparent' : props.theme.color.background.input};
+  border: ${(props) => props.$readOnly ? 'none' : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
   display: flex;
   flex-direction: column;
   gap: ${(props) => props.theme.spacing.m};
   justify-content: center;
-  padding: ${(props) => props.theme.spacing.xxl};
+  padding: ${(props) => props.$readOnly ? '0' : props.theme.spacing.xxl};
+  margin-top: ${(props) => props.$readOnly ? props.theme.spacing.l : '0'};
   position: relative;
   transition: 0.3s filter ease;
 
   &:hover {
-    filter: brightness(110%);
+    filter: ${(props) => props.$readOnly ? 'none' : 'brightness(110%)'};
   }
 `;
 export const HiddenFileInput = styled.input `
@@ -92,15 +93,15 @@ export const FileItemContainer = styled.div `
 `;
 export const UploadedFileItemContainer = styled.div `
   align-items: center;
-  background-color: ${(props) => props.theme.color.background.default};
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
+  background-color: ${(props) => props.$readOnly ? 'transparent' : props.theme.color.background.default};
+  border: ${(props) => props.$readOnly ? 'none' : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
   display: flex;
   flex-direction: row;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   gap: ${(props) => props.theme.spacing.m};
   justify-content: space-between;
   margin: 0;
-  padding: ${(props) => `${props.theme.spacing.m} ${props.theme.spacing.l}`};
+  padding: ${(props) => props.$readOnly ? '0' : `${props.theme.spacing.m} ${props.theme.spacing.l}`};
   width: 100%;
 `;
 export const UploadedFileInfoContainer = styled.div `

package/dist/esm/FormView/FormView.js

@@ -9,7 +9,7 @@ export const FormWrapper = styled.div `
   //padding: ${(props) => props.theme.spacing.xxxxxl};
 `;
 export const FormView = (props) => {
-    const { schema, uiSchema = {}, className, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, } = props;
+    const { schema, uiSchema = {}, className, fields = {}, templates = {}, components = {}, formContext = {}, formOptions = {}, formLocalization = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, } = props;
     const schemaDefinitions = schema.definitions;
     const uiSchemaDefinitions = uiSchema.definitions;
     const registry = {
@@ -19,6 +19,8 @@ export const FormView = (props) => {
         definitions: schemaDefinitions,
         uiSchemaDefinitions,
         formContext,
+        formOptions,
+        formLocalization,
         useItemsAsAdditionalItems,
         hideUnmarkedAdditionalProperties,
     };

package/dist/esm/FormView/FormViewRegistry.js

@@ -6,6 +6,8 @@ export const FormViewRegistry = React.createContext({
     definitions: {},
     uiSchemaDefinitions: {},
     formContext: {},
+    formOptions: {},
+    formLocalization: {},
     useItemsAsAdditionalItems: false,
     hideUnmarkedAdditionalProperties: false,
 });

package/dist/types/Form/components/index.d.ts

@@ -185,8 +185,10 @@ export declare const components: {
     MultipleChoiceFieldLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
     }, never>> & string;
-    FilesUploadFieldInput: ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }: import("../fields/FilesUploadField").FilesUploadFieldInputProps) => import("react/jsx-runtime").JSX.Element;
-    FileUploadFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    FilesUploadFieldInput: ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, readOnly, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }: import("../fields/FilesUploadField").FilesUploadFieldInputProps) => import("react/jsx-runtime").JSX.Element;
+    FileUploadFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+        $readOnly?: boolean;
+    }>> & string;
     HiddenFileInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
     UploadIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react-icons").IconBaseProps, never>> & string & Omit<import("react-icons").IconType, keyof import("react").Component<any, {}, any>>;
     InfoText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
@@ -197,7 +199,9 @@ export declare const components: {
     FileUploadButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Readonly<import("@nolwenture/component-library").ButtonProps>, never>> & string & Omit<typeof import("@nolwenture/component-library").Button, keyof import("react").Component<any, {}, any>>;
     FileUploadText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
     FileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    UploadedFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    UploadedFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+        $readOnly?: boolean;
+    }>> & string;
     UploadedFileInfoContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     UploadedFileWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     FileTypeIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/types/Form/fields/FilesUploadField/FilesUploadFieldInput.d.ts

@@ -36,6 +36,7 @@ export type FilesUploadFieldInputProps = {
     hideFileSize: boolean;
     acceptedFiletypes?: string | string[];
     allowMultipleFiles?: boolean;
+    readOnly?: boolean;
 };
-export declare const FilesUploadFieldInput: ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }: FilesUploadFieldInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FilesUploadFieldInput: ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, readOnly, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }: FilesUploadFieldInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/Form/fields/FilesUploadField/index.d.ts

@@ -1,7 +1,9 @@
 export * as fields from "./FilesUploadField";
 declare const components: {
-    FilesUploadFieldInput: ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }: import("./FilesUploadFieldInput").FilesUploadFieldInputProps) => import("react/jsx-runtime").JSX.Element;
-    FileUploadFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    FilesUploadFieldInput: ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, readOnly, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }: import("./FilesUploadFieldInput").FilesUploadFieldInputProps) => import("react/jsx-runtime").JSX.Element;
+    FileUploadFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+        $readOnly?: boolean;
+    }>> & string;
     HiddenFileInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
     UploadIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react-icons").IconBaseProps, never>> & string & Omit<import("react-icons").IconType, keyof import("react").Component<any, {}, any>>;
     InfoText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
@@ -12,7 +14,9 @@ declare const components: {
     FileUploadButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Readonly<import("@nolwenture/component-library").ButtonProps>, never>> & string & Omit<typeof import("@nolwenture/component-library").Button, keyof import("react").Component<any, {}, any>>;
     FileUploadText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
     FileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    UploadedFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    UploadedFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+        $readOnly?: boolean;
+    }>> & string;
     UploadedFileInfoContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     UploadedFileWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     FileTypeIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/types/Form/fields/FilesUploadField/styledComponents.d.ts

@@ -1,5 +1,7 @@
 import { Button } from "@nolwenture/component-library";
-export declare const FileUploadFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FileUploadFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $readOnly?: boolean;
+}>> & string;
 export declare const HiddenFileInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
 export declare const UploadIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react-icons").IconBaseProps, never>> & string & Omit<import("react-icons").IconType, keyof import("react").Component<any, {}, any>>;
 export declare const InfoText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
@@ -10,7 +12,9 @@ export declare const FileInfoTextMinimized: import("styled-components/dist/types
 export declare const FileUploadButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Readonly<import("@nolwenture/component-library").ButtonProps>, never>> & string & Omit<typeof Button, keyof import("react").Component<any, {}, any>>;
 export declare const FileUploadText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
 export declare const FileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const UploadedFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const UploadedFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $readOnly?: boolean;
+}>> & string;
 export declare const UploadedFileInfoContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const UploadedFileWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FileTypeIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/types/Form/fields/index.d.ts

@@ -106,8 +106,10 @@ export declare const fieldComponents: {
     MultipleChoiceFieldLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
     }, never>> & string;
-    FilesUploadFieldInput: ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }: FilesUploadField.FilesUploadFieldInputProps) => import("react/jsx-runtime").JSX.Element;
-    FileUploadFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    FilesUploadFieldInput: ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, readOnly, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }: FilesUploadField.FilesUploadFieldInputProps) => import("react/jsx-runtime").JSX.Element;
+    FileUploadFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+        $readOnly?: boolean;
+    }>> & string;
     HiddenFileInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
     UploadIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react-icons").IconBaseProps, never>> & string & Omit<import("react-icons").IconType, keyof import("react").Component<any, {}, any>>;
     InfoText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
@@ -118,7 +120,9 @@ export declare const fieldComponents: {
     FileUploadButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Readonly<import("@nolwenture/component-library").ButtonProps>, never>> & string & Omit<typeof import("@nolwenture/component-library").Button, keyof import("react").Component<any, {}, any>>;
     FileUploadText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
     FileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    UploadedFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    UploadedFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+        $readOnly?: boolean;
+    }>> & string;
     UploadedFileInfoContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     UploadedFileWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     FileTypeIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/types/Form/types/FormRegistryContext.d.ts

@@ -16,6 +16,7 @@ export type FormRegistryContext = {
     } | undefined;
     formContext: Record<string, any>;
     formLocalization?: Record<string, any>;
+    formOptions?: Record<string, any>;
     useItemsAsAdditionalItems: boolean;
     hideUnmarkedAdditionalProperties: boolean;
 };

package/dist/types/FormView/types/FormViewRegistryContext.d.ts

@@ -14,6 +14,8 @@ export type FormViewRegistryContext = {
         [key: string]: UiSchema;
     } | undefined;
     formContext: Record<string, any>;
+    formLocalization?: Record<string, any>;
+    formOptions?: Record<string, any>;
     useItemsAsAdditionalItems: boolean;
     hideUnmarkedAdditionalProperties: boolean;
 };

package/dist/types/common/types/FieldInfo.d.ts

@@ -4,9 +4,10 @@ export interface FieldInfoBoxElementProps {
 }
 export type FieldInfoProps = {
     label?: React.ReactNode;
-    content: React.ReactNode;
+    content?: React.ReactNode;
     position?: "top" | "right" | "bottom" | "left";
     className?: string;
     props?: any;
     display?: "tooltip" | "inline";
+    formOptions?: Record<string, any>;
 };

package/dist/types/common/types/Form.d.ts

@@ -15,6 +15,8 @@ export type FormProps<T> = React.PropsWithChildren<{
     uiSchema?: UiSchema | undefined;
     /** Data that is passed down to all fields. Used for implementing context aware fields */
     formContext?: Record<string, any>;
+    formOptions?: Record<string, any>;
+    formLocalization?: Record<string, any>;
     /** Dictionary of registered fields */
     fields?: Partial<FieldsType>;
     templates?: Partial<TemplatesType>;

package/dist/types/common/types/Schemas.d.ts

@@ -18,7 +18,8 @@ export type UiSchema = {
     "ui:field"?: Field | string;
     "ui:template"?: string;
     "ui:options"?: {
-        [key: string]: boolean | number | string | object | any[] | null;
+        info?: Partial<FieldInfoProps>;
+        [key: string]: any;
     };
     "ui:props"?: {
         [key: string]: any;

package/dist/types/utils/getTitleAndDescription.d.ts

@@ -9,4 +9,4 @@ export declare const getDescription: ({ description, uiSchema, schema, }: {
     description?: string;
     uiSchema?: UiSchema;
     schema?: Schema;
-}) => string | number | true | object | undefined;
+}) => any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Formik form generation from json schema",
   "author": "anttivikman <antti.vikman@nolwenture.com>",
   "contributors": [