@nolwenture/formik-jsonschema-form 0.10.1 → 0.12.0

package/README.md

@@ -365,6 +365,10 @@ export function MyFormComponent() {
 Enum fields are fields with multiple options to either choose `oneOf` or `anyOf` from.
 There is an alternative field implementation for "anyOf" that when given `"ui:field": "SearchMultiTagSelectField"` results in a searchable multi tag select field.
 
+The type of the field holding the enum is defined by its return value. `oneOf` enums will only return a single value and therefore, the type of the returned value is used as the field type (in the following example, "number" is the correct field type).
+
+`anyOf`enums will return the value(s) inside an array, even if only one option was selected. Therefore, the correct field type for the field holding the `anyOf`-enum is "array".
+
 ```tsx
 const schema = {
   properties: {
@@ -384,7 +388,7 @@ const schema = {
       ],
     },
     enumAnyOf: {
-      type: "number",
+      type: "array",
       title: "Enum anyOf (non-standard)",
       anyOf: [
         { const: 1, title: "one" },
@@ -394,7 +398,7 @@ const schema = {
       ],
     },
     enumTagSelectAnyOf: {
-      type: "string",
+      type: "array",
       title: "Enum searchable tag select anyOf",
       anyOf: [
         { const: 1, title: "one" },
@@ -420,7 +424,7 @@ const uiSchema = {
 ### Alternative fields
 
 There are alternative fields available for certain types.
-For `type: "string"` there is `DateField`, `MultipleChoiceField` and `TextAreaField`.
+For `type: "string"` there is `DateField`, `TextAreaField` and partly `MultipleChoiceField`.
 
 `DateField` has a "dd.mm.yyyy" date input field and a calendar date picker and will save the date input as "yyyy-mm-dd" string.
 
@@ -436,7 +440,28 @@ const uiSchema = {
 };
 ```
 
-`MultipleChoiceField` takes an array of `oneOf` or `anyOf`. The choices provided inside an `oneOf`array will be presented on the UI as Radio button selectables and only one of the given values can be selected. The choices provided inside an `anyOf` array will be presented on the UI as Checkbox selectables and multiple values can be selected.
+`TextAreaField` gives more space for a longer string input.
+
+```tsx
+const schema = {
+  properties: {
+    story: { type: "string", title: "A short story" },
+  },
+};
+
+const uiSchema = {
+  story: { "ui:field": "TextAreaField" },
+};
+```
+
+`MultipleChoiceField` takes an array of `oneOf` or `anyOf`.
+If you are creating a schema using `oneOf`, the type of the field is the value returned by the chosen enum option (e.g. "string" or "number").
+If you are creating a schema using `anyOf`, the type of the field is "array", since the returned value will be in an array format, even if only one option is selected.
+
+The choices provided inside an `oneOf`array will be presented on the UI as Radio button selectables and only one of the given values can be selected.
+
+The choices provided inside an `anyOf` array will be presented on the UI as Checkbox selectables and multiple values can be selected.
+
 `MultipleChoiceField` comes with a small number of predefined styles, which are `inline`, `oneColumn`, `twoColumns` and `threeColumns`. When no style is given, the choice options are listed in a row under the title.
 
 ```tsx
@@ -452,6 +477,19 @@ const schema = {
         { const: "nope", title: "Please don't even ask..." },
       ],
     },
+    food: {
+      type: "array",
+      title: "What would you like to eat today? (style: oneColumn)",
+      anyOf: [
+        { const: "breakfast", title: "Breakfast" },
+        { const: "secondBreakfast", title: "What about second breakfast?" },
+        { const: "elevenses", title: "Elevenses" },
+        { const: "luncheon", title: "Luncheon" },
+        { const: "afternoonTea", title: "Afternoon tea" },
+        { const: "dinner", title: "Dinner" },
+        { const: "supper", title: "Supper" },
+      ],
+    },
   },
 };
 
@@ -462,21 +500,13 @@ const uiSchema = {
       style: "twoColumns",
     },
   },
-};
-```
-
-`TextAreaField` gives more space for a longer string input.
-
-```tsx
-const schema = {
-  properties: {
-    story: { type: "string", title: "A short story" },
+  food: {
+    "ui:field": "MultipleChoiceField",
+    "ui:options": {
+      style: "oneColumn",
+    },
   },
 };
-
-const uiSchema = {
-  story: { "ui:field": "TextAreaField" },
-};
 ```
 
 For `type: "boolean"` there is `RadioField` and `ToggleField`.
@@ -518,12 +548,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 +649,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 +740,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",
+    },
+    birthDate: {
+      $ref: "#/definitions/birthDate",
     },
-    age: {
-      $ref: "#/definitions/age",
+    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/ArrayField.js

@@ -4,7 +4,9 @@ import { useField } from "formik";
 import { FormRegistry } from "../Form";
 import { ArrayFieldButtonPurpose } from "../types";
 import { useExtractUiSchema, useSetDefault } from "../hooks";
-import { GetArrayFieldButton } from "../styledComponents";
+import { FieldInput, GetArrayFieldButton } from "../styledComponents";
+import { FieldTemplate } from "../templates";
+import { getEnums } from "../utils";
 const appendArray = (values) => {
     return values ? [...values, ""] : [""];
 };
@@ -33,6 +35,7 @@ export const ArrayField = (props) => {
     const { fields: { SchemaField }, templates: { ArrayFieldTemplate }, components: { ArrayFieldItem, ArrayFieldList, ArrayFieldItemButtons }, useItemsAsAdditionalItems, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, schema, uiSchema } = props;
+    const { type, props: inputProps } = useExtractUiSchema(uiSchema);
     const [{ value }, _, { setValue }] = useField(name);
     const { items, additionalItems, } = useMemo(() => {
         let items = schema.items && typeof schema.items !== "boolean" ? schema.items : [];
@@ -51,6 +54,7 @@ export const ArrayField = (props) => {
                     : undefined,
             };
     }, [schema]);
+    const enums = useMemo(() => getEnums(props), [props]);
     //This whole mess would give backwards compatibility, but maybe we don't do it
     // const {
     //   items,
@@ -91,10 +95,10 @@ export const ArrayField = (props) => {
     //         },
     //   [schema]
     // );
-    // Bacwards compatibility ends
+    // Backwards compatibility ends
     const { disabled } = useExtractUiSchema(uiSchema);
     const valueArray = Array.isArray(value) ? value : undefined;
-    return (_jsxs(ArrayFieldTemplate, Object.assign({}, props, { children: [_jsxs(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => (_jsx(ArrayFieldItem, { children: _jsx(SchemaField, { name: `${name}[${index}]`, schema: typeof itemSchema !== "boolean" ? itemSchema : {}, uiSchema: (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items), forceDefaultValue: true }) }, index))), ((valueArray === null || valueArray === void 0 ? void 0 : valueArray.slice(items.length)) || []).map((_, index) => (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, { name: `${name}[${index + items.length}]`, schema: additionalItems && typeof additionalItems !== "boolean"
+    return schema.anyOf !== undefined ? (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(FieldInput, Object.assign({ type }, inputProps, { name: name, formikAs: "select", multiple: (enums === null || enums === void 0 ? void 0 : enums.type) === "multiSelect", children: enums === null || enums === void 0 ? void 0 : enums.values.map((option, index) => (_jsx("option", { value: option.const, children: option.title }, index))) })) }))) : (_jsxs(ArrayFieldTemplate, Object.assign({}, props, { children: [_jsxs(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => (_jsx(ArrayFieldItem, { children: _jsx(SchemaField, { name: `${name}[${index}]`, schema: typeof itemSchema !== "boolean" ? itemSchema : {}, uiSchema: (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items), forceDefaultValue: true }) }, index))), ((valueArray === null || valueArray === void 0 ? void 0 : valueArray.slice(items.length)) || []).map((_, index) => (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, { name: `${name}[${index + items.length}]`, schema: additionalItems && typeof additionalItems !== "boolean"
                                     ? additionalItems
                                     : {}, uiSchema: Object.assign({ disabled }, ((uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index + items.length]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items))) }), _jsxs(ArrayFieldItemButtons, { children: [GetArrayFieldButton({
                                         purpose: ArrayFieldButtonPurpose.REMOVE,

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/StringField.js

@@ -12,9 +12,8 @@ export const StringField = (props) => {
     const enums = useMemo(() => getEnums(props), [props]);
     switch (enums === null || enums === void 0 ? void 0 : enums.type) {
         case "select":
-        case "multiSelect":
-            return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(FieldInput, Object.assign({ type }, inputProps, { name: name, formikAs: "select", multiple: enums.type === "multiSelect", children: [enums.type !== "multiSelect" && (_jsx("option", Object.assign({ value: "", disabled: true,
-                            hidden: true }, (_a = uiSchema["ui:placeholderOptionOptions"]) === null || _a === void 0 ? void 0 : _a.props, { children: placeholder }))), enums === null || enums === void 0 ? void 0 : enums.values.map((option, index) => (_jsx("option", { value: option.const, children: option.title }, index)))] })) })));
+            return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(FieldInput, Object.assign({ type }, inputProps, { name: name, formikAs: "select", children: [_jsx("option", Object.assign({ value: "", disabled: true,
+                            hidden: true }, (_a = uiSchema["ui:placeholderOptionOptions"]) === null || _a === void 0 ? void 0 : _a.props, { children: placeholder })), enums === null || enums === void 0 ? void 0 : enums.values.map((option, index) => (_jsx("option", { value: option.const, children: option.title }, index)))] })) })));
         default:
             return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(FieldInput, Object.assign({ type,
                     placeholder }, inputProps, { name: name })) })));

package/dist/fields/stories/ArrayField.stories.d.ts

@@ -5,3 +5,4 @@ export default _default;
 export declare const BasicArray: StoryObj<typeof ArrayField>;
 export declare const EnumArray: StoryObj<typeof ArrayField>;
 export declare const ObjectArray: StoryObj<typeof ArrayField>;
+export declare const AnyOfArray: StoryObj<typeof ArrayField>;

package/dist/fields/stories/ArrayField.stories.js

@@ -189,3 +189,36 @@ export const ObjectArray = {
         expect(allLabelsAfterRemove.length).toEqual(0);
     }),
 };
+export const AnyOfArray = {
+    args: {
+        name: "anyOf Select",
+        schema: {
+            type: "array",
+            title: "Array with anyOf-enum",
+            description: "Array description",
+            anyOf: [
+                { const: 1, title: "one" },
+                { const: 2, title: "two" },
+                { const: 3, title: "three" },
+                { const: 4, title: "four" },
+            ],
+        },
+        uiSchema: {},
+    },
+    play: (_d) => __awaiter(void 0, [_d], void 0, function* ({ canvasElement }) {
+        const anyOfSelectField = canvasElement.querySelector('select[name="anyOf Select"]');
+        const optionOne = canvasElement.querySelector('option[value="1"]');
+        const optionTwo = canvasElement.querySelector('option[value="2"]');
+        const optionThree = canvasElement.querySelector('option[value="3"]');
+        const optionFour = canvasElement.querySelector('option[value="4"]');
+        expect(anyOfSelectField).toBeInTheDocument();
+        expect(optionOne).toBeInTheDocument();
+        expect(optionTwo).toBeInTheDocument();
+        expect(optionThree).toBeInTheDocument();
+        expect(optionFour).toBeInTheDocument();
+        yield userEvent.selectOptions(anyOfSelectField, optionOne);
+        yield userEvent.selectOptions(anyOfSelectField, optionThree);
+        yield userEvent.click(optionThree);
+        yield expect(anyOfSelectField).toHaveValue(["1", "3"]);
+    }),
+};

package/dist/fields/stories/MultipleChoiceField.stories.d.ts

@@ -0,0 +1,6 @@
+import { StoryObj } from "@storybook/react";
+import { MultipleChoiceField } from "../MultipleChoiceField";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("../../types").FieldProps>;
+export default _default;
+export declare const OneOf: StoryObj<typeof MultipleChoiceField>;
+export declare const AnyOf: StoryObj<typeof MultipleChoiceField>;

package/dist/fields/stories/MultipleChoiceField.stories.js

@@ -0,0 +1,86 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { userEvent, expect } from "@storybook/test";
+import { Formik, Form } from "formik";
+import { MultipleChoiceField } from "../MultipleChoiceField";
+export default {
+    title: "Fields/MultipleChoiceField",
+    component: MultipleChoiceField,
+    decorators: [
+        (Story) => (_jsx(Formik, { initialValues: { choicesAnyOf: [], choicesOneOf: "" }, onSubmit: (values) => console.log(values), children: _jsx(Form, { children: Story() }) })),
+    ],
+};
+export const OneOf = {
+    args: {
+        name: "choicesOneOf",
+        schema: {
+            type: "string",
+            oneOf: [
+                { const: "sunny", title: "Sunny" },
+                { const: "cloudy", title: "Cloudy" },
+                { const: "rainy", title: "Rainy" },
+                { const: "windy", title: "Windy" },
+            ],
+        },
+        uiSchema: {
+            "ui:field": "MultipleChoiceField",
+        },
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const optionSunny = canvasElement.querySelector('input[type="radio"][name="choicesOneOf"][value="sunny"]');
+        const optionCloudy = canvasElement.querySelector('input[type="radio"][name="choicesOneOf"][value="cloudy"]');
+        const optionRainy = canvasElement.querySelector('input[type="radio"][name="choicesOneOf"][value="rainy"]');
+        const optionWindy = canvasElement.querySelector('input[type="radio"][name="choicesOneOf"][value="windy"]');
+        yield userEvent.click(optionSunny);
+        yield expect(optionSunny).toBeChecked();
+        yield expect(optionCloudy).not.toBeChecked();
+        yield expect(optionRainy).not.toBeChecked();
+        yield expect(optionWindy).not.toBeChecked();
+        yield userEvent.click(optionCloudy);
+        yield expect(optionCloudy).toBeChecked();
+        yield expect(optionSunny).not.toBeChecked();
+        yield expect(optionRainy).not.toBeChecked();
+        yield expect(optionWindy).not.toBeChecked();
+    }),
+};
+export const AnyOf = {
+    args: {
+        name: "choicesAnyOf",
+        schema: {
+            type: "array",
+            anyOf: [
+                { const: "lily", title: "Lily" },
+                { const: "rose", title: "Rose" },
+                { const: "iris", title: "Iris" },
+                { const: "daisy", title: "Daisy" },
+            ],
+        },
+        uiSchema: {
+            "ui:field": "MultipleChoiceField",
+        },
+    },
+    play: (_b) => __awaiter(void 0, [_b], void 0, function* ({ canvasElement }) {
+        const optionLily = canvasElement.querySelector('input[type="checkbox"][name="choicesAnyOf"][value="lily"]');
+        const optionRose = canvasElement.querySelector('input[type="checkbox"][name="choicesAnyOf"][value="rose"]');
+        const optionIris = canvasElement.querySelector('input[type="checkbox"][name="choicesAnyOf"][value="iris"]');
+        const optionDaisy = canvasElement.querySelector('input[type="checkbox"][name="choicesAnyOf"][value="daisy"]');
+        yield userEvent.click(optionIris);
+        yield expect(optionIris).toBeChecked();
+        yield expect(optionRose).not.toBeChecked();
+        yield expect(optionLily).not.toBeChecked();
+        yield expect(optionDaisy).not.toBeChecked();
+        yield userEvent.click(optionRose);
+        yield expect(optionIris).toBeChecked();
+        yield expect(optionRose).toBeChecked();
+        yield expect(optionLily).not.toBeChecked();
+        yield expect(optionDaisy).not.toBeChecked();
+    }),
+};

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/fields/stories/SearchMultiTagSelectField.stories.js

@@ -22,7 +22,7 @@ export const Default = {
     args: {
         name: "tags",
         schema: {
-            type: "string",
+            type: "array",
             title: "Enum searchable tag select anyOf",
             anyOf: [
                 { const: "1", title: "First tag" },

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/completeSchema.js

@@ -44,7 +44,7 @@ export const completeSchema = {
             ],
         },
         enumAnyOf: {
-            type: "number",
+            type: "array",
             title: "Enum anyOf (non-standard)",
             description: "Enum anyOf description",
             anyOf: [
@@ -55,7 +55,7 @@ export const completeSchema = {
             ],
         },
         enumTagSelectAnyOf: {
-            type: "string",
+            type: "array",
             title: "Enum searchable tag select anyOf",
             description: "Enum searchable tag select anyOf description",
             anyOf: [

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/multipleChoiceSchema.js

@@ -23,7 +23,7 @@ export const multipleChoiceSchema = {
             ],
         },
         food: {
-            type: "string",
+            type: "array",
             title: "What would you like to eat today? (style: oneColumn)",
             anyOf: [
                 { const: "breakfast", title: "Breakfast" },
@@ -36,7 +36,7 @@ export const multipleChoiceSchema = {
             ],
         },
         drinks: {
-            type: "string",
+            type: "array",
             title: "What would you like to drink today? (style: twoColumns)",
             anyOf: [
                 { const: "water", title: "Water" },
@@ -53,7 +53,7 @@ export const multipleChoiceSchema = {
             ],
         },
         flowers: {
-            type: "string",
+            type: "array",
             title: "Pick some flowers (style: threeColumns)",
             anyOf: [
                 { const: "lily", title: "Lily" },

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

@@ -362,7 +362,7 @@ export const SearchableMultiTagSelectField = ({ name, placeholder, enums, emptyS
     };
     return (_jsx(formik.Field, { className: className, name: name, multiple: true, children: ({ field, form: { setFieldValue }, meta, }) => {
             var _a;
-            return (_jsxs(MultiSelectContainer, { className: className, children: [_jsx(FieldInput, Object.assign({ type: "hidden" }, field)), _jsx(MultiSelectInput, { className: className, type: "text", onChange: (e) => {
+            return (_jsxs(MultiSelectContainer, { className: className, children: [_jsx(FieldInput, Object.assign({ id: className, type: "hidden" }, field)), _jsx(MultiSelectInput, { id: className + "_id", className: className, type: "text", onChange: (e) => {
                             setSearch(e.currentTarget.value);
                         }, placeholder: placeholder, value: search }), _jsx(MultiSelectBadgeContainer, { children: ((_a = field.value) !== null && _a !== void 0 ? _a : []).map((value) => {
                             var _a;
@@ -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.12.0",
   "description": "Formik form generation from json schema",
   "author": "Antti Vikman <antti.vikman@nolwenture.com>",
   "contributors": [