@nolwenture/formik-jsonschema-form 0.26.8 → 0.27.1

package/README.md

@@ -989,6 +989,25 @@ const uiSchema = {
 };
 ```
 
+Order can be used to group items inside object to sections.
+
+```tsx
+const schema = {
+  properties: {
+    firstField: { type: "string" },
+    secondField: { type: "string" },
+    thirdField: { type: "string" },
+  },
+};
+
+const uiSchema = {
+  "ui:order": [
+    "firstField",
+    {title: "More fields", fields: ["secondField", "thirdField"] collapsible: true}
+  ],
+};
+```
+
 In this example, the resulting order would be ["secondField", "firstField", "thirdField"].
 
 Wildcard `"*"` and `hidden fields` cannot be combined.

package/dist/cjs/Form.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HideSubmitButton = exports.FileUploadForm = exports.proExample = exports.Collapsible = exports.MultipleChoice = exports.WithRefAndDefinitions = exports.WithConditions = exports.WithRequiredInput = exports.WithGeneratedSchema = exports.StylesCustomized = exports.StrictlyTyped = exports.CompleteSchema = exports.WithUiSchema = exports.Simple = void 0;
+exports.GroupedForm = exports.HideSubmitButton = exports.FileUploadForm = exports.proExample = exports.Collapsible = exports.MultipleChoice = exports.WithRefAndDefinitions = exports.WithConditions = exports.WithRequiredInput = exports.WithGeneratedSchema = exports.StylesCustomized = exports.StrictlyTyped = exports.CompleteSchema = exports.WithUiSchema = exports.Simple = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const addon_actions_1 = require("@storybook/addon-actions");
 const styled_components_1 = __importDefault(require("styled-components"));
@@ -15,6 +15,7 @@ const pdfProExampleSchema_1 = require("./sampleData/pdfProExampleSchema");
 const fileUpload_1 = require("./sampleData/fileUpload");
 const FileUploadContext_1 = require("./FileUploadContext");
 const FileUploadField_stories_1 = require("./fields/stories/FileUploadField.stories");
+const groupedData_1 = require("./sampleData/groupedData");
 const MockFileUploadProvider = ({ children, }) => {
     return ((0, jsx_runtime_1.jsx)(FileUploadContext_1.FileUploadContext.Provider, { value: {
             uploadFile: FileUploadField_stories_1.mockUploadFile,
@@ -228,3 +229,9 @@ exports.HideSubmitButton = {
         hideSubmit: true,
     },
 };
+exports.GroupedForm = {
+    args: {
+        schema: groupedData_1.groupedSchema,
+        uiSchema: groupedData_1.groupedUiSchema,
+    },
+};

package/dist/cjs/fields/ObjectField.js

@@ -19,7 +19,7 @@ const useObjectField = (name) => {
     return { value, setValue };
 };
 const ObjectField = (props) => {
-    const { fields: { SchemaField }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate }, components: { ObjectFieldItem, ObjectFieldItemButtons }, hideUnmarkedAdditionalProperties, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    const { fields: { SchemaField }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate, ObjectSectionTemplate, }, components: { ObjectFieldItem, ObjectFieldItemButtons }, hideUnmarkedAdditionalProperties, } = (0, react_1.useContext)(Form_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, schema, uiSchema } = props;
     const { value, setValue } = useObjectField(name);
@@ -41,12 +41,23 @@ const ObjectField = (props) => {
         ? CollapsibleObjectFieldTemplate
         : ObjectFieldTemplate;
     const orderedProperties = (0, utils_1.orderByUiSchema)(uiSchema?.["ui:order"], Object.keys(properties || {}));
-    return ((0, jsx_runtime_1.jsxs)(FieldTemplateComponent, { ...props, "data-fjsf-object": name, children: [(orderedProperties ?? Object.keys(properties || {}))
-                .map((childName) => {
-                const childSchema = properties?.[childName];
-                if (!childSchema)
-                    return undefined;
-                return ((0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema?.[childName] }, childName));
+    return ((0, jsx_runtime_1.jsxs)(FieldTemplateComponent, { ...props, "data-fjsf-object": name, children: [orderedProperties
+                .map((child) => {
+                if (typeof child === "string") {
+                    const childSchema = properties?.[child];
+                    if (!childSchema)
+                        return undefined;
+                    return ((0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema?.[child] }, child));
+                }
+                else {
+                    const { title, fields, collapsible } = child;
+                    return ((0, jsx_runtime_1.jsx)(ObjectSectionTemplate, { title: title, collapsible: collapsible, children: fields.map((child2) => {
+                            const childSchema = properties?.[child2];
+                            if (!childSchema)
+                                return undefined;
+                            return ((0, jsx_runtime_1.jsx)(SchemaField, { name: name ? [name, child2].join(".") : child2, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema?.[child2] }, child2));
+                        }) }, fields.join("_")));
+                }
             })
                 .filter((x) => x), (!hideUnmarkedAdditionalProperties || additionalProperties) &&
                 Object.entries(additionalValues || {}).map(([childName]) => ((0, jsx_runtime_1.jsxs)(ObjectFieldItem, { children: [(0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof schema.additionalProperties !== "boolean"

package/dist/cjs/pdfFields/ObjectField.js

@@ -17,7 +17,7 @@ const useObjectField = (name) => {
     return { value, setValue };
 };
 const ObjectField = (props) => {
-    const { fields: { SchemaField }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate }, } = (0, react_1.useContext)(FormPdf_1.FormPdfRegistry);
+    const { fields: { SchemaField }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate, ObjectSectionTemplate, }, } = (0, react_1.useContext)(FormPdf_1.FormPdfRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, schema, uiSchema } = props;
     const { value, setValue } = useObjectField(name);
@@ -37,12 +37,23 @@ const ObjectField = (props) => {
         ? CollapsibleObjectFieldTemplate
         : ObjectFieldTemplate;
     const orderedProperties = (0, utils_1.orderByUiSchema)(uiSchema?.["ui:order"], Object.keys(properties || {}));
-    return ((0, jsx_runtime_1.jsx)(FieldTemplateComponent, { ...props, children: (orderedProperties ?? Object.keys(properties || {}))
-            .map((childName) => {
-            const childSchema = properties?.[childName];
-            if (!childSchema)
-                return undefined;
-            return ((0, jsx_runtime_1.jsx)(SchemaField, { name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema?.[childName] }, childName));
+    return ((0, jsx_runtime_1.jsx)(FieldTemplateComponent, { ...props, children: orderedProperties
+            .map((child, index) => {
+            if (typeof child === "string") {
+                const childSchema = properties?.[child];
+                if (!childSchema)
+                    return undefined;
+                return ((0, jsx_runtime_1.jsx)(SchemaField, { name: name ? [name, child].join(".") : child, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema?.[child] }, child));
+            }
+            else {
+                const { title, fields } = child;
+                return ((0, jsx_runtime_1.jsx)(ObjectSectionTemplate, { title: title, children: fields.map((child2) => {
+                        const childSchema = properties?.[child2];
+                        if (!childSchema)
+                            return undefined;
+                        return ((0, jsx_runtime_1.jsx)(SchemaField, { name: name ? [name, child2].join(".") : child2, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema?.[child2] }, child2));
+                    }) }, fields.join("_")));
+            }
         })
             .filter((x) => x) }));
 };

package/dist/cjs/pdfTemplates/ObjectSectionTemplate.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjectSectionTemplate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Form_1 = require("../Form");
+const ObjectSectionTemplate = ({ title, children, }) => {
+    const { components: { ObjectFieldSection, ObjectFieldSectionTitle }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    return ((0, jsx_runtime_1.jsxs)(ObjectFieldSection, { children: [(0, jsx_runtime_1.jsx)(ObjectFieldSectionTitle, { children: title }), children] }));
+};
+exports.ObjectSectionTemplate = ObjectSectionTemplate;

package/dist/cjs/pdfTemplates/index.js

@@ -18,3 +18,4 @@ __exportStar(require("./ArrayFieldTemplate"), exports);
 __exportStar(require("./FieldTemplate"), exports);
 __exportStar(require("./ObjectFieldTemplate"), exports);
 __exportStar(require("./CollapsibleObjectFieldTemplate"), exports);
+__exportStar(require("./ObjectSectionTemplate"), exports);

package/dist/cjs/sampleData/groupedData.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.groupedUiSchema = exports.groupedSchema = void 0;
+exports.groupedSchema = {
+    title: "TITLE",
+    required: ["firstName"],
+    properties: {
+        firstName: { type: "string", title: "First name" },
+        lastName: { type: "string", title: "Last name" },
+        age: { type: "number", title: "Age" },
+        hoppy: { type: "string", title: "Hoppy" },
+    },
+};
+exports.groupedUiSchema = {
+    "ui:order": [
+        { title: "Names", fields: ["firstName", "lastName"], collapsible: true },
+        "*",
+        "hoppy",
+    ],
+};

package/dist/cjs/styledComponents.js

@@ -26,8 +26,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioButtonField = exports.ButtonLabelFalse = exports.ButtonLabelTrue = exports.ButtonLabel = exports.RadioButtonFieldInput = exports.RadioButtonFieldElement = exports.RadioButtonFieldContainer = exports.ToggleSwitchField = exports.ToggleFieldInput = exports.ToggleLabel = exports.Toggle = exports.RequiredIndicator = exports.FieldInput = exports.ErrorMessage = exports.InfoFieldButton = exports.InfoFieldLabel = exports.InfoFieldContainerElement = exports.InfoFieldBoxInnerElement = exports.InfoFieldBoxArrowElement = exports.InfoFieldBoxElement = exports.FieldHelp = exports.FieldDescription = exports.FieldTitle = exports.FieldWrapper = exports.ArrayFieldAddButton = exports.ArrayFieldRemoveButton = exports.ArrayFieldDownButton = exports.ArrayFieldUpButton = exports.ArrayFieldLineButton = exports.ArrayFieldButton = exports.ArrayFieldItemButtons = exports.ArrayFieldItem = exports.ArrayFieldList = exports.ArrayFieldTitle = exports.ArrayFieldWrapper = exports.getObjectFieldButton = exports.ObjectFieldAddButton = exports.ObjectFieldRemoveButton = exports.ObjectFieldDownButton = exports.ObjectFieldUpButton = exports.ObjectFieldLineButton = exports.ObjectFieldButton = exports.ObjectFieldItemButtons = exports.ObjectFieldItem = exports.ObjectFieldList = exports.ObjectFieldTitle = exports.ObjectFieldWrapper = exports.FormButton = exports.FormButtonWrapper = exports.Form = void 0;
-exports.FileUploadField = exports.FileUploadFieldContainer = exports.FileInfoText = exports.RemoveButton = exports.FileItemContainer = exports.ProgressText = exports.ProgressBar = exports.ProgressBarContainer = exports.HiddenFileInput = exports.FileUploadButton = exports.MultipleChoiceFieldPdf = exports.BooleanFieldPdf = exports.EJSField = exports.TextAreaPdf = exports.StringFieldPdf = exports.SearchInputContainer = exports.SearchClearButton = exports.SearchInput = exports.SearchNotFound = exports.SearchListExpand = exports.SearchListOption = exports.SearchDropdownContainer = exports.SearchableSelectContainer = exports.CollapsibleObjectFieldTitle = exports.CollapsibleObjectFieldWrapper = exports.CollapsibleChildWrapper = exports.Icon = exports.CollapsibleToggle = exports.Clickable = exports.BooleanFieldWrapper = exports.TextAreaInputField = exports.TextAreaFieldInput = exports.SearchableMultiTagSelectField = exports.MultiSelectOptionListWithoutItem = exports.MultiSelectOptionListItem = exports.MultiSelectOptionList = exports.MultiSelectBadgeCloseElement = exports.MultiSelectBadge = exports.MultiSelectBadgeContainer = exports.MultiSelectInput = exports.MultiSelectSearchContainer = exports.MultiSelectContainer = exports.MultipleChoiceField = exports.MultipleChoiceFieldLabel = exports.MultipleChoiceFieldInput = exports.MultipleChoiceFieldElement = exports.MultipleChoiceFieldContainer = void 0;
+exports.ButtonLabelTrue = exports.ButtonLabel = exports.RadioButtonFieldInput = exports.RadioButtonFieldElement = exports.RadioButtonFieldContainer = exports.ToggleSwitchField = exports.ToggleFieldInput = exports.ToggleLabel = exports.Toggle = exports.RequiredIndicator = exports.FieldInput = exports.ErrorMessage = exports.InfoFieldButton = exports.InfoFieldLabel = exports.InfoFieldContainerElement = exports.InfoFieldBoxInnerElement = exports.InfoFieldBoxArrowElement = exports.InfoFieldBoxElement = exports.FieldHelp = exports.FieldDescription = exports.FieldTitle = exports.FieldWrapper = exports.ArrayFieldAddButton = exports.ArrayFieldRemoveButton = exports.ArrayFieldDownButton = exports.ArrayFieldUpButton = exports.ArrayFieldLineButton = exports.ArrayFieldButton = exports.ArrayFieldItemButtons = exports.ArrayFieldItem = exports.ArrayFieldList = exports.ArrayFieldTitle = exports.ArrayFieldWrapper = exports.ObjectFieldSectionTitle = exports.ObjectFieldSection = exports.getObjectFieldButton = exports.ObjectFieldAddButton = exports.ObjectFieldRemoveButton = exports.ObjectFieldDownButton = exports.ObjectFieldUpButton = exports.ObjectFieldLineButton = exports.ObjectFieldButton = exports.ObjectFieldItemButtons = exports.ObjectFieldItem = exports.ObjectFieldList = exports.ObjectFieldTitle = exports.ObjectFieldWrapper = exports.FormButton = exports.FormButtonWrapper = exports.Form = void 0;
+exports.FileUploadField = exports.FileUploadFieldContainer = exports.FileInfoText = exports.RemoveButton = exports.FileItemContainer = exports.ProgressText = exports.ProgressBar = exports.ProgressBarContainer = exports.HiddenFileInput = exports.FileUploadButton = exports.MultipleChoiceFieldPdf = exports.BooleanFieldPdf = exports.EJSField = exports.TextAreaPdf = exports.StringFieldPdf = exports.SearchInputContainer = exports.SearchClearButton = exports.SearchInput = exports.SearchNotFound = exports.SearchListExpand = exports.SearchListOption = exports.SearchDropdownContainer = exports.SearchableSelectContainer = exports.CollapsibleObjectFieldTitle = exports.CollapsibleObjectFieldWrapper = exports.CollapsibleChildWrapper = exports.Icon = exports.CollapsibleToggle = exports.Clickable = exports.BooleanFieldWrapper = exports.TextAreaInputField = exports.TextAreaFieldInput = exports.SearchableMultiTagSelectField = exports.MultiSelectOptionListWithoutItem = exports.MultiSelectOptionListItem = exports.MultiSelectOptionList = exports.MultiSelectBadgeCloseElement = exports.MultiSelectBadge = exports.MultiSelectBadgeContainer = exports.MultiSelectInput = exports.MultiSelectSearchContainer = exports.MultiSelectContainer = exports.MultipleChoiceField = exports.MultipleChoiceFieldLabel = exports.MultipleChoiceFieldInput = exports.MultipleChoiceFieldElement = exports.MultipleChoiceFieldContainer = exports.RadioButtonField = exports.ButtonLabelFalse = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const formik = __importStar(require("formik"));
 const react_1 = require("react");
@@ -77,6 +77,8 @@ const getObjectFieldButton = ({ purpose, onClick, uiSchema, }) => {
     }
 };
 exports.getObjectFieldButton = getObjectFieldButton;
+exports.ObjectFieldSection = styled_components_1.default.fieldset ``;
+exports.ObjectFieldSectionTitle = styled_components_1.default.legend ``;
 exports.ArrayFieldWrapper = exports.ObjectFieldWrapper;
 exports.ArrayFieldTitle = exports.ObjectFieldTitle;
 exports.ArrayFieldList = exports.ObjectFieldList;

package/dist/cjs/templates/ObjectSectionTemplate.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjectSectionTemplate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Form_1 = require("../Form");
+const ObjectSectionTemplate = ({ title, collapsible, children, }) => {
+    const [collapsed, setCollapsed] = (0, react_1.useState)(collapsible);
+    const { components: { ObjectFieldSection, ObjectFieldSectionTitle }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    return ((0, jsx_runtime_1.jsxs)(ObjectFieldSection, { children: [(0, jsx_runtime_1.jsxs)(ObjectFieldSectionTitle, { onClick: () => {
+                    if (collapsible) {
+                        setCollapsed((currentState) => !currentState);
+                    }
+                }, children: [collapsible && (collapsed ? "▸" : "▾"), title] }), !collapsed && children] }));
+};
+exports.ObjectSectionTemplate = ObjectSectionTemplate;

package/dist/cjs/templates/index.js

@@ -18,3 +18,4 @@ __exportStar(require("./ArrayFieldTemplate"), exports);
 __exportStar(require("./FieldTemplate"), exports);
 __exportStar(require("./ObjectFieldTemplate"), exports);
 __exportStar(require("./CollapsibleObjectFieldTemplate"), exports);
+__exportStar(require("./ObjectSectionTemplate"), exports);

package/dist/cjs/utils/__tests/orderByUiSchema.test.js

@@ -7,11 +7,22 @@ const noAsteriskOrder = ["firstName", "age"];
 const asteriskAsFirstElement = ["*", "firstName"];
 const asteriskAsLastElement = ["age", "*"];
 const asteriskAsMiddleElement = ["hobbies", "*", "age"];
-const orderWithDuplicates = ["age", "*", "age", "*", "lastName"];
+const orderWithDuplicates = [
+    "age",
+    "*",
+    "age",
+    "*",
+    "lastName",
+];
+const orderWithGroups = [
+    { title: "names", fields: ["firstName", "lastName"] },
+    "*",
+    "hobbies",
+];
 describe("orderByUiSchema", () => {
-    it("returns empty array when ui:order is not given", () => {
+    it("returns allProperties when ui:order is not given", () => {
         const orderedProperties = (0, orderByUiSchema_1.orderByUiSchema)(emptyOrder, allProperties);
-        expect(orderedProperties).toEqual(undefined);
+        expect(orderedProperties).toEqual(allProperties);
     });
     it("returns only given properties when order includes no asterisk", () => {
         const orderedProperties = (0, orderByUiSchema_1.orderByUiSchema)(noAsteriskOrder, allProperties);
@@ -62,4 +73,12 @@ describe("orderByUiSchema", () => {
             "lastName",
         ]);
     });
+    it("solves groups properly", () => {
+        const orderedProperties = (0, orderByUiSchema_1.orderByUiSchema)(orderWithGroups, allProperties);
+        expect(orderedProperties).toMatchObject([
+            { title: "names", fields: ["firstName", "lastName"] },
+            "age",
+            "hobbies",
+        ]);
+    });
 });

package/dist/cjs/utils/orderByUiSchema.js

@@ -10,14 +10,15 @@ function orderByUiSchema(order, allProperties) {
             return order;
         }
     }
-    return undefined;
+    return allProperties;
 }
 function orderWithAsterisk(order, allProperties) {
     const orderWithoutDuplicates = [...new Set(order)];
+    const fieldsInOrder = orderWithoutDuplicates.flatMap((entry) => typeof entry === "string" ? entry : entry.fields);
     const finalOrderedArray = [];
     orderWithoutDuplicates.forEach((element) => {
         if (element === "*") {
-            const propertiesWithoutOrder = allProperties.filter((prop) => !orderWithoutDuplicates.includes(prop));
+            const propertiesWithoutOrder = allProperties.filter((prop) => !fieldsInOrder.includes(prop));
             finalOrderedArray.push(...propertiesWithoutOrder);
         }
         else {

package/dist/esm/Form.stories.js

@@ -9,6 +9,7 @@ import { pdfProExampleSchema, pdfProExampleUiSchema, } from "./sampleData/pdfPro
 import { fileUploadSchema, fileUploadUiSchema } from "./sampleData/fileUpload";
 import { FileUploadContext } from "./FileUploadContext";
 import { mockFetchFile, mockRemoveFile, mockUploadFile, } from "./fields/stories/FileUploadField.stories";
+import { groupedSchema, groupedUiSchema } from "./sampleData/groupedData";
 const MockFileUploadProvider = ({ children, }) => {
     return (_jsx(FileUploadContext.Provider, { value: {
             uploadFile: mockUploadFile,
@@ -220,3 +221,9 @@ export const HideSubmitButton = {
         hideSubmit: true,
     },
 };
+export const GroupedForm = {
+    args: {
+        schema: groupedSchema,
+        uiSchema: groupedUiSchema,
+    },
+};

package/dist/esm/fields/ObjectField.js

@@ -16,7 +16,7 @@ const useObjectField = (name) => {
     return { value, setValue };
 };
 export const ObjectField = (props) => {
-    const { fields: { SchemaField }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate }, components: { ObjectFieldItem, ObjectFieldItemButtons }, hideUnmarkedAdditionalProperties, } = useContext(FormRegistry);
+    const { fields: { SchemaField }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate, ObjectSectionTemplate, }, components: { ObjectFieldItem, ObjectFieldItemButtons }, hideUnmarkedAdditionalProperties, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, schema, uiSchema } = props;
     const { value, setValue } = useObjectField(name);
@@ -38,12 +38,23 @@ export const ObjectField = (props) => {
         ? CollapsibleObjectFieldTemplate
         : ObjectFieldTemplate;
     const orderedProperties = orderByUiSchema(uiSchema?.["ui:order"], Object.keys(properties || {}));
-    return (_jsxs(FieldTemplateComponent, { ...props, "data-fjsf-object": name, children: [(orderedProperties ?? Object.keys(properties || {}))
-                .map((childName) => {
-                const childSchema = properties?.[childName];
-                if (!childSchema)
-                    return undefined;
-                return (_jsx(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema?.[childName] }, childName));
+    return (_jsxs(FieldTemplateComponent, { ...props, "data-fjsf-object": name, children: [orderedProperties
+                .map((child) => {
+                if (typeof child === "string") {
+                    const childSchema = properties?.[child];
+                    if (!childSchema)
+                        return undefined;
+                    return (_jsx(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema?.[child] }, child));
+                }
+                else {
+                    const { title, fields, collapsible } = child;
+                    return (_jsx(ObjectSectionTemplate, { title: title, collapsible: collapsible, children: fields.map((child2) => {
+                            const childSchema = properties?.[child2];
+                            if (!childSchema)
+                                return undefined;
+                            return (_jsx(SchemaField, { name: name ? [name, child2].join(".") : child2, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema?.[child2] }, child2));
+                        }) }, fields.join("_")));
+                }
             })
                 .filter((x) => x), (!hideUnmarkedAdditionalProperties || additionalProperties) &&
                 Object.entries(additionalValues || {}).map(([childName]) => (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof schema.additionalProperties !== "boolean"

package/dist/esm/pdfFields/ObjectField.js

@@ -14,7 +14,7 @@ const useObjectField = (name) => {
     return { value, setValue };
 };
 export const ObjectField = (props) => {
-    const { fields: { SchemaField }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate }, } = useContext(FormPdfRegistry);
+    const { fields: { SchemaField }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate, ObjectSectionTemplate, }, } = useContext(FormPdfRegistry);
     useSetDefault(props);
     const { name, schema, uiSchema } = props;
     const { value, setValue } = useObjectField(name);
@@ -34,12 +34,23 @@ export const ObjectField = (props) => {
         ? CollapsibleObjectFieldTemplate
         : ObjectFieldTemplate;
     const orderedProperties = orderByUiSchema(uiSchema?.["ui:order"], Object.keys(properties || {}));
-    return (_jsx(FieldTemplateComponent, { ...props, children: (orderedProperties ?? Object.keys(properties || {}))
-            .map((childName) => {
-            const childSchema = properties?.[childName];
-            if (!childSchema)
-                return undefined;
-            return (_jsx(SchemaField, { name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema?.[childName] }, childName));
+    return (_jsx(FieldTemplateComponent, { ...props, children: orderedProperties
+            .map((child, index) => {
+            if (typeof child === "string") {
+                const childSchema = properties?.[child];
+                if (!childSchema)
+                    return undefined;
+                return (_jsx(SchemaField, { name: name ? [name, child].join(".") : child, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema?.[child] }, child));
+            }
+            else {
+                const { title, fields } = child;
+                return (_jsx(ObjectSectionTemplate, { title: title, children: fields.map((child2) => {
+                        const childSchema = properties?.[child2];
+                        if (!childSchema)
+                            return undefined;
+                        return (_jsx(SchemaField, { name: name ? [name, child2].join(".") : child2, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema?.[child2] }, child2));
+                    }) }, fields.join("_")));
+            }
         })
             .filter((x) => x) }));
 };

package/dist/esm/pdfTemplates/ObjectSectionTemplate.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { FormRegistry } from "../Form";
+export const ObjectSectionTemplate = ({ title, children, }) => {
+    const { components: { ObjectFieldSection, ObjectFieldSectionTitle }, } = useContext(FormRegistry);
+    return (_jsxs(ObjectFieldSection, { children: [_jsx(ObjectFieldSectionTitle, { children: title }), children] }));
+};

package/dist/esm/pdfTemplates/index.js

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

package/dist/esm/sampleData/groupedData.js

@@ -0,0 +1,17 @@
+export const groupedSchema = {
+    title: "TITLE",
+    required: ["firstName"],
+    properties: {
+        firstName: { type: "string", title: "First name" },
+        lastName: { type: "string", title: "Last name" },
+        age: { type: "number", title: "Age" },
+        hoppy: { type: "string", title: "Hoppy" },
+    },
+};
+export const groupedUiSchema = {
+    "ui:order": [
+        { title: "Names", fields: ["firstName", "lastName"], collapsible: true },
+        "*",
+        "hoppy",
+    ],
+};

package/dist/esm/styledComponents.js

@@ -46,6 +46,8 @@ export const getObjectFieldButton = ({ purpose, onClick, uiSchema, }) => {
             return (_jsx(ObjectFieldButton, { ...(uiSchema?.["ui:customButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:customButtonOptions"]?.content ?? "" }));
     }
 };
+export const ObjectFieldSection = styled.fieldset ``;
+export const ObjectFieldSectionTitle = styled.legend ``;
 export const ArrayFieldWrapper = ObjectFieldWrapper;
 export const ArrayFieldTitle = ObjectFieldTitle;
 export const ArrayFieldList = ObjectFieldList;

package/dist/esm/templates/ObjectSectionTemplate.js

@@ -0,0 +1,12 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState } from "react";
+import { FormRegistry } from "../Form";
+export const ObjectSectionTemplate = ({ title, collapsible, children, }) => {
+    const [collapsed, setCollapsed] = useState(collapsible);
+    const { components: { ObjectFieldSection, ObjectFieldSectionTitle }, } = useContext(FormRegistry);
+    return (_jsxs(ObjectFieldSection, { children: [_jsxs(ObjectFieldSectionTitle, { onClick: () => {
+                    if (collapsible) {
+                        setCollapsed((currentState) => !currentState);
+                    }
+                }, children: [collapsible && (collapsed ? "▸" : "▾"), title] }), !collapsed && children] }));
+};

package/dist/esm/templates/index.js

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

package/dist/esm/utils/__tests/orderByUiSchema.test.js

@@ -5,11 +5,22 @@ const noAsteriskOrder = ["firstName", "age"];
 const asteriskAsFirstElement = ["*", "firstName"];
 const asteriskAsLastElement = ["age", "*"];
 const asteriskAsMiddleElement = ["hobbies", "*", "age"];
-const orderWithDuplicates = ["age", "*", "age", "*", "lastName"];
+const orderWithDuplicates = [
+    "age",
+    "*",
+    "age",
+    "*",
+    "lastName",
+];
+const orderWithGroups = [
+    { title: "names", fields: ["firstName", "lastName"] },
+    "*",
+    "hobbies",
+];
 describe("orderByUiSchema", () => {
-    it("returns empty array when ui:order is not given", () => {
+    it("returns allProperties when ui:order is not given", () => {
         const orderedProperties = orderByUiSchema(emptyOrder, allProperties);
-        expect(orderedProperties).toEqual(undefined);
+        expect(orderedProperties).toEqual(allProperties);
     });
     it("returns only given properties when order includes no asterisk", () => {
         const orderedProperties = orderByUiSchema(noAsteriskOrder, allProperties);
@@ -60,4 +71,12 @@ describe("orderByUiSchema", () => {
             "lastName",
         ]);
     });
+    it("solves groups properly", () => {
+        const orderedProperties = orderByUiSchema(orderWithGroups, allProperties);
+        expect(orderedProperties).toMatchObject([
+            { title: "names", fields: ["firstName", "lastName"] },
+            "age",
+            "hobbies",
+        ]);
+    });
 });

package/dist/esm/utils/orderByUiSchema.js

@@ -7,14 +7,15 @@ export function orderByUiSchema(order, allProperties) {
             return order;
         }
     }
-    return undefined;
+    return allProperties;
 }
 function orderWithAsterisk(order, allProperties) {
     const orderWithoutDuplicates = [...new Set(order)];
+    const fieldsInOrder = orderWithoutDuplicates.flatMap((entry) => typeof entry === "string" ? entry : entry.fields);
     const finalOrderedArray = [];
     orderWithoutDuplicates.forEach((element) => {
         if (element === "*") {
-            const propertiesWithoutOrder = allProperties.filter((prop) => !orderWithoutDuplicates.includes(prop));
+            const propertiesWithoutOrder = allProperties.filter((prop) => !fieldsInOrder.includes(prop));
             finalOrderedArray.push(...propertiesWithoutOrder);
         }
         else {

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

@@ -17,3 +17,4 @@ export declare const Collapsible: Story;
 export declare const proExample: Story;
 export declare const FileUploadForm: Story;
 export declare const HideSubmitButton: Story;
+export declare const GroupedForm: Story;

package/dist/types/pdfTemplates/ObjectSectionTemplate.d.ts

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

package/dist/types/pdfTemplates/index.d.ts

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

package/dist/types/sampleData/groupedData.d.ts

@@ -0,0 +1,7 @@
+import type { Schema, UiSchema } from "../types";
+export type SimpleFormDataType = {
+    firstName: string;
+    lastName: string;
+};
+export declare const groupedSchema: Schema;
+export declare const groupedUiSchema: UiSchema;

package/dist/types/styledComponents.d.ts

@@ -28,6 +28,8 @@ export declare const ObjectFieldAddButton: import("styled-components/dist/types"
     ref?: ((instance: HTMLAnchorElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLAnchorElement> | null | undefined;
 }, never>> & string;
 export declare const getObjectFieldButton: ({ purpose, onClick, uiSchema, }: ObjectFieldButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ObjectFieldSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
+export declare const ObjectFieldSectionTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>> & string;
 export declare const ArrayFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
 export declare const ArrayFieldTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>> & string;
 export declare const ArrayFieldList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;

package/dist/types/templates/ObjectSectionTemplate.d.ts

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

package/dist/types/templates/index.d.ts

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

package/dist/types/types.d.ts

@@ -45,6 +45,11 @@ export type UiSchema = {
             [key: string]: any;
         };
     };
+    "ui:order"?: (string | {
+        title: string;
+        fields: string[];
+        collapsible?: boolean;
+    })[];
     [name: string]: any;
 };
 export type FormRegistryContextValue = {
@@ -107,11 +112,17 @@ export type CollapsibleObjectFieldTemplateProps = {
     children: React.ReactNode;
     name?: string;
 };
+export type ObjectSectionTemplateProps = {
+    title: string;
+    collapsible?: boolean;
+    children: React.ReactNode;
+};
 export type TemplatesType = {
     FieldTemplate: React.FunctionComponent<FieldTemplateProps>;
     ObjectFieldTemplate: React.FunctionComponent<ObjectFieldTemplateProps>;
     ArrayFieldTemplate: React.FunctionComponent<ArrayFieldTemplateProps>;
     CollapsibleObjectFieldTemplate: React.FunctionComponent<ObjectFieldTemplateProps>;
+    ObjectSectionTemplate: React.FunctionComponent<ObjectSectionTemplateProps>;
 };
 /*** COMPONENTS ***/
 export type ComponentsType = {
@@ -128,6 +139,8 @@ export type ComponentsType = {
     ObjectFieldRemoveButton: React.FunctionComponent<any>;
     ObjectFieldUpButton: React.FunctionComponent<any>;
     ObjectFieldDownButton: React.FunctionComponent<any>;
+    ObjectFieldSection: React.FunctionComponent<any>;
+    ObjectFieldSectionTitle: React.FunctionComponent<any>;
     ArrayFieldWrapper: React.FunctionComponent<any>;
     ArrayFieldTitle: React.FunctionComponent<any>;
     ArrayFieldItem: React.FunctionComponent<any>;

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

@@ -1 +1,6 @@
-export declare function orderByUiSchema(order: string[] | undefined, allProperties: string[]): string[] | undefined;
+import { UiSchema } from "../types";
+export declare function orderByUiSchema(order: UiSchema["ui:order"], allProperties: string[]): (string | {
+    title: string;
+    fields: string[];
+    collapsible?: boolean;
+})[];

package/package.json

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