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

package/src/input/DateInput.tsx

@@ -0,0 +1,260 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2025 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  FloatingArrow,
+  offset,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useInteractions,
+} from "@floating-ui/react";
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import { type DateLike, DatePanel, DateUtil } from "@react-fabric/date";
+import { mergeRefs } from "@react-fabric/utilities";
+import classNames from "classnames";
+import {
+  type ChangeEvent,
+  startTransition,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { InputWrapper } from "../internal/InputWrapper";
+import { type InputProps } from "../types";
+import { useHandleEnter } from "../utils";
+
+export interface DateProps
+  extends InputProps<string>,
+    RefProp<HTMLInputElement> {
+  type?: "date" | "datetime";
+  /**
+   * date format
+   */
+  format?: string;
+  /**
+   * minimum value
+   */
+  min?: DateLike;
+  /**
+   * maximum value
+   */
+  max?: DateLike;
+}
+
+/**
+ * Date input component that allows users to select a date or datetime.
+ * It uses the Floating UI library for positioning the date picker.
+ * It also provides a button to clear the selected date.
+ * The component supports both date and datetime types, with appropriate formatting.
+ *
+ * @param {DateProps} props - The properties for the DateInput component.
+ * @returns {JSX.Element} - The rendered DateInput component.
+ */
+export const DateInput = ({
+  ref,
+  name,
+  value,
+  invalid,
+  readOnly,
+  disabled,
+  required,
+  placeholder,
+  defaultValue,
+  autoFocus,
+  error,
+  type = "date",
+  onBlur,
+  onFocus,
+  onChange,
+  onEnterPressed,
+  format = "dd/MM/yyyy",
+  min,
+  max,
+  ...rest
+}: DateProps) => {
+  const [actualValue, setActualValue] = useState("");
+  const [inputValue, setInputValue] = useState("");
+  const deferred = useDeferredValue(value ?? defaultValue);
+
+  const inputFormat = useMemo(
+    () => (type === "datetime" ? "yyyy-MM-dd HH:mm" : "yyyy-MM-dd"),
+    [type],
+  );
+
+  useEffect(() => {
+    setActualValue(deferred ?? "");
+    setInputValue(deferred ? DateUtil.format(deferred, inputFormat) : "");
+  }, [deferred, inputFormat]);
+
+  const handleEnterPressed = useHandleEnter(onEnterPressed);
+
+  const handleChange = useCallback(
+    (e?: ChangeEvent<HTMLInputElement>) => {
+      const value = e?.currentTarget.value ?? defaultValue;
+      if (value) {
+        const parsed = DateUtil.parseDate(value);
+        setActualValue(parsed?.toISOString?.());
+        setInputValue(DateUtil.format(parsed, inputFormat));
+        onChange != null &&
+          startTransition(() => onChange(parsed?.toISOString?.()));
+      } else {
+        setActualValue("");
+        setInputValue("");
+        onChange != null && startTransition(() => onChange(null));
+      }
+    },
+    [onChange, inputFormat, defaultValue],
+  );
+
+  const handleDateChange = useCallback(
+    (value?: string) => {
+      if (value) {
+        const parsed = DateUtil.parseDate(value);
+        setActualValue(parsed?.toISOString?.());
+        setInputValue(DateUtil.format(parsed, inputFormat));
+        onChange != null &&
+          startTransition(() => onChange(parsed?.toISOString?.()));
+      } else {
+        setActualValue("");
+        setInputValue("");
+        onChange != null && startTransition(() => onChange(null));
+      }
+    },
+    [onChange, inputFormat],
+  );
+
+  const arrowRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: (open, _, reason) => {
+      console.log(reason);
+      if (reason === "reference-press") return;
+      setIsOpen(open);
+    },
+    strategy: "fixed",
+    placement: "bottom-start",
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      shift({ padding: 8 }),
+      flip(),
+      offset(9),
+      arrow({
+        element: arrowRef,
+      }),
+    ],
+  });
+
+  const focus = useFocus(context, {
+    enabled: !disabled,
+  });
+  const click = useClick(context, {
+    enabled: !disabled,
+    toggle: false,
+  });
+  const dismiss = useDismiss(context, {
+    referencePress: true,
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    dismiss,
+    click,
+    focus,
+  ]);
+
+  return (
+    <InputWrapper
+      showClear={!!actualValue && !disabled && !readOnly}
+      onClear={handleChange}
+      invalid={invalid}
+      readOnly={readOnly}
+      disabled={disabled}
+      required={required}
+      error={error}
+      {...rest}
+    >
+      <input
+        className={classNames(
+          "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
+          !value && "empty",
+        )}
+        aria-invalid={invalid}
+        aria-disabled={disabled}
+        aria-readonly={readOnly}
+        aria-errormessage={error}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        data-testid={name}
+        name={name}
+        size={1}
+        type={type === "datetime" ? "datetime-local" : "date"}
+        autoComplete="off"
+        autoFocus={autoFocus}
+        value={inputValue}
+        ref={mergeRefs(ref, refs.setReference)}
+        {...getReferenceProps({
+          onBlur,
+          onFocus,
+        })}
+        onChange={handleChange}
+        onKeyDown={handleEnterPressed}
+      />
+      {isOpen && (
+        <div
+          ref={refs.setFloating}
+          style={{
+            zIndex: "var(--z-popover)",
+            ...floatingStyles,
+          }}
+          className="shadow-lg bg-base ring-1 ring-tint-100"
+          data-ref="dropdownBody"
+          {...getFloatingProps()}
+        >
+          <DatePanel
+            withTime={type === "datetime"}
+            value={actualValue}
+            max={max}
+            min={min}
+            onChange={handleDateChange}
+          />
+          <FloatingArrow
+            ref={arrowRef}
+            context={context}
+            strokeWidth={0.5}
+            className="fill-base stroke-muted"
+          />
+        </div>
+      )}
+    </InputWrapper>
+  );
+};

package/src/input/Field.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 { cloneChildren } from "@react-fabric/core";
 import {
   type ChildrenProp,
   type CssProp,
 } from "@react-fabric/core/dist/types/types";
 import classNames from "classnames";
-import { Children, cloneElement } from "react";
-import classes from "../internal/Field.module.css";
+import { cloneElement } from "react";
 import { FieldWrapper } from "../internal/FieldWrapper";
 
 export interface FieldProps extends ChildrenProp, CssProp {
@@ -72,6 +72,11 @@ export interface FieldProps extends ChildrenProp, CssProp {
   vertical?: boolean;
 }
 
+/**
+ * Field component for rendering multiple form fields under a single label.
+ * It supports various properties for customization, including label, info, required state,
+ * and styling options.
+ */
 export const Field = ({
   children,
   vertical,
@@ -83,20 +88,19 @@ export const Field = ({
     <FieldWrapper {...rest}>
       <div
         className={classNames(
-          classes.fieldGroup,
+          "fabric-fieldGroup",
           !plain && !noOutline && "outline",
           !plain && "bg-base",
+          plain && "flex-wrap",
           "flex-1 rounded",
-          !vertical && "flex flex-nowrap",
+          !vertical && "flex",
         )}
+        data-vertical={!!vertical}
       >
-        {Children.map(
-          children,
-          (child) =>
-            child &&
-            cloneElement(child as AnyObject, {
-              "data-inner": true,
-            }),
+        {cloneChildren(children, (child: AnyObject) =>
+          cloneElement(child, {
+            "data-inner": true,
+          }),
         )}
       </div>
     </FieldWrapper>

package/src/input/File.tsx

@@ -36,15 +36,13 @@ import {
   useCallback,
   useDeferredValue,
   useEffect,
-  useMemo,
   useRef,
   useState,
   type ChangeEvent,
 } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
-import classes from "./File.module.css";
+import { useHandleEnter } from "../utils";
 
 export interface FileInputProps
   extends InputProps<AnyObject>,
@@ -77,6 +75,15 @@ const FileExists = (prop: AnyObject) => {
   );
 };
 
+/**
+ * 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.
+ *
+ * @param {FileInputProps} props - The properties for the FileInput component.
+ * @returns {JSX.Element} - The rendered FileInput component.
+ */
 export const FileInput = ({
   ref,
   value,
@@ -101,10 +108,7 @@ export const FileInput = ({
   const [actualValue, setActualValue] = useState<File | File[] | null>();
   const deferred = useDeferredValue(value);
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(onEnterPressed),
-    [onEnterPressed],
-  );
+  const handleEnterPressed = useHandleEnter(onEnterPressed);
 
   useEffect(() => {
     setActualValue(deferred);
@@ -134,7 +138,7 @@ export const FileInput = ({
         }
       } else {
         setActualValue(e?.target.files?.item(0));
-        onChange?.(e?.target.files?.item(0) ?? undefined);
+        onChange?.(e?.target.files?.item(0) ?? null);
         if (!e && inputRef.current) inputRef.current.value = "";
       }
     },
@@ -152,7 +156,7 @@ export const FileInput = ({
 
   return (
     <InputWrapper
-      showClear={!isEmpty(actualValue)}
+      showClear={!isEmpty(actualValue) && !disabled && !readOnly}
       onClear={handleChange}
       invalid={invalid}
       readOnly={readOnly}
@@ -194,11 +198,9 @@ export const FileInput = ({
     >
       <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)]",
+          "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
+          "fabric-fileInput",
+          isArray(actualValue) && actualValue?.length && "text-(--fabric-bg)",
         )}
         aria-invalid={invalid}
         aria-disabled={disabled}

package/src/input/Hidden.tsx

@@ -33,14 +33,27 @@ interface Props {
    * hidden value will fire change for form update
    */
   hiddenValue?: AnyObject;
+  /**
+   * default avatar image
+   */
+  defaultValue?: string;
   /**
    * form onChange handler
    */
   onChange?: (value: AnyObject) => void;
 }
 
+/**
+ * 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.
+ *
+ * @param {Object} props - Component properties.
+ * @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
@@ -54,8 +67,10 @@ export const HiddenInput = ({
   name,
 }: Props) => {
   useEffect(() => {
-    onChange?.(hiddenValue);
-  }, [hiddenValue]);
+    setTimeout(() => {
+      onChange?.(hiddenValue ?? defaultValue);
+    }, 50);
+  }, [hiddenValue, defaultValue]);
   return (
     <Fragment>
       <input type="hidden" onChange={onChange} value={value} name={name} />

package/src/input/Input.tsx

@@ -22,17 +22,17 @@
  */
 
 import { type RefProp } from "@react-fabric/core/dist/types/types";
+import classNames from "classnames";
 import {
   useCallback,
   useDeferredValue,
   useEffect,
-  useMemo,
   useState,
   type ChangeEvent,
 } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
+import { useHandleEnter } from "../utils";
 
 export interface TextInputProps extends InputProps, RefProp<HTMLInputElement> {
   /**
@@ -41,6 +41,14 @@ export interface TextInputProps extends InputProps, RefProp<HTMLInputElement> {
   type?: "email" | "file" | "search" | "tel" | "text" | "url";
 }
 
+/**
+ * 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.
+ *
+ * @param {TextInputProps} props - The properties for the text input component.
+ * @returns {JSX.Element} - A JSX element representing the text input field.
+ */
 export const Input = ({
   ref,
   name,
@@ -50,20 +58,21 @@ export const Input = ({
   disabled,
   required,
   placeholder,
+  defaultValue,
   autoFocus,
   error,
+  monospace,
   type = "text",
+  onBlur,
+  onFocus,
   onChange,
   onEnterPressed,
   ...rest
 }: TextInputProps) => {
   const [actualValue, setActualValue] = useState("");
-  const deferred = useDeferredValue(value);
+  const deferred = useDeferredValue(value ?? defaultValue);
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(onEnterPressed),
-    [onEnterPressed],
-  );
+  const handleEnterPressed = useHandleEnter(onEnterPressed);
 
   useEffect(() => {
     setActualValue(deferred ?? "");
@@ -71,16 +80,16 @@ export const Input = ({
 
   const handleChange = useCallback(
     (e?: ChangeEvent<HTMLInputElement>) => {
-      const value = e?.target.value;
+      const value = e?.target.value ?? defaultValue;
       setActualValue(value ?? "");
-      onChange?.(value ?? undefined);
+      onChange?.(value ?? null);
     },
-    [onchange],
+    [onChange, defaultValue],
   );
 
   return (
     <InputWrapper
-      showClear={!!actualValue}
+      showClear={!!actualValue && !disabled && !readOnly}
       onClear={handleChange}
       invalid={invalid}
       readOnly={readOnly}
@@ -90,7 +99,10 @@ export const Input = ({
       {...rest}
     >
       <input
-        className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer"
+        className={classNames(
+          "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
+          monospace && "font-mono text-sm",
+        )}
         aria-invalid={invalid}
         aria-disabled={disabled}
         aria-readonly={readOnly}
@@ -104,8 +116,10 @@ export const Input = ({
         type={type}
         ref={ref}
         autoComplete="off"
-        {...{ autoFocus }}
+        autoFocus={autoFocus}
         value={actualValue}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}
       />

package/src/input/Number.tsx

@@ -26,13 +26,12 @@ import {
   useCallback,
   useDeferredValue,
   useEffect,
-  useMemo,
   useState,
   type ChangeEvent,
 } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
+import { useHandleEnter } from "../utils";
 
 export interface NumberProps
   extends InputProps<number>,
@@ -51,6 +50,14 @@ export interface NumberProps
   step?: number;
 }
 
+/**
+ * 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.
+ *
+ * @param {NumberProps} props - The properties for the Number input component.
+ * @returns {JSX.Element} The rendered Number input component.
+ */
 export const Number = ({
   ref,
   value,
@@ -59,22 +66,22 @@ export const Number = ({
   disabled,
   required,
   placeholder,
+  defaultValue,
   autoFocus,
   name,
   min,
   max,
   step,
+  onBlur,
+  onFocus,
   onChange,
   onEnterPressed,
   ...rest
 }: NumberProps) => {
   const [actualValue, setActualValue] = useState<"" | number>("");
-  const deferred = useDeferredValue(value);
+  const deferred = useDeferredValue(value ?? defaultValue);
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(onEnterPressed),
-    [onEnterPressed],
-  );
+  const handleEnterPressed = useHandleEnter(onEnterPressed);
 
   useEffect(() => {
     setActualValue(deferred ?? "");
@@ -82,16 +89,16 @@ export const Number = ({
 
   const handleChange = useCallback(
     (e?: ChangeEvent<HTMLInputElement>) => {
-      const number = e?.target.valueAsNumber;
+      const number = e?.target.valueAsNumber ?? defaultValue;
       setActualValue(number ?? "");
-      onChange?.(number ?? undefined);
+      onChange?.(number ?? null);
     },
-    [onChange],
+    [onChange, defaultValue],
   );
 
   return (
     <InputWrapper
-      showClear={!!actualValue}
+      showClear={!!actualValue && !disabled && !readOnly}
       onClear={handleChange}
       invalid={invalid}
       readOnly={readOnly}
@@ -100,7 +107,7 @@ export const Number = ({
       {...rest}
     >
       <input
-        className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0"
+        className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer"
         aria-invalid={invalid}
         aria-disabled={disabled}
         aria-readonly={readOnly}
@@ -116,8 +123,10 @@ export const Number = ({
         step={step}
         ref={ref}
         autoComplete="off"
-        {...{ autoFocus }}
+        autoFocus={autoFocus}
         value={actualValue}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}
       />