@react-fabric/form 1.0.0-beta.4 → 1.0.0-beta.40

package/src/input/DateInput.tsx

@@ -0,0 +1,248 @@
+/*
+ * 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 {
+  type ChangeEvent,
+  startTransition,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { InputWrapper } from "../internal/InputWrapper";
+import { type InputProps } from "../types";
+import { handleEnter } from "../utils";
+import classNames from "classnames";
+
+export interface DateProps
+  extends InputProps<string>,
+    RefProp<HTMLInputElement> {
+  type?: "date" | "datetime";
+  /**
+   * date format
+   */
+  format?: string;
+  /**
+   * minimum value
+   */
+  min?: DateLike;
+  /**
+   * maximum value
+   */
+  max?: DateLike;
+}
+
+export const DateInput = ({
+  ref,
+  name,
+  value,
+  invalid,
+  readOnly,
+  disabled,
+  required,
+  placeholder,
+  autoFocus,
+  error,
+  type = "date",
+  onChange,
+  onEnterPressed,
+  format = "dd/MM/yyyy",
+  min,
+  max,
+  ...rest
+}: DateProps) => {
+  const [actualValue, setActualValue] = useState("");
+  const [inputValue, setInputValue] = useState("");
+  const deferred = useDeferredValue(value);
+
+  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 = useMemo(
+    () => handleEnter(onEnterPressed),
+    [onEnterPressed],
+  );
+
+  const handleChange = useCallback(
+    (e?: ChangeEvent<HTMLInputElement>) => {
+      const value = e?.currentTarget.value;
+      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 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}
+      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()}
+        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 {
@@ -83,20 +83,18 @@ 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",
         )}
       >
-        {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

@@ -44,7 +44,6 @@ import {
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
 import { handleEnter } from "../utils";
-import classes from "./File.module.css";
 
 export interface FileInputProps
   extends InputProps<AnyObject>,
@@ -134,7 +133,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 = "";
       }
     },
@@ -195,10 +194,8 @@ 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)]",
+          "fabric-fileInput",
+          isArray(actualValue) && actualValue?.length && "text-(--fabric-bg)",
         )}
         aria-invalid={invalid}
         aria-disabled={disabled}

package/src/input/Hidden.tsx

@@ -54,7 +54,10 @@ export const HiddenInput = ({
   name,
 }: Props) => {
   useEffect(() => {
-    onChange?.(hiddenValue);
+    hiddenValue &&
+      setTimeout(() => {
+        onChange?.(hiddenValue);
+      }, 50);
   }, [hiddenValue]);
   return (
     <Fragment>

package/src/input/Input.tsx

@@ -73,7 +73,7 @@ export const Input = ({
     (e?: ChangeEvent<HTMLInputElement>) => {
       const value = e?.target.value;
       setActualValue(value ?? "");
-      onChange?.(value ?? undefined);
+      onChange?.(value ?? null);
     },
     [onchange],
   );
@@ -104,7 +104,7 @@ export const Input = ({
         type={type}
         ref={ref}
         autoComplete="off"
-        {...{ autoFocus }}
+        autoFocus={autoFocus}
         value={actualValue}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}

package/src/input/Number.tsx

@@ -84,7 +84,7 @@ export const Number = ({
     (e?: ChangeEvent<HTMLInputElement>) => {
       const number = e?.target.valueAsNumber;
       setActualValue(number ?? "");
-      onChange?.(number ?? undefined);
+      onChange?.(number ?? null);
     },
     [onChange],
   );
@@ -116,7 +116,7 @@ export const Number = ({
         step={step}
         ref={ref}
         autoComplete="off"
-        {...{ autoFocus }}
+        autoFocus={autoFocus}
         value={actualValue}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}

package/src/input/Password.tsx

@@ -83,7 +83,7 @@ export const Password = ({
     (e?: ChangeEvent<HTMLInputElement>) => {
       const value = e?.target.value;
       setActualValue(value ?? "");
-      onChange?.(value ?? undefined);
+      onChange?.(value ?? null);
     },
     [onChange],
   );
@@ -129,7 +129,7 @@ export const Password = ({
         type={show ? "text" : "password"}
         ref={ref}
         autoComplete="off"
-        {...{ autoFocus }}
+        autoFocus={autoFocus}
         value={actualValue}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}

package/src/input/Radio.tsx

@@ -126,7 +126,7 @@ export const Radio = ({
       <Icon
         className={classNames(
           "p-0.5 hidden peer-checked:inline-block",
-          icon && !iconChecked && "bg-primary-500 text-white",
+          icon && !iconChecked && "bg-primary-500 text-white!",
         )}
         color={invalid ? "danger" : "primary"}
         size="1.25em"

package/src/input/RadioGroup.tsx

@@ -21,11 +21,12 @@
  * 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 CssProp,
   type ChildrenProp,
+  type CssProp,
 } from "@react-fabric/core/dist/types/types";
-import { Children, cloneElement } from "react";
+import { cloneElement } from "react";
 import { FieldWrapper } from "../internal/FieldWrapper";
 import { type Radio } from "./Radio";
 
@@ -42,6 +43,23 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
    * field info
    */
   info?: string;
+
+  /**
+   * field width
+   */
+  width?: number | string;
+  /**
+   * inline label and input
+   */
+  inline?: boolean;
+  /**
+   * label width for inline
+   */
+  labelWidth?: string;
+  /**
+   * label width for inline
+   */
+  optionWidth?: string;
   /**
    * field name
    */
@@ -60,14 +78,19 @@ export const RadioGroup = ({
   children,
   name,
   className,
+  optionWidth,
   onChange,
   ...rest
 }: RadioGroupProps) => {
   return (
     <FieldWrapper {...rest}>
       <div className={className}>
-        {Children.map(children, (child) =>
-          cloneElement(child as AnyObject, { name, onChange }),
+        {cloneChildren(children, (child: AnyObject) =>
+          cloneElement(child, {
+            name,
+            onChange,
+            width: optionWidth,
+          }),
         )}
       </div>
     </FieldWrapper>

package/src/input/{Range.tsx → RangeSlider.tsx}

@@ -97,7 +97,7 @@ export interface RangeProps
 /**
  * Number Range input
  */
-export const Range = ({
+export const RangeSlider = ({
   error,
   name,
   value,
@@ -141,7 +141,7 @@ export const Range = ({
   const handleChange = useCallback(
     (val: [number, number]) => {
       setActualValue(val ?? [min, max]);
-      onChange?.(val ?? undefined);
+      onChange?.(val ?? null);
     },
     [onChange, min, max],
   );

package/src/input/Search.tsx

@@ -96,7 +96,7 @@ export const Search = ({
       const value = e?.target.value;
       refValue.current = value ?? "";
       setActualValue(value ?? "");
-      onChange?.(value ?? undefined);
+      onChange?.(value ?? null);
 
       // value was cleared so force fire onSearch
       if (searchOnChange) {
@@ -150,7 +150,7 @@ export const Search = ({
         type="search"
         ref={ref}
         autoComplete="off"
-        {...{ autoFocus }}
+        autoFocus={autoFocus}
         value={actualValue}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}

package/src/input/Slider.tsx

@@ -146,7 +146,7 @@ export const Slider = ({
     (value: number) => {
       const val = useInfinity && value === max ? Infinity : value;
       setActualValue(val ?? 0);
-      onChange?.(val ?? undefined);
+      onChange?.(val ?? null);
     },
     [onChange, max, useInfinity],
   );

package/src/input/Switch.tsx

@@ -27,6 +27,7 @@ import {
 } from "@react-fabric/core/dist/types/types";
 import classNames from "classnames";
 import {
+  Fragment,
   useCallback,
   useDeferredValue,
   useEffect,
@@ -34,7 +35,7 @@ import {
   type ChangeEvent,
 } from "react";
 import { ErrorIcon } from "../internal/ErrorIcon";
-import { getBgClass, getColor } from "../utils";
+import { getBgClass, getColor, getColorClass } from "../utils";
 
 export interface SwitchProps extends RefProp<HTMLInputElement> {
   /**
@@ -71,13 +72,19 @@ export interface SwitchProps extends RefProp<HTMLInputElement> {
   /**
    * cutom Switch icon
    */
-  color?: ColorType;
+  color?: string | ColorType;
   /**
    * cutom Switch icon
    */
-  defaultColor?: ColorType;
+  defaultColor?: string | ColorType;
 
   name?: string;
+
+  onLabel?: string;
+  onLabelColor?: string | ColorType;
+
+  offLabel?: string;
+  offLabelColor?: string | ColorType;
 }
 
 export const Switch = ({
@@ -90,7 +97,13 @@ export const Switch = ({
   width,
   color,
   name,
+  onLabel,
+  offLabel,
+  onLabelColor,
+  offLabelColor,
   defaultColor,
+  // @ts-expect-error ignore
+  required,
   onChange,
   ...rest
 }: SwitchProps) => {
@@ -125,7 +138,7 @@ export const Switch = ({
           actualValue && getBgClass(color ? `${color}-500` : "primary-500"),
           !actualValue &&
             (defaultColor ? getBgClass(`${defaultColor}-500`) : "bg-tint-200"),
-          "relative flex h-6 w-10 cursor-pointer rounded-full p-1 transition-colors duration-200 ease-in-out",
+          "relative grid grid-cols-2 items-center h-6 min-w-10 cursor-pointer rounded-full p-1 transition-colors duration-200 ease-in-out",
         )}
         style={{
           backgroundColor: actualValue
@@ -154,10 +167,33 @@ export const Switch = ({
           aria-hidden="true"
           className={classNames(
             !disabled && "shadow-sm",
-            actualValue ? "translate-x-4" : "translate-x-0",
-            "pointer-events-none inline-block size-4 rounded-full bg-white ring-0 transition duration-200 ease-in-out",
+            actualValue ? "translate-x-[100%]" : "translate-x-0",
+            "pointer-events-none inline-block h-4 start-1 absolute rounded-full bg-white ring-0 transition duration-200 ease-in-out",
           )}
+          style={{
+            width: "calc(50% - 0.25rem)",
+          }}
         />
+        {(!!onLabel || !!offLabel) && (
+          <Fragment>
+            <span
+              className={`whitespace-nowrap text-xs px-1 ${getColorClass(onLabelColor ?? "white")}`}
+              style={{
+                color: getColor(onLabelColor),
+              }}
+            >
+              {onLabel ?? " "}
+            </span>
+            <span
+              className={`whitespace-nowrap text-xs px-1 ${getColorClass(offLabelColor ?? "base")}`}
+              style={{
+                color: getColor(offLabelColor),
+              }}
+            >
+              {offLabel ?? " "}
+            </span>
+          </Fragment>
+        )}
       </div>
       <ErrorIcon invalid={invalid} error={error} />
       {label && (

package/src/input/Textarea.tsx

@@ -49,6 +49,10 @@ export interface TextareaProps
    * increment rows on value change
    */
   variableRows?: boolean;
+  /**
+   * expandable textarea
+   */
+  expandable?: boolean;
 }
 
 export const Textarea = ({
@@ -64,6 +68,7 @@ export const Textarea = ({
   rows = 5,
   maxRows = 12,
   variableRows,
+  expandable,
   onChange,
   onEnterPressed,
   ...rest
@@ -81,7 +86,7 @@ export const Textarea = ({
     (e?: ChangeEvent<HTMLTextAreaElement>) => {
       const value = e?.target.value;
       setActualValue(value ?? "");
-      onChange?.(value ?? undefined);
+      onChange?.(value ?? null);
     },
     [onChange],
   );
@@ -104,6 +109,7 @@ export const Textarea = ({
       disabled={disabled}
       required={required}
       wrapperRef={wrapperRef}
+      textareaExpandable={expandable}
       textarea
       {...rest}
     >
@@ -120,10 +126,12 @@ export const Textarea = ({
         name={name}
         ref={ref}
         autoComplete="off"
-        {...{ autoFocus }}
+        autoFocus={autoFocus}
         value={actualValue}
         onChange={handleChange}
-        onKeyDown={handleEnter(onEnterPressed)}
+        onKeyDown={handleEnter(onEnterPressed, {
+          preventDefault: !!onEnterPressed,
+        })}
       />
     </InputWrapper>
   );

package/src/internal/ErrorIcon.tsx

@@ -48,7 +48,7 @@ export const ErrorIcon = ({ error = "", invalid }: KeyValue) => {
               ) as string)
         }
         placement="bottom"
-        color="danger"
+        color="danger-200"
       >
         <Icon
           className="flex-content first:ms-2 self-center"