@react-fabric/form 1.0.0-beta.35 → 1.0.0-beta.36

package/dist/cjs/builder/SchemaEditor.js

@@ -38,11 +38,15 @@ var SchemaEditor = function SchemaEditor(_ref) {
     _ref$optionLists = _ref.optionLists,
     optionLists = _ref$optionLists === void 0 ? utilities.EMPTY_ARRAY : _ref$optionLists,
     children = _ref.children,
+    onSubmit = _ref.onSubmit,
     onChange = _ref.onChange;
   var formRef = react.useRef(null);
   var handleChange = react.useCallback(function (model) {
     onChange === null || onChange === void 0 || onChange(model.schema);
   }, []);
+  var handleSubmit = react.useCallback(function (model) {
+    onSubmit === null || onSubmit === void 0 || onSubmit(model.schema);
+  }, []);
   react.useEffect(function () {
     var _formRef$current;
     (_formRef$current = formRef.current) === null || _formRef$current === void 0 || _formRef$current.setValues({
@@ -51,7 +55,8 @@ var SchemaEditor = function SchemaEditor(_ref) {
   }, [schemaDef]);
   return /*#__PURE__*/jsxRuntime.jsxs(Form.Form, {
     formRef: formRef,
-    onSubmit: handleChange,
+    onChange: handleChange,
+    onSubmit: handleSubmit,
     children: [/*#__PURE__*/jsxRuntime.jsx(SchemaArrayForm.SchemaArrayForm, {
       dynamic: dynamic,
       optionLists: optionLists,

package/dist/cjs/builder/components/SchemaArrayForm.js

@@ -29,10 +29,9 @@ var SchemaArrayForm = function SchemaArrayForm(_ref) {
     fields = _useFieldArray.fields,
     append = _useFieldArray.append,
     remove = _useFieldArray.remove,
-    update = _useFieldArray.update,
     move = _useFieldArray.move;
   var handleTypeChange = react.useCallback(function (index, val) {
-    update(index, val);
+    form.setValue("schema.".concat(index), val);
   }, []);
   var handleRemove = react.useCallback(function (index) {
     remove(index);

package/dist/cjs/builder/components/SchemaField.js

@@ -130,7 +130,7 @@ var SchemaField = function SchemaField(_ref) {
       var modelRef = getModel();
       var reset = {
         datatype: type,
-        id: field,
+        id: id,
         label: modelRef.label,
         defaultValue: modelRef.defaultValue,
         required: modelRef.required,
@@ -161,7 +161,7 @@ var SchemaField = function SchemaField(_ref) {
       onTypeChange(reset);
       setType(type);
     }
-  }, []);
+  }, [id]);
   return /*#__PURE__*/jsxRuntime.jsx(SortableItem, {
     id: fieldId,
     className: "flex flex-nowrap gap-1 group/field",
@@ -244,7 +244,9 @@ var SchemaField = function SchemaField(_ref) {
               icon: core.CoreIcons.list,
               "aria-label": "Custom options",
               onClick: function onClick() {
-                void openOptionModal();
+                void openOptionModal({
+                  title: "".concat(id, " Options")
+                });
               }
             })]
           }), OptionModal]

package/dist/esm/builder/SchemaEditor.js

@@ -38,11 +38,15 @@ var SchemaEditor = function SchemaEditor(_ref) {
     _ref$optionLists = _ref.optionLists,
     optionLists = _ref$optionLists === void 0 ? EMPTY_ARRAY : _ref$optionLists,
     children = _ref.children,
+    onSubmit = _ref.onSubmit,
     onChange = _ref.onChange;
   var formRef = useRef(null);
   var handleChange = useCallback(function (model) {
     onChange === null || onChange === void 0 || onChange(model.schema);
   }, []);
+  var handleSubmit = useCallback(function (model) {
+    onSubmit === null || onSubmit === void 0 || onSubmit(model.schema);
+  }, []);
   useEffect(function () {
     var _formRef$current;
     (_formRef$current = formRef.current) === null || _formRef$current === void 0 || _formRef$current.setValues({
@@ -51,7 +55,8 @@ var SchemaEditor = function SchemaEditor(_ref) {
   }, [schemaDef]);
   return /*#__PURE__*/jsxs(Form, {
     formRef: formRef,
-    onSubmit: handleChange,
+    onChange: handleChange,
+    onSubmit: handleSubmit,
     children: [/*#__PURE__*/jsx(SchemaArrayForm, {
       dynamic: dynamic,
       optionLists: optionLists,

package/dist/esm/builder/components/SchemaArrayForm.js

@@ -29,10 +29,9 @@ var SchemaArrayForm = function SchemaArrayForm(_ref) {
     fields = _useFieldArray.fields,
     append = _useFieldArray.append,
     remove = _useFieldArray.remove,
-    update = _useFieldArray.update,
     move = _useFieldArray.move;
   var handleTypeChange = useCallback(function (index, val) {
-    update(index, val);
+    form.setValue("schema.".concat(index), val);
   }, []);
   var handleRemove = useCallback(function (index) {
     remove(index);

package/dist/esm/builder/components/SchemaField.js

@@ -130,7 +130,7 @@ var SchemaField = function SchemaField(_ref) {
       var modelRef = getModel();
       var reset = {
         datatype: type,
-        id: field,
+        id: id,
         label: modelRef.label,
         defaultValue: modelRef.defaultValue,
         required: modelRef.required,
@@ -161,7 +161,7 @@ var SchemaField = function SchemaField(_ref) {
       onTypeChange(reset);
       setType(type);
     }
-  }, []);
+  }, [id]);
   return /*#__PURE__*/jsx(SortableItem, {
     id: fieldId,
     className: "flex flex-nowrap gap-1 group/field",
@@ -244,7 +244,9 @@ var SchemaField = function SchemaField(_ref) {
               icon: CoreIcons.list,
               "aria-label": "Custom options",
               onClick: function onClick() {
-                void openOptionModal();
+                void openOptionModal({
+                  title: "".concat(id, " Options")
+                });
               }
             })]
           }), OptionModal]

package/dist/types/builder/SchemaEditor.d.ts

@@ -1,2 +1,2 @@
 import { type SchemaEditorProps } from "../types/schema";
-export declare const SchemaEditor: ({ schemaDef, dynamic, acceptableTypes, optionLists, children, onChange, }: SchemaEditorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SchemaEditor: ({ schemaDef, dynamic, acceptableTypes, optionLists, children, onSubmit, onChange, }: SchemaEditorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/types/schema.d.ts

@@ -99,6 +99,7 @@ export interface SchemaEditorProps {
      * footer actions
      */
     children?: Elements<JSX.Element> | Array<Elements<JSX.Element>>;
-    onChange: (schema: FormSchema) => void;
+    onChange?: (schema: FormSchema) => void;
+    onSubmit?: (schema: FormSchema) => void;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.35",
+  "version": "1.0.0-beta.36",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -39,9 +39,9 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/react": "^0.26.24",
     "@hookform/resolvers": "^3.9.0",
-    "@react-fabric/core": "^1.0.0-beta.35",
-    "@react-fabric/date": "^1.0.0-beta.35",
-    "@react-fabric/utilities": "^1.0.0-beta.35",
+    "@react-fabric/core": "^1.0.0-beta.36",
+    "@react-fabric/date": "^1.0.0-beta.36",
+    "@react-fabric/utilities": "^1.0.0-beta.36",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "react-color": "^2.19.3",
@@ -61,5 +61,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "4a5cb87557f8c7c88cac937e3bd71fd6eeb07113"
+  "gitHead": "91a7cce216e21cbc6406226d8c3f56a1a26e410a"
 }

package/src/builder/SchemaEditor.tsx

@@ -38,6 +38,7 @@ export const SchemaEditor = ({
   acceptableTypes,
   optionLists = EMPTY_ARRAY,
   children,
+  onSubmit,
   onChange,
 }: SchemaEditorProps) => {
   const formRef = useRef<FormRef<{ schema: FormSchema }>>(null);
@@ -46,12 +47,16 @@ export const SchemaEditor = ({
     onChange?.(model.schema);
   }, []);
 
+  const handleSubmit = useCallback((model: { schema: FormSchema }) => {
+    onSubmit?.(model.schema);
+  }, []);
+
   useEffect(() => {
     formRef.current?.setValues({ schema: schemaDef });
   }, [schemaDef]);
 
   return (
-    <Form formRef={formRef} onSubmit={handleChange}>
+    <Form formRef={formRef} onChange={handleChange} onSubmit={handleSubmit}>
       <SchemaArrayForm
         dynamic={dynamic}
         optionLists={optionLists}

package/src/builder/components/SchemaArrayForm.tsx

@@ -45,13 +45,13 @@ export const SchemaArrayForm = ({
 }: Partial<SchemaEditorProps>) => {
   const form = useFormContext();
   const [defaultOpen, setDefaultOpen] = useState(true);
-  const { fields, append, remove, update, move } = useFieldArray({
+  const { fields, append, remove, move } = useFieldArray({
     name: "schema",
     control: form.control,
   });
 
   const handleTypeChange = useCallback((index: number, val: KeyValue) => {
-    update(index, val);
+    form.setValue(`schema.${index}`, val);
   }, []);
 
   const handleRemove = useCallback((index: number) => {

package/src/builder/components/SchemaField.tsx

@@ -168,43 +168,46 @@ export const SchemaField = ({
     }, 10);
   }, []);
 
-  const handleTypeChange = useCallback((type: DATA_TYPES) => {
-    if (type) {
-      const modelRef = getModel();
-      let reset = {
-        datatype: type,
-        id: field,
-        label: modelRef.label,
-        defaultValue: modelRef.defaultValue,
-        required: modelRef.required,
-        multiple: type === DATA_TYPES.AVATAR ? false : modelRef.multiple,
-        minItems: modelRef.minItems,
-        maxItems: modelRef.maxItems,
-      } as DefaultSchema & ValueType;
-      if (type === DATA_TYPES.STRING) {
-        reset = Object.assign(reset, {
-          optionList: modelRef.optionList,
-          options: modelRef.options,
-          regex: modelRef.regex,
-        } as StringSchema);
-      } else if (type === DATA_TYPES.DATE) {
-        reset = Object.assign(reset, {
-          type: "date",
-        } as DateSchema);
-      } else if (type === DATA_TYPES.NUMBER || type === DATA_TYPES.RANGE) {
-        reset = Object.assign(reset, {
-          min: modelRef.min,
-          max: modelRef.max,
-          step: modelRef.step,
-        } as NumberSchema);
+  const handleTypeChange = useCallback(
+    (type: DATA_TYPES) => {
+      if (type) {
+        const modelRef = getModel();
+        let reset = {
+          datatype: type,
+          id,
+          label: modelRef.label,
+          defaultValue: modelRef.defaultValue,
+          required: modelRef.required,
+          multiple: type === DATA_TYPES.AVATAR ? false : modelRef.multiple,
+          minItems: modelRef.minItems,
+          maxItems: modelRef.maxItems,
+        } as DefaultSchema & ValueType;
+        if (type === DATA_TYPES.STRING) {
+          reset = Object.assign(reset, {
+            optionList: modelRef.optionList,
+            options: modelRef.options,
+            regex: modelRef.regex,
+          } as StringSchema);
+        } else if (type === DATA_TYPES.DATE) {
+          reset = Object.assign(reset, {
+            type: "date",
+          } as DateSchema);
+        } else if (type === DATA_TYPES.NUMBER || type === DATA_TYPES.RANGE) {
+          reset = Object.assign(reset, {
+            min: modelRef.min,
+            max: modelRef.max,
+            step: modelRef.step,
+          } as NumberSchema);
+        }
+        if (type === DATA_TYPES.AVATAR) {
+          setMultiple(false);
+        }
+        onTypeChange(reset);
+        setType(type);
       }
-      if (type === DATA_TYPES.AVATAR) {
-        setMultiple(false);
-      }
-      onTypeChange(reset);
-      setType(type);
-    }
-  }, []);
+    },
+    [id],
+  );
 
   return (
     <SortableItem id={fieldId} className="flex flex-nowrap gap-1 group/field">
@@ -276,7 +279,7 @@ export const SchemaField = ({
                     icon={CoreIcons.list}
                     aria-label="Custom options"
                     onClick={() => {
-                      void openOptionModal();
+                      void openOptionModal({ title: `${id} Options` });
                     }}
                   />
                 )}

package/src/types/schema.ts

@@ -150,5 +150,6 @@ export interface SchemaEditorProps {
    */
   children?: Elements<JSX.Element> | Array<Elements<JSX.Element>>;
 
-  onChange: (schema: FormSchema) => void;
+  onChange?: (schema: FormSchema) => void;
+  onSubmit?: (schema: FormSchema) => void;
 }