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

package/src/form/Form.tsx

@@ -37,7 +37,6 @@ import {
   useFormContext,
   useForm as useFormHook,
   useWatch,
-  type DefaultValues,
   type FormState,
   type Path,
   type Resolver,
@@ -70,7 +69,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
    */
@@ -115,6 +118,7 @@ export const Form = <K extends KeyValue>({
   formRef,
   resolver,
   children,
+  resetOnChange,
   defaultValues = EMPTY_OBJECT as K,
   onSubmit = DEFAULT_SUBMIT,
   onChange,
@@ -124,7 +128,7 @@ export const Form = <K extends KeyValue>({
   const form = useFormHook<K>({
     shouldFocusError: true,
     resolver,
-    defaultValues: defaultValues as DefaultValues<K>,
+    defaultValues: async () => await Promise.resolve(defaultValues),
   });
 
   const [, startTransition] = useTransition();
@@ -136,16 +140,19 @@ export const Form = <K extends KeyValue>({
     return () => subscription.unsubscribe();
   }, [form.watch, changeHandler]);
 
-  const handleReset = useCallback(
-    (reset: AnyObject = {}) => {
-      form.reset(reset);
-      form.clearErrors();
-      ref.current
-        ?.querySelector<HTMLElement>("[auto-focus], input, textarea")
-        ?.focus();
-    },
-    [defaultValues],
-  );
+  const handleReset = useCallback((reset: AnyObject = {}) => {
+    form.reset(reset);
+    form.clearErrors();
+    ref.current
+      ?.querySelector<HTMLElement>("[auto-focus], input, textarea")
+      ?.focus();
+  }, []);
+
+  useEffect(() => {
+    if (resetOnChange) {
+      handleReset(defaultValues);
+    }
+  }, [defaultValues, resetOnChange]);
 
   useImperativeHandle(
     formRef,

package/src/hooks/useFileUploader.ts

@@ -23,7 +23,7 @@
 
 import { isArray, isObject, isString, uuid } from "@react-fabric/utilities";
 import { type AxiosRequestConfig } from "axios";
-import { useCallback, useReducer } from "react";
+import { useCallback, useEffect, useReducer } from "react";
 
 export type UploadHandler = (
   data: FormData,
@@ -54,6 +54,7 @@ type UploaderActions =
   | { type: "stop"; key: string; path: string }
   | { type: "error"; key: string; error: string }
   | { type: "progress"; key: string; progress: number }
+  | { type: "init"; initialList?: string | FileInfo | FileInfo[] }
   | { type: "remove"; key: string }
   | { type: "abort"; key: string };
 
@@ -76,7 +77,13 @@ type UploaderActions =
 export const useFileUploader = (
   uploader: UploadHandler,
   initialList?: string | FileInfo | FileInfo[],
-  multiple = true,
+  {
+    multiple = true,
+    onChange,
+  }: {
+    multiple?: boolean;
+    onChange?: (files: FileInfo[] | FileInfo | null) => void;
+  } = {},
 ) => {
   const [state, dispatch] = useReducer(
     (state: UploaderState, action: UploaderActions) => {
@@ -119,6 +126,29 @@ export const useFileUploader = (
       if (action.type === "remove") {
         state.files.delete(action.key);
       }
+      if (action.type === "init") {
+        state.files = new Map();
+        if (isString(action.initialList)) {
+          const key = uuid();
+          state.files.set(key, {
+            key,
+            path: action.initialList,
+            filename: "",
+            size: 0,
+            mime: "",
+          });
+        }
+        if (isObject(action.initialList)) {
+          const key = uuid();
+          state.files.set(key, { ...(action.initialList as AnyObject), key });
+        }
+        if (isArray(action.initialList)) {
+          action.initialList.forEach((file) => {
+            const key = uuid();
+            state.files.set(key, { ...file, key });
+          });
+        }
+      }
       state.list = Array.from(state.files.values())
         .map((file) => {
           return (
@@ -134,40 +164,23 @@ export const useFileUploader = (
           );
         })
         .filter(Boolean) as FileInfo[];
+      if (action.type === "remove" || action.type === "stop") {
+        setTimeout(() => {
+          onChange?.(multiple ? state.list : state.list[0] ?? null);
+        }, 100);
+      }
       return { ...state };
     },
     {
       files: new Map(),
       count: 0,
     } as UploaderState,
-    (state: UploaderState) => {
-      if (initialList) {
-        if (isString(initialList)) {
-          const key = uuid();
-          state.files.set(key, {
-            key,
-            path: initialList,
-            filename: "",
-            size: 0,
-            mime: "",
-          });
-        }
-        if (isObject(initialList)) {
-          const key = uuid();
-          state.files.set(key, { ...(initialList as AnyObject), key });
-        }
-        if (isArray(initialList)) {
-          initialList.forEach((file) => {
-            const key = uuid();
-            state.files.set(key, { ...file, key });
-          });
-        }
-      }
-      state.list = Array.from(state.files.values());
-      return state;
-    },
   );
 
+  useEffect(() => {
+    dispatch({ type: "init", initialList });
+  }, [initialList]);
+
   const doUpload = useCallback(async (key: string, file: File) => {
     const data = new FormData();
     data.append("file", file);
@@ -244,7 +257,6 @@ export const useFileUploader = (
     remove,
     retry,
     pending: state.count,
-    list: state.list,
     files: Array.from(state.files.values()),
   };
 };

package/src/i18n/index.ts

@@ -22,7 +22,7 @@
  */
 
 import { addTranslationBundle } from "@react-fabric/core";
-import ar from "./ar.json";
-import en from "./en.json";
+import ar from "./ar/form.json";
+import en from "./en/form.json";
 
 addTranslationBundle("form", { en, ar });

package/src/input/AvatarInput.tsx

@@ -88,17 +88,21 @@ export const AvatarInput = ({
   variant,
   fileUrl,
   uploadHandler,
+  onChange,
   ...rest
 }: Props) => {
-  const { files, list, upload, remove } = useFileUploader(
+  const { files, upload, remove } = useFileUploader(
     async (data, config) => await uploadHandler?.(data, config),
-    value,
-    false,
+    value ?? defaultValue,
+    {
+      multiple: false,
+      onChange: (files: AnyObject) => onChange?.(files?.path ?? null),
+    },
   );
 
   const [base64, setBase64] = useState("");
   useEffect(() => {
-    if (list?.length) {
+    if (files?.length) {
       const file = files?.[0]?.file;
       void (
         file &&
@@ -116,7 +120,7 @@ export const AvatarInput = ({
     } else {
       setBase64(fileUrl?.(defaultValue ?? "") ?? defaultValue ?? "");
     }
-  }, [files, list, defaultValue]);
+  }, [files, defaultValue]);
 
   useEffect(() => {
     !value &&
@@ -126,7 +130,7 @@ export const AvatarInput = ({
   }, [value, defaultValue]);
 
   return (
-    <div className="flex flex-nowrap items-end overflow-hidden">
+    <div className="flex flex-nowrap items-end overflow-hidden p-px">
       <div
         className={classNames(
           "inline-block leading-none relative outline overflow-hidden",
@@ -153,11 +157,7 @@ export const AvatarInput = ({
           />
         </div>
       </div>
-      <HiddenInput
-        hiddenValue={list?.[0]?.path}
-        defaultValue={defaultValue}
-        {...rest}
-      />
+      <HiddenInput value={files?.[0]?.path} {...rest} />
       {files.map((file, idx) => (
         <div key={idx} className="px-2 py-1 flex-1 overflow-hidden">
           <div className="flex flex-nowrap gap-1 items-center">

package/src/input/Hidden.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Fragment, useEffect } from "react";
+import { Fragment } from "react";
 import { ErrorIcon } from "../internal/ErrorIcon";
 
 interface Props {
@@ -30,17 +30,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;
 }
 
 /**
@@ -52,28 +44,18 @@ interface Props {
  * @returns {JSX.Element} The rendered hidden input field and error icon.
  */
 export const HiddenInput = ({
-  hiddenValue,
-  defaultValue,
-  onChange,
   // @ts-expect-error ignore
   // eslint-disable-next-line react/prop-types
   invalid,
   // @ts-expect-error ignore
   // eslint-disable-next-line react/prop-types
   error,
-  // @ts-expect-error ignore
-  // eslint-disable-next-line react/prop-types
   value = "",
   name,
 }: Props) => {
-  useEffect(() => {
-    setTimeout(() => {
-      onChange?.(hiddenValue ?? defaultValue);
-    }, 50);
-  }, [hiddenValue, defaultValue]);
   return (
     <Fragment>
-      <input type="hidden" onChange={onChange} value={value} name={name} />
+      <input type="hidden" value={value} name={name} />
       <ErrorIcon invalid={invalid} error={error} />
     </Fragment>
   );

package/src/input/RadioGroup.tsx

@@ -68,6 +68,10 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
    * vertical orientation
    */
   vertical?: boolean;
+  /**
+   * value
+   */
+  value?: string | number;
   /**
    * change handler
    */
@@ -87,6 +91,7 @@ export const RadioGroup = ({
   name,
   className,
   optionWidth,
+  value,
   onChange,
   ...rest
 }: RadioGroupProps) => {
@@ -96,6 +101,7 @@ export const RadioGroup = ({
         {cloneChildren(children, (child: AnyObject) =>
           cloneElement(child, {
             name,
+            checked: child.props.value === value,
             onChange,
             width: optionWidth,
           }),

package/src/select/DualList.tsx

@@ -105,7 +105,7 @@ export const DualList = <T extends AnyObject = string>({
   groupProperty,
   height = "18rem",
   labelProperty = "label" as AnyObject,
-  valueProperty = "id" as AnyObject,
+  valueProperty = "value" as AnyObject,
   renderer,
   onChange,
   // @ts-expect-error ignore

package/src/select/List.tsx

@@ -59,8 +59,8 @@ export const List = <T extends AnyObject = string>({
   options,
   height,
   groupProperty,
-  labelProperty,
-  valueProperty,
+  labelProperty = "label" as AnyObject,
+  valueProperty = "value" as AnyObject,
   infoProperty,
   sortProperty,
   multiple,

package/src/select/Select.tsx

@@ -68,7 +68,7 @@ export const Select = <T extends AnyObject = string>({
   hideHandle,
   groupProperty,
   labelProperty = "label" as AnyObject,
-  valueProperty = "id" as AnyObject,
+  valueProperty = "value" as AnyObject,
   sortProperty,
   infoProperty,
   multiple,