@nolwenture/formik-jsonschema-form 0.13.0 → 0.15.0

package/README.md

@@ -866,7 +866,7 @@ const refDefUiSchema: UiSchema = {
 ### Ordering fields
 
 The order of fields can be set using `"ui:order": ["fieldName"]` inside the uiSchema.
-If using "ui:order", all fields that should be visible in the form need to be included in the given array.
+If using `"ui:order"`, all fields that should be visible in the form need to be included in the given array. Fields excluded will not show on the form, in the following they will be referred to as `"hidden fields"`.
 
 ```tsx
 const schema = {
@@ -882,6 +882,42 @@ const uiSchema = {
 };
 ```
 
+Fields excluded will not show on the form. So in the following example "thirdField" will be a `hidden field`.
+
+```tsx
+const schema = {
+  properties: {
+    secondField: { type: "string" },
+    firstField: { type: "string" },
+    thirdField: { type: "string" },
+  },
+};
+
+const uiSchema = {
+  "ui:order": ["firstField", "secondField"],
+};
+```
+
+Using `"*"`-wildcard inside the array will add all property fields that were not specifically added to the order-array.
+
+```tsx
+const schema = {
+  properties: {
+    secondField: { type: "string" },
+    firstField: { type: "string" },
+    thirdField: { type: "string" },
+  },
+};
+
+const uiSchema = {
+  "ui:order": ["secondField", "*"],
+};
+```
+
+In this example, the resulting order would be ["secondField", "firstField", "thirdField"].
+
+Wildcard `"*"` and `hidden fields` cannot be combined.
+
 ## Props
 
 `Form` component props:

package/dist/fields/ArrayField.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useMemo } from "react";
 import { useField } from "formik";
+import { useContext, useMemo } from "react";
 import { FormRegistry } from "../Form";
-import { ArrayFieldButtonPurpose } from "../types";
 import { useExtractUiSchema, useSetDefault } from "../hooks";
-import { FieldInput, GetArrayFieldButton } from "../styledComponents";
+import { FieldInput } from "../styledComponents";
 import { FieldTemplate } from "../templates";
 import { getEnums } from "../utils";
 const appendArray = (values) => {
@@ -32,7 +31,8 @@ const moveInArray = (values, index, direction) => {
     }
 };
 export const ArrayField = (props) => {
-    const { fields: { SchemaField }, templates: { ArrayFieldTemplate }, components: { ArrayFieldItem, ArrayFieldList, ArrayFieldItemButtons }, useItemsAsAdditionalItems, } = useContext(FormRegistry);
+    var _a, _b, _c, _d;
+    const { fields: { SchemaField }, templates: { ArrayFieldTemplate }, components: { ArrayFieldItem, ArrayFieldList, ArrayFieldItemButtons, ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, useItemsAsAdditionalItems, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, schema, uiSchema } = props;
     const { type, props: inputProps } = useExtractUiSchema(uiSchema);
@@ -98,28 +98,11 @@ export const ArrayField = (props) => {
     // Backwards compatibility ends
     const { disabled } = useExtractUiSchema(uiSchema);
     const valueArray = Array.isArray(value) ? value : undefined;
-    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,
-                                        onClick: () => setValue(removeFromArray(value, index + items.length)),
-                                        uiSchema,
-                                    }), value.length > 1 &&
-                                        index > 0 &&
-                                        GetArrayFieldButton({
-                                            purpose: ArrayFieldButtonPurpose.MOVE_UP,
-                                            onClick: () => setValue(moveInArray(value, index + items.length, -1)),
-                                            uiSchema,
-                                        }), value.length > 1 &&
-                                        index < (value === null || value === void 0 ? void 0 : value.slice(items.length).length) - 1 &&
-                                        GetArrayFieldButton({
-                                            purpose: ArrayFieldButtonPurpose.MOVE_DOWN,
-                                            onClick: () => setValue(moveInArray(value, index + items.length, 1)),
-                                            uiSchema,
-                                        })] })] }, index)))] }), additionalItems &&
-                GetArrayFieldButton({
-                    purpose: ArrayFieldButtonPurpose.ADD,
-                    onClick: () => setValue(appendArray(value)),
-                    uiSchema,
-                })] })));
+    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) => {
+                        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+                        return (_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: [_jsx(ArrayFieldRemoveButton, Object.assign({}, ((_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _a === void 0 ? void 0 : _a.props) !== null && _b !== void 0 ? _b : {}), { onClick: () => setValue(removeFromArray(value, index + items.length)), children: (_d = (_c = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : "-" })), value.length > 1 && index > 0 && (_jsx(ArrayFieldUpButton, Object.assign({}, ((_f = (_e = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _e === void 0 ? void 0 : _e.props) !== null && _f !== void 0 ? _f : {}), { onClick: () => setValue(moveInArray(value, index + items.length, -1)), children: (_h = (_g = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _g === void 0 ? void 0 : _g.content) !== null && _h !== void 0 ? _h : "↑" }))), value.length > 1 &&
+                                            index < (value === null || value === void 0 ? void 0 : value.slice(items.length).length) - 1 && (_jsx(ArrayFieldDownButton, Object.assign({}, ((_k = (_j = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _j === void 0 ? void 0 : _j.props) !== null && _k !== void 0 ? _k : {}), { onClick: () => setValue(moveInArray(value, index + items.length, 1)), children: (_m = (_l = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _l === void 0 ? void 0 : _l.content) !== null && _m !== void 0 ? _m : "↓" })))] })] }, index));
+                    })] }), additionalItems && (_jsx(ArrayFieldAddButton, Object.assign({}, ((_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _a === void 0 ? void 0 : _a.props) !== null && _b !== void 0 ? _b : {}), { onClick: () => setValue(appendArray(value)), children: (_d = (_c = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : "+" })))] })));
 };

package/dist/fields/ObjectField.js

@@ -17,6 +17,7 @@ import { ObjectFieldButtonPurpose } from "../types";
 import { resolveSchema } from "../utils/resolveSchema";
 import { useSetDefault } from "../hooks";
 import { getObjectFieldButton } from "../styledComponents";
+import { orderByUiSchema } from "../utils";
 const useObjectField = (name) => {
     if (!name) {
         const { values = {}, setValues } = useFormikContext();
@@ -26,7 +27,7 @@ const useObjectField = (name) => {
     return { value, setValue };
 };
 export const ObjectField = (props) => {
-    var _a, _b, _c;
+    var _a, _b;
     const { fields: { SchemaField }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate }, components: { ObjectFieldItem, ObjectFieldItemButtons }, hideUnmarkedAdditionalProperties, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, schema, uiSchema } = props;
@@ -48,7 +49,8 @@ export const ObjectField = (props) => {
     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 || {}))
+    const orderedProperties = orderByUiSchema(uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:order"], Object.keys(properties || {}));
+    return (_jsxs(FieldTemplateComponent, Object.assign({}, props, { children: [(orderedProperties !== null && orderedProperties !== void 0 ? orderedProperties : Object.keys(properties || {}))
                 .map((childName) => {
                 const childSchema = properties === null || properties === void 0 ? void 0 : properties[childName];
                 if (!childSchema)

package/dist/fields/StringField.js

@@ -12,7 +12,11 @@ export const StringField = (props) => {
     const enums = useMemo(() => getEnums(props), [props]);
     switch (enums === null || enums === void 0 ? void 0 : enums.type) {
         case "select":
-            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,
+            return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(FieldInput, Object.assign({ type }, inputProps, { name: name, formikAs: "select", children: [_jsx("option", Object.assign({ value: "", 
+                            // If both are true, the first enum will be "selected"
+                            // and leads to annoying and misleading UX.
+                            // These defaults will lead to an empty, "nothing selected" component.
+                            disabled: false,
                             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,

package/dist/fields/TextAreaField.js

@@ -2,9 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { FormRegistry } from "../Form";
 import { useExtractUiSchema, useSetDefault } from "../hooks";
-import { TextAreaInputField } from "../styledComponents";
 export const TextAreaField = (props) => {
-    const { templates: { FieldTemplate }, } = useContext(FormRegistry);
+    const { templates: { FieldTemplate }, components: { TextAreaInputField }, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = useExtractUiSchema(uiSchema);

package/dist/styledComponents.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="hoist-non-react-statics" />
-import type { ArrayFieldButtonProps, InfoFieldButtonProps, ObjectFieldButtonProps, RadioButtonFieldProps, ToggleSwitchFieldProps, SelectFieldProps, MultipleChoiceFieldProps, TextAreaInputFieldProps, ClickableProps } from "./types";
-import React from "react";
+import type { ClickableProps, InfoFieldButtonProps, MultipleChoiceFieldProps, ObjectFieldButtonProps, RadioButtonFieldProps, SelectFieldProps, TextAreaInputFieldProps, ToggleSwitchFieldProps } from "./types";
 import * as formik from "formik";
+import React from "react";
 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"> & {
     ref?: ((instance: HTMLFormElement | null) => void) | React.RefObject<HTMLFormElement> | null | undefined;
 }, never>> & Omit<React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & React.RefAttributes<HTMLFormElement>>, keyof React.Component<any, {}, any>>;
@@ -74,7 +74,6 @@ export declare const ArrayFieldAddButton: import("styled-components").IStyledCom
 }, never>, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>, "ref"> & {
     ref?: ((instance: HTMLAnchorElement | null) => void) | React.RefObject<HTMLAnchorElement> | null | undefined;
 }, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>, keyof React.Component<any, {}, any>>, keyof React.Component<any, {}, any>>;
-export declare const GetArrayFieldButton: ({ purpose, onClick, uiSchema, }: ArrayFieldButtonProps) => import("react/jsx-runtime").JSX.Element;
 export declare const FieldWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export declare const FieldTitle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>;
 export declare const FieldDescription: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>;

package/dist/styledComponents.js

@@ -10,11 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useState } from "react";
-import styled from "styled-components";
 import * as formik from "formik";
-import { FormRegistry } from "./Form";
-import { ArrayFieldButtonPurpose, ObjectFieldButtonPurpose } from "./types";
+import { useState } from "react";
+import styled from "styled-components";
+import { ObjectFieldButtonPurpose } from "./types";
 import { getStyle } from "./utils/getStyle";
 export const Form = styled(formik.Form) ``;
 export const FormButtonWrapper = styled.div ``;
@@ -70,22 +69,6 @@ export const ArrayFieldUpButton = styled(ArrayFieldLineButton) ``;
 export const ArrayFieldDownButton = styled(ArrayFieldLineButton) ``;
 export const ArrayFieldRemoveButton = styled(ArrayFieldLineButton) ``;
 export const ArrayFieldAddButton = styled(ArrayFieldButton) ``;
-export const GetArrayFieldButton = ({ purpose, onClick, uiSchema, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
-    const { components: { ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, } = useContext(FormRegistry);
-    switch (purpose) {
-        case ArrayFieldButtonPurpose.ADD:
-            return (_jsx(ArrayFieldAddButton, Object.assign({}, ((_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _a === void 0 ? void 0 : _a.props) !== null && _b !== void 0 ? _b : {}), { onClick: onClick, children: (_d = (_c = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : "+" })));
-        case ArrayFieldButtonPurpose.REMOVE:
-            return (_jsx(ArrayFieldRemoveButton, Object.assign({}, ((_f = (_e = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _e === void 0 ? void 0 : _e.props) !== null && _f !== void 0 ? _f : {}), { onClick: onClick, children: (_h = (_g = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _g === void 0 ? void 0 : _g.content) !== null && _h !== void 0 ? _h : "-" })));
-        case ArrayFieldButtonPurpose.MOVE_UP:
-            return (_jsx(ArrayFieldUpButton, Object.assign({}, ((_k = (_j = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _j === void 0 ? void 0 : _j.props) !== null && _k !== void 0 ? _k : {}), { onClick: onClick, children: (_m = (_l = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _l === void 0 ? void 0 : _l.content) !== null && _m !== void 0 ? _m : "↑" })));
-        case ArrayFieldButtonPurpose.MOVE_DOWN:
-            return (_jsx(ArrayFieldDownButton, Object.assign({}, ((_p = (_o = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _o === void 0 ? void 0 : _o.props) !== null && _p !== void 0 ? _p : {}), { onClick: onClick, children: (_r = (_q = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _q === void 0 ? void 0 : _q.content) !== null && _r !== void 0 ? _r : "↓" })));
-        default:
-            return (_jsx(ArrayFieldButton, Object.assign({}, ((_t = (_s = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _s === void 0 ? void 0 : _s.props) !== null && _t !== void 0 ? _t : {}), { onClick: onClick, children: (_v = (_u = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _u === void 0 ? void 0 : _u.content) !== null && _v !== void 0 ? _v : "" })));
-    }
-};
 export const FieldWrapper = styled.div `
   margin: 0.5rem 0;
 `;

package/dist/types.d.ts

@@ -159,17 +159,6 @@ export type ObjectFieldButtonProps = {
     onClick: () => void;
     uiSchema: UiSchema;
 };
-export declare enum ArrayFieldButtonPurpose {
-    ADD = 0,
-    REMOVE = 1,
-    MOVE_UP = 2,
-    MOVE_DOWN = 3
-}
-export type ArrayFieldButtonProps = {
-    purpose: ArrayFieldButtonPurpose;
-    onClick: () => void;
-    uiSchema: UiSchema;
-};
 export type InfoFieldButtonProps = {
     label?: React.ReactNode;
     content: React.ReactNode;

package/dist/types.js

@@ -5,10 +5,3 @@ export var ObjectFieldButtonPurpose;
     ObjectFieldButtonPurpose[ObjectFieldButtonPurpose["MOVE_UP"] = 2] = "MOVE_UP";
     ObjectFieldButtonPurpose[ObjectFieldButtonPurpose["MOVE_DOWN"] = 3] = "MOVE_DOWN";
 })(ObjectFieldButtonPurpose || (ObjectFieldButtonPurpose = {}));
-export var ArrayFieldButtonPurpose;
-(function (ArrayFieldButtonPurpose) {
-    ArrayFieldButtonPurpose[ArrayFieldButtonPurpose["ADD"] = 0] = "ADD";
-    ArrayFieldButtonPurpose[ArrayFieldButtonPurpose["REMOVE"] = 1] = "REMOVE";
-    ArrayFieldButtonPurpose[ArrayFieldButtonPurpose["MOVE_UP"] = 2] = "MOVE_UP";
-    ArrayFieldButtonPurpose[ArrayFieldButtonPurpose["MOVE_DOWN"] = 3] = "MOVE_DOWN";
-})(ArrayFieldButtonPurpose || (ArrayFieldButtonPurpose = {}));

package/dist/utils/__tests/orderByUiSchema.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,63 @@
+import { orderByUiSchema } from "../orderByUiSchema";
+const allProperties = ["firstName", "lastName", "age", "hobbies"];
+const emptyOrder = undefined;
+const noAsteriskOrder = ["firstName", "age"];
+const asteriskAsFirstElement = ["*", "firstName"];
+const asteriskAsLastElement = ["age", "*"];
+const asteriskAsMiddleElement = ["hobbies", "*", "age"];
+const orderWithDuplicates = ["age", "*", "age", "*", "lastName"];
+describe("orderByUiSchema", () => {
+    it("returns empty array when ui:order is not given", () => {
+        const orderedProperties = orderByUiSchema(emptyOrder, allProperties);
+        expect(orderedProperties).toEqual(undefined);
+    });
+    it("returns only given properties when order includes no asterisk", () => {
+        const orderedProperties = orderByUiSchema(noAsteriskOrder, allProperties);
+        expect(orderedProperties).toEqual(["firstName", "age"]);
+    });
+    it("returns all properties in the given order with asterisk as first element", () => {
+        const orderedProperties = orderByUiSchema(asteriskAsFirstElement, allProperties);
+        expect(orderedProperties).toEqual([
+            "lastName",
+            "age",
+            "hobbies",
+            "firstName",
+        ]);
+    });
+    it("returns all properties in the given order with asterisk as last element", () => {
+        const orderedProperties = orderByUiSchema(asteriskAsLastElement, allProperties);
+        expect(orderedProperties).toEqual([
+            "age",
+            "firstName",
+            "lastName",
+            "hobbies",
+        ]);
+    });
+    it("returns all properties in the given order with asterisk as middle element", () => {
+        const orderedProperties = orderByUiSchema(asteriskAsMiddleElement, allProperties);
+        expect(orderedProperties).toEqual([
+            "hobbies",
+            "firstName",
+            "lastName",
+            "age",
+        ]);
+    });
+    it("returns all properties in the given order with asterisk as middle element", () => {
+        const orderedProperties = orderByUiSchema(asteriskAsMiddleElement, allProperties);
+        expect(orderedProperties).toEqual([
+            "hobbies",
+            "firstName",
+            "lastName",
+            "age",
+        ]);
+    });
+    it("ignores duplicates in order array to avoid errors", () => {
+        const orderedProperties = orderByUiSchema(orderWithDuplicates, allProperties);
+        expect(orderedProperties).toEqual([
+            "age",
+            "firstName",
+            "hobbies",
+            "lastName",
+        ]);
+    });
+});

package/dist/utils/getTypes.d.ts

@@ -1,5 +1,5 @@
 import type { Schema } from "../types";
 export declare const isObject: (object: any) => boolean;
 export declare const getDefaultValueForType: (type: Schema["type"]) => {} | null;
-export declare const guessType: (value: any) => "string" | "number" | "boolean" | "object" | "array" | "null";
+export declare const guessType: (value: any) => "object" | "string" | "number" | "boolean" | "array" | "null";
 export declare const getSchemaType: (schema: Schema) => import("json-schema").JSONSchema7TypeName | import("json-schema").JSONSchema7TypeName[] | undefined;

package/dist/utils/index.d.ts

@@ -7,4 +7,5 @@ export * from "./resolveSchema";
 export * from "./solveReferences";
 export * from "./createInitialValues";
 export * from "./createValidationSchema";
+export * from "./orderByUiSchema";
 export declare const warnFromUnsupportedKeys: (componentName: string, data: Record<string, any>, supportedKeys: string[]) => void;

package/dist/utils/index.js

@@ -7,6 +7,7 @@ export * from "./resolveSchema";
 export * from "./solveReferences";
 export * from "./createInitialValues";
 export * from "./createValidationSchema";
+export * from "./orderByUiSchema";
 //TODO: REMOVE WHEN ALL SUPPORTED
 export const warnFromUnsupportedKeys = (componentName, data, supportedKeys) => {
     Object.keys(data).forEach((key) => {

package/dist/utils/orderByUiSchema.d.ts

@@ -0,0 +1 @@
+export declare function orderByUiSchema(order: string[] | undefined, allProperties: string[]): string[] | undefined;

package/dist/utils/orderByUiSchema.js

@@ -0,0 +1,25 @@
+export function orderByUiSchema(order, allProperties) {
+    if (order !== undefined && allProperties !== undefined) {
+        if (order.includes("*")) {
+            return orderWithAsterisk(order, allProperties);
+        }
+        else {
+            return order;
+        }
+    }
+    return undefined;
+}
+function orderWithAsterisk(order, allProperties) {
+    const orderWithoutDuplicates = [...new Set(order)];
+    const finalOrderedArray = [];
+    orderWithoutDuplicates.forEach((element) => {
+        if (element === "*") {
+            const propertiesWithoutOrder = allProperties.filter((prop) => !orderWithoutDuplicates.includes(prop));
+            finalOrderedArray.push(...propertiesWithoutOrder);
+        }
+        else {
+            finalOrderedArray.push(element);
+        }
+    });
+    return finalOrderedArray;
+}

package/package.json

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