@react-fabric/form 1.0.0-beta.31 → 1.0.0-beta.33

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(""));
+      }
+    },
+    [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(""));
+      }
+    },
+    [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

@@ -87,8 +87,9 @@ export const Field = ({
           classes.fieldGroup,
           !plain && !noOutline && "outline",
           !plain && "bg-base",
+          plain && "flex-wrap",
           "flex-1 rounded",
-          !vertical && "flex flex-nowrap",
+          !vertical && "flex",
         )}
       >
         {cloneChildren(children, (child: AnyObject) =>

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,

package/src/input/Switch.tsx

@@ -102,6 +102,8 @@ export const Switch = ({
   onLabelColor,
   offLabelColor,
   defaultColor,
+  // @ts-expect-error ignore
+  required,
   onChange,
   ...rest
 }: SwitchProps) => {

package/src/internal/Field.module.css

@@ -71,7 +71,7 @@
     }
 
     & > input[type="number"] + .inputClear {
-      margin-inline: -3rem 2rem;
+      margin-inline: -3rem 0;
     }
 
     & input::-ms-clear,
@@ -90,6 +90,17 @@
       letter-spacing: 2px;
     }
 
+    & input[type="date"]::-webkit-calendar-picker-indicator,
+    & input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+      display: none;
+      appearance: none;
+    }
+
+    & input[type="date"]:global(.empty)::-webkit-datetime-edit,
+    & input[type="datetime-local"]:global(.empty)::-webkit-datetime-edit {
+      color: theme(colors.tint.400);
+    }
+
     & input:-webkit-autofill {
       box-shadow: 0 0 0 999em var(--fabric-input) inset;
 

package/src/internal/InputWrapper.tsx

@@ -44,6 +44,8 @@ export const InputWrapper = ({
   showClear,
   decorateStart,
   decorateEnd,
+  decorateEndShowWhenEmpty,
+  decorateEndHideWhenEmpty,
   children,
   onClear,
   noOutline,
@@ -107,7 +109,7 @@ export const InputWrapper = ({
         !noOutline &&
           !noBorder &&
           "bg-[var(--fabric-input)] outline overflow-hidden",
-        "flex flex-nowrap items-center",
+        "flex flex-nowrap items-center flex-1",
         textarea ? "rounded-capped group" : "rounded",
         isExpanded
           ? "fixed inset-4 z-[99]"
@@ -155,6 +157,9 @@ export const InputWrapper = ({
             classes.decorate,
             "text-muted leading-none flex-content",
             isString(decorateEnd) && "px-1",
+            decorateEndHideWhenEmpty && "peer-placeholder-shown:hidden",
+            decorateEndShowWhenEmpty &&
+              "hidden peer-placeholder-shown:inline-block",
           )}
         >
           {decorateEnd}
@@ -174,7 +179,7 @@ export const InputWrapper = ({
     <Wrapper {...wrapperProps}>
       <div
         ref={elRef}
-        className="flex-1 relative min-h-8"
+        className="flex-1 relative min-h-8 flex flex-col flex-nowrap"
         style={{ width, flexBasis: width }}
       >
         {el}

package/src/types/index.ts

@@ -72,6 +72,8 @@ export interface InputProps<V = string> extends TestProps {
    *
    */
   decorateEnd?: JSX.Element | string | number | boolean;
+  decorateEndShowWhenEmpty?: boolean;
+  decorateEndHideWhenEmpty?: boolean;
   /**
    * info label at bottom
    */
@@ -120,9 +122,7 @@ export interface InputProps<V = string> extends TestProps {
   labelWidth?: string;
 }
 
-export interface BaseSelectProps<T>
-  extends RefProp<HTMLInputElement>,
-    Omit<InputProps, "value" | "onChange"> {
+export interface BaseSelectProps<T extends AnyObject = string> {
   /**
    * list options
    */
@@ -165,7 +165,11 @@ export interface BaseSelectProps<T>
   matcher?: (option: T, query: string) => boolean;
 }
 
-export type SelectProps<T> = BaseSelectProps<T> &
+type BaseSelectType<T> = BaseSelectProps<T> &
+  RefProp<HTMLInputElement> &
+  Omit<InputProps, "value" | "onChange">;
+
+export type SelectProps<T> = BaseSelectType<T> &
   (
     | {
         /**

package/src/types/schema.ts

@@ -21,80 +21,104 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-interface BaseSchemaDef {
+import { type DateLike } from "@react-fabric/date";
+
+export enum DATA_TYPES {
+  TEXT = "text",
+  COLOR = "color",
+  BOOL = "bool",
+  DATE = "date",
+  STRING = "string",
+  NUMBER = "number",
+  RANGE = "range",
+  FILE = "file",
+  AVATAR = "avatar",
+  SCHEMA = "schema",
+}
+
+interface SingleValue {
+  multiple?: false;
+  minItems?: never;
+  maxItems?: never;
+}
+
+interface MultipleValue {
+  multiple: true;
+  minItems?: number;
+  maxItems?: number;
+}
+
+export type ValueType = SingleValue | MultipleValue;
+
+interface BaseSchema {
   id: string;
   label: string;
   datatype: string;
   required?: boolean;
-  multiple?: boolean;
-  defaultValue?: AnyObject;
 }
 
-interface SchemaDef extends BaseSchemaDef {
-  datatype: "text" | "color";
+export interface DefaultSchema extends BaseSchema {
+  datatype: DATA_TYPES.TEXT | DATA_TYPES.COLOR;
 }
 
-interface BooleanSchema extends BaseSchemaDef {
-  datatype: "boolean";
-  defaultValue?: boolean;
+export interface BooleanSchema extends BaseSchema {
+  datatype: DATA_TYPES.BOOL;
 }
 
-interface StringSchema extends BaseSchemaDef {
-  datatype: "string";
-  options?: string[];
+export interface StringSchema extends BaseSchema {
+  datatype: DATA_TYPES.STRING;
   regex?: string;
-  identifierType?: string;
+  options?: string[];
+  optionList?: string;
+  allowCustom?: boolean;
 }
 
-interface RangeSchema extends BaseSchemaDef {
-  datatype: "range";
+export interface RangeSchema extends BaseSchema {
+  datatype: DATA_TYPES.RANGE;
   min?: number;
   max?: number;
   step?: number;
-  defaultValue?: [number, number];
 }
 
-interface NumberSchema extends BaseSchemaDef {
-  datatype: "number";
-  min?: number;
-  max?: number;
-  step?: number;
-  defaultValue?: number;
+export interface DateSchema extends BaseSchema {
+  datatype: DATA_TYPES.DATE;
+  type?: "date" | "datetime";
+  min?: DateLike;
+  max?: DateLike;
 }
 
-interface DecimalSchema extends BaseSchemaDef {
-  datatype: "decimal";
+export interface NumberSchema extends BaseSchema {
+  datatype: DATA_TYPES.NUMBER;
   min?: number;
   max?: number;
   step?: number;
-  defaultValue?: number;
 }
 
-export interface FileSchema extends BaseSchemaDef {
-  datatype: "file";
+export interface FileSchema extends BaseSchema {
+  datatype: DATA_TYPES.FILE;
   accept?: string;
 }
 
-export interface AvatarSchema extends BaseSchemaDef {
-  datatype: "avatar";
+export interface AvatarSchema extends BaseSchema {
+  datatype: DATA_TYPES.AVATAR;
   multiple?: false;
 }
 
 export type SchemaType =
-  | SchemaDef
-  | BooleanSchema
-  | StringSchema
-  | RangeSchema
-  | NumberSchema
-  | DecimalSchema
-  | FileSchema
-  | AvatarSchema;
-
-export interface ChildSchema extends BaseSchemaDef {
-  datatype: "schema";
+  | (DefaultSchema & ValueType)
+  | (BooleanSchema & ValueType)
+  | (StringSchema & ValueType)
+  | (RangeSchema & ValueType)
+  | (DateSchema & ValueType)
+  | (NumberSchema & ValueType)
+  | (FileSchema & ValueType)
+  | (AvatarSchema & ValueType);
+
+export interface ChildSchema extends BaseSchema {
+  datatype: DATA_TYPES.SCHEMA;
   inline?: boolean;
   schema: SchemaType[];
-  defaultValue?: never;
 }
 
-export type FormSchema = SchemaType | ChildSchema;
+export type SchemaDef = SchemaType | (ChildSchema & ValueType);
+export type FormSchema = SchemaDef[];