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

package/src/form/Form.tsx

@@ -21,9 +21,8 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { yupResolver } from "@hookform/resolvers/yup";
 import { useDebounce } from "@react-fabric/core";
-import { EMPTY_OBJECT, type yup } from "@react-fabric/utilities";
+import { EMPTY_OBJECT } from "@react-fabric/utilities";
 import {
   useCallback,
   useEffect,
@@ -35,12 +34,12 @@ import {
 } from "react";
 import {
   FormProvider,
-  type Path,
   useFormContext,
   useForm as useFormHook,
   useWatch,
-  type DefaultValues,
   type FormState,
+  type Path,
+  type Resolver,
 } from "react-hook-form";
 
 type NestedKeyOf<T extends object> = {
@@ -63,13 +62,18 @@ export interface FormRef<K extends KeyValue> {
 export interface FormProps<K extends KeyValue = KeyValue> {
   formRef?: Ref<FormRef<K>>;
   /**
-   * form data schema
+   * react-hook-form resolver for validation
+   * @see {@link https://react-hook-form.com/ts#Resolver}
    */
-  schema?: yup.ObjectSchema<K>;
+  resolver?: Resolver<K>;
   /**
    * default data values
    */
-  defaultValues?: K;
+  defaultValues?: K | Promise<K>;
+  /**
+   * reset values on defaultValues change (workaround for using fetch result)
+   */
+  resetOnChange?: boolean;
   /**
    * change callback
    */
@@ -94,10 +98,7 @@ const DEFAULT_SUBMIT = () => undefined;
  * ```jsx
  * <Form
  *   formRef={formRef}
- *   schema={yup.object().shape({
- *     name: yup.string().required("Name is required"),
- *     email: yup.string().email("Invalid email").required("Email is required"),
- *   })}
+ *   resolver={hookformResolver(schema)}
  *   defaultValues={{ name: "", email: "" }}
  *   onSubmit={(values) => {
  *     console.log("Form submitted with values:", values);
@@ -115,8 +116,9 @@ const DEFAULT_SUBMIT = () => undefined;
  */
 export const Form = <K extends KeyValue>({
   formRef,
-  schema,
+  resolver,
   children,
+  resetOnChange,
   defaultValues = EMPTY_OBJECT as K,
   onSubmit = DEFAULT_SUBMIT,
   onChange,
@@ -125,8 +127,8 @@ export const Form = <K extends KeyValue>({
   const ref = useRef<HTMLFormElement>(null);
   const form = useFormHook<K>({
     shouldFocusError: true,
-    resolver: schema && (yupResolver(schema) as AnyObject),
-    defaultValues: defaultValues as DefaultValues<K>,
+    resolver,
+    defaultValues: async () => await Promise.resolve(defaultValues),
   });
 
   const [, startTransition] = useTransition();
@@ -138,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,
@@ -174,6 +179,7 @@ export const Form = <K extends KeyValue>({
 
   const onInvalid = useCallback((_: AnyObject, e: AnyObject) => {
     const el = e.target;
+    console.log("Invalid:", _, e);
     setTimeout(
       () =>
         el

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/hooks/useFormBuilder.tsx

@@ -21,6 +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 { yupResolver } from "@hookform/resolvers/yup";
 import { EmptyContent } from "@react-fabric/core";
 import { isEmpty, isNil, yup } from "@react-fabric/utilities";
 import { Fragment, useMemo } from "react";
@@ -135,12 +136,18 @@ export const useFormBuilder = <T extends AnyObject = string>(
     () => schema.filter?.((schm) => !!schm.id) ?? [],
     [schema],
   );
-  const schemaDef = yup.object(
-    Object.fromEntries(
-      filteredSchema.map((field) => [field.id, makeYupField(field)]),
-    ),
+  const schemaDef = useMemo(
+    () =>
+      yup.object(
+        Object.fromEntries(
+          filteredSchema.map((field) => [field.id, makeYupField(field)]),
+        ),
+      ),
+    [filteredSchema],
   );
 
+  const resolver = useMemo(() => yupResolver(schemaDef), [schemaDef]);
+
   const formDef = (
     <Fragment>
       {filteredSchema.map((field, idx) => (
@@ -166,6 +173,7 @@ export const useFormBuilder = <T extends AnyObject = string>(
 
   return {
     formDef,
+    resolver,
     schemaDef,
   };
 };

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/ArrayInput.tsx

@@ -23,13 +23,7 @@
 
 import { DndContext, type DragEndEvent } from "@dnd-kit/core";
 import { SortableContext, useSortable } from "@dnd-kit/sortable";
-import {
-  Button,
-  cloneChildren,
-  CoreIcons,
-  Icon,
-  Tooltip,
-} from "@react-fabric/core";
+import { Button, cloneChildren, Icon, Tooltip } from "@react-fabric/core";
 import { isFalse, isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
@@ -328,7 +322,7 @@ export const ArrayInput = <T extends AnyObject = string>({
           >
             <Icon
               className={isDragging ? "cursor-grabbing" : "cursor-grab"}
-              icon={CoreIcons.dragHandle}
+              icon="icon-[mdi--drag-vertical]"
               {...attributes}
               {...listeners}
             />
@@ -369,7 +363,7 @@ export const ArrayInput = <T extends AnyObject = string>({
           <Button
             size="sm"
             aria-label="Add item"
-            icon={CoreIcons.insert}
+            icon="icon-[mdi--plus-circle-outline]"
             onClick={() => handleAdd(onAdd?.())}
             data-invalid={!!error}
             disabled={!!disabled || readOnly || fields.length > maxItems}
@@ -443,7 +437,7 @@ export const ArrayInput = <T extends AnyObject = string>({
               {canRemove !== false && (
                 <Button
                   aria-label="Remove item"
-                  icon={CoreIcons.remove}
+                  icon="icon-[mdi--minus-circle-outline]"
                   color="danger"
                   variant="link"
                   className="self-end"

package/src/input/AvatarInput.tsx

@@ -21,13 +21,13 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Avatar, CoreIcons, Icon, ProgressBar } from "@react-fabric/core";
+import { Avatar, Icon, ProgressBar } from "@react-fabric/core";
+import { type AvatarProps } from "@react-fabric/core/dist/types/components/avatar/Avatar";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
+import classNames from "classnames";
 import { useEffect, useState } from "react";
 import { useFileUploader, type UploadHandler } from "../hooks/useFileUploader";
 import { HiddenInput } from "./Hidden";
-import { type AvatarProps } from "@react-fabric/core/dist/types/components/avatar/Avatar";
-import classNames from "classnames";
 
 export interface Props extends RefProp {
   /**
@@ -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">
@@ -168,7 +168,7 @@ export const AvatarInput = ({
             )}
             {file.progress && (
               <Icon
-                icon={CoreIcons.stop}
+                icon="icon-[mdi--stop]"
                 bg="danger"
                 color="white"
                 size="sm"
@@ -179,7 +179,7 @@ export const AvatarInput = ({
             )}
             {!file.progress && (
               <Icon
-                icon={CoreIcons.trash}
+                icon="icon-[mdi--trash-can-outline]"
                 color="danger"
                 size="sm"
                 className="flex-content"

package/src/input/Checkbox.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 { CoreIcons, Icon } from "@react-fabric/core";
+import { Icon } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import classNames from "classnames";
 import {
@@ -111,10 +111,13 @@ export const Checkbox = ({
   const deferred = useDeferredValue(!!checked);
 
   const iconOn = useMemo(
-    () => iconChecked ?? icon ?? CoreIcons.checkboxOn,
+    () => iconChecked ?? icon ?? "icon-[mdi--checkbox-marked]",
     [icon, iconChecked],
   );
-  const iconOff = useMemo(() => icon ?? CoreIcons.checkboxOff, [icon]);
+  const iconOff = useMemo(
+    () => icon ?? "icon-[mdi--checkbox-blank-outline]",
+    [icon],
+  );
 
   useEffect(() => {
     setActualValue(deferred);

package/src/input/ColorInput.tsx

@@ -33,7 +33,7 @@ import {
   useFloating,
   useInteractions,
 } from "@floating-ui/react";
-import { CoreIcons, Icon } from "@react-fabric/core";
+import { Icon } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import {
   startTransition,
@@ -168,11 +168,7 @@ export const ColorInput = ({
           }}
         >
           {!actualValue && (
-            <Icon
-              size="md"
-              className="text-muted"
-              icon={CoreIcons.colorSwatch}
-            />
+            <Icon size="md" className="text-muted" icon="icon-[mdi--palette]" />
           )}
         </div>
       </button>
@@ -203,7 +199,7 @@ export const ColorInput = ({
       {!disabled && showPicker && (
         <Icon
           className="flex-content p-1"
-          icon={CoreIcons.colorPicker}
+          icon="icon-[mdi--eyedropper]"
           onClick={() =>
             (window as AnyObject).EyeDropper &&
             new (window as AnyObject).EyeDropper()

package/src/input/File.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 { CoreIcons, Icon } from "@react-fabric/core";
+import { Icon } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import {
   FileUtil,
@@ -181,7 +181,7 @@ export const FileInput = ({
                   </span>
                   <Icon
                     className="cursor-pointer opacity-30 hover:opacity-80"
-                    icon={CoreIcons.close}
+                    icon="icon-[mdi--close]"
                     onClick={() => {
                       removeFile(idx);
                     }}

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/Password.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 { Button, CoreIcons, Tooltip } from "@react-fabric/core";
+import { Button, Tooltip } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import classNames from "classnames";
 import {
@@ -114,7 +114,9 @@ export const Password = ({
               color="warning"
               variant="link"
               aria-label={t(show ? "password.hide" : "password.show")}
-              icon={show ? CoreIcons.eyeOff : CoreIcons.eye}
+              icon={
+                show ? "icon-[mdi--eye-off-outline]" : "icon-[mdi--eye-outline]"
+              }
               onClick={() => setShow(!show)}
             />
           </Tooltip>

package/src/input/Radio.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 { CoreIcons, Icon } from "@react-fabric/core";
+import { Icon } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import classNames from "classnames";
 import { useCallback, useMemo, type ChangeEvent } from "react";
@@ -93,10 +93,10 @@ export const Radio = ({
   ...rest
 }: RadioProps) => {
   const iconOn = useMemo(
-    () => iconChecked ?? icon ?? CoreIcons.radioOn,
+    () => iconChecked ?? icon ?? "icon-[mdi--radiobox-marked]",
     [icon, iconChecked],
   );
-  const iconOff = useMemo(() => icon ?? CoreIcons.radioOff, [icon]);
+  const iconOff = useMemo(() => icon ?? "icon-[mdi--radiobox-blank]", [icon]);
 
   const handleChange = useCallback(
     (e?: ChangeEvent<HTMLInputElement>) => {

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/input/Search.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 { Button, CoreIcons, Icon, useDebounce } from "@react-fabric/core";
+import { Button, Icon, useDebounce } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import {
   Fragment,
@@ -129,7 +129,7 @@ export const Search = ({
       actionButton={
         <Fragment>
           {searching && (
-            <Icon className="p-2" icon={CoreIcons.spinner} animate="spin" />
+            <Icon className="p-2" icon="icon-[svg-spinners--eclipse]" />
           )}
           {!searching && !hideHandle && (
             <Button
@@ -137,7 +137,7 @@ export const Search = ({
               variant="link"
               aria-label="search"
               disabled={!actualValue}
-              icon={CoreIcons.search}
+              icon="icon-[mdi--magnify]"
               onClick={handleSearch}
             />
           )}

package/src/internal/ErrorIcon.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 { CoreIcons, Icon, Tooltip } from "@react-fabric/core";
+import { Icon, Tooltip } from "@react-fabric/core";
 import { isString } from "@react-fabric/utilities";
 import { useTranslation } from "react-i18next";
 
@@ -53,7 +53,7 @@ export const ErrorIcon = ({ error = "", invalid }: KeyValue) => {
         <Icon
           className="flex-content first:ms-2 self-center"
           color="danger"
-          icon={CoreIcons.alert}
+          icon="icon-[mdi--alert-circle-outline]"
         />
       </Tooltip>
     )