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

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

@@ -0,0 +1,413 @@
+'use client';
+
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useOverlayService, Modal, Content, Footer, Button, Collapsable, CoreIcons, ToggleButtonGroup } from '@react-fabric/core';
+import { EMPTY_ARRAY } from '@react-fabric/utilities';
+import classNames from 'classnames';
+import { useState, useCallback, useEffect, Fragment } from 'react';
+import { Controller } from '../../form/Controller.js';
+import { ArrayInput } from '../../input/ArrayInput.js';
+import { Checkbox } from '../../input/Checkbox.js';
+import { DateInput } from '../../input/DateInput.js';
+import { Field } from '../../input/Field.js';
+import { HiddenInput } from '../../input/Hidden.js';
+import { Input } from '../../input/Input.js';
+import { Number } from '../../input/Number.js';
+import { Select } from '../../select/Select.js';
+import { SCHEMA_CUSTOM_LIST, DATA_TYPES } from '../../types/schema.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SchemaField = function SchemaField(_ref) {
+  var id = _ref.id,
+    field = _ref.field,
+    fieldId = _ref.fieldId,
+    getModel = _ref.getModel,
+    onRemove = _ref.onRemove,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? true : _ref$defaultOpen,
+    _ref$optionLists = _ref.optionLists,
+    optionLists = _ref$optionLists === void 0 ? EMPTY_ARRAY : _ref$optionLists,
+    dynamic = _ref.dynamic,
+    onTypeChange = _ref.onTypeChange,
+    acceptableTypes = _ref.acceptableTypes;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    type = _useState2[0],
+    setType = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    multiple = _useState4[0],
+    setMultiple = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hasOptions = _useState6[0],
+    setHasOptions = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    customOptions = _useState8[0],
+    setCustomOptions = _useState8[1];
+  var SortableItem = useCallback(function (_ref2) {
+    var id = _ref2.id,
+      children = _ref2.children,
+      className = _ref2.className;
+    if (dynamic) {
+      var _useSortable = useSortable({
+          id: id
+        }),
+        attributes = _useSortable.attributes,
+        listeners = _useSortable.listeners,
+        setNodeRef = _useSortable.setNodeRef,
+        transform = _useSortable.transform,
+        transition = _useSortable.transition,
+        isDragging = _useSortable.isDragging;
+      return /*#__PURE__*/jsxs("div", {
+        className: className,
+        ref: setNodeRef,
+        style: {
+          transform: CSS.Transform.toString(transform),
+          transition: transition
+        },
+        children: [/*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread({
+          className: classNames("invisible group-hover/field:visible my-2 w-4", isDragging ? "cursor-grabbing" : "cursor-grab")
+        }, attributes), listeners), {}, {
+          style: {
+            backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='4' width='4'%3E%3Ccircle cx='2' cy='2' r='1' fill='%238888' /%3E%3C/svg%3E \")"
+          }
+        })), children]
+      });
+    }
+    return /*#__PURE__*/jsx("div", {
+      className: className,
+      children: children
+    });
+  }, [dynamic]);
+  // @ts-expect-error ignore
+  SortableItem.displayName = "SortableItem";
+  var _useOverlayService = useOverlayService(function (props) {
+      return /*#__PURE__*/jsxs(Modal, _objectSpread(_objectSpread({}, props), {}, {
+        children: [/*#__PURE__*/jsx(Content, {
+          children: /*#__PURE__*/jsx(ArrayInput, {
+            name: "".concat(field, ".options"),
+            onAdd: function onAdd() {
+              return String("");
+            },
+            children: /*#__PURE__*/jsx(Controller, {
+              children: /*#__PURE__*/jsx(Input, {})
+            })
+          })
+        }), /*#__PURE__*/jsx(Footer, {
+          flex: true,
+          justify: "end",
+          className: "sticky bottom-0 border-t bg-base px-6 py-2",
+          children: /*#__PURE__*/jsx(Button, {
+            variant: "link",
+            onClick: props.onClose,
+            children: "Close"
+          })
+        })]
+      }));
+    }),
+    _useOverlayService2 = _slicedToArray(_useOverlayService, 2),
+    OptionModal = _useOverlayService2[0],
+    openOptionModal = _useOverlayService2[1];
+  useEffect(function () {
+    setTimeout(function () {
+      var model = getModel();
+      setType(model.datatype);
+      setMultiple(model.multiple);
+      setHasOptions(!!model.optionList);
+      setCustomOptions(model.optionList === SCHEMA_CUSTOM_LIST);
+    }, 10);
+  }, []);
+  var handleTypeChange = useCallback(function (type) {
+    if (type) {
+      var modelRef = getModel();
+      var reset = {
+        datatype: type,
+        id: id,
+        label: modelRef.label,
+        defaultValue: modelRef.defaultValue,
+        required: modelRef.required,
+        multiple: type === DATA_TYPES.AVATAR ? false : modelRef.multiple,
+        minItems: modelRef.minItems,
+        maxItems: modelRef.maxItems
+      };
+      if (type === DATA_TYPES.STRING) {
+        reset = Object.assign(reset, {
+          optionList: modelRef.optionList,
+          options: modelRef.options,
+          regex: modelRef.regex
+        });
+      } else if (type === DATA_TYPES.DATE) {
+        reset = Object.assign(reset, {
+          type: "date"
+        });
+      } else if (type === DATA_TYPES.NUMBER || type === DATA_TYPES.RANGE) {
+        reset = Object.assign(reset, {
+          min: modelRef.min,
+          max: modelRef.max,
+          step: modelRef.step
+        });
+      }
+      if (type === DATA_TYPES.AVATAR) {
+        setMultiple(false);
+      }
+      onTypeChange(reset);
+      setType(type);
+    }
+  }, [id]);
+  return /*#__PURE__*/jsx(SortableItem, {
+    id: fieldId,
+    className: "flex flex-nowrap gap-1 group/field",
+    children: /*#__PURE__*/jsxs(Collapsable, {
+      open: defaultOpen,
+      className: "flex-1",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex flex-nowrap items-center",
+        children: [/*#__PURE__*/jsx("span", {
+          className: "flex-1 truncate",
+          children: id
+        }), dynamic && /*#__PURE__*/jsx(Button, {
+          size: "sm",
+          color: "danger",
+          variant: "link",
+          "aria-label": "Delete",
+          stopPropagation: true,
+          icon: CoreIcons.trash,
+          onClick: onRemove,
+          className: "invisible group-hover/field:visible"
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex flex-col gap-1 pb-4",
+        children: [/*#__PURE__*/jsx(Controller, {
+          name: "".concat(field, ".id"),
+          children: /*#__PURE__*/jsx(HiddenInput, {
+            hiddenValue: id
+          })
+        }), /*#__PURE__*/jsx(Controller, {
+          name: "".concat(field, ".datatype"),
+          children: /*#__PURE__*/jsx(Select, {
+            inline: true,
+            label: "Type",
+            placeholder: "Data type",
+            options: acceptableTypes,
+            onChange: function onChange(val) {
+              return handleTypeChange(val);
+            }
+          })
+        }), /*#__PURE__*/jsx(Controller, {
+          name: "".concat(field, ".label"),
+          children: /*#__PURE__*/jsx(Input, {
+            inline: true,
+            label: "Label",
+            allowClear: true,
+            placeholder: "Label...",
+            decorateEndShowWhenEmpty: true,
+            decorateEnd: /*#__PURE__*/jsx("span", {
+              className: "text-sm text-muted/50 px-1",
+              children: "OPTIONAL"
+            })
+          })
+        }), type === DATA_TYPES.STRING && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(Controller, {
+            name: "".concat(field, ".regex"),
+            children: /*#__PURE__*/jsx(Input, {
+              inline: true,
+              label: "Regex validation",
+              allowClear: true,
+              placeholder: "Regex value...",
+              decorateEndShowWhenEmpty: true,
+              decorateEnd: /*#__PURE__*/jsx("span", {
+                className: "text-sm text-muted/50 px-1",
+                children: "OPTIONAL"
+              })
+            })
+          }), /*#__PURE__*/jsxs(Field, {
+            inline: true,
+            label: "Option list",
+            children: [/*#__PURE__*/jsx(Controller, {
+              name: "".concat(field, ".optionList"),
+              children: /*#__PURE__*/jsx(Select, {
+                allowClear: true,
+                options: [SCHEMA_CUSTOM_LIST].concat(_toConsumableArray(optionLists)),
+                onChange: function onChange(v) {
+                  return setCustomOptions(v === SCHEMA_CUSTOM_LIST);
+                }
+              })
+            }), customOptions && /*#__PURE__*/jsx(Button, {
+              icon: CoreIcons.list,
+              "aria-label": "Custom options",
+              onClick: function onClick() {
+                void openOptionModal({
+                  title: "".concat(id, " Options")
+                });
+              }
+            })]
+          }), OptionModal]
+        }), type === DATA_TYPES.FILE && /*#__PURE__*/jsx(Fragment, {
+          children: /*#__PURE__*/jsx(Controller, {
+            name: "".concat(field, ".accept"),
+            children: /*#__PURE__*/jsx(Input, {
+              inline: true,
+              label: "Accept types",
+              allowClear: true,
+              placeholder: "Accept value...",
+              decorateEndShowWhenEmpty: true,
+              decorateEnd: /*#__PURE__*/jsx("span", {
+                className: "text-sm text-muted/50 px-1",
+                children: "OPTIONAL"
+              })
+            })
+          })
+        }), [DATA_TYPES.NUMBER, DATA_TYPES.RANGE].includes(type) && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(Controller, {
+            name: "".concat(field, ".min"),
+            children: /*#__PURE__*/jsx(Number, {
+              inline: true,
+              label: "Min value",
+              allowClear: true,
+              placeholder: "Minimum value...",
+              decorateEndShowWhenEmpty: true,
+              decorateEnd: /*#__PURE__*/jsx("span", {
+                className: "text-sm text-muted/50 px-1",
+                children: "OPTIONAL"
+              })
+            })
+          }), /*#__PURE__*/jsx(Controller, {
+            name: "".concat(field, ".max"),
+            children: /*#__PURE__*/jsx(Number, {
+              inline: true,
+              label: "Max value",
+              allowClear: true,
+              placeholder: "Maximum value...",
+              decorateEndShowWhenEmpty: true,
+              decorateEnd: /*#__PURE__*/jsx("span", {
+                className: "text-sm text-muted/50 px-1",
+                children: "OPTIONAL"
+              })
+            })
+          }), /*#__PURE__*/jsx(Controller, {
+            name: "".concat(field, ".step"),
+            children: /*#__PURE__*/jsx(Number, {
+              inline: true,
+              label: "Step value",
+              allowClear: true,
+              placeholder: "Step value...",
+              decorateEndShowWhenEmpty: true,
+              decorateEnd: /*#__PURE__*/jsx("span", {
+                className: "text-sm text-muted/50 px-1",
+                children: "OPTIONAL"
+              })
+            })
+          })]
+        }), type === DATA_TYPES.DATE && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(Field, {
+            inline: true,
+            label: "Type",
+            plain: true,
+            children: /*#__PURE__*/jsx(Controller, {
+              name: "".concat(field, ".type"),
+              children: /*#__PURE__*/jsxs(ToggleButtonGroup, {
+                value: "",
+                fullWidth: true,
+                className: "flex-1",
+                children: [/*#__PURE__*/jsx(Button, {
+                  className: "flex-1",
+                  value: "date",
+                  children: "Date"
+                }), /*#__PURE__*/jsx(Button, {
+                  className: "flex-1",
+                  value: "datetime",
+                  children: "Date Time"
+                })]
+              })
+            })
+          }), /*#__PURE__*/jsx(Controller, {
+            name: "".concat(field, ".min"),
+            children: /*#__PURE__*/jsx(DateInput, {
+              inline: true,
+              label: "Min value",
+              allowClear: true,
+              placeholder: "Minimum value...",
+              decorateEndShowWhenEmpty: true,
+              decorateEnd: /*#__PURE__*/jsx("span", {
+                className: "text-sm text-muted/50 px-1",
+                children: "OPTIONAL"
+              })
+            })
+          }), /*#__PURE__*/jsx(Controller, {
+            name: "".concat(field, ".max"),
+            children: /*#__PURE__*/jsx(DateInput, {
+              inline: true,
+              label: "Max value",
+              allowClear: true,
+              placeholder: "Maximum value...",
+              decorateEndShowWhenEmpty: true,
+              decorateEnd: /*#__PURE__*/jsx("span", {
+                className: "text-sm text-muted/50 px-1",
+                children: "OPTIONAL"
+              })
+            })
+          })]
+        }), /*#__PURE__*/jsxs(Field, {
+          label: " ",
+          inline: true,
+          plain: true,
+          children: [/*#__PURE__*/jsx(Controller, {
+            name: "".concat(field, ".required"),
+            children: /*#__PURE__*/jsx(Checkbox, {
+              label: "Required"
+            })
+          }), type !== DATA_TYPES.AVATAR && /*#__PURE__*/jsx(Controller, {
+            name: "".concat(field, ".multiple"),
+            children: /*#__PURE__*/jsx(Checkbox, {
+              label: "Multiple",
+              onChange: setMultiple
+            })
+          }), hasOptions && /*#__PURE__*/jsx(Controller, {
+            name: "".concat(field, ".allowCustom"),
+            children: /*#__PURE__*/jsx(Checkbox, {
+              label: "Allow custom value"
+            })
+          })]
+        }), multiple && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(Controller, {
+            name: "".concat(field, ".minItems"),
+            children: /*#__PURE__*/jsx(Number, {
+              inline: true,
+              label: "Min items",
+              allowClear: true,
+              placeholder: "Minimum items...",
+              decorateEndShowWhenEmpty: true,
+              decorateEnd: /*#__PURE__*/jsx("span", {
+                className: "text-sm text-muted/50 px-1",
+                children: "OPTIONAL"
+              })
+            })
+          }), /*#__PURE__*/jsx(Controller, {
+            name: "".concat(field, ".maxItems"),
+            children: /*#__PURE__*/jsx(Number, {
+              inline: true,
+              label: "Max items",
+              allowClear: true,
+              placeholder: "Maximum items...",
+              decorateEndShowWhenEmpty: true,
+              decorateEnd: /*#__PURE__*/jsx("span", {
+                className: "text-sm text-muted/50 px-1",
+                children: "OPTIONAL"
+              })
+            })
+          })]
+        })]
+      })]
+    }, fieldId)
+  });
+};
+
+export { SchemaField };

package/dist/esm/form/Form.js

@@ -25,13 +25,12 @@ var Form = function Form(_ref) {
     _ref$defaultValues = _ref.defaultValues,
     defaultValues = _ref$defaultValues === void 0 ? EMPTY_OBJECT : _ref$defaultValues,
     _ref$onSubmit = _ref.onSubmit,
-    onSubmit = _ref$onSubmit === void 0 ? DEFAULT_SUBMIT : _ref$onSubmit,
+    _onSubmit = _ref$onSubmit === void 0 ? DEFAULT_SUBMIT : _ref$onSubmit,
     onChange = _ref.onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
   var ref = useRef(null);
   var form = useForm({
     shouldFocusError: true,
-    shouldUnregister: true,
     resolver: schema && yupResolver(schema),
     defaultValues: defaultValues
   });
@@ -66,7 +65,7 @@ var Form = function Form(_ref) {
         return handleReset();
       },
       submit: function submit() {
-        return form.handleSubmit(onSubmit);
+        return form.handleSubmit(_onSubmit);
       },
       validate: function () {
         var _validate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -96,12 +95,6 @@ var Form = function Form(_ref) {
           return form.reset(v);
         }, 50);
       },
-      removeField: function removeField(field) {
-        return form.unregister(field, {
-          keepDefaultValue: false,
-          keepValue: false
-        });
-      },
       setValue: function setValue(k, v) {
         return setTimeout(function () {
           return form.setValue(k, v, {
@@ -111,7 +104,7 @@ var Form = function Form(_ref) {
         }, 50);
       }
     };
-  }, [onSubmit, form, form.formState, defaultValues]);
+  }, [_onSubmit, form, form.formState, defaultValues]);
   var onInvalid = useCallback(function (_, e) {
     var el = e.target;
     setTimeout(function () {
@@ -125,7 +118,10 @@ var Form = function Form(_ref) {
       onReset: function onReset() {
         return handleReset(defaultValues);
       },
-      onSubmit: form.handleSubmit(onSubmit, onInvalid),
+      onSubmit: function onSubmit(e) {
+        e.stopPropagation();
+        void form.handleSubmit(_onSubmit, onInvalid)(e);
+      },
       "data-loading": form.formState.isSubmitting,
       className: "contents",
       autoComplete: "off"

package/dist/esm/index.js

@@ -6,7 +6,7 @@ export { Form } from './form/Form.js';
 export { SchemaEditor } from './builder/SchemaEditor.js';
 export { useFileUploader } from './hooks/useFileUploader.js';
 export { useFormBuilder } from './hooks/useFormBuilder.js';
-export { DATA_TYPES } from './types/schema.js';
+export { DATA_TYPES, SCHEMA_CUSTOM_LIST } from './types/schema.js';
 export { ArrayInput } from './input/ArrayInput.js';
 export { Checkbox } from './input/Checkbox.js';
 export { ColorInput } from './input/ColorInput.js';

package/dist/esm/types/schema.js

@@ -36,5 +36,6 @@ var DATA_TYPES = /*#__PURE__*/function (DATA_TYPES) {
   DATA_TYPES["SCHEMA"] = "schema";
   return DATA_TYPES;
 }({});
+var SCHEMA_CUSTOM_LIST = "--CUSTOM--";
 
-export { DATA_TYPES };
+export { DATA_TYPES, SCHEMA_CUSTOM_LIST };

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

@@ -1,16 +1,2 @@
-/// <reference types="react" />
-import { type Elements } from "@react-fabric/core/dist/types/types";
-import { DATA_TYPES, type FormSchema } from "../types/schema";
-interface Props {
-    schemaDef: FormSchema;
-    allowRemove?: boolean;
-    acceptableTypes?: DATA_TYPES[];
-    optionLists?: string[];
-    /**
-     * Footer actions
-     */
-    children?: Elements<JSX.Element> | Array<Elements<JSX.Element>>;
-    onChange: (schema: FormSchema) => void;
-}
-export declare const SchemaEditor: ({ schemaDef, allowRemove, acceptableTypes, optionLists, children, onChange, }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};
+import { type SchemaEditorProps } from "../types/schema";
+export declare const SchemaEditor: ({ schemaDef, dynamic, acceptableTypes, optionLists, children, onSubmit, onChange, }: SchemaEditorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/builder/components/AddSchemaFields.d.ts

@@ -0,0 +1,2 @@
+import { type ModalProps } from "@react-fabric/core";
+export declare const AddSchemaFields: (props: ModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/builder/components/SchemaArrayForm.d.ts

@@ -0,0 +1,2 @@
+import { type SchemaEditorProps } from "../../types/schema";
+export declare const SchemaArrayForm: ({ dynamic, acceptableTypes, optionLists, }: Partial<SchemaEditorProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/builder/components/SchemaField.d.ts

@@ -0,0 +1,10 @@
+import { type SchemaEditorProps } from "../../types/schema";
+export declare const SchemaField: ({ id, field, fieldId, getModel, onRemove, defaultOpen, optionLists, dynamic, onTypeChange, acceptableTypes, }: {
+    id: string;
+    field: string;
+    fieldId: string;
+    defaultOpen?: boolean;
+    onRemove: () => void;
+    getModel: () => KeyValue;
+    onTypeChange: (val: KeyValue) => void;
+} & Omit<SchemaEditorProps, "schemaDef" | "onChange">) => import("react/jsx-runtime").JSX.Element;

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

@@ -8,7 +8,6 @@ export interface FormRef<K extends KeyValue> {
     submit: () => void;
     validate: () => Promise<boolean>;
     getValues: () => K;
-    removeField: (field: string) => void;
     setValue: (key: keyof K, value: AnyObject) => void;
     setValues: (values: K) => void;
 }

package/dist/types/index.d.ts

@@ -4,7 +4,7 @@ export { Form, type FormRef } from "./form/Form";
 export { SchemaEditor } from "./builder/SchemaEditor";
 export { useFileUploader } from "./hooks/useFileUploader";
 export { useFormBuilder } from "./hooks/useFormBuilder";
-export { DATA_TYPES, type FormSchema, type SchemaDef } from "./types/schema";
+export { DATA_TYPES, SCHEMA_CUSTOM_LIST, type FormSchema, type SchemaDef, } from "./types/schema";
 export { ArrayInput } from "./input/ArrayInput";
 export { Checkbox } from "./input/Checkbox";
 export { ColorInput } from "./input/ColorInput";

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

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+import { type Elements } from "@react-fabric/core/dist/types/types";
 import { type DateLike } from "@react-fabric/date";
 export declare enum DATA_TYPES {
     TEXT = "text",
@@ -11,6 +13,7 @@ export declare enum DATA_TYPES {
     AVATAR = "avatar",
     SCHEMA = "schema"
 }
+export declare const SCHEMA_CUSTOM_LIST = "--CUSTOM--";
 interface SingleValue {
     multiple?: false;
     minItems?: never;
@@ -75,4 +78,28 @@ export interface ChildSchema extends BaseSchema {
 }
 export type SchemaDef = SchemaType | (ChildSchema & ValueType);
 export type FormSchema = SchemaDef[];
+export interface SchemaEditorProps {
+    /**
+     * default form schema
+     */
+    schemaDef: FormSchema;
+    /**
+     * is dynamic schema (allow add/remove)
+     */
+    dynamic?: boolean;
+    /**
+     * acceptable list of data types
+     */
+    acceptableTypes?: DATA_TYPES[];
+    /**
+     * available option lists in application
+     */
+    optionLists?: string[];
+    /**
+     * footer actions
+     */
+    children?: Elements<JSX.Element> | Array<Elements<JSX.Element>>;
+    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.34",
+  "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.34",
-    "@react-fabric/date": "^1.0.0-beta.34",
-    "@react-fabric/utilities": "^1.0.0-beta.34",
+    "@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": "dcd1c1b247b6597b168a0649d2b3a53463b9c37e"
+  "gitHead": "91a7cce216e21cbc6406226d8c3f56a1a26e410a"
 }