@react-fabric/form 1.0.0-beta.61 → 1.0.0-beta.62

package/dist/esm/form/Form.js

@@ -1,8 +1,8 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { useDebounce } from '@react-fabric/core';
@@ -11,7 +11,7 @@ import { useRef, useTransition, useEffect, useCallback, useImperativeHandle } fr
 import { useForm as useForm$1, FormProvider, useFormContext, useWatch } from 'react-hook-form';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["formRef", "resolver", "children", "defaultValues", "onSubmit", "onChange"];
+var _excluded = ["formRef", "resolver", "children", "resetOnChange", "defaultValues", "onSubmit", "onChange"];
 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 DEFAULT_SUBMIT = function DEFAULT_SUBMIT() {
@@ -50,8 +50,9 @@ var Form = function Form(_ref) {
   var formRef = _ref.formRef,
     resolver = _ref.resolver,
     children = _ref.children,
+    resetOnChange = _ref.resetOnChange,
     _ref$defaultValues = _ref.defaultValues,
-    defaultValues = _ref$defaultValues === void 0 ? EMPTY_OBJECT : _ref$defaultValues,
+    _defaultValues = _ref$defaultValues === void 0 ? EMPTY_OBJECT : _ref$defaultValues,
     _ref$onSubmit = _ref.onSubmit,
     _onSubmit = _ref$onSubmit === void 0 ? DEFAULT_SUBMIT : _ref$onSubmit,
     onChange = _ref.onChange,
@@ -60,7 +61,26 @@ var Form = function Form(_ref) {
   var form = useForm$1({
     shouldFocusError: true,
     resolver: resolver,
-    defaultValues: defaultValues
+    defaultValues: function () {
+      var _defaultValues2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return Promise.resolve(_defaultValues);
+            case 2:
+              return _context.abrupt("return", _context.sent);
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function defaultValues() {
+        return _defaultValues2.apply(this, arguments);
+      }
+      return defaultValues;
+    }()
   });
   var _useTransition = useTransition(),
     _useTransition2 = _slicedToArray(_useTransition, 2),
@@ -82,12 +102,17 @@ var Form = function Form(_ref) {
     form.reset(reset);
     form.clearErrors();
     (_ref$current = ref.current) === null || _ref$current === void 0 || (_ref$current = _ref$current.querySelector("[auto-focus], input, textarea")) === null || _ref$current === void 0 || _ref$current.focus();
-  }, [defaultValues]);
+  }, []);
+  useEffect(function () {
+    if (resetOnChange) {
+      handleReset(_defaultValues);
+    }
+  }, [_defaultValues, resetOnChange]);
   useImperativeHandle(formRef, function () {
     return {
       state: form.formState,
       reset: function reset() {
-        return handleReset(defaultValues);
+        return handleReset(_defaultValues);
       },
       clear: function clear() {
         return handleReset();
@@ -96,19 +121,19 @@ var Form = function Form(_ref) {
         return form.handleSubmit(_onSubmit);
       },
       validate: function () {
-        var _validate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(fields) {
-          return _regeneratorRuntime.wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
+        var _validate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(fields) {
+          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
               case 0:
-                _context.next = 2;
+                _context2.next = 2;
                 return form.trigger(fields);
               case 2:
-                return _context.abrupt("return", _context.sent);
+                return _context2.abrupt("return", _context2.sent);
               case 3:
               case "end":
-                return _context.stop();
+                return _context2.stop();
             }
-          }, _callee);
+          }, _callee2);
         }));
         function validate(_x) {
           return _validate.apply(this, arguments);
@@ -132,7 +157,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;
     console.log("Invalid:", _, e);
@@ -145,7 +170,7 @@ var Form = function Form(_ref) {
     children: /*#__PURE__*/jsxs("form", _objectSpread(_objectSpread({
       ref: ref,
       onReset: function onReset() {
-        return handleReset(defaultValues);
+        return handleReset(_defaultValues);
       },
       onSubmit: function onSubmit(e) {
         e.stopPropagation();

package/dist/esm/hooks/useFileUploader.js

@@ -6,7 +6,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { isString, uuid, isObject, isArray } from '@react-fabric/utilities';
-import { useReducer, useCallback } from 'react';
+import { useReducer, useEffect, useCallback } from 'react';
 
 var _excluded = ["progress", "abort"],
   _excluded2 = ["file", "progress", "abort"];
@@ -29,7 +29,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * ```
  */
 var useFileUploader = function useFileUploader(uploader, initialList) {
-  var multiple = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+    _ref$multiple = _ref.multiple,
+    multiple = _ref$multiple === void 0 ? true : _ref$multiple,
+    onChange = _ref.onChange;
   var _useReducer = useReducer(function (state, action) {
       if (action.type === "start") {
         if (!multiple) state.files.clear();
@@ -76,40 +79,26 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
       if (action.type === "remove") {
         state.files["delete"](action.key);
       }
-      state.list = Array.from(state.files.values()).map(function (file) {
-        return !file.progress && !file.error && {
-          key: file.key,
-          path: file.path,
-          mime: file.mime,
-          size: file.size,
-          uploaded: file.uploaded,
-          filename: file.filename
-        };
-      }).filter(Boolean);
-      return _objectSpread({}, state);
-    }, {
-      files: new Map(),
-      count: 0
-    }, function (state) {
-      if (initialList) {
-        if (isString(initialList)) {
+      if (action.type === "init") {
+        state.files = new Map();
+        if (isString(action.initialList)) {
           var key = uuid();
           state.files.set(key, {
             key: key,
-            path: initialList,
+            path: action.initialList,
             filename: "",
             size: 0,
             mime: ""
           });
         }
-        if (isObject(initialList)) {
+        if (isObject(action.initialList)) {
           var _key = uuid();
-          state.files.set(_key, _objectSpread(_objectSpread({}, initialList), {}, {
+          state.files.set(_key, _objectSpread(_objectSpread({}, action.initialList), {}, {
             key: _key
           }));
         }
-        if (isArray(initialList)) {
-          initialList.forEach(function (file) {
+        if (isArray(action.initialList)) {
+          action.initialList.forEach(function (file) {
             var key = uuid();
             state.files.set(key, _objectSpread(_objectSpread({}, file), {}, {
               key: key
@@ -117,14 +106,38 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
           });
         }
       }
-      state.list = Array.from(state.files.values());
-      return state;
+      state.list = Array.from(state.files.values()).map(function (file) {
+        return !file.progress && !file.error && {
+          key: file.key,
+          path: file.path,
+          mime: file.mime,
+          size: file.size,
+          uploaded: file.uploaded,
+          filename: file.filename
+        };
+      }).filter(Boolean);
+      if (action.type === "remove" || action.type === "stop") {
+        setTimeout(function () {
+          var _state$list$;
+          onChange === null || onChange === void 0 || onChange(multiple ? state.list : (_state$list$ = state.list[0]) !== null && _state$list$ !== void 0 ? _state$list$ : null);
+        }, 100);
+      }
+      return _objectSpread({}, state);
+    }, {
+      files: new Map(),
+      count: 0
     }),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
     dispatch = _useReducer2[1];
+  useEffect(function () {
+    dispatch({
+      type: "init",
+      initialList: initialList
+    });
+  }, [initialList]);
   var doUpload = useCallback( /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(key, file) {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(key, file) {
       var data, _abort2;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -185,7 +198,7 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
       }, _callee);
     }));
     return function (_x, _x2) {
-      return _ref.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }(), []);
   var upload = useCallback(function (files) {
@@ -212,7 +225,6 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
     remove: remove,
     retry: retry,
     pending: state.count,
-    list: state.list,
     files: Array.from(state.files.values())
   };
 };

package/dist/esm/i18n/index.js

@@ -1,8 +1,8 @@
 'use client';
 
 import { addTranslationBundle } from '@react-fabric/core';
-import ar from './ar.json.js';
-import en from './en.json.js';
+import ar from './ar/form.json.js';
+import en from './en/form.json.js';
 
 /*
  * React Fabric

package/dist/esm/input/AvatarInput.js

@@ -12,7 +12,7 @@ import { useFileUploader } from '../hooks/useFileUploader.js';
 import { HiddenInput } from './Hidden.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["size", "avatarName", "avatarClassName", "value", "rounded", "defaultValue", "fallbackIcon", "variant", "fileUrl", "uploadHandler"];
+var _excluded = ["size", "avatarName", "avatarClassName", "value", "rounded", "defaultValue", "fallbackIcon", "variant", "fileUrl", "uploadHandler", "onChange"];
 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; }
 /**
@@ -24,7 +24,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @returns {JSX.Element} - The rendered AvatarInput component.
  */
 var AvatarInput = function AvatarInput(_ref) {
-  var _list$;
+  var _files$2;
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? "6rem" : _ref$size,
     avatarName = _ref.avatarName,
@@ -36,6 +36,7 @@ var AvatarInput = function AvatarInput(_ref) {
     variant = _ref.variant,
     fileUrl = _ref.fileUrl,
     uploadHandler = _ref.uploadHandler,
+    _onChange = _ref.onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useFileUploader = useFileUploader( /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, config) {
@@ -55,9 +56,14 @@ var AvatarInput = function AvatarInput(_ref) {
       return function (_x, _x2) {
         return _ref2.apply(this, arguments);
       };
-    }(), value, false),
+    }(), value !== null && value !== void 0 ? value : defaultValue, {
+      multiple: false,
+      onChange: function onChange(files) {
+        var _files$path;
+        return _onChange === null || _onChange === void 0 ? void 0 : _onChange((_files$path = files === null || files === void 0 ? void 0 : files.path) !== null && _files$path !== void 0 ? _files$path : null);
+      }
+    }),
     files = _useFileUploader.files,
-    list = _useFileUploader.list,
     upload = _useFileUploader.upload,
     remove = _useFileUploader.remove;
   var _useState = useState(""),
@@ -65,7 +71,7 @@ var AvatarInput = function AvatarInput(_ref) {
     base64 = _useState2[0],
     setBase64 = _useState2[1];
   useEffect(function () {
-    if (list !== null && list !== void 0 && list.length) {
+    if (files !== null && files !== void 0 && files.length) {
       var _files$;
       var file = files === null || files === void 0 || (_files$ = files[0]) === null || _files$ === void 0 ? void 0 : _files$.file;
       void (file && new Response(file).blob().then(function (blob) {
@@ -82,14 +88,14 @@ var AvatarInput = function AvatarInput(_ref) {
       var _ref3, _fileUrl;
       setBase64((_ref3 = (_fileUrl = fileUrl === null || fileUrl === void 0 ? void 0 : fileUrl(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "")) !== null && _fileUrl !== void 0 ? _fileUrl : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : "");
     }
-  }, [files, list, defaultValue]);
+  }, [files, defaultValue]);
   useEffect(function () {
     var _fileUrl2, _fileUrl3;
     !value && defaultValue && setBase64((_fileUrl2 = fileUrl === null || fileUrl === void 0 ? void 0 : fileUrl(defaultValue)) !== null && _fileUrl2 !== void 0 ? _fileUrl2 : defaultValue);
     value && setBase64((_fileUrl3 = fileUrl === null || fileUrl === void 0 ? void 0 : fileUrl(value)) !== null && _fileUrl3 !== void 0 ? _fileUrl3 : value);
   }, [value, defaultValue]);
   return /*#__PURE__*/jsxs("div", {
-    className: "flex flex-nowrap items-end overflow-hidden",
+    className: "flex flex-nowrap items-end overflow-hidden p-px",
     children: [/*#__PURE__*/jsxs("div", {
       className: classNames("inline-block leading-none relative outline overflow-hidden", rounded && "rounded-full", !rounded && "rounded"),
       children: [/*#__PURE__*/jsx(Avatar, {
@@ -114,8 +120,7 @@ var AvatarInput = function AvatarInput(_ref) {
         })]
       })]
     }), /*#__PURE__*/jsx(HiddenInput, _objectSpread({
-      hiddenValue: list === null || list === void 0 || (_list$ = list[0]) === null || _list$ === void 0 ? void 0 : _list$.path,
-      defaultValue: defaultValue
+      value: files === null || files === void 0 || (_files$2 = files[0]) === null || _files$2 === void 0 ? void 0 : _files$2.path
     }, rest)), files.map(function (file, idx) {
       return /*#__PURE__*/jsxs("div", {
         className: "px-2 py-1 flex-1 overflow-hidden",

package/dist/esm/input/Hidden.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, Fragment } from 'react';
+import { Fragment } from 'react';
 import { ErrorIcon } from '../internal/ErrorIcon.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -36,23 +36,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
  * @returns {JSX.Element} The rendered hidden input field and error icon.
  */
 var HiddenInput = function HiddenInput(_ref) {
-  var hiddenValue = _ref.hiddenValue,
-    defaultValue = _ref.defaultValue,
-    onChange = _ref.onChange,
-    invalid = _ref.invalid,
+  var invalid = _ref.invalid,
     error = _ref.error,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? "" : _ref$value,
     name = _ref.name;
-  useEffect(function () {
-    setTimeout(function () {
-      onChange === null || onChange === void 0 || onChange(hiddenValue !== null && hiddenValue !== void 0 ? hiddenValue : defaultValue);
-    }, 50);
-  }, [hiddenValue, defaultValue]);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx("input", {
       type: "hidden",
-      onChange: onChange,
       value: value,
       name: name
     }), /*#__PURE__*/jsx(ErrorIcon, {

package/dist/esm/input/RadioGroup.js

@@ -7,7 +7,7 @@ import { cloneElement } from 'react';
 import { FieldWrapper } from '../internal/FieldWrapper.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children", "name", "className", "optionWidth", "onChange"];
+var _excluded = ["children", "name", "className", "optionWidth", "value", "onChange"];
 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; }
 /**
@@ -23,6 +23,7 @@ var RadioGroup = function RadioGroup(_ref) {
     name = _ref.name,
     className = _ref.className,
     optionWidth = _ref.optionWidth,
+    value = _ref.value,
     onChange = _ref.onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsx(FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
@@ -31,6 +32,7 @@ var RadioGroup = function RadioGroup(_ref) {
       children: cloneChildren(children, function (child) {
         return /*#__PURE__*/cloneElement(child, {
           name: name,
+          checked: child.props.value === value,
           onChange: onChange,
           width: optionWidth
         });

package/dist/esm/select/DualList.js

@@ -38,7 +38,7 @@ var DualList = function DualList(_ref) {
     _ref$labelProperty = _ref.labelProperty,
     labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
     _ref$valueProperty = _ref.valueProperty,
-    valueProperty = _ref$valueProperty === void 0 ? "id" : _ref$valueProperty,
+    valueProperty = _ref$valueProperty === void 0 ? "value" : _ref$valueProperty,
     renderer = _ref.renderer,
     onChange = _ref.onChange,
     name = _ref.name,

package/dist/esm/select/List.js

@@ -29,8 +29,10 @@ var List = function List(_ref) {
     options = _ref.options,
     height = _ref.height,
     groupProperty = _ref.groupProperty,
-    labelProperty = _ref.labelProperty,
-    valueProperty = _ref.valueProperty,
+    _ref$labelProperty = _ref.labelProperty,
+    labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
+    _ref$valueProperty = _ref.valueProperty,
+    valueProperty = _ref$valueProperty === void 0 ? "value" : _ref$valueProperty,
     infoProperty = _ref.infoProperty,
     sortProperty = _ref.sortProperty,
     multiple = _ref.multiple,

package/dist/esm/select/Select.js

@@ -34,7 +34,7 @@ var Select = function Select(_ref) {
     _ref$labelProperty = _ref.labelProperty,
     labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
     _ref$valueProperty = _ref.valueProperty,
-    valueProperty = _ref$valueProperty === void 0 ? "id" : _ref$valueProperty,
+    valueProperty = _ref$valueProperty === void 0 ? "value" : _ref$valueProperty,
     sortProperty = _ref.sortProperty,
     infoProperty = _ref.infoProperty,
     multiple = _ref.multiple,

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

@@ -1,10 +1,11 @@
 import { type UploadHandler } from "../hooks/useFileUploader";
 import { type FileSchema, type ValueType } from "../types/schema";
-export declare const FileField: ({ uploadHandler, inline, label, accept, value, fileUrl, multiple, invalid, error, ...rest }: Partial<FileSchema & ValueType> & {
+export declare const FileField: ({ uploadHandler, inline, label, accept, value, fileUrl, onChange, multiple, invalid, error, ...rest }: Partial<FileSchema & ValueType> & {
     value?: AnyObject;
     inline?: boolean;
     invalid?: boolean;
     error?: AnyObject;
+    onChange?: (value: any) => void;
     fileUrl?: (path: string) => string;
     uploadHandler: UploadHandler;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -23,7 +23,11 @@ export interface FormProps<K extends KeyValue = KeyValue> {
     /**
      * default data values
      */
-    defaultValues?: K;
+    defaultValues?: K | Promise<K>;
+    /**
+     * reset values on defaultValues change (workaround for using fetch result)
+     */
+    resetOnChange?: boolean;
     /**
      * change callback
      */
@@ -61,7 +65,7 @@ export interface FormProps<K extends KeyValue = KeyValue> {
  * @see {@link https://react-hook-form.com/docs/useform} for more details on the properties.
  * @see {@link https://github.com/jquense/yup} for more details on the Yup validation schema.
  */
-export declare const Form: <K extends KeyValue>({ formRef, resolver, children, defaultValues, onSubmit, onChange, ...rest }: PropsWithChildren<FormProps<K>>) => import("react/jsx-runtime").JSX.Element;
+export declare const Form: <K extends KeyValue>({ formRef, resolver, children, resetOnChange, defaultValues, onSubmit, onChange, ...rest }: PropsWithChildren<FormProps<K>>) => import("react/jsx-runtime").JSX.Element;
 export declare const useForm: <K extends KeyValue = KeyValue>() => {
     values: import("react-hook-form").DeepPartialSkipArrayKey<K> & K;
     formState: FormState<K>;

package/dist/types/hooks/useFileUploader.d.ts

@@ -28,12 +28,14 @@ interface FileInfo {
  * const { upload, remove, retry, state } = useFileUploader(uploader, initialList, multiple);
  * ```
  */
-export declare const useFileUploader: (uploader: UploadHandler, initialList?: string | FileInfo | FileInfo[], multiple?: boolean) => {
+export declare const useFileUploader: (uploader: UploadHandler, initialList?: string | FileInfo | FileInfo[], { multiple, onChange, }?: {
+    multiple?: boolean;
+    onChange?: (files: FileInfo[] | FileInfo | null) => void;
+}) => {
     upload: (files: FileList | null) => void;
     remove: (key: string) => void;
     retry: (key: string) => void;
     pending: number;
-    list: FileInfo[];
     files: FileInfo[];
 };
 export {};

package/dist/types/input/AvatarInput.d.ts

@@ -48,4 +48,4 @@ export interface Props extends RefProp {
  * @param {Props} props - The properties for the AvatarInput component.
  * @returns {JSX.Element} - The rendered AvatarInput component.
  */
-export declare const AvatarInput: ({ size, avatarName, avatarClassName, value, rounded, defaultValue, fallbackIcon, variant, fileUrl, uploadHandler, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarInput: ({ size, avatarName, avatarClassName, value, rounded, defaultValue, fallbackIcon, variant, fileUrl, uploadHandler, onChange, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Hidden.d.ts

@@ -4,17 +4,9 @@ interface Props {
      */
     name?: string;
     /**
-     * hidden value will fire change for form update
+     * hidden input value
      */
-    hiddenValue?: AnyObject;
-    /**
-     * default avatar image
-     */
-    defaultValue?: string;
-    /**
-     * form onChange handler
-     */
-    onChange?: (value: AnyObject) => void;
+    value?: AnyObject;
 }
 /**
  * Hidden input component to handle hidden values in forms.
@@ -24,5 +16,5 @@ interface Props {
  * @param {Object} props - Component properties.
  * @returns {JSX.Element} The rendered hidden input field and error icon.
  */
-export declare const HiddenInput: ({ hiddenValue, defaultValue, onChange, invalid, error, value, name, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const HiddenInput: ({ invalid, error, value, name, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/input/RadioGroup.d.ts

@@ -37,6 +37,10 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
      * vertical orientation
      */
     vertical?: boolean;
+    /**
+     * value
+     */
+    value?: string | number;
     /**
      * change handler
      */
@@ -50,4 +54,4 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
  * @param {RadioGroupProps} props - The properties for the RadioGroup component.
  * @returns {JSX.Element} The rendered RadioGroup component.
  */
-export declare const RadioGroup: ({ children, name, className, optionWidth, onChange, ...rest }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioGroup: ({ children, name, className, optionWidth, value, onChange, ...rest }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.61",
+  "version": "1.0.0-beta.62",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -41,9 +41,9 @@
     "@dnd-kit/utilities": "~3.2.2",
     "@floating-ui/react": "~0.27.16",
     "@hookform/resolvers": "~5.2.2",
-    "@react-fabric/core": "^1.0.0-beta.61",
-    "@react-fabric/date": "^1.0.0-beta.61",
-    "@react-fabric/utilities": "^1.0.0-beta.61",
+    "@react-fabric/core": "^1.0.0-beta.62",
+    "@react-fabric/date": "^1.0.0-beta.62",
+    "@react-fabric/utilities": "^1.0.0-beta.62",
     "classnames": "~2.5.1",
     "color": "~5.0.2",
     "react-color": "~2.19.3",
@@ -62,5 +62,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "a0b0c571bf9c189fa3355bbc3b896ecc4b9d6a04"
+  "gitHead": "9dce2fd9bb753d67e3f8adbf50be257b4bc64242"
 }

package/src/builder/FileField.tsx

@@ -37,6 +37,7 @@ export const FileField = ({
   accept,
   value,
   fileUrl,
+  onChange,
   multiple,
   invalid,
   error,
@@ -46,20 +47,21 @@ export const FileField = ({
   inline?: boolean;
   invalid?: boolean;
   error?: AnyObject;
+  onChange?: (value: any) => void;
   fileUrl?: (path: string) => string;
   uploadHandler: UploadHandler;
 }) => {
   const { t } = useTranslation();
-  const { pending, files, list, upload, remove } = useFileUploader(
+  const { pending, files, upload, remove } = useFileUploader(
     async (data, config) => await uploadHandler?.(data, config),
     value,
-    multiple,
+    { multiple, onChange },
   );
 
   return (
     <Fragment>
       <Field plain inline={inline} label={label}>
-        <HiddenInput hiddenValue={multiple ? list : list?.[0]} {...rest} />
+        <HiddenInput value={multiple ? files : files?.[0]} {...rest} />
       </Field>
       <Tooltip
         color="danger-200"

package/src/builder/components/SchemaArrayForm.tsx

@@ -149,7 +149,7 @@ export const SchemaArrayForm = ({
           />
         ))}
       </Content>
-      {AddModal}
+      <AddModal />
     </Wrapper>
   );
 };

package/src/builder/components/SchemaField.tsx

@@ -229,7 +229,7 @@ export const SchemaField = ({
         </div>
         <div className="flex flex-col gap-1 pb-4">
           <Controller name={`${field}.id`}>
-            <HiddenInput hiddenValue={id} />
+            <HiddenInput value={id} />
           </Controller>
           <Controller name={`${field}.datatype`}>
             <Select
@@ -284,7 +284,7 @@ export const SchemaField = ({
                   />
                 )}
               </Field>
-              {OptionModal}
+              <OptionModal />
             </Fragment>
           )}
           {type === DATA_TYPES.FILE && (