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

package/dist/esm/input/Input.js

@@ -42,7 +42,7 @@ var Input = function Input(_ref) {
   var handleChange = useCallback(function (e) {
     var value = e === null || e === void 0 ? void 0 : e.target.value;
     setActualValue(value !== null && value !== void 0 ? value : "");
-    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : undefined);
+    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : null);
   }, [onchange]);
   return /*#__PURE__*/jsx(InputWrapper, _objectSpread(_objectSpread({
     showClear: !!actualValue,

package/dist/esm/input/Number.js

@@ -42,7 +42,7 @@ var Number = function Number(_ref) {
   var handleChange = useCallback(function (e) {
     var number = e === null || e === void 0 ? void 0 : e.target.valueAsNumber;
     setActualValue(number !== null && number !== void 0 ? number : "");
-    onChange === null || onChange === void 0 || onChange(number !== null && number !== void 0 ? number : undefined);
+    onChange === null || onChange === void 0 || onChange(number !== null && number !== void 0 ? number : null);
   }, [onChange]);
   return /*#__PURE__*/jsx(InputWrapper, _objectSpread(_objectSpread({
     showClear: !!actualValue,

package/dist/esm/input/Password.js

@@ -50,7 +50,7 @@ var Password = function Password(_ref) {
   var handleChange = useCallback(function (e) {
     var value = e === null || e === void 0 ? void 0 : e.target.value;
     setActualValue(value !== null && value !== void 0 ? value : "");
-    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : undefined);
+    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : null);
   }, [onChange]);
   return /*#__PURE__*/jsxs(InputWrapper, _objectSpread(_objectSpread({
     showClear: !!actualValue,

package/dist/esm/input/RangeSlider.js

@@ -71,7 +71,7 @@ var RangeSlider = function RangeSlider(_ref) {
   }, [showValue]);
   var handleChange = useCallback(function (val) {
     setActualValue(val !== null && val !== void 0 ? val : [min, max]);
-    onChange === null || onChange === void 0 || onChange(val !== null && val !== void 0 ? val : undefined);
+    onChange === null || onChange === void 0 || onChange(val !== null && val !== void 0 ? val : null);
   }, [onChange, min, max]);
   var minDisplay = useMemo(function () {
     return /*#__PURE__*/jsx("span", {

package/dist/esm/input/Search.js

@@ -53,7 +53,7 @@ var Search = function Search(_ref) {
     var value = e === null || e === void 0 ? void 0 : e.target.value;
     refValue.current = value !== null && value !== void 0 ? value : "";
     setActualValue(value !== null && value !== void 0 ? value : "");
-    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : undefined);
+    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : null);
 
     // value was cleared so force fire onSearch
     if (searchOnChange) {

package/dist/esm/input/Slider.js

@@ -73,7 +73,7 @@ var Slider = function Slider(_ref) {
   var handleChange = useCallback(function (value) {
     var val = useInfinity && value === max ? Infinity : value;
     setActualValue(val !== null && val !== void 0 ? val : 0);
-    onChange === null || onChange === void 0 || onChange(val !== null && val !== void 0 ? val : undefined);
+    onChange === null || onChange === void 0 || onChange(val !== null && val !== void 0 ? val : null);
   }, [onChange, max, useInfinity]);
   var minDisplay = useMemo(function () {
     return /*#__PURE__*/jsx("span", {

package/dist/esm/input/Textarea.js

@@ -47,7 +47,7 @@ var Textarea = function Textarea(_ref) {
   var handleChange = useCallback(function (e) {
     var value = e === null || e === void 0 ? void 0 : e.target.value;
     setActualValue(value !== null && value !== void 0 ? value : "");
-    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : undefined);
+    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : null);
   }, [onChange]);
   useEffect(function () {
     if (variableRows) {

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,10 +1,2 @@
-import { DATA_TYPES, type FormSchema } from "../types/schema";
-interface Props {
-    schemaDef: FormSchema;
-    allowRemove?: boolean;
-    acceptableTypes?: DATA_TYPES[];
-    optionLists?: string[];
-    onChange: (schema: FormSchema) => void;
-}
-export declare const SchemaEditor: ({ schemaDef, allowRemove, acceptableTypes, optionLists, onChange, }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};
+import { type SchemaEditorProps } from "../types/schema";
+export declare const SchemaEditor: ({ schemaDef, dynamic, acceptableTypes, optionLists, children, 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

@@ -17,10 +17,6 @@ export interface FormProps<K extends KeyValue = KeyValue> {
      * form data schema
      */
     schema?: yup.ObjectSchema<K>;
-    /**
-     * current form model
-     */
-    values?: K;
     /**
      * default data values
      */
@@ -34,4 +30,4 @@ export interface FormProps<K extends KeyValue = KeyValue> {
      */
     onSubmit?: (values: K) => void;
 }
-export declare const Form: <K extends KeyValue<any>>({ formRef, schema, children, values, defaultValues, onSubmit, onChange, ...rest }: PropsWithChildren<FormProps<K>>) => import("react/jsx-runtime").JSX.Element;
+export declare const Form: <K extends KeyValue<any>>({ formRef, schema, children, defaultValues, onSubmit, onChange, ...rest }: PropsWithChildren<FormProps<K>>) => import("react/jsx-runtime").JSX.Element;

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/input/ColorInput.d.ts

@@ -1,7 +1,7 @@
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import { type InputProps } from "../types";
 import { type ColorProps } from "./ColorPicker";
-export interface ColorInputProps extends InputProps, ColorProps, RefProp {
+export interface ColorInputProps extends InputProps, Omit<ColorProps, "onChange">, RefProp {
     /**
      * show eydrop picker
      */

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

@@ -8,7 +8,7 @@ export interface InputProps<V = string> extends TestProps {
     /**
      * change handler
      */
-    onChange?: (value?: V) => void;
+    onChange?: (value?: V | null) => void;
     /**
      * on focus event handler
      */

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,27 @@ 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;
+}
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.33",
+  "version": "1.0.0-beta.35",
   "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.33",
-    "@react-fabric/date": "^1.0.0-beta.33",
-    "@react-fabric/utilities": "^1.0.0-beta.33",
+    "@react-fabric/core": "^1.0.0-beta.35",
+    "@react-fabric/date": "^1.0.0-beta.35",
+    "@react-fabric/utilities": "^1.0.0-beta.35",
     "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": "3b7ffc99aac7b8fdc72c7122c39db55d1104297f"
+  "gitHead": "4a5cb87557f8c7c88cac937e3bd71fd6eeb07113"
 }

package/src/builder/FormField.tsx

@@ -151,7 +151,7 @@ export const FormField = ({
   return rest.multiple && !hasOptions ? (
     <ArrayInput
       name={fieldName}
-      label={t(label, label)}
+      label={t(`fb.${id}`, label || id)}
       required={required}
       onAdd={() => String("")}
     >
@@ -164,8 +164,8 @@ export const FormField = ({
       <E
         {...props}
         autoFocus={autoFocus}
-        label={t(label, label)}
-        placeholder={t(label, label)}
+        label={t(`fb.${id}`, label || id)}
+        placeholder={t(`fb.${id}`, label || id)}
         required={required}
         inline={inline}
       />