graphql-form-mui 0.1.7 → 0.1.8

package/lib/components/ArrayField.d.ts

@@ -1,6 +1,4 @@
-import { PassedFormProps } from 'graphql-form';
+import { NewFieldProps } from 'graphql-form';
 import React from 'react';
-declare const ArrayField: React.FC<PassedFormProps & {
-    open?: boolean;
-}>;
+declare const ArrayField: React.FC<NewFieldProps>;
 export default ArrayField;

package/lib/components/ArrayField.js

@@ -20,45 +20,44 @@ var graphql_js_tree_1 = require("graphql-js-tree");
 var react_1 = __importDefault(require("react"));
 var icons_material_1 = require("@mui/icons-material");
 var ArrayField = function (props) {
-    var formObject = props.formObject, onChange = props.onChange, f = props.f;
-    formObject.value || (formObject.value = []);
-    if (f.type.fieldType.type !== graphql_js_tree_1.Options.array) {
-        throw new Error('Invalid Array node');
+    var mutate = props.mutate, node = props.node, shared = props.shared, value = props.value;
+    var v = value || [];
+    if (node.type.fieldType.type !== graphql_js_tree_1.Options.array) {
+        throw new Error("Invalid node ".concat(node.name));
     }
-    var nodeWithoutArray = __assign(__assign({}, f), { type: __assign(__assign({}, f.type), { fieldType: __assign({}, f.type.fieldType.nest) }) });
-    var formValuePointer = formObject.value;
+    var nodeWithoutArray = __assign(__assign({}, node), { type: __assign(__assign({}, node.type), { fieldType: __assign({}, node.type.fieldType.nest) }) });
+    var formValuePointer = v;
     return (react_1.default.createElement(material_1.Stack, null,
         formValuePointer.map(function (v, i, all) {
-            formValuePointer[i] || (formValuePointer[i] = { node: nodeWithoutArray });
-            return (react_1.default.createElement(material_1.Stack, { key: f.name + i },
-                react_1.default.createElement(graphql_form_1.Renderer, __assign({ key: i }, props, { f: __assign(__assign({}, nodeWithoutArray), { name: "".concat(nodeWithoutArray.name, "[").concat(i, "]") }), onChange: function (e) {
+            return (react_1.default.createElement(material_1.Stack, { key: node.name + i },
+                react_1.default.createElement(graphql_form_1.Render, { key: i, node: __assign(__assign({}, nodeWithoutArray), { name: "".concat(nodeWithoutArray.name, "[").concat(i, "]") }), mutate: function (e) {
                         formValuePointer[i] = e;
-                        onChange(__assign(__assign({}, formObject), { value: formValuePointer }));
-                    }, formObject: v }),
+                        mutate(formValuePointer);
+                    }, value: v, shared: shared },
                     react_1.default.createElement(material_1.Stack, { direction: "row" },
                         react_1.default.createElement(material_1.IconButton, { onClick: function () {
-                                onChange(__assign(__assign({}, formObject), { value: formValuePointer.filter(function (_, index) { return i !== index; }) }));
+                                mutate(formValuePointer.filter(function (_, index) { return i !== index; }));
                             } },
                             react_1.default.createElement(icons_material_1.Close, null)),
                         i !== 0 && (react_1.default.createElement(material_1.IconButton, { onClick: function () {
                                 var switched = v;
                                 formValuePointer[i] = formValuePointer[i - 1];
                                 formValuePointer[i - 1] = switched;
-                                onChange(__assign(__assign({}, formObject), { value: formValuePointer }));
+                                mutate(formValuePointer);
                             } },
                             react_1.default.createElement(icons_material_1.ArrowUpward, null))),
                         i !== all.length - 1 && (react_1.default.createElement(material_1.IconButton, { onClick: function () {
                                 var switched = v;
                                 formValuePointer[i] = formValuePointer[i + 1];
                                 formValuePointer[i + 1] = switched;
-                                onChange(__assign(__assign({}, formObject), { value: formValuePointer }));
+                                mutate(formValuePointer);
                             } },
                             react_1.default.createElement(icons_material_1.ArrowDownward, null)))))));
         }),
         react_1.default.createElement(material_1.Button, { onClick: function () {
-                formValuePointer.push({});
-                onChange(__assign(__assign({}, formObject), { value: formValuePointer }));
-            }, endIcon: react_1.default.createElement(icons_material_1.Add, null) }, "Add ".concat(f.name))));
+                formValuePointer.push(null);
+                mutate(formValuePointer);
+            }, endIcon: react_1.default.createElement(icons_material_1.Add, null) }, "Add ".concat(node.name))));
 };
 exports.default = ArrayField;
 //# sourceMappingURL=ArrayField.js.map

package/lib/components/ArrayField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArrayField.js","sourceRoot":"","sources":["../../src/components/ArrayField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ArrayField.js","sourceRoot":"","sources":["../../src/components/ArrayField.tsx"],"names":[],"mappings":"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"}

package/lib/components/BooleanField.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { PassedFormProps } from 'graphql-form';
-declare const _default: ({ f, formObject, onChange }: PassedFormProps) => JSX.Element;
+import { NewFieldProps } from 'graphql-form';
+declare const _default: ({ mutate, node, value }: NewFieldProps) => JSX.Element;
 export default _default;

package/lib/components/BooleanField.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -17,11 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var material_1 = require("@mui/material");
 var react_1 = __importDefault(require("react"));
 exports.default = (function (_a) {
-    var f = _a.f, formObject = _a.formObject, onChange = _a.onChange;
-    var value = formObject.value;
+    var mutate = _a.mutate, node = _a.node, value = _a.value;
     return (react_1.default.createElement(material_1.FormGroup, null,
-        react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { value: value, onChange: function () {
-                    return onChange(__assign(__assign({}, formObject), { value: value === true ? undefined : true }));
-                } }), label: f.name })));
+        react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { value: !!value, onChange: function () { return mutate(!value); } }), label: node.name })));
 });
 //# sourceMappingURL=BooleanField.js.map

package/lib/components/BooleanField.js.map

@@ -1 +1 @@
-{"version":3,"file":"BooleanField.js","sourceRoot":"","sources":["../../src/components/BooleanField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAsE;AAEtE,gDAA0B;AAC1B,mBAAe,UAAC,EAA4C;QAA1C,CAAC,OAAA,EAAE,UAAU,gBAAA,EAAE,QAAQ,cAAA;IACrC,IAAM,KAAK,GAAG,UAAU,CAAC,KAA4B,CAAC;IACtD,OAAO,CACH,8BAAC,oBAAS;QACN,8BAAC,2BAAgB,IACb,OAAO,EACH,8BAAC,mBAAQ,IACL,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE;oBACN,OAAA,QAAQ,uBACD,UAAU,KACb,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,IAC1C;gBAHF,CAGE,GAER,EAEN,KAAK,EAAE,CAAC,CAAC,IAAI,GACf,CACM,CACf,CAAC;AACN,CAAC,EAAC"}
+{"version":3,"file":"BooleanField.js","sourceRoot":"","sources":["../../src/components/BooleanField.tsx"],"names":[],"mappings":";;;;;AACA,0CAAsE;AACtE,gDAA0B;AAC1B,mBAAe,UAAC,EAAsC;QAApC,MAAM,YAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA;IACjC,OAAO,CACH,8BAAC,oBAAS;QACN,8BAAC,2BAAgB,IACb,OAAO,EAAE,8BAAC,mBAAQ,IAAC,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,cAAM,OAAA,MAAM,CAAC,CAAC,KAAK,CAAC,EAAd,CAAc,GAAI,EACrE,KAAK,EAAE,IAAI,CAAC,IAAI,GAClB,CACM,CACf,CAAC;AACN,CAAC,EAAC"}

package/lib/components/EnumField.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { PassedFormProps } from 'graphql-form';
-declare const _default: ({ nodes, onChange, formObject, f }: PassedFormProps) => JSX.Element;
+import { NewFieldProps } from 'graphql-form';
+declare const _default: ({ node, value, mutate, shared: { nodes } }: NewFieldProps) => JSX.Element;
 export default _default;

package/lib/components/EnumField.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -19,8 +8,8 @@ var graphql_js_tree_1 = require("graphql-js-tree");
 var react_1 = __importDefault(require("react"));
 exports.default = (function (_a) {
     var _b;
-    var nodes = _a.nodes, onChange = _a.onChange, formObject = _a.formObject, f = _a.f;
-    var seekNode = nodes.find(function (n) { return n.name === (0, graphql_js_tree_1.getTypeName)(f.type.fieldType); });
+    var node = _a.node, value = _a.value, mutate = _a.mutate, nodes = _a.shared.nodes;
+    var seekNode = nodes.find(function (n) { return n.name === (0, graphql_js_tree_1.getTypeName)(node.type.fieldType); });
     if (!seekNode) {
         throw new Error('Invalid enum field');
     }
@@ -31,8 +20,8 @@ exports.default = (function (_a) {
             value: label,
         });
     })) || [];
-    return (react_1.default.createElement(material_1.Select, { placeholder: f.name, value: formObject.value, onChange: function (e) {
-            onChange(__assign(__assign({}, formObject), { value: e.target.value }));
+    return (react_1.default.createElement(material_1.Select, { placeholder: node.name, value: value, onChange: function (e) {
+            mutate(e.target.value);
         } }, options.map(function (o) { return (react_1.default.createElement(material_1.MenuItem, { key: o.value, value: o.value }, o.label)); })));
 });
 //# sourceMappingURL=EnumField.js.map

package/lib/components/EnumField.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnumField.js","sourceRoot":"","sources":["../../src/components/EnumField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAiD;AAEjD,mDAA8C;AAC9C,gDAA0B;AAC1B,mBAAe,UAAC,EAAmD;;QAAjD,KAAK,WAAA,EAAE,QAAQ,cAAA,EAAE,UAAU,gBAAA,EAAE,CAAC,OAAA;IAC5C,IAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,IAAI,KAAK,IAAA,6BAAW,EAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,EAAxC,CAAwC,CAAC,CAAC;IAC7E,IAAI,CAAC,QAAQ,EAAE;QACX,MAAM,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAC;KACzC;IACD,IAAM,OAAO,GACT,CAAA,MAAA,QAAQ,CAAC,IAAI,0CAAE,GAAG,CAAC,UAAC,EAAe;YAAP,KAAK,UAAA;QAAO,OAAA,CAAC;YACrC,KAAK,OAAA;YACL,KAAK,EAAE,KAAK;SACf,CAAC;IAHsC,CAGtC,CAAC,KAAI,EAAE,CAAC;IACd,OAAO,CACH,8BAAC,iBAAM,IACH,WAAW,EAAE,CAAC,CAAC,IAAI,EACnB,KAAK,EAAE,UAAU,CAAC,KAA2B,EAC7C,QAAQ,EAAE,UAAC,CAAC;YACR,QAAQ,uBACD,UAAU,KACb,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IACvB,CAAC;QACP,CAAC,IAEA,OAAO,CAAC,GAAG,CAAC,UAAC,CAAC,IAAK,OAAA,CAChB,8BAAC,mBAAQ,IAAC,GAAG,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,IACjC,CAAC,CAAC,KAAK,CACD,CACd,EAJmB,CAInB,CAAC,CACG,CACZ,CAAC;AACN,CAAC,EAAC"}
+{"version":3,"file":"EnumField.js","sourceRoot":"","sources":["../../src/components/EnumField.tsx"],"names":[],"mappings":";;;;;AAAA,0CAAiD;AAEjD,mDAA8C;AAC9C,gDAA0B;AAC1B,mBAAe,UAAC,EAAyD;;QAAvD,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAY,KAAK,kBAAA;IAClD,IAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,IAAI,KAAK,IAAA,6BAAW,EAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAA3C,CAA2C,CAAC,CAAC;IAChF,IAAI,CAAC,QAAQ,EAAE;QACX,MAAM,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAC;KACzC;IACD,IAAM,OAAO,GACT,CAAA,MAAA,QAAQ,CAAC,IAAI,0CAAE,GAAG,CAAC,UAAC,EAAe;YAAP,KAAK,UAAA;QAAO,OAAA,CAAC;YACrC,KAAK,OAAA;YACL,KAAK,EAAE,KAAK;SACf,CAAC;IAHsC,CAGtC,CAAC,KAAI,EAAE,CAAC;IACd,OAAO,CACH,8BAAC,iBAAM,IACH,WAAW,EAAE,IAAI,CAAC,IAAI,EACtB,KAAK,EAAE,KAA2B,EAClC,QAAQ,EAAE,UAAC,CAAC;YACR,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC,IAEA,OAAO,CAAC,GAAG,CAAC,UAAC,CAAC,IAAK,OAAA,CAChB,8BAAC,mBAAQ,IAAC,GAAG,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,IACjC,CAAC,CAAC,KAAK,CACD,CACd,EAJmB,CAInB,CAAC,CACG,CACZ,CAAC;AACN,CAAC,EAAC"}

package/lib/components/FormField.d.ts

@@ -1,4 +1,4 @@
-import { PassedFormProps } from 'graphql-form';
+import { NewFieldProps } from 'graphql-form';
 import React from 'react';
-declare const FormField: React.FC<PassedFormProps>;
+declare const FormField: React.FC<NewFieldProps>;
 export default FormField;

package/lib/components/FormField.js

@@ -4,14 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var material_1 = require("@mui/material");
-var graphql_form_1 = require("graphql-form");
 var react_1 = __importDefault(require("react"));
 var FormField = function (props) {
     var children = props.children;
-    var errors = (0, graphql_form_1.getErrorFromProps)(props);
-    return (react_1.default.createElement(material_1.FormControl, { fullWidth: true, error: !!errors },
-        children,
-        errors && react_1.default.createElement(material_1.FormHelperText, null, errors)));
+    return react_1.default.createElement(material_1.FormControl, { fullWidth: true }, children);
 };
 exports.default = FormField;
 //# sourceMappingURL=FormField.js.map

package/lib/components/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../src/components/FormField.tsx"],"names":[],"mappings":";;;;;AAAA,0CAA4D;AAC5D,6CAAkE;AAClE,gDAA0B;AAC1B,IAAM,SAAS,GAA8B,UAAC,KAAK;IACvC,IAAA,QAAQ,GAAK,KAAK,SAAV,CAAW;IAC3B,IAAM,MAAM,GAAG,IAAA,gCAAiB,EAAC,KAAK,CAAC,CAAC;IACxC,OAAO,CACH,8BAAC,sBAAW,IAAC,SAAS,QAAC,KAAK,EAAE,CAAC,CAAC,MAAM;QACjC,QAAQ;QACR,MAAM,IAAI,8BAAC,yBAAc,QAAE,MAAM,CAAkB,CAC1C,CACjB,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../src/components/FormField.tsx"],"names":[],"mappings":";;;;;AAAA,0CAA4C;AAE5C,gDAA0B;AAC1B,IAAM,SAAS,GAA4B,UAAC,KAAK;IACrC,IAAA,QAAQ,GAAK,KAAK,SAAV,CAAW;IAC3B,OAAO,8BAAC,sBAAW,IAAC,SAAS,UAAE,QAAQ,CAAe,CAAC;AAC3D,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/lib/components/FormLabel.d.ts

@@ -1,7 +1,4 @@
-import { PassedFormProps } from 'graphql-form';
+import { NewFieldProps } from 'graphql-form';
 import React from 'react';
-declare const FormLabel: React.FC<PassedFormProps & {
-    open?: boolean;
-    setOpen: (b: boolean) => void;
-}>;
+declare const FormLabel: React.FC<NewFieldProps>;
 export default FormLabel;

package/lib/components/FormLabel.js

@@ -4,25 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var material_1 = require("@mui/material");
-var icons_material_1 = require("@mui/icons-material");
-var graphql_js_tree_1 = require("graphql-js-tree");
 var react_1 = __importDefault(require("react"));
 var FormLabel = function (props) {
-    var f = props.f, open = props.open, setOpen = props.setOpen, nodes = props.nodes;
-    var seekNode = nodes.find(function (n) { return n.name === (0, graphql_js_tree_1.getTypeName)(f.type.fieldType); });
-    var isInput = (seekNode === null || seekNode === void 0 ? void 0 : seekNode.data.type) === graphql_js_tree_1.TypeDefinition.InputObjectTypeDefinition;
+    var node = props.node;
     return (react_1.default.createElement(material_1.Stack, { direction: 'row', alignItems: "center", spacing: 1 },
         react_1.default.createElement(material_1.Stack, { direction: "row", alignItems: "center" },
-            react_1.default.createElement(material_1.Typography, null, props.f.name.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
+            react_1.default.createElement(material_1.Typography, null, node.name.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
                 return str.toUpperCase();
             })),
             props.required && react_1.default.createElement(material_1.Typography, { color: 'red' }, "*"),
-            props.children),
-        (f.data.type === graphql_js_tree_1.TypeSystemDefinition.FieldDefinition ||
-            isInput ||
-            f.type.fieldType.type === graphql_js_tree_1.Options.array) && (react_1.default.createElement(material_1.IconButton, { onClick: function () { return setOpen(!open); } },
-            open && react_1.default.createElement(icons_material_1.ExpandLess, null),
-            !open && react_1.default.createElement(icons_material_1.ExpandMore, null)))));
+            props.children)));
 };
 exports.default = FormLabel;
 //# sourceMappingURL=FormLabel.js.map

package/lib/components/FormLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.js","sourceRoot":"","sources":["../../src/components/FormLabel.tsx"],"names":[],"mappings":";;;;;AAAA,0CAA8D;AAC9D,sDAA6D;AAE7D,mDAA6F;AAC7F,gDAA0B;AAC1B,IAAM,SAAS,GAAkF,UAAC,KAAK;IAC3F,IAAA,CAAC,GAA2B,KAAK,EAAhC,EAAE,IAAI,GAAqB,KAAK,KAA1B,EAAE,OAAO,GAAY,KAAK,QAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IAE1C,IAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,IAAI,KAAK,IAAA,6BAAW,EAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,EAAxC,CAAwC,CAAC,CAAC;IAC7E,IAAM,OAAO,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,CAAC,IAAI,MAAK,gCAAc,CAAC,yBAAyB,CAAC;IAEjF,OAAO,CACH,8BAAC,gBAAK,IAAC,SAAS,EAAE,KAAK,EAAE,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC;QACnD,8BAAC,gBAAK,IAAC,SAAS,EAAC,KAAK,EAAC,UAAU,EAAC,QAAQ;YACtC,8BAAC,qBAAU,QACN,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG;gBAChE,OAAO,GAAG,CAAC,WAAW,EAAE,CAAC;YAC7B,CAAC,CAAC,CACO;YACZ,KAAK,CAAC,QAAQ,IAAI,8BAAC,qBAAU,IAAC,KAAK,EAAE,KAAK,QAAgB;YAC1D,KAAK,CAAC,QAAQ,CACX;QACP,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,sCAAoB,CAAC,eAAe;YAClD,OAAO;YACP,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,KAAK,yBAAO,CAAC,KAAK,CAAC,IAAI,CAC5C,8BAAC,qBAAU,IAAC,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,CAAC,IAAI,CAAC,EAAd,CAAc;YACpC,IAAI,IAAI,8BAAC,2BAAU,OAAG;YACtB,CAAC,IAAI,IAAI,8BAAC,2BAAU,OAAG,CACf,CAChB,CACG,CACX,CAAC;AACN,CAAC,CAAC;AACF,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"FormLabel.js","sourceRoot":"","sources":["../../src/components/FormLabel.tsx"],"names":[],"mappings":";;;;;AAAA,0CAAkD;AAElD,gDAA0B;AAC1B,IAAM,SAAS,GAA4B,UAAC,KAAK;IACrC,IAAA,IAAI,GAAK,KAAK,KAAV,CAAW;IACvB,OAAO,CACH,8BAAC,gBAAK,IAAC,SAAS,EAAE,KAAK,EAAE,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC;QACnD,8BAAC,gBAAK,IAAC,SAAS,EAAC,KAAK,EAAC,UAAU,EAAC,QAAQ;YACtC,8BAAC,qBAAU,QACN,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG;gBAC7D,OAAO,GAAG,CAAC,WAAW,EAAE,CAAC;YAC7B,CAAC,CAAC,CACO;YACZ,KAAK,CAAC,QAAQ,IAAI,8BAAC,qBAAU,IAAC,KAAK,EAAE,KAAK,QAAgB;YAC1D,KAAK,CAAC,QAAQ,CACX,CACJ,CACX,CAAC;AACN,CAAC,CAAC;AACF,kBAAe,SAAS,CAAC"}

package/lib/components/NumberField.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { PassedFormProps } from 'graphql-form';
-declare const _default: (props: PassedFormProps) => JSX.Element;
+import { NewFieldProps } from 'graphql-form';
+declare const _default: ({ value, mutate }: NewFieldProps) => JSX.Element;
 export default _default;

package/lib/components/NumberField.js

@@ -1,22 +1,14 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var material_1 = require("@mui/material");
 var react_1 = __importDefault(require("react"));
-exports.default = (function (props) { return (react_1.default.createElement(material_1.TextField, { type: "number", value: props.formObject.value || '', onChange: function (e) {
-        props.onChange(__assign(__assign({}, props.formObject), { value: e.target.value }));
-    } })); });
+exports.default = (function (_a) {
+    var value = _a.value, mutate = _a.mutate;
+    return (react_1.default.createElement(material_1.TextField, { type: "number", value: value || '', onChange: function (e) {
+            mutate(e.target.value);
+        } }));
+});
 //# sourceMappingURL=NumberField.js.map

package/lib/components/NumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../src/components/NumberField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAA0C;AAE1C,gDAA0B;AAC1B,mBAAe,UAAC,KAAsB,IAAK,OAAA,CACvC,8BAAC,oBAAS,IACN,IAAI,EAAC,QAAQ,EACb,KAAK,EAAG,KAAK,CAAC,UAAU,CAAC,KAA4B,IAAI,EAAE,EAC3D,QAAQ,EAAE,UAAC,CAAC;QACR,KAAK,CAAC,QAAQ,uBACP,KAAK,CAAC,UAAU,KACnB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IACvB,CAAC;IACP,CAAC,GACH,CACL,EAX0C,CAW1C,EAAC"}
+{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../src/components/NumberField.tsx"],"names":[],"mappings":";;;;;AAAA,0CAA0C;AAE1C,gDAA0B;AAC1B,mBAAe,UAAC,EAAgC;QAA9B,KAAK,WAAA,EAAE,MAAM,YAAA;IAAsB,OAAA,CACjD,8BAAC,oBAAS,IACN,IAAI,EAAC,QAAQ,EACb,KAAK,EAAG,KAA4B,IAAI,EAAE,EAC1C,QAAQ,EAAE,UAAC,CAAC;YACR,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC,GACH,CACL;AARoD,CAQpD,EAAC"}

package/lib/components/ObjectField.d.ts

@@ -1,4 +1,4 @@
-import { PassedFormProps } from 'graphql-form';
+import { NewFieldProps } from 'graphql-form';
 import React from 'react';
-declare const ObjectField: React.FC<PassedFormProps>;
+declare const ObjectField: React.FC<NewFieldProps>;
 export default ObjectField;

package/lib/components/ObjectField.js

@@ -19,18 +19,16 @@ var graphql_form_1 = require("graphql-form");
 var react_1 = __importDefault(require("react"));
 var ObjectField = function (props) {
     var _a;
-    var formObject = props.formObject, f = props.f;
-    formObject.value || (formObject.value = {});
-    var fV = formObject.value;
-    return (react_1.default.createElement(material_1.Stack, { pl: 2, spacing: 2 }, (_a = f.args) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) {
+    var value = props.value, mutate = props.mutate, node = props.node;
+    var v = value || {};
+    console.log(node);
+    return (react_1.default.createElement(material_1.Stack, { pl: 2, spacing: 2 }, (_a = node.args) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) {
         return b.name > a.name ? -1 : 1;
     }).map(function (a) {
-        var _a;
-        fV[_a = a.name] || (fV[_a] = { node: a });
-        return (react_1.default.createElement(graphql_form_1.Renderer, __assign({}, props, { currentPath: "".concat(props.currentPath, ".").concat(a.name), key: a.name, formObject: fV[a.name], required: false, onChange: function (fv) {
+        return (react_1.default.createElement(graphql_form_1.Render, __assign({}, props, { key: a.name, value: v[a.name], required: false, mutate: function (fv) {
                 var _a;
-                props.onChange(__assign(__assign({}, formObject), { value: __assign(__assign({}, fV), (_a = {}, _a[a.name] = fv, _a)) }));
-            }, f: a, children: undefined })));
+                mutate(__assign(__assign({}, v), (_a = {}, _a[a.name] = fv, _a)));
+            }, node: a })));
     })));
 };
 exports.default = ObjectField;

package/lib/components/ObjectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectField.js","sourceRoot":"","sources":["../../src/components/ObjectField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAsC;AACtC,6CAAqE;AACrE,gDAA0B;AAE1B,IAAM,WAAW,GAA8B,UAAC,KAAK;;IACzC,IAAA,UAAU,GAAQ,KAAK,WAAb,EAAE,CAAC,GAAK,KAAK,EAAV,CAAW;IAChC,UAAU,CAAC,KAAK,KAAhB,UAAU,CAAC,KAAK,GAAK,EAAE,EAAC;IACxB,IAAM,EAAE,GAAG,UAAU,CAAC,KAAoC,CAAC;IAC3D,OAAO,CACH,8BAAC,gBAAK,IAAC,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,IACnB,MAAA,CAAC,CAAC,IAAI,0CACD,IAAI,CAAC,UAAC,CAAC,EAAE,CAAC;QACR,OAAO,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,CAAC,EACA,GAAG,CAAC,UAAC,CAAC;;QACH,EAAE,MAAC,CAAC,CAAC,IAAI,MAAT,EAAE,OAAa,EAAE,IAAI,EAAE,CAAC,EAAE,EAAC;QAC3B,OAAO,CACH,8BAAC,uBAAQ,eACD,KAAK,IACT,WAAW,EAAE,UAAG,KAAK,CAAC,WAAW,cAAI,CAAC,CAAC,IAAI,CAAE,EAC7C,GAAG,EAAE,CAAC,CAAC,IAAI,EACX,UAAU,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EACtB,QAAQ,EAAE,KAAK,EACf,QAAQ,EAAE,UAAC,EAAE;;gBACT,KAAK,CAAC,QAAQ,uBACP,UAAU,KACb,KAAK,wBACE,EAAE,gBACJ,CAAC,CAAC,IAAI,IAAG,EAAE,UAElB,CAAC;YACP,CAAC,EACD,CAAC,EAAE,CAAC,EACJ,QAAQ,EAAE,SAAS,IACrB,CACL,CAAC;IACN,CAAC,CAAC,CACF,CACX,CAAC;AACN,CAAC,CAAC;AACF,kBAAe,WAAW,CAAC"}
+{"version":3,"file":"ObjectField.js","sourceRoot":"","sources":["../../src/components/ObjectField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAsC;AACtC,6CAAoE;AACpE,gDAA0B;AAE1B,IAAM,WAAW,GAA4B,UAAC,KAAK;;IACvC,IAAA,KAAK,GAAmB,KAAK,MAAxB,EAAE,MAAM,GAAW,KAAK,OAAhB,EAAE,IAAI,GAAK,KAAK,KAAV,CAAW;IACtC,IAAM,CAAC,GAAmC,KAAuC,IAAI,EAAE,CAAC;IACxF,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAClB,OAAO,CACH,8BAAC,gBAAK,IAAC,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,IACnB,MAAA,IAAI,CAAC,IAAI,0CACJ,IAAI,CAAC,UAAC,CAAC,EAAE,CAAC;QACR,OAAO,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,CAAC,EACA,GAAG,CAAC,UAAC,CAAC;QACH,OAAO,CACH,8BAAC,qBAAM,eACC,KAAK,IACT,GAAG,EAAE,CAAC,CAAC,IAAI,EACX,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAChB,QAAQ,EAAE,KAAK,EACf,MAAM,EAAE,UAAC,EAAE;;gBACP,MAAM,uBACC,CAAC,gBACH,CAAC,CAAC,IAAI,IAAG,EAAE,OACd,CAAC;YACP,CAAC,EACD,IAAI,EAAE,CAAC,IACT,CACL,CAAC;IACN,CAAC,CAAC,CACF,CACX,CAAC;AACN,CAAC,CAAC;AACF,kBAAe,WAAW,CAAC"}

package/lib/components/UniversalField.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { PassedFormProps } from 'graphql-form';
-declare const _default: (props: PassedFormProps) => JSX.Element;
+import { NewFieldProps } from 'graphql-form';
+declare const _default: ({ value, node, mutate }: NewFieldProps) => JSX.Element;
 export default _default;

package/lib/components/UniversalField.js

@@ -1,26 +1,16 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var material_1 = require("@mui/material");
 var react_1 = __importDefault(require("react"));
-exports.default = (function (props) {
-    return (react_1.default.createElement(material_1.TextField, { value: props.formObject.value || '', placeholder: props.f.name.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
+exports.default = (function (_a) {
+    var value = _a.value, node = _a.node, mutate = _a.mutate;
+    return (react_1.default.createElement(material_1.TextField, { value: value || '', placeholder: node.name.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
             return str.toUpperCase();
         }), onChange: function (e) {
-            props.onChange(__assign(__assign({}, props.formObject), { value: e.target.value }));
+            mutate(e.target.value);
         } }));
 });
 //# sourceMappingURL=UniversalField.js.map

package/lib/components/UniversalField.js.map

@@ -1 +1 @@
-{"version":3,"file":"UniversalField.js","sourceRoot":"","sources":["../../src/components/UniversalField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAA0C;AAE1C,gDAA0B;AAC1B,mBAAe,UAAC,KAAsB;IAClC,OAAO,CACH,8BAAC,oBAAS,IACN,KAAK,EAAG,KAAK,CAAC,UAAU,CAAC,KAA4B,IAAI,EAAE,EAC3D,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG;YAC5E,OAAO,GAAG,CAAC,WAAW,EAAE,CAAC;QAC7B,CAAC,CAAC,EACF,QAAQ,EAAE,UAAC,CAAC;YACR,KAAK,CAAC,QAAQ,uBACP,KAAK,CAAC,UAAU,KACnB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IACvB,CAAC;QACP,CAAC,GACH,CACL,CAAC;AACN,CAAC,EAAC"}
+{"version":3,"file":"UniversalField.js","sourceRoot":"","sources":["../../src/components/UniversalField.tsx"],"names":[],"mappings":";;;;;AACA,0CAA0C;AAC1C,gDAA0B;AAC1B,mBAAe,UAAC,EAAsC;QAApC,KAAK,WAAA,EAAE,IAAI,UAAA,EAAE,MAAM,YAAA;IACjC,OAAO,CACH,8BAAC,oBAAS,IACN,KAAK,EAAG,KAA4B,IAAI,EAAE,EAC1C,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG;YACzE,OAAO,GAAG,CAAC,WAAW,EAAE,CAAC;QAC7B,CAAC,CAAC,EACF,QAAQ,EAAE,UAAC,CAAC;YACR,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC,GACH,CACL,CAAC;AACN,CAAC,EAAC"}

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import { FormLibraryProps } from 'graphql-form';
+import { VarFormProps } from 'graphql-form';
 import React from 'react';
-declare const MuiForm: React.FC<FormLibraryProps>;
+declare const MuiForm: React.FC<Omit<VarFormProps, 'shared'>>;
 export default MuiForm;

package/lib/index.js

@@ -26,16 +26,18 @@ var UniversalField_1 = __importDefault(require("./components/UniversalField"));
 var graphql_form_1 = require("graphql-form");
 var react_1 = __importDefault(require("react"));
 var MuiForm = function (props) {
-    return (react_1.default.createElement(graphql_form_1.FormDisplayer, __assign({}, props, { components: {
-            ArrayField: ArrayField_1.default,
-            BooleanField: BooleanField_1.default,
-            EnumField: EnumField_1.default,
-            FormField: FormField_1.default,
-            FormLabel: FormLabel_1.default,
-            NullField: NullField_1.default,
-            NumberField: NumberField_1.default,
-            ObjectField: ObjectField_1.default,
-            UniversalField: UniversalField_1.default,
+    return (react_1.default.createElement(graphql_form_1.VariableForm, __assign({}, props, { shared: {
+            components: {
+                ArrayField: ArrayField_1.default,
+                BooleanField: BooleanField_1.default,
+                EnumField: EnumField_1.default,
+                FormField: FormField_1.default,
+                FormLabel: FormLabel_1.default,
+                NullField: NullField_1.default,
+                NumberField: NumberField_1.default,
+                ObjectField: ObjectField_1.default,
+                UniversalField: UniversalField_1.default,
+            },
         } })));
 };
 exports.default = MuiForm;

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uEAAiD;AACjD,2EAAqD;AACrD,qEAA+C;AAC/C,qEAA+C;AAC/C,qEAA+C;AAC/C,qEAA+C;AAC/C,yEAAmD;AACnD,yEAAmD;AACnD,+EAAyD;AACzD,6CAA+D;AAC/D,gDAA0B;AAE1B,IAAM,OAAO,GAA+B,UAAC,KAAK;IAC9C,OAAO,CACH,8BAAC,4BAAa,eACN,KAAK,IACT,UAAU,EAAE;YACR,UAAU,EAAE,oBAAU;YACtB,YAAY,EAAE,sBAAY;YAC1B,SAAS,EAAE,mBAAS;YACpB,SAAS,EAAE,mBAAS;YACpB,SAAS,EAAE,mBAAS;YACpB,SAAS,EAAE,mBAAS;YACpB,WAAW,EAAE,qBAAW;YACxB,WAAW,EAAE,qBAAW;YACxB,cAAc,EAAE,wBAAc;SACjC,IACH,CACL,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,OAAO,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uEAAiD;AACjD,2EAAqD;AACrD,qEAA+C;AAC/C,qEAA+C;AAC/C,qEAA+C;AAC/C,qEAA+C;AAC/C,yEAAmD;AACnD,yEAAmD;AACnD,+EAAyD;AACzD,6CAA0D;AAC1D,gDAA0B;AAE1B,IAAM,OAAO,GAA2C,UAAC,KAAK;IAC1D,OAAO,CACH,8BAAC,2BAAY,eACL,KAAK,IACT,MAAM,EAAE;YACJ,UAAU,EAAE;gBACR,UAAU,EAAE,oBAAU;gBACtB,YAAY,EAAE,sBAAY;gBAC1B,SAAS,EAAE,mBAAS;gBACpB,SAAS,EAAE,mBAAS;gBACpB,SAAS,EAAE,mBAAS;gBACpB,SAAS,EAAE,mBAAS;gBACpB,WAAW,EAAE,qBAAW;gBACxB,WAAW,EAAE,qBAAW;gBACxB,cAAc,EAAE,wBAAc;aACjC;SACJ,IACH,CACL,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "graphql-form-mui",
-    "version": "0.1.7",
+    "version": "0.1.8",
     "description": "Easy form creation with GraphQL Editor and React",
     "main": "lib/index.js",
     "scripts": {

package/src/components/ArrayField.tsx

@@ -1,58 +1,47 @@
 import { Button, IconButton, Stack } from '@mui/material';
-import { FormObject, FormValue, PassedFormProps, Renderer } from 'graphql-form';
+import { NewFieldProps, VariableValue, Render } from 'graphql-form';
 import { Options, ParserField } from 'graphql-js-tree';
 import React from 'react';
 import { Add, ArrowDownward, ArrowUpward, Close } from '@mui/icons-material';
 
-const ArrayField: React.FC<
-    PassedFormProps & {
-        open?: boolean;
-    }
-> = (props) => {
-    const { formObject, onChange, f } = props;
-    formObject.value ||= [];
-    if (f.type.fieldType.type !== Options.array) {
-        throw new Error('Invalid Array node');
+const ArrayField: React.FC<NewFieldProps> = (props) => {
+    const { mutate, node, shared, value } = props;
+    const v: Array<VariableValue> = (value as Array<VariableValue>) || [];
+    if (node.type.fieldType.type !== Options.array) {
+        throw new Error(`Invalid node ${node.name}`);
     }
     const nodeWithoutArray: ParserField = {
-        ...f,
+        ...node,
         type: {
-            ...f.type,
+            ...node.type,
             fieldType: {
-                ...f.type.fieldType.nest,
+                ...node.type.fieldType.nest,
             },
         },
     };
-    const formValuePointer = formObject.value as Array<FormValue>;
+    const formValuePointer = v as Array<VariableValue>;
     return (
         <Stack>
             {formValuePointer.map((v, i: number, all) => {
-                formValuePointer[i] ||= { node: nodeWithoutArray };
                 return (
-                    <Stack key={f.name + i}>
-                        <Renderer
+                    <Stack key={node.name + i}>
+                        <Render
                             key={i}
-                            {...props}
-                            f={{
+                            node={{
                                 ...nodeWithoutArray,
                                 name: `${nodeWithoutArray.name}[${i}]`,
                             }}
-                            onChange={(e) => {
+                            mutate={(e) => {
                                 formValuePointer[i] = e;
-                                onChange({
-                                    ...formObject,
-                                    value: formValuePointer,
-                                });
+                                mutate(formValuePointer);
                             }}
-                            formObject={v as FormObject}
+                            value={v}
+                            shared={shared}
                         >
                             <Stack direction="row">
                                 <IconButton
                                     onClick={() => {
-                                        onChange({
-                                            ...formObject,
-                                            value: formValuePointer.filter((_, index) => i !== index),
-                                        });
+                                        mutate(formValuePointer.filter((_, index) => i !== index));
                                     }}
                                 >
                                     <Close />
@@ -63,10 +52,7 @@ const ArrayField: React.FC<
                                             const switched = v;
                                             formValuePointer[i] = formValuePointer[i - 1];
                                             formValuePointer[i - 1] = switched;
-                                            onChange({
-                                                ...formObject,
-                                                value: formValuePointer,
-                                            });
+                                            mutate(formValuePointer);
                                         }}
                                     >
                                         <ArrowUpward />
@@ -78,32 +64,26 @@ const ArrayField: React.FC<
                                             const switched = v;
                                             formValuePointer[i] = formValuePointer[i + 1];
                                             formValuePointer[i + 1] = switched;
-                                            onChange({
-                                                ...formObject,
-                                                value: formValuePointer,
-                                            });
+                                            mutate(formValuePointer);
                                         }}
                                     >
                                         <ArrowDownward />
                                     </IconButton>
                                 )}
                             </Stack>
-                        </Renderer>
+                        </Render>
                     </Stack>
                 );
             })}
 
             <Button
                 onClick={() => {
-                    formValuePointer.push({});
-                    onChange({
-                        ...formObject,
-                        value: formValuePointer,
-                    });
+                    formValuePointer.push(null);
+                    mutate(formValuePointer);
                 }}
                 endIcon={<Add />}
             >
-                {`Add ${f.name}`}
+                {`Add ${node.name}`}
             </Button>
         </Stack>
     );

package/src/components/BooleanField.tsx

@@ -1,23 +1,12 @@
+import { NewFieldProps } from 'graphql-form';
 import { Checkbox, FormControlLabel, FormGroup } from '@mui/material';
-import { PassedFormProps } from 'graphql-form';
 import React from 'react';
-export default ({ f, formObject, onChange }: PassedFormProps) => {
-    const value = formObject.value as boolean | undefined;
+export default ({ mutate, node, value }: NewFieldProps) => {
     return (
         <FormGroup>
             <FormControlLabel
-                control={
-                    <Checkbox
-                        value={value}
-                        onChange={() =>
-                            onChange({
-                                ...formObject,
-                                value: value === true ? undefined : true,
-                            })
-                        }
-                    />
-                }
-                label={f.name}
+                control={<Checkbox value={!!value} onChange={() => mutate(!value)} />}
+                label={node.name}
             />
         </FormGroup>
     );

package/src/components/EnumField.tsx

@@ -1,9 +1,9 @@
 import { MenuItem, Select } from '@mui/material';
-import { PassedFormProps } from 'graphql-form';
+import { NewFieldProps } from 'graphql-form';
 import { getTypeName } from 'graphql-js-tree';
 import React from 'react';
-export default ({ nodes, onChange, formObject, f }: PassedFormProps) => {
-    const seekNode = nodes.find((n) => n.name === getTypeName(f.type.fieldType));
+export default ({ node, value, mutate, shared: { nodes } }: NewFieldProps) => {
+    const seekNode = nodes.find((n) => n.name === getTypeName(node.type.fieldType));
     if (!seekNode) {
         throw new Error('Invalid enum field');
     }
@@ -14,13 +14,10 @@ export default ({ nodes, onChange, formObject, f }: PassedFormProps) => {
         })) || [];
     return (
         <Select
-            placeholder={f.name}
-            value={formObject.value as string | undefined}
+            placeholder={node.name}
+            value={value as string | undefined}
             onChange={(e) => {
-                onChange({
-                    ...formObject,
-                    value: e.target.value,
-                });
+                mutate(e.target.value);
             }}
         >
             {options.map((o) => (

package/src/components/FormField.tsx

@@ -1,15 +1,9 @@
-import { FormControl, FormHelperText } from '@mui/material';
-import { getErrorFromProps, PassedFormProps } from 'graphql-form';
+import { FormControl } from '@mui/material';
+import { NewFieldProps } from 'graphql-form';
 import React from 'react';
-const FormField: React.FC<PassedFormProps> = (props) => {
+const FormField: React.FC<NewFieldProps> = (props) => {
     const { children } = props;
-    const errors = getErrorFromProps(props);
-    return (
-        <FormControl fullWidth error={!!errors}>
-            {children}
-            {errors && <FormHelperText>{errors}</FormHelperText>}
-        </FormControl>
-    );
+    return <FormControl fullWidth>{children}</FormControl>;
 };
 
 export default FormField;

package/src/components/FormLabel.tsx

@@ -1,33 +1,19 @@
-import { IconButton, Stack, Typography } from '@mui/material';
-import { ExpandLess, ExpandMore } from '@mui/icons-material';
-import { PassedFormProps } from 'graphql-form';
-import { TypeSystemDefinition, Options, getTypeName, TypeDefinition } from 'graphql-js-tree';
+import { Stack, Typography } from '@mui/material';
+import { NewFieldProps } from 'graphql-form';
 import React from 'react';
-const FormLabel: React.FC<PassedFormProps & { open?: boolean; setOpen: (b: boolean) => void }> = (props) => {
-    const { f, open, setOpen, nodes } = props;
-
-    const seekNode = nodes.find((n) => n.name === getTypeName(f.type.fieldType));
-    const isInput = seekNode?.data.type === TypeDefinition.InputObjectTypeDefinition;
-
+const FormLabel: React.FC<NewFieldProps> = (props) => {
+    const { node } = props;
     return (
         <Stack direction={'row'} alignItems="center" spacing={1}>
             <Stack direction="row" alignItems="center">
                 <Typography>
-                    {props.f.name.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
+                    {node.name.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
                         return str.toUpperCase();
                     })}
                 </Typography>
                 {props.required && <Typography color={'red'}>*</Typography>}
                 {props.children}
             </Stack>
-            {(f.data.type === TypeSystemDefinition.FieldDefinition ||
-                isInput ||
-                f.type.fieldType.type === Options.array) && (
-                <IconButton onClick={() => setOpen(!open)}>
-                    {open && <ExpandLess />}
-                    {!open && <ExpandMore />}
-                </IconButton>
-            )}
         </Stack>
     );
 };

package/src/components/NumberField.tsx

@@ -1,15 +1,12 @@
 import { TextField } from '@mui/material';
-import { PassedFormProps } from 'graphql-form';
+import { NewFieldProps } from 'graphql-form';
 import React from 'react';
-export default (props: PassedFormProps) => (
+export default ({ value, mutate }: NewFieldProps) => (
     <TextField
         type="number"
-        value={(props.formObject.value as string | undefined) || ''}
+        value={(value as string | undefined) || ''}
         onChange={(e) => {
-            props.onChange({
-                ...props.formObject,
-                value: e.target.value,
-            });
+            mutate(e.target.value);
         }}
     />
 );

package/src/components/ObjectField.tsx

@@ -1,37 +1,31 @@
 import { Stack } from '@mui/material';
-import { PassedFormProps, FormObject, Renderer } from 'graphql-form';
+import { NewFieldProps, Render, VariableValue } from 'graphql-form';
 import React from 'react';
 
-const ObjectField: React.FC<PassedFormProps> = (props) => {
-    const { formObject, f } = props;
-    formObject.value ||= {};
-    const fV = formObject.value as { [x: string]: FormObject };
+const ObjectField: React.FC<NewFieldProps> = (props) => {
+    const { value, mutate, node } = props;
+    const v: Record<string, VariableValue> = (value as Record<string, VariableValue>) || {};
+    console.log(node);
     return (
         <Stack pl={2} spacing={2}>
-            {f.args
+            {node.args
                 ?.sort((a, b) => {
                     return b.name > a.name ? -1 : 1;
                 })
                 .map((a) => {
-                    fV[a.name] ||= { node: a };
                     return (
-                        <Renderer
+                        <Render
                             {...props}
-                            currentPath={`${props.currentPath}.${a.name}`}
                             key={a.name}
-                            formObject={fV[a.name]}
+                            value={v[a.name]}
                             required={false}
-                            onChange={(fv) => {
-                                props.onChange({
-                                    ...formObject,
-                                    value: {
-                                        ...fV,
-                                        [a.name]: fv,
-                                    },
+                            mutate={(fv) => {
+                                mutate({
+                                    ...v,
+                                    [a.name]: fv,
                                 });
                             }}
-                            f={a}
-                            children={undefined}
+                            node={a}
                         />
                     );
                 })}

package/src/components/UniversalField.tsx

@@ -1,18 +1,15 @@
+import { NewFieldProps } from 'graphql-form';
 import { TextField } from '@mui/material';
-import { PassedFormProps } from 'graphql-form';
 import React from 'react';
-export default (props: PassedFormProps) => {
+export default ({ value, node, mutate }: NewFieldProps) => {
     return (
         <TextField
-            value={(props.formObject.value as string | undefined) || ''}
-            placeholder={props.f.name.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
+            value={(value as string | undefined) || ''}
+            placeholder={node.name.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
                 return str.toUpperCase();
             })}
             onChange={(e) => {
-                props.onChange({
-                    ...props.formObject,
-                    value: e.target.value,
-                });
+                mutate(e.target.value);
             }}
         />
     );

package/src/index.tsx

@@ -7,23 +7,25 @@ import NullField from '@/components/NullField';
 import NumberField from '@/components/NumberField';
 import ObjectField from '@/components/ObjectField';
 import UniversalField from '@/components/UniversalField';
-import { FormDisplayer, FormLibraryProps } from 'graphql-form';
+import { VarFormProps, VariableForm } from 'graphql-form';
 import React from 'react';
 
-const MuiForm: React.FC<FormLibraryProps> = (props) => {
+const MuiForm: React.FC<Omit<VarFormProps, 'shared'>> = (props) => {
     return (
-        <FormDisplayer
+        <VariableForm
             {...props}
-            components={{
-                ArrayField: ArrayField,
-                BooleanField: BooleanField,
-                EnumField: EnumField,
-                FormField: FormField,
-                FormLabel: FormLabel,
-                NullField: NullField,
-                NumberField: NumberField,
-                ObjectField: ObjectField,
-                UniversalField: UniversalField,
+            shared={{
+                components: {
+                    ArrayField: ArrayField,
+                    BooleanField: BooleanField,
+                    EnumField: EnumField,
+                    FormField: FormField,
+                    FormLabel: FormLabel,
+                    NullField: NullField,
+                    NumberField: NumberField,
+                    ObjectField: ObjectField,
+                    UniversalField: UniversalField,
+                },
             }}
         />
     );