@nolwenture/formik-jsonschema-form 1.0.6 → 1.0.7

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/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/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/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.7",
   "description": "Formik form generation from json schema",
   "author": "anttivikman <antti.vikman@nolwenture.com>",
   "contributors": [