@react-fabric/form 1.0.0-beta.8 → 1.0.1

package/src/input/File.tsx

@@ -21,34 +21,21 @@
  * 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 { type RefProp } from "@react-fabric/core/dist/types/types";
-import {
-  FileUtil,
-  Format,
-  isArray,
-  isEmpty,
-  mergeRefs,
-} from "@react-fabric/utilities";
-import classNames from "classnames";
-import {
-  Fragment,
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ChangeEvent,
-} from "react";
+import { Icon, useControlledValue } from "@react-fabric/core";
+import type { RefProp } from "@react-fabric/core/dist/types/types";
+import { cn, FileUtil, Format, isArray, isEmpty, mergeRefs } from "@react-fabric/utilities";
+import { Fragment, useCallback, useEffect, useId, useRef, useState } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
-import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
-import classes from "./File.module.css";
+import type { InputProps, WrapperProps } from "../types";
+import { getWrapperProps, useHandleEnter } from "../utils";
 
-export interface FileInputProps
-  extends InputProps<AnyObject>,
-    RefProp<HTMLInputElement> {
+interface FileType {
+  name: string;
+  type?: string;
+  size?: number;
+}
+
+export interface FileInputProps extends InputProps<FileType | FileType[]>, WrapperProps, RefProp<HTMLInputElement> {
   /**
    * allow selecting mutiple files
    */
@@ -63,125 +50,119 @@ export interface FileInputProps
   accept?: string;
 }
 
-const FileExists = (prop: AnyObject) => {
+function FileExists(prop: { name: string }) {
   const [kill, setKill] = useState(false);
   useEffect(() => {
-    setTimeout(() => {
+    const tmr = setTimeout(() => {
       setKill(true);
     }, 2000);
-  });
+    return () => {
+      clearTimeout(tmr);
+    };
+  }, []);
   return kill ? null : (
-    <div className="bg-danger-500 text-white px-2 rounded text-xs">
-      File [{prop.name}] already added to list
-    </div>
+    <div className="bg-danger-500 text-white px-2 rounded text-xs">File [{prop.name}] already added to list</div>
   );
-};
+}
 
-export const FileInput = ({
-  ref,
-  value,
-  invalid,
-  readOnly,
-  disabled,
-  required,
-  placeholder,
-  autoFocus,
-  error,
-  name,
-  accept,
-  showList = true,
-  multiple,
-  onChange,
-  onEnterPressed,
-  ...rest
-}: FileInputProps) => {
+/**
+ * File input component that allows users to select files from their system.
+ * It supports multiple file selection and displays a list of selected files.
+ * The component also provides functionality to remove files from the list.
+ * It handles file changes, invalid states, and read-only or disabled states.
+ */
+export function FileInput(props: FileInputProps) {
+  const {
+    ref,
+    value,
+    invalid,
+    readOnly,
+    disabled,
+    placeholder,
+    autoFocus,
+    error,
+    name,
+    accept,
+    showList = true,
+    multiple,
+    onChange,
+    onEnterPressed,
+  } = props;
   const listRef = useRef<File[]>([]);
   const inputRef = useRef<HTMLInputElement>(null);
-  const [exists, setExists] = useState<string[]>([]);
-  const [actualValue, setActualValue] = useState<File | File[] | null>();
-  const deferred = useDeferredValue(value);
+  const [exists, setExists] = useState<string[]>(() => []);
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(onEnterPressed),
-    [onEnterPressed],
-  );
+  const id = useId();
+  const { currentValue, updateValue } = useControlledValue(value, null);
 
-  useEffect(() => {
-    setActualValue(deferred);
-  }, [deferred]);
+  const handleEnterPressed = useHandleEnter(onEnterPressed);
 
   const handleChange = useCallback(
-    (e?: ChangeEvent<HTMLInputElement>) => {
+    (e?: React.ChangeEvent<HTMLInputElement>) => {
       setExists([]);
       if (multiple) {
         if (e?.target.files) {
           if (showList) {
             const exists: string[] = [];
             Array.from(e.target.files).forEach((file) => {
-              listRef.current.find((ef) => ef.name === file.name)
-                ? exists.push(file.name)
-                : listRef.current.push(file);
+              if (listRef.current.find((ef) => ef.name === file.name)) exists.push(file.name);
+              else listRef.current.push(file);
             });
-            setActualValue(listRef.current.slice());
+            updateValue(listRef.current.slice());
             setExists(exists);
           }
           e.target.value = "";
           onChange?.(listRef.current);
         } else {
           listRef.current = [];
-          setActualValue(listRef.current);
+          updateValue(listRef.current);
           onChange?.(listRef.current);
         }
       } else {
-        setActualValue(e?.target.files?.item(0));
+        updateValue(e?.target.files?.item(0));
         onChange?.(e?.target.files?.item(0) ?? undefined);
         if (!e && inputRef.current) inputRef.current.value = "";
       }
     },
-    [onChange, multiple, showList],
+    [multiple, showList, onChange, updateValue],
   );
 
   const removeFile = useCallback(
     (idx: number) => {
       listRef.current.splice(idx, 1);
-      setActualValue(listRef.current);
+      updateValue(listRef.current);
       onChange?.(listRef.current);
     },
-    [onChange],
+    [onChange, updateValue],
   );
 
   return (
     <InputWrapper
-      showClear={!isEmpty(actualValue)}
+      id={id}
+      showClear={!isEmpty(currentValue) && !disabled && !readOnly}
       onClear={handleChange}
-      invalid={invalid}
-      readOnly={readOnly}
-      disabled={disabled}
-      required={required}
-      error={error}
+      {...getWrapperProps(props)}
       listing={
         showList && (
           <Fragment>
-            {isArray(actualValue) &&
-              actualValue?.map?.((file: AnyObject, idx: number) => (
-                <div
-                  key={idx}
-                  className="flex gap-1 items-center text-sm text-dimmed py-1 px-2"
-                >
+            {isArray(currentValue) &&
+              currentValue?.map?.((file, idx: number) => (
+                // eslint-disable-next-line @eslint-react/no-array-index-key
+                <div key={idx} className="flex gap-1 items-center text-sm text-dimmed py-1 px-2">
                   <div className="flex-1 truncate">
                     <div className="font-medium">{file.name}</div>
                     <span className="text-xs">{FileUtil.mime(file.type)}</span>
                   </div>
-                  <span className="flex-content text-end w-24">
-                    {Format.bytes(file.size)}
-                  </span>
-                  <Icon
-                    className="cursor-pointer opacity-30 hover:opacity-80"
-                    icon={CoreIcons.close}
+                  <span className="flex-content text-end w-24">{Format.bytes(file.size)}</span>
+                  <button
+                    type="button"
+                    className={cn("size-fit leading-0 cursor-pointer")}
                     onClick={() => {
                       removeFile(idx);
                     }}
-                  />
+                  >
+                    <Icon className="cursor-pointer opacity-30 hover:opacity-80" icon="icon-[mdi--close]" />
+                  </button>
                 </div>
               ))}
             {exists.map((name) => (
@@ -190,15 +171,12 @@ export const FileInput = ({
           </Fragment>
         )
       }
-      {...rest}
     >
       <input
-        className={classNames(
-          "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
-          classes.fileInput,
-          isArray(actualValue) &&
-            actualValue?.length &&
-            "text-[var(--fabric-bg)]",
+        className={cn(
+          "fabric-fileInput",
+          "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
+          isArray(currentValue) && currentValue?.length && "text-(--fabric-bg)",
         )}
         aria-invalid={invalid}
         aria-disabled={disabled}
@@ -221,4 +199,4 @@ export const FileInput = ({
       />
     </InputWrapper>
   );
-};
+}

package/src/input/Hidden.tsx

@@ -21,7 +21,10 @@
  * 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";
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+
+import { isEqual } from "@react-fabric/utilities";
+import { Fragment, useDeferredValue, useEffect, useRef } from "react";
 import { ErrorIcon } from "../internal/ErrorIcon";
 
 interface Props {
@@ -30,36 +33,45 @@ interface Props {
    */
   name?: string;
   /**
-   * hidden value will fire change for form update
+   * hidden input value
    */
   hiddenValue?: AnyObject;
-  /**
-   * form onChange handler
-   */
-  onChange?: (value: AnyObject) => void;
 }
 
-export const HiddenInput = ({
-  hiddenValue,
-  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) => {
+/**
+ * Hidden input component to handle hidden values in forms.
+ * It will trigger the onChange handler with the hidden value after a short delay.
+ * This is useful for cases where you need to update the form state without user interaction.
+ */
+export function HiddenInput(props: Props) {
+  const {
+    // @ts-expect-error ignore
+    invalid = false,
+    // @ts-expect-error ignore
+    error = "",
+    // @ts-expect-error ignore
+    onChange,
+    // @ts-expect-error ignore
+    value,
+    hiddenValue,
+    name,
+  } = props;
+
+  const valueRef = useRef(value);
+  const deferred = useDeferredValue(hiddenValue);
+  useEffect(() => {
+    valueRef.current = value;
+  }, [value]);
   useEffect(() => {
-    onChange?.(hiddenValue);
-  }, [hiddenValue]);
+    if (!isEqual(valueRef.current, deferred)) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      onChange?.(deferred);
+    }
+  }, [deferred, onChange]);
   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/Input.tsx

@@ -21,76 +21,76 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { type RefProp } from "@react-fabric/core/dist/types/types";
-import {
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useMemo,
-  useState,
-  type ChangeEvent,
-} from "react";
+import { useControlledValue } from "@react-fabric/core";
+import type { RefProp } from "@react-fabric/core/dist/types/types";
+import { cn } from "@react-fabric/utilities";
+import type { InputHTMLAttributes } from "react";
+import { useCallback, useId } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
-import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
+import type { InputProps, WrapperProps } from "../types";
+import { getWrapperProps, useHandleEnter } from "../utils";
 
-export interface TextInputProps extends InputProps, RefProp<HTMLInputElement> {
+export interface TextInputProps extends InputProps, WrapperProps, RefProp<HTMLInputElement> {
   /**
    * input type
    */
   type?: "email" | "file" | "search" | "tel" | "text" | "url";
+
+  autoComplete?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
 }
 
-export const Input = ({
-  ref,
-  name,
-  value,
-  invalid,
-  readOnly,
-  disabled,
-  required,
-  placeholder,
-  autoFocus,
-  error,
-  type = "text",
-  onChange,
-  onEnterPressed,
-  ...rest
-}: TextInputProps) => {
-  const [actualValue, setActualValue] = useState("");
-  const deferred = useDeferredValue(value);
+/**
+ * This component is used to render a text input field with various properties such as name, value, invalid state, read-only, disabled, required, placeholder, autoFocus, error message, monospace font option, and event handlers for blur, focus, change, and enter key press.
+ * It also includes a clear button that appears when there is a value in the input field, allowing users to clear the input easily.
+ * The component uses a wrapper to handle the clear button and styling, and it supports deferred value updates to optimize performance.
+ */
+export function Input(props: TextInputProps) {
+  const {
+    value,
+    defaultValue,
+    onEnterPressed,
+    onChange,
+    onBlur,
+    onFocus,
+    disabled,
+    readOnly,
+    invalid,
+    error,
+    placeholder,
+    name,
+    type,
+    autoFocus,
+    allowClear,
+    autoComplete = "off",
+    ref,
+  } = props;
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(onEnterPressed),
-    [onEnterPressed],
-  );
+  const id = useId();
+  const { currentValue, updateValue } = useControlledValue(value, defaultValue);
 
-  useEffect(() => {
-    setActualValue(deferred ?? "");
-  }, [deferred]);
+  const handleEnterPressed = useHandleEnter(onEnterPressed);
 
   const handleChange = useCallback(
-    (e?: ChangeEvent<HTMLInputElement>) => {
-      const value = e?.target.value;
-      setActualValue(value ?? "");
-      onChange?.(value ?? undefined);
+    (e?: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e?.target.value ?? defaultValue;
+      updateValue(value);
+      onChange?.(value);
     },
-    [onchange],
+    [defaultValue, updateValue, onChange],
   );
 
   return (
     <InputWrapper
-      showClear={!!actualValue}
+      id={id}
+      showClear={allowClear && (currentValue ?? "") !== (defaultValue ?? "") && !disabled && !readOnly}
       onClear={handleChange}
-      invalid={invalid}
-      readOnly={readOnly}
-      disabled={disabled}
-      required={required}
-      error={error}
-      {...rest}
+      {...getWrapperProps(props)}
     >
       <input
-        className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer"
+        id={id}
+        className={cn(
+          "appearance-none bg-transparent py-1 px-4 not-first:ps-2 not-last:pe-2 flex-1 border-none outline-none ring-0 peer",
+        )}
         aria-invalid={invalid}
         aria-disabled={disabled}
         aria-readonly={readOnly}
@@ -103,12 +103,14 @@ export const Input = ({
         size={1}
         type={type}
         ref={ref}
-        autoComplete="off"
+        autoComplete={autoComplete}
         {...{ autoFocus }}
-        value={actualValue}
+        value={currentValue ?? ""}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}
       />
     </InputWrapper>
   );
-};
+}

package/src/input/Number.tsx

@@ -21,22 +21,14 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { type RefProp } from "@react-fabric/core/dist/types/types";
-import {
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useMemo,
-  useState,
-  type ChangeEvent,
-} from "react";
+import { useControlledValue } from "@react-fabric/core";
+import type { RefProp } from "@react-fabric/core/dist/types/types";
+import { useCallback, useId } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
-import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
+import type { InputProps, WrapperProps } from "../types";
+import { getWrapperProps, useHandleEnter } from "../utils";
 
-export interface NumberProps
-  extends InputProps<number>,
-    RefProp<HTMLInputElement> {
+export interface NumberProps extends InputProps<number>, WrapperProps, RefProp<HTMLInputElement> {
   /**
    * minimum value
    */
@@ -51,56 +43,57 @@ export interface NumberProps
   step?: number;
 }
 
-export const Number = ({
-  ref,
-  value,
-  invalid,
-  readOnly,
-  disabled,
-  required,
-  placeholder,
-  autoFocus,
-  name,
-  min,
-  max,
-  step,
-  onChange,
-  onEnterPressed,
-  ...rest
-}: NumberProps) => {
-  const [actualValue, setActualValue] = useState<"" | number>("");
-  const deferred = useDeferredValue(value);
+/**
+ * This component allows users to input numeric values with optional minimum, maximum, and step constraints.
+ * It provides a clear interface for entering numbers, with support for validation and accessibility features.
+ * It also includes a clear button to reset the input value.
+ */
+export function Number(props: NumberProps) {
+  const {
+    value,
+    defaultValue,
+    onEnterPressed,
+    onChange,
+    onBlur,
+    onFocus,
+    disabled,
+    readOnly,
+    invalid,
+    min,
+    max,
+    step,
+    placeholder,
+    name,
+    autoFocus,
+    allowClear,
+    ref,
+  } = props;
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(onEnterPressed),
-    [onEnterPressed],
-  );
+  const id = useId();
+  const { currentValue, updateValue } = useControlledValue(value, defaultValue);
 
-  useEffect(() => {
-    setActualValue(deferred ?? "");
-  }, [deferred]);
+  const handleEnterPressed = useHandleEnter(onEnterPressed);
 
   const handleChange = useCallback(
-    (e?: ChangeEvent<HTMLInputElement>) => {
-      const number = e?.target.valueAsNumber;
-      setActualValue(number ?? "");
-      onChange?.(number ?? undefined);
+    (e?: React.ChangeEvent<HTMLInputElement>) => {
+      const number = e?.target.valueAsNumber ?? defaultValue;
+      updateValue(number);
+      onChange?.(number);
     },
-    [onChange],
+    [defaultValue, updateValue, onChange],
   );
 
   return (
     <InputWrapper
-      showClear={!!actualValue}
+      id={id}
+      showClear={allowClear && (currentValue ?? "") !== (defaultValue ?? "") && !disabled && !readOnly}
       onClear={handleChange}
-      invalid={invalid}
-      readOnly={readOnly}
-      disabled={disabled}
-      required={required}
-      {...rest}
+      hasStepper
+      {...getWrapperProps(props)}
     >
       <input
-        className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0"
+        id={id}
+        className="appearance-none bg-transparent py-1 ps-4 pe-2 not-first:ps-2 flex-1 border-none outline-none ring-0 peer"
         aria-invalid={invalid}
         aria-disabled={disabled}
         aria-readonly={readOnly}
@@ -117,10 +110,12 @@ export const Number = ({
         ref={ref}
         autoComplete="off"
         {...{ autoFocus }}
-        value={actualValue}
+        value={currentValue ?? ""}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}
       />
     </InputWrapper>
   );
-};
+}