@nolwenture/formik-jsonschema-form 0.10.1 → 0.11.0

package/README.md

@@ -518,12 +518,33 @@ RadioButtonField.styles = {
 };
 ```
 
+### Collapsible object field
+
+Fields of `type: "object"` can be made collapsible via the respective uiSchema setting.
+
+```tsx
+const collapsibleSchema: Schema = {
+  title: "FORM WITH COLLAPSIBLE OBJECT",
+  properties: {
+    colObject: {
+      type: "object",
+      title: "Collapsible Object",
+      properties: { summer: { type: "string" }, winter: { type: "string" } },
+    },
+  },
+};
+
+const collapsibleUiSchema: UiSchema = {
+  colObject: { props: { isCollapsible: true } },
+};
+```
+
 ### Conditional fields
 
 Conditional fields depending on a parent field input can be given with an `if-then-else` logic inside the schema making use of `allOf`. While `if`and `then` are required to make the condition work, `else` is optional.
 
 ```tsx
-export const conditionsSchema = {
+const conditionsSchema = {
   type: "object",
   properties: {
     animal: {
@@ -598,7 +619,7 @@ Dependencies can either be triggered by the conditional-giving property being pr
 To have value-dependent conditionals, the `dependencies`-object needs to have an `oneOf`-array listing the possible conditional-giving values matching the enum-values of the conditional-giving field. Each case in in the `oneOf` array can either have no conditional fields, then the only key-value pair given inside `properties` is the matching conditional (see "no type"), or an unlimited amount of conditional fields listed after the matching conditional.
 
 ```tsx
-export const refDefSchema: Schema = {
+const dependenciesSchema: Schema = {
   type: "object",
   properties: {
     creditCard: {
@@ -689,29 +710,81 @@ Using `if-else-then` or `dependencies` depends mostly on the use case. For recur
 Schemas can be referenced. A referenced schema can be given to a property using `$ref` keyword. The definition for the referenced schema needs to be inside `definitions` object inside the main schema. The value-string given to $ref-key must always look like this:
 `'#/definitions/{addMatchingKeyHere}'`
 
+In order to give uiSchema to reused or recursive fields defined in `schema.definitons`, the uiSchema needs to be given to the matching prop of `definitions`-object. This way, the given uiProps are added to the referencing field, no matter how deeply nested it is inside the schema.
+
 ```tsx
-const ageFieldDefinition: Schema = {
-  type: "number",
-  title: "Age",
+const familyObjectField: Schema = {
+  type: "object",
+  title: "My family member",
+  properties: {
+    relationship: { type: "string", title: "Relationship status" },
+    names: { $ref: "#/definitions/names" },
+  },
 };
 
-export const refDefSchema: Schema = {
+const refDefSchema: Schema = {
   title: "References and Definitions",
   type: "object",
   properties: {
-    name: {
-      $ref: "#/definitions/name",
+    names: {
+      $ref: "#/definitions/names",
     },
-    age: {
-      $ref: "#/definitions/age",
+    birthDate: {
+      $ref: "#/definitions/birthDate",
+    },
+    family: {
+      type: "object",
+      title: "Family",
+      properties: {
+        mother: {
+          type: "array",
+          title: "Maternal family",
+          additionalItems: familyObjectField,
+        },
+        father: {
+          type: "array",
+          title: "Paternal family",
+          additionalItems: familyObjectField,
+        },
+      },
     },
   },
+
   definitions: {
-    name: {
-      type: "string",
+    names: {
+      type: "object",
       title: "Name",
+      description:
+        "The schema for this object comes from the 'definitions' object inside the main schema",
+      properties: {
+        firstName: { type: "string", title: "First name" },
+        middleNames: {
+          type: "array",
+          title: "Middle names",
+          additionalItems: { $ref: "#/definitions/middleName" },
+        },
+        lastName: { type: "string", title: "Last name" },
+      },
+    },
+    birthDate: { type: "string", title: "When is your birthday?" },
+    middleName: { type: "string", title: " Middle name" },
+  },
+};
+
+const refDefUiSchema: UiSchema = {
+  definitions: {
+    birthDate: { "ui:field": "DateField" },
+    names: {
+      history: { "ui:field": "TextAreaField" },
+      middleNames: { "ui:info": { content: "You can leave those blank" } },
+    },
+    middleName: {
+      props: {
+        title: {
+          hidden: true,
+        },
+      },
     },
-    age: ageFieldDefinition,
   },
 };
 ```

package/dist/Form.js

@@ -10,6 +10,7 @@ export const FormRegistry = React.createContext({
     templates: defaultTemplates,
     components: defaultComponents,
     definitions: {},
+    uiSchemaDefinitions: {},
     formContext: {},
     useItemsAsAdditionalItems: false,
     hideUnmarkedAdditionalProperties: false,
@@ -31,11 +32,13 @@ export const Form = (props) => {
     const { isSubmitting } = useFormikContext();
     const { schema, uiSchema = {}, className, children, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, } = props;
     const schemaDefinitions = schema.definitions;
+    const uiSchemaDefinitions = uiSchema.definitions;
     const registry = {
         fields: Object.assign(Object.assign({}, defaultFields), fields),
         templates: Object.assign(Object.assign({}, defaultTemplates), templates),
         components: Object.assign(Object.assign({}, defaultComponents), components),
         definitions: schemaDefinitions,
+        uiSchemaDefinitions,
         formContext,
         useItemsAsAdditionalItems,
         hideUnmarkedAdditionalProperties,

package/dist/Form.stories.d.ts

@@ -13,3 +13,4 @@ export declare const WithRequiredInput: Story;
 export declare const WithConditions: Story;
 export declare const WithRefAndDefinitions: Story;
 export declare const MultipleChoice: Story;
+export declare const Collapsible: Story;

package/dist/Form.stories.js

@@ -23,10 +23,8 @@ import { action } from "@storybook/addon-actions";
 import styled from "styled-components";
 import { Formik, useFormikContext } from "formik";
 import { InfoFieldButton, SearchableMultiTagSelectField, } from "./styledComponents";
-import { completeSchema, completeUiSchema, simpleSchema, simpleUiSchema, generatedSchema, requiredInputSchema, requiredInputUiSchema, conditionsSchema, conditionsUiSchema, } from "./sampleData";
+import { completeSchema, completeUiSchema, simpleSchema, simpleUiSchema, generatedSchema, requiredInputSchema, requiredInputUiSchema, conditionsSchema, conditionsUiSchema, refDefSchema, refDefUiSchema, multipleChoiceSchema, multipleChoiceUiSchema, collapsibleSchema, collapsibleUiSchema, } from "./sampleData";
 import { Form, styledComponents } from "./";
-import { refDefSchema, refDefUiSchema } from "./sampleData/refDefSchema";
-import { multipleChoiceSchema, multipleChoiceUiSchema, } from "./sampleData/multipleChoiceSchema";
 const meta = {
     title: "Form",
     component: Form,
@@ -198,3 +196,9 @@ export const MultipleChoice = {
         uiSchema: multipleChoiceUiSchema,
     },
 };
+export const Collapsible = {
+    args: {
+        schema: collapsibleSchema,
+        uiSchema: collapsibleUiSchema,
+    },
+};

package/dist/fields/BooleanField.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { FormRegistry } from "../Form";
 import { useExtractUiSchema, useSetDefault } from "../hooks";
 export const BooleanField = (props) => {
-    const { templates: { FieldTemplate }, components: { FieldInput }, } = useContext(FormRegistry);
+    const { templates: { FieldTemplate }, components: { FieldInput, BooleanFieldWrapper }, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { label, props: inputProps } = useExtractUiSchema(uiSchema);
-    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(_Fragment, { children: [_jsx(FieldInput, Object.assign({}, inputProps, { name: name, type: "checkbox" })), label] }) })));
+    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(BooleanFieldWrapper, { children: [_jsx(FieldInput, Object.assign({}, inputProps, { name: name, type: "checkbox" })), label] }) })));
 };

package/dist/fields/ObjectField.js

@@ -26,8 +26,8 @@ const useObjectField = (name) => {
     return { value, setValue };
 };
 export const ObjectField = (props) => {
-    var _a;
-    const { fields: { SchemaField }, templates: { ObjectFieldTemplate }, components: { ObjectFieldItem, ObjectFieldItemButtons }, hideUnmarkedAdditionalProperties, } = useContext(FormRegistry);
+    var _a, _b, _c;
+    const { fields: { SchemaField }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate }, components: { ObjectFieldItem, ObjectFieldItemButtons }, hideUnmarkedAdditionalProperties, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, schema, uiSchema } = props;
     const { value, setValue } = useObjectField(name);
@@ -45,7 +45,10 @@ export const ObjectField = (props) => {
     }, [valuesToRemove]);
     const propertyKeys = useMemo(() => Object.keys(properties || {}), [properties]);
     const additionalValues = useMemo(() => Object.fromEntries(Object.entries(value || {}).filter(([key, value]) => !propertyKeys.includes(key))), [value, propertyKeys]);
-    return (_jsxs(ObjectFieldTemplate, Object.assign({}, props, { children: [((_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:order"]) !== null && _a !== void 0 ? _a : Object.keys(properties || {}))
+    const FieldTemplateComponent = ((_b = (_a = props.uiSchema) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.isCollapsible)
+        ? CollapsibleObjectFieldTemplate
+        : ObjectFieldTemplate;
+    return (_jsxs(FieldTemplateComponent, Object.assign({}, props, { children: [((_c = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:order"]) !== null && _c !== void 0 ? _c : Object.keys(properties || {}))
                 .map((childName) => {
                 const childSchema = properties === null || properties === void 0 ? void 0 : properties[childName];
                 if (!childSchema)

package/dist/fields/SchemaField.js

@@ -23,9 +23,9 @@ const useFieldComponent = (schema, uiSchema, fields) => {
 };
 export const SchemaField = (props) => {
     const { schema, uiSchema } = props;
-    const { fields, definitions } = useContext(FormRegistry);
-    const schemaSolvedForReferences = useMemo(() => solveReferences(schema, definitions), [schema, definitions]);
-    const FieldComponent = useFieldComponent(schemaSolvedForReferences, uiSchema, fields);
-    const newProps = Object.assign(Object.assign({}, props), { schema: schemaSolvedForReferences });
+    const { fields, definitions, uiSchemaDefinitions } = useContext(FormRegistry);
+    const schemaSolvedForReferences = useMemo(() => solveReferences(schema, definitions, uiSchema, uiSchemaDefinitions), [schema, definitions]);
+    const FieldComponent = useFieldComponent(schemaSolvedForReferences.schema, schemaSolvedForReferences.uiSchema, fields);
+    const newProps = Object.assign(Object.assign({}, props), { schema: schemaSolvedForReferences.schema, uiSchema: schemaSolvedForReferences.uiSchema });
     return _jsx(FieldComponent, Object.assign({}, newProps));
 };

package/dist/fields/stories/ObjectField.stories.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { userEvent, expect } from "@storybook/test";
+import { within, userEvent, expect, waitFor } from "@storybook/test";
 import { Formik, Form } from "formik";
 import { ObjectField } from "./../ObjectField";
 export default {
@@ -55,22 +55,40 @@ export const Default = {
                     title: "nullField",
                     description: "Null description",
                 },
+                collapsibleObject: {
+                    type: "object",
+                    title: "nestedCollapsibleObject",
+                    properties: {
+                        insideCollapsibleObject: { type: "string" },
+                        alsoInsideCollapsibleObject: { type: "number" },
+                    },
+                },
             },
         },
-        uiSchema: {},
+        uiSchema: { collapsibleObject: { props: { isCollapsible: true } } },
     },
     play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
         const stringField = canvasElement.querySelector('input[name="object.string"]');
         const numberField = canvasElement.querySelector('input[name="object.number"]');
         const booleanField = canvasElement.querySelector('input[name="object.boolean"]');
         const enumField = canvasElement.querySelector('select[name="object.enum[0]"]');
+        const collapsibleObjectButton = canvas.getByLabelText("object.collapsibleObject");
+        expect(collapsibleObjectButton).toBeInTheDocument();
         yield userEvent.type(stringField, "string");
         yield userEvent.type(numberField, "123");
         yield userEvent.click(booleanField);
         yield userEvent.selectOptions(enumField, "2");
+        yield userEvent.click(collapsibleObjectButton);
+        const stringFieldInCollapsibleObject = (yield waitFor(() => canvasElement.querySelector('input[name="object.collapsibleObject.insideCollapsibleObject"]')));
+        const numberFieldInCollapsibleObject = (yield waitFor(() => canvasElement.querySelector('input[name="object.collapsibleObject.alsoInsideCollapsibleObject"]')));
+        yield userEvent.type(stringFieldInCollapsibleObject, "string in collapsible object");
+        yield userEvent.type(numberFieldInCollapsibleObject, "313");
         expect(stringField).toHaveValue("string");
         expect(numberField).toHaveValue(123);
         expect(booleanField).toBeChecked();
         expect(enumField).toHaveValue("2");
+        expect(stringFieldInCollapsibleObject).toHaveValue("string in collapsible object");
+        expect(numberFieldInCollapsibleObject).toHaveValue(313);
     }),
 };

package/dist/sampleData/collapsibleSchema.d.ts

@@ -0,0 +1,3 @@
+import type { Schema, UiSchema } from "../types";
+export declare const collapsibleSchema: Schema;
+export declare const collapsibleUiSchema: UiSchema;

package/dist/sampleData/collapsibleSchema.js

@@ -0,0 +1,27 @@
+export const collapsibleSchema = {
+    title: "TITLE",
+    properties: {
+        colObject: {
+            type: "object",
+            title: "Collapsible Object",
+            properties: { summer: { type: "string" }, winter: { type: "string" } },
+        },
+        secondColObject: {
+            type: "object",
+            title: "Second collapsible Object",
+            properties: { spring: { type: "string" }, fall: { type: "string" } },
+        },
+    },
+};
+export const collapsibleUiSchema = {
+    "ui:description": "Description text",
+    colObject: { props: { isCollapsible: true, isCollapsedOnLoad: false } },
+    secondColObject: {
+        props: {
+            isCollapsible: true,
+            isCollapsedOnLoad: true,
+            openIcon: "-",
+            collapsedIcon: "+",
+        },
+    },
+};

package/dist/sampleData/index.d.ts

@@ -3,3 +3,6 @@ export * from "./completeSchema";
 export * from "./generatedSchema";
 export * from "./requiredInputSchema";
 export * from "./conditionsSchema";
+export * from "./multipleChoiceSchema";
+export * from "./refDefSchema";
+export * from "./collapsibleSchema";

package/dist/sampleData/index.js

@@ -3,3 +3,6 @@ export * from "./completeSchema";
 export * from "./generatedSchema";
 export * from "./requiredInputSchema";
 export * from "./conditionsSchema";
+export * from "./multipleChoiceSchema";
+export * from "./refDefSchema";
+export * from "./collapsibleSchema";

package/dist/sampleData/refDefSchema.js

@@ -1,15 +1,52 @@
 import { ageFieldDefinition } from "./ageFieldDefinition";
+const familyObjectField = {
+    type: "object",
+    title: "My family member",
+    properties: {
+        relationship: { type: "string", title: "Relationship status" },
+        names: { $ref: "#/definitions/names" },
+    },
+};
 export const refDefSchema = {
     title: "References and Definitions",
     type: "object",
-    required: ["name", "field"],
+    required: ["names", "fieldType"],
     properties: {
-        name: {
-            $ref: "#/definitions/name",
+        names: {
+            $ref: "#/definitions/names",
+        },
+        family: {
+            type: "object",
+            title: "Family",
+            properties: {
+                mother: {
+                    type: "array",
+                    title: "Maternal family",
+                    additionalItems: familyObjectField,
+                },
+                father: {
+                    type: "array",
+                    title: "Paternal family",
+                    additionalItems: familyObjectField,
+                },
+                siblings: {
+                    type: "array",
+                    title: "Siblings",
+                    additionalItems: familyObjectField,
+                },
+                children: {
+                    type: "array",
+                    title: "Own children (and grandchildren)",
+                    additionalItems: familyObjectField,
+                },
+            },
         },
         age: {
             $ref: "#/definitions/age",
         },
+        birthDate: {
+            $ref: "#/definitions/birthDate",
+        },
         creditCard: {
             type: "number",
             title: "Credit card number",
@@ -127,7 +164,10 @@ export const refDefSchema = {
                 {
                     properties: {
                         boolean: true,
-                        something: { type: "string" },
+                        feedback: {
+                            type: "string",
+                            title: "Feedback on your coffee experience",
+                        },
                     },
                 },
             ],
@@ -187,18 +227,32 @@ export const refDefSchema = {
         },
     ],
     definitions: {
-        name: {
-            type: "string",
+        names: {
+            type: "object",
             title: "Name",
-            description: "The schema for this field comes from the 'definitions' object inside the main schema",
+            description: "The schema for this object comes from the 'definitions' object inside the main schema",
+            properties: {
+                firstName: { type: "string", title: "First name" },
+                middleNames: {
+                    type: "array",
+                    title: "Middle names",
+                    additionalItems: { $ref: "#/definitions/middleName" },
+                },
+                lastName: { type: "string", title: "Last name" },
+                history: { type: "string", title: "History of these names" },
+            },
         },
         age: ageFieldDefinition,
+        birthDate: { type: "string", title: "When is your birthday?" },
+        middleName: { type: "string", title: " Middle name" },
     },
 };
 export const refDefUiSchema = {
     "ui:order": [
-        "name",
+        "names",
         "age",
+        "birthDate",
+        "family",
         "creditCard",
         "billing_address",
         "fieldType",
@@ -206,7 +260,7 @@ export const refDefUiSchema = {
         "objectField",
         "arrayField",
         "boolean",
-        "something",
+        "feedback",
         "animal",
         "food",
         "water",
@@ -216,4 +270,19 @@ export const refDefUiSchema = {
             props: { disabled: false, hidden: false },
         },
     },
+    feedback: { "ui:field": "TextAreaField" },
+    definitions: {
+        birthDate: { "ui:field": "DateField" },
+        names: {
+            history: { "ui:field": "TextAreaField" },
+            middleNames: { "ui:info": { content: "You can leave those blank" } },
+        },
+        middleName: {
+            props: {
+                title: {
+                    hidden: true,
+                },
+            },
+        },
+    },
 };

package/dist/styledComponents.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="hoist-non-react-statics" />
-import type { ArrayFieldButtonProps, InfoFieldButtonProps, ObjectFieldButtonProps, RadioButtonFieldProps, ToggleSwitchFieldProps, SelectFieldProps, MultipleChoiceFieldProps, TextAreaInputFieldProps } from "./types";
+import type { ArrayFieldButtonProps, InfoFieldButtonProps, ObjectFieldButtonProps, RadioButtonFieldProps, ToggleSwitchFieldProps, SelectFieldProps, MultipleChoiceFieldProps, TextAreaInputFieldProps, ClickableProps } from "./types";
 import React from "react";
 import * as formik from "formik";
 export declare const Form: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & React.RefAttributes<HTMLFormElement>, "ref"> & {
@@ -208,4 +208,11 @@ export declare const TextAreaFieldInput: import("styled-components").IStyledComp
     ref?: unknown;
 }, never>> & Omit<({ formikAs, ...props }: Omit<formik.FieldAttributes<any>, "as">) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>, keyof React.Component<any, {}, any>>;
 export declare const TextAreaInputField: ({ inputProps, name, className, }: TextAreaInputFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BooleanFieldWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const Clickable: ({ children, onClick, onMouseUp, onMouseDown, innerRef, className, ariaLabel, ariaExpanded, ariaControls, id, }: ClickableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CollapsibleToggle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<ClickableProps, never>> & Omit<({ children, onClick, onMouseUp, onMouseDown, innerRef, className, ariaLabel, ariaExpanded, ariaControls, id, }: ClickableProps) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>;
+export declare const Icon: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const CollapsibleChildWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const CollapsibleObjectFieldWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>>;
+export declare const CollapsibleObjectFieldTitle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>>;
 export {};

package/dist/styledComponents.js

@@ -393,3 +393,29 @@ export const TextAreaFieldInput = styled(FieldInput) `
 export const TextAreaInputField = ({ inputProps, name, className, }) => {
     return _jsx(TextAreaFieldInput, Object.assign({}, inputProps, { name: name, formikAs: "textarea" }));
 };
+export const BooleanFieldWrapper = styled.div `
+  display: flex;
+`;
+const ClickableEl = styled.button `
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  outline: inherit;
+  cursor: pointer;
+`;
+export const Clickable = ({ children, onClick, onMouseUp = () => { }, onMouseDown = () => { }, innerRef = () => { }, className, ariaLabel, ariaExpanded = false, ariaControls, id, }) => {
+    return (_jsx(ClickableEl, { type: "button", onClick: onClick, onMouseUp: onMouseUp, onMouseDown: onMouseDown, ref: (r) => innerRef(r), className: className, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, "aria-controls": ariaControls, id: id, children: children }));
+};
+export const CollapsibleToggle = styled(Clickable) `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+export const Icon = styled.div `
+  padding: 0 0.5rem;
+`;
+export const CollapsibleChildWrapper = styled.div ``;
+export const CollapsibleObjectFieldWrapper = ObjectFieldWrapper;
+export const CollapsibleObjectFieldTitle = ObjectFieldTitle;

package/dist/templates/CollapsibleObjectFieldTemplate.d.ts

@@ -0,0 +1,3 @@
+import type { CollapsibleObjectFieldTemplateProps } from "../types";
+import React from "react";
+export declare const CollapsibleObjectFieldTemplate: React.FC<CollapsibleObjectFieldTemplateProps>;

package/dist/templates/CollapsibleObjectFieldTemplate.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState } from "react";
+import { FormRegistry } from "../Form";
+import { getDescription, getTitle } from "../utils";
+import { useExtractUiSchema } from "../hooks";
+import { CollapsibleChildWrapper, CollapsibleToggle, Icon, RequiredIndicator, } from "../styledComponents";
+export const CollapsibleObjectFieldTemplate = (props) => {
+    const { components: { FieldDescription, CollapsibleObjectFieldTitle, CollapsibleObjectFieldWrapper, FieldHelp, InfoFieldButton, }, } = useContext(FormRegistry);
+    const { children, name, uiSchema } = props;
+    const title = getTitle(props);
+    const description = getDescription(props);
+    const { help, info, 
+    //TODO: This is not right
+    props: { wrapper: wrapperProps, title: titleProps, description: descriptionProps, help: helpProps, isCollapsedOnLoad = true, openIcon, collapsedIcon, ariaLabel,
+    // error: errorProps,
+     } = {}, } = useExtractUiSchema(uiSchema);
+    const [collapsed, setCollapsed] = useState(isCollapsedOnLoad);
+    const hide = collapsed;
+    return (_jsxs(CollapsibleObjectFieldWrapper, Object.assign({}, wrapperProps, { children: [title && (_jsx(CollapsibleToggle, { onClick: () => setCollapsed(!collapsed), ariaExpanded: !hide, ariaLabel: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name, children: _jsxs(CollapsibleObjectFieldTitle, Object.assign({ style: { display: "flex", alignItems: "center" } }, titleProps, { children: [title, (props === null || props === void 0 ? void 0 : props.required) && _jsx(RequiredIndicator, { children: "*" }), _jsx(Icon, { children: hide ? collapsedIcon !== null && collapsedIcon !== void 0 ? collapsedIcon : "▸" : openIcon !== null && openIcon !== void 0 ? openIcon : "▾" })] })) })), info && _jsx(InfoFieldButton, Object.assign({}, info)), description && (_jsx(FieldDescription, Object.assign({}, descriptionProps, { children: description }))), !hide && _jsx(CollapsibleChildWrapper, { children: children }), help && _jsx(FieldHelp, Object.assign({}, helpProps, { children: help }))] })));
+};

package/dist/templates/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./ArrayFieldTemplate";
 export * from "./FieldTemplate";
 export * from "./ObjectFieldTemplate";
+export * from "./CollapsibleObjectFieldTemplate";

package/dist/templates/index.js

@@ -1,3 +1,4 @@
 export * from "./ArrayFieldTemplate";
 export * from "./FieldTemplate";
 export * from "./ObjectFieldTemplate";
+export * from "./CollapsibleObjectFieldTemplate";

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import type { JSONSchema7, JSONSchema7Definition } from "json-schema";
-import React from "react";
+import React, { MouseEventHandler } from "react";
 export type FormProps<T> = React.PropsWithChildren<{
     /** If true, disabled prop is passed down to each field on the form */
     disabled?: boolean | undefined;
@@ -51,6 +51,9 @@ export type FormRegistryContextValue = {
     definitions: {
         [key: string]: JSONSchema7Definition;
     } | undefined;
+    uiSchemaDefinitions: {
+        [key: string]: JSONSchema7Definition;
+    } | undefined;
     formContext: Record<string, any>;
     useItemsAsAdditionalItems: boolean;
     hideUnmarkedAdditionalProperties: boolean;
@@ -90,10 +93,18 @@ export type ObjectFieldTemplateProps = {
     required?: boolean;
     children: React.ReactNode;
 };
+export type CollapsibleObjectFieldTemplateProps = {
+    schema: Schema;
+    uiSchema?: UiSchema;
+    required?: boolean;
+    children: React.ReactNode;
+    name?: string;
+};
 export type TemplatesType = {
     FieldTemplate: React.FunctionComponent<FieldTemplateProps>;
     ObjectFieldTemplate: React.FunctionComponent<ObjectFieldTemplateProps>;
     ArrayFieldTemplate: React.FunctionComponent<ArrayFieldTemplateProps>;
+    CollapsibleObjectFieldTemplate: React.FunctionComponent<ObjectFieldTemplateProps>;
 };
 /*** COMPONENTS ***/
 export type ComponentsType = {
@@ -133,6 +144,9 @@ export type ComponentsType = {
     ToggleSwitchField: React.FunctionComponent<any>;
     SearchableMultiTagSelectField: React.FunctionComponent<any>;
     TextAreaInputField: React.FunctionComponent<any>;
+    BooleanFieldWrapper: React.FunctionComponent<any>;
+    CollapsibleObjectFieldWrapper: React.FunctionComponent<any>;
+    CollapsibleObjectFieldTitle: React.FunctionComponent<any>;
 };
 export declare enum ObjectFieldButtonPurpose {
     ADD = 0,
@@ -205,6 +219,18 @@ export type SelectFieldProps = {
     closeElement?: React.ReactNode;
     className?: string;
 };
+export type ClickableProps = {
+    children: React.ReactNode;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    onMouseDown?: MouseEventHandler<HTMLButtonElement>;
+    onMouseUp?: MouseEventHandler<HTMLButtonElement>;
+    innerRef?: (r: HTMLButtonElement | null) => void;
+    className?: string;
+    ariaLabel?: string;
+    ariaExpanded?: boolean;
+    ariaControls?: string;
+    id?: string;
+};
 /*** ***/
 export type AjvError = {
     message: string;

package/dist/utils/__tests/solveReferences.test.js

@@ -1,12 +1,26 @@
 import { solveReferences } from "../solveReferences";
-import { refDefSchema } from "./testSchemas";
+import { refDefSchema, refDefUiSchema } from "./testSchemas";
 describe("solveReferences", () => {
     it("should resolve simple references correctly", () => {
         var _a;
-        const schemaSolvedForReferences = solveReferences((_a = refDefSchema === null || refDefSchema === void 0 ? void 0 : refDefSchema.properties) === null || _a === void 0 ? void 0 : _a.name, refDefSchema.definitions);
+        const schemaSolvedForReferences = solveReferences((_a = refDefSchema === null || refDefSchema === void 0 ? void 0 : refDefSchema.properties) === null || _a === void 0 ? void 0 : _a.name, refDefSchema.definitions, {}, {});
         expect(schemaSolvedForReferences).toEqual({
-            type: "string",
-            title: "Name",
+            schema: {
+                type: "string",
+                title: "Name",
+            },
+            uiSchema: {},
+        });
+    });
+    it("should resolve simple references with uiSchema correctly", () => {
+        var _a;
+        const schemaSolvedForReferences = solveReferences((_a = refDefSchema === null || refDefSchema === void 0 ? void 0 : refDefSchema.properties) === null || _a === void 0 ? void 0 : _a.birthday, refDefSchema.definitions, refDefUiSchema, refDefUiSchema.definitions);
+        expect(schemaSolvedForReferences).toEqual({
+            schema: {
+                type: "string",
+                title: "Birthday",
+            },
+            uiSchema: { "ui:field": "DateField" },
         });
     });
 });

package/dist/utils/__tests/testSchemas.d.ts

@@ -1,4 +1,5 @@
-import { Schema } from "../../types";
+import { Schema, UiSchema } from "../../types";
 export declare const refDefSchema: Schema;
+export declare const refDefUiSchema: UiSchema;
 export declare const simpleConditionalSchema: Schema;
 export declare const schemaWithDependenciesAndOneOf: Schema;

package/dist/utils/__tests/testSchemas.js

@@ -6,9 +6,18 @@ export const refDefSchema = {
         name: {
             $ref: "#/definitions/name",
         },
+        birthday: {
+            $ref: "#/definitions/birthday",
+        },
     },
     definitions: {
         name: { type: "string", title: "Name" },
+        birthday: { type: "string", title: "Birthday" },
+    },
+};
+export const refDefUiSchema = {
+    definitions: {
+        birthday: { "ui:field": "DateField" },
     },
 };
 export const simpleConditionalSchema = {

package/dist/utils/createInitialValues.js

@@ -28,7 +28,7 @@ export function createInitialValues(schema, definitions = {}) {
     return Object.keys(schema === null || schema === void 0 ? void 0 : schema.properties).reduce((acc, key) => {
         var _a;
         const value = (_a = schema === null || schema === void 0 ? void 0 : schema.properties) === null || _a === void 0 ? void 0 : _a[key];
-        const solvedValue = solveReferences(value, schemaDefinitions);
-        return Object.assign(Object.assign({}, acc), { [key]: getValue(solvedValue) });
+        const solvedValue = solveReferences(value, schemaDefinitions, {}, {});
+        return Object.assign(Object.assign({}, acc), { [key]: getValue(solvedValue.schema) });
     }, {});
 }

package/dist/utils/solveReferences.d.ts

@@ -1,2 +1,10 @@
-import { Schema } from "../types";
-export declare function solveReferences(schema: Schema, definitions: any): any;
+import { JSONSchema7, JSONSchema7Definition } from "json-schema";
+import { Schema, UiSchema } from "../types";
+export declare function solveReferences(schema: Schema, definitions: {
+    [key: string]: JSONSchema7Definition;
+} | undefined, uiSchema: UiSchema, uiSchemaDefinitions: {
+    [key: string]: JSONSchema7Definition;
+} | undefined): {
+    schema: JSONSchema7;
+    uiSchema: UiSchema;
+};

package/dist/utils/solveReferences.js

@@ -1,8 +1,11 @@
-export function solveReferences(schema, definitions) {
-    var _a, _b;
-    if (typeof schema === "object" && schema["$ref"]) {
+export function solveReferences(schema, definitions, uiSchema, uiSchemaDefinitions) {
+    var _a, _b, _c;
+    let solvedSchema = schema;
+    let solvedUiSchema = uiSchema;
+    if (typeof schema === "object" && schema["$ref"] && definitions) {
         const schemaKey = (_b = (_a = schema["$ref"]) === null || _a === void 0 ? void 0 : _a.substring(14)) !== null && _b !== void 0 ? _b : "";
-        return definitions[schemaKey];
+        solvedSchema = definitions[schemaKey];
+        solvedUiSchema = (_c = uiSchemaDefinitions === null || uiSchemaDefinitions === void 0 ? void 0 : uiSchemaDefinitions[schemaKey]) !== null && _c !== void 0 ? _c : {};
     }
-    return schema;
+    return { schema: solvedSchema, uiSchema: solvedUiSchema };
 }

package/package.json

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