@react-fabric/form 1.0.0-beta.9 → 1.0.2

package/src/input/ColorPicker.tsx

@@ -21,18 +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 Color from "color";
-import {
-  memo,
-  startTransition,
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useState,
-  type FC,
-} from "react";
-import { SketchPicker } from "react-color";
-import classes from "./ColorPicker.module.css";
+import { useControlledValue } from "@react-fabric/core";
+import chroma from "chroma-js";
+import { memo, startTransition, useCallback } from "react";
+import { BlockPicker, SketchPicker } from "react-color";
 
 export interface ColorProps {
   /**
@@ -47,6 +39,10 @@ export interface ColorProps {
    * hide alpha value
    */
   hideAlpha?: boolean;
+  /**
+   * show only swatches, hide the color picker
+   */
+  picker?: "default" | "swatches";
   /**
    * color value
    */
@@ -58,16 +54,16 @@ export interface ColorProps {
 }
 
 const DEFAULT_SWATCHES = [
-  Color("#d7323a").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#ff781c").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#f7b731").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#88ab1b").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#22aa85").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#399bec").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#4862c8").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#aa66cf").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#f43f7b").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#a37f4f").mix(Color("#171a1c"), 0.5).hex(),
+  chroma.mix("#d7323a", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#ff781c", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#f7b731", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#88ab1b", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#22aa85", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#399bec", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#4862c8", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#aa66cf", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#f43f7b", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#a37f4f", "#171a1c", 0.5, "lab").hex(),
 
   "#d7323a",
   "#ff781c",
@@ -80,16 +76,16 @@ const DEFAULT_SWATCHES = [
   "#f43f7b",
   "#a37f4f",
 
-  Color("#d7323a").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#ff781c").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#f7b731").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#88ab1b").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#22aa85").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#399bec").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#4862c8").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#aa66cf").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#f43f7b").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#a37f4f").mix(Color("#f1f3f4"), 0.5).hex(),
+  chroma.mix("#d7323a", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#ff781c", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#f7b731", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#88ab1b", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#22aa85", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#399bec", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#4862c8", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#aa66cf", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#f43f7b", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#a37f4f", "#f1f3f4", 0.5, "lab").hex(),
 
   "#171a1c",
   "#2d3439",
@@ -103,44 +99,48 @@ const DEFAULT_SWATCHES = [
   "#f1f3f4",
 ];
 
-// eslint-disable-next-line react/display-name
-export const ColorPicker: FC<ColorProps> = memo(
-  ({
-    value,
-    onChange,
-    hideAlpha,
-    defaultColor = "#fff",
-    swatches = DEFAULT_SWATCHES,
-  }: ColorProps) => {
-    const [actualValue, setActualValue] = useState("");
-    const deferred = useDeferredValue(value ?? defaultColor);
+const ColorPickerComponent = ({
+  value,
+  onChange,
+  hideAlpha,
+  defaultColor = "#fff",
+  swatches = DEFAULT_SWATCHES,
+  picker = "default",
+}: ColorProps) => {
+  const { currentValue, updateValue } = useControlledValue(value, defaultColor);
 
-    useEffect(() => {
-      setActualValue(deferred ?? "");
-    }, [deferred]);
+  const handleChange = useCallback(
+    (e: string) => {
+      updateValue(e ?? defaultColor);
+      if (onChange) startTransition(() => onChange(e));
+    },
+    [defaultColor, onChange, updateValue],
+  );
 
-    const handleChange = useCallback(
-      (e: string) => {
-        setActualValue(e ?? defaultColor);
-        onChange != null && startTransition(() => onChange(e));
-      },
-      [onChange],
-    );
+  const E = (picker === "swatches" ? BlockPicker : SketchPicker) as unknown as React.FC<AnyObject>;
 
-    return (
-      <SketchPicker
+  return (
+    <div
+      role="none"
+      className="fabric-colorPicker-container"
+      // prevent default on mouse down to avoid selection issues
+      onMouseDown={(e) => e.preventDefault()}
+      style={
+        {
+          "--color-selected": value,
+        } as React.CSSProperties
+      }
+    >
+      <E
         width="16rem"
-        className={classes.colorPicker}
+        className={"fabric-colorPicker"}
         styles={
           {
             default: {
               hue: {
-                borderRadius: "99px",
                 boxShadow: "0 0 1px 1px var(--color-shadow)",
               },
               alpha: {
-                height: "1rem",
-                borderRadius: "99px",
                 backgroundColor: "var(--fabric-bg)",
                 boxShadow: "0 0 1px 1px var(--color-shadow)",
               },
@@ -155,56 +155,30 @@ export const ColorPicker: FC<ColorProps> = memo(
               },
               picker: {
                 backgroundColor: "var(--fabric-bg)",
-                boxShadow:
-                  "0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)",
-              },
-              Alpha: {
-                alpha: {
-                  paddingRight: "calc(1rem - 2px)",
-                },
-                slider: {
-                  width: "calc(1rem - 2px)",
-                  borderRadius: "99px",
-                  height: "calc(1rem - 2px)",
-                  transform: "none",
-                },
-              },
-              Hue: {
-                hue: {
-                  paddingRight: "calc(1rem - 2px)",
-                },
-                slider: {
-                  width: "calc(1rem - 2px)",
-                  borderRadius: "99px",
-                  height: "calc(1rem - 2px)",
-                  transform: "none",
-                },
-              },
-              Saturation: {
-                circle: {
-                  width: "0.5rem",
-                  borderRadius: "99px",
-                  height: "0.5rem",
-                  transform: "translate(-0.25rem, -0.25rem)",
-                },
+                boxShadow: "0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)",
               },
               checkboard: {
                 white: "transparent",
                 black: "red",
               },
             },
-          } as AnyObject
+          } as React.CSSProperties
         }
-        color={actualValue}
+        color={currentValue}
+        colors={swatches}
         presetColors={swatches}
         disableAlpha={hideAlpha}
-        onChange={({ rgb: { a = 1, ...rgb } }) =>
-          setActualValue(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]())
-        }
-        onChangeComplete={({ rgb: { a = 1, ...rgb } }) =>
-          handleChange(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]())
-        }
+        onChange={({ rgb: { a = 1, ...rgb } }) => updateValue(chroma(rgb).alpha(a).hex())}
+        onChangeComplete={({ rgb: { a = 1, ...rgb } }) => handleChange(chroma(rgb).alpha(a).hex())}
       />
-    );
-  },
-);
+    </div>
+  );
+};
+
+/**
+ * ColorPicker component allows users to select a color using a color picker UI.
+ * It supports swatches, alpha transparency, and custom styles.
+ * The component uses the `react-color` library for the color picker functionality.
+ */
+export const ColorPicker = memo(ColorPickerComponent);
+ColorPicker.displayName = "ColorPicker";

package/src/input/DateInput.tsx

@@ -0,0 +1,225 @@
+/*
+ * 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 { useControlledValue } from "@react-fabric/core";
+import type { RefProp } from "@react-fabric/core/dist/types/types";
+import type { DateLike } from "@react-fabric/date";
+import { DatePanel, DateUtil } from "@react-fabric/date";
+import { cn, mergeRefs } from "@react-fabric/utilities";
+import { startTransition, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { InputWrapper } from "../internal/InputWrapper";
+import type { InputProps, WrapperProps } from "../types";
+import { getWrapperProps, useHandleEnter } from "../utils";
+
+export interface DateProps extends InputProps<DateLike>, WrapperProps, RefProp<HTMLInputElement> {
+  type?: "date" | "datetime";
+  /**
+   * 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.
+ */
+export function DateInput(props: DateProps) {
+  const {
+    ref,
+    name,
+    value,
+    invalid,
+    readOnly,
+    disabled,
+    placeholder,
+    defaultValue,
+    autoFocus,
+    error,
+    type = "date",
+    onBlur,
+    onFocus,
+    onChange,
+    onEnterPressed,
+    allowClear,
+    min,
+    max,
+  } = props;
+  const id = useId();
+  const { currentValue, updateValue } = useControlledValue(value, defaultValue);
+  const [inputValue, setInputValue] = useState("");
+
+  const inputFormat = useMemo(() => (type === "datetime" ? "yyyy-MM-dd HH:mm" : "yyyy-MM-dd"), [type]);
+
+  useEffect(() => {
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
+    setInputValue(currentValue ? DateUtil.format(currentValue, inputFormat) : "");
+  }, [currentValue, inputFormat]);
+
+  const handleEnterPressed = useHandleEnter(onEnterPressed);
+
+  const handleChange = useCallback(
+    (e?: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e?.currentTarget.value ?? defaultValue;
+      if (value) {
+        const parsed = DateUtil.parseDate(value);
+        updateValue(parsed?.toISOString?.());
+        setInputValue(DateUtil.format(parsed, inputFormat));
+        if (onChange) startTransition(() => onChange(parsed?.toISOString?.()));
+      } else {
+        updateValue("");
+        setInputValue("");
+        if (onChange) startTransition(() => onChange());
+      }
+    },
+    [defaultValue, updateValue, inputFormat, onChange],
+  );
+
+  const handleDateChange = useCallback(
+    (value?: string) => {
+      if (value) {
+        const parsed = DateUtil.parseDate(value);
+        updateValue(parsed?.toISOString?.());
+        setInputValue(DateUtil.format(parsed, inputFormat));
+        if (onChange) startTransition(() => onChange(parsed?.toISOString?.()));
+      } else {
+        updateValue("");
+        setInputValue("");
+        if (onChange) startTransition(() => onChange());
+      }
+    },
+    [updateValue, inputFormat, onChange],
+  );
+
+  const arrowRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: (open, _, 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
+      id={id}
+      showClear={allowClear && !!currentValue && !disabled && !readOnly}
+      onClear={handleChange}
+      {...getWrapperProps(props)}
+    >
+      <input
+        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",
+          !currentValue && "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"
+        // eslint-disable-next-line jsx-a11y-x/no-autofocus
+        autoFocus={autoFocus}
+        value={inputValue}
+        ref={mergeRefs(ref, (el: HTMLInputElement) => refs.setReference(el))}
+        {...getReferenceProps({
+          onBlur,
+          onFocus,
+        })}
+        onChange={handleChange}
+        onKeyDown={handleEnterPressed}
+      />
+      {isOpen && (
+        <div
+          ref={(el) => refs.setFloating(el)}
+          style={{
+            zIndex: "var(--z-popover)",
+            ...floatingStyles,
+          }}
+          className="shadow-lg bg-default ring-1 ring-tint-100"
+          data-ref="dropdownBody"
+          {...getFloatingProps()}
+        >
+          <DatePanel
+            withTime={type === "datetime"}
+            value={currentValue ?? ""}
+            max={max}
+            min={min}
+            onChange={handleDateChange}
+          />
+          <FloatingArrow ref={arrowRef} context={context} strokeWidth={0.5} className="fill-default stroke-muted" />
+        </div>
+      )}
+    </InputWrapper>
+  );
+}

package/src/input/Field.tsx

@@ -21,50 +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 {
-  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 type { ChildrenProp, CssProp } from "@react-fabric/core/dist/types/types";
+import { cn } from "@react-fabric/utilities";
 import { FieldWrapper } from "../internal/FieldWrapper";
+import type { WrapperProps } from "../types";
+import { getWrapperProps } from "../utils";
 
-export interface FieldProps extends ChildrenProp, CssProp {
-  /**
-   * input label
-   */
-  label?: string;
-  /**
-   * append to label end
-   */
-  appendLabel?: JSX.Element | string | number | boolean;
-  /**
-   * info label at bottom
-   */
-  info?: string;
-
-  /**
-   * required
-   */
-  required?: boolean;
-  /**
-   * hide outline
-   */
-  noOutline?: boolean;
-
-  /**
-   * field width
-   */
-  width?: number | string;
-  /**
-   * inline label and input
-   */
-  inline?: boolean;
-  /**
-   * label width for inline
-   */
-  labelWidth?: string;
+export interface FieldProps extends ChildrenProp, WrapperProps, CssProp {
   /**
    * dont apply bg and outline
    */
@@ -72,33 +35,28 @@ export interface FieldProps extends ChildrenProp, CssProp {
   vertical?: boolean;
 }
 
-export const Field = ({
-  children,
-  vertical,
-  noOutline,
-  plain,
-  ...rest
-}: FieldProps) => {
+/**
+ * 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 function Field(props: FieldProps) {
+  const { children, vertical, borderless, plain, inline } = props;
   return (
-    <FieldWrapper {...rest}>
+    <FieldWrapper {...getWrapperProps(props)}>
       <div
-        className={classNames(
-          classes.fieldGroup,
-          !plain && !noOutline && "outline",
-          !plain && "bg-base",
-          "flex-1 rounded",
-          !vertical && "flex flex-nowrap",
+        className={cn(
+          "fabric-fieldGroup",
+          !plain && !borderless && "outline focus-within:outline-primary-500 has-aria-invalid:focus-within:outline-danger-500",
+          !plain && "bg-default",
+          plain && "flex-wrap",
+          inline && "flex-1",
+          vertical ? "rounded-capped" : "rounded flex",
         )}
+        data-vertical={!!vertical}
       >
-        {Children.map(
-          children,
-          (child) =>
-            child &&
-            cloneElement(child as AnyObject, {
-              "data-inner": true,
-            }),
-        )}
+        {children}
       </div>
     </FieldWrapper>
   );
-};
+}