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

package/src/input/AvatarInput.tsx

@@ -22,7 +22,9 @@
  */
 
 import { Avatar, Icon, ProgressBar } from "@react-fabric/core";
+import { type AvatarProps } from "@react-fabric/core/dist/types/components/avatar/Avatar";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
+import classNames from "classnames";
 import { useEffect, useState } from "react";
 import { useFileUploader, type UploadHandler } from "../hooks/useFileUploader";
 import { HiddenInput } from "./Hidden";
@@ -37,14 +39,25 @@ export interface Props extends RefProp {
    */
   value?: string;
   /**
-   * avatar stream src
+   * default avatar image
    */
-  src?: string;
+  defaultValue?: string;
+  /**
+   * avatar name
+   */
+  avatarName?: string;
+  rounded?: boolean;
+  variant?: AvatarProps["variant"];
+  fallbackIcon?: AvatarProps["fallbackIcon"];
+  avatarClassName?: AvatarProps["className"];
   size?: string | number;
   /**
    * upload handler to store file in temp storage
    */
   uploadHandler: UploadHandler;
+  /**
+   * file stream path
+   */
   fileUrl?: (path: string) => string;
   /**
    * change handler
@@ -56,16 +69,30 @@ export interface Props extends RefProp {
   onChange?: (path: string) => void;
 }
 
+/**
+ * Avatar input component for uploading and displaying user avatars.
+ * It allows users to select an image file, upload it, and display the avatar.
+ * It also provides a way to remove the uploaded file and shows upload progress.
+ *
+ * @param {Props} props - The properties for the AvatarInput component.
+ * @returns {JSX.Element} - The rendered AvatarInput component.
+ */
 export const AvatarInput = ({
-  src,
   size = "6rem",
+  avatarName,
+  avatarClassName,
+  value,
+  rounded,
+  defaultValue,
+  fallbackIcon,
+  variant,
   fileUrl,
   uploadHandler,
   ...rest
 }: Props) => {
   const { files, list, upload, remove } = useFileUploader(
     async (data, config) => await uploadHandler?.(data, config),
-    rest.value,
+    value,
     false,
   );
 
@@ -87,19 +114,36 @@ export const AvatarInput = ({
         })
       );
     } else {
-      setBase64("");
+      setBase64(fileUrl?.(defaultValue ?? "") ?? defaultValue ?? "");
     }
-  }, [files, list]);
+  }, [files, list, defaultValue]);
 
   useEffect(() => {
-    src && setBase64(fileUrl?.(src) ?? src);
-  }, [src]);
+    !value &&
+      defaultValue &&
+      setBase64(fileUrl?.(defaultValue) ?? defaultValue);
+    value && setBase64(fileUrl?.(value) ?? value);
+  }, [value, defaultValue]);
 
   return (
-    <div className="flex flex-nowrap items-end">
-      <div className="inline-block leading-none rounded-full relative outline overflow-hidden">
-        <Avatar name="temp" size={size} avatar={base64} />
-        <div className="absolute inset-x-0 bottom-0 cursor-pointer bg-opacity-20 hover:bg-opacity-50 bg-black text-white text-xs text-center py-1">
+    <div className="flex flex-nowrap items-end overflow-hidden">
+      <div
+        className={classNames(
+          "inline-block leading-none relative outline overflow-hidden",
+          rounded && "rounded-full",
+          !rounded && "rounded",
+        )}
+      >
+        <Avatar
+          name={avatarName ?? "temp"}
+          size={size}
+          avatar={base64}
+          rounded={rounded}
+          variant={variant}
+          fallbackIcon={fallbackIcon}
+          className={avatarClassName}
+        />
+        <div className="absolute inset-x-0 bottom-0 cursor-pointer opacity-50 bg-black/50 hover:opacity-90 text-white text-xs text-center py-1">
           <span>Edit</span>
           <input
             type="file"
@@ -109,11 +153,14 @@ export const AvatarInput = ({
           />
         </div>
       </div>
-      <HiddenInput hiddenValue={list?.[0]?.path} {...rest} />
+      <HiddenInput
+        hiddenValue={list?.[0]?.path}
+        defaultValue={defaultValue}
+        {...rest}
+      />
       {files.map((file, idx) => (
-        <div key={idx} className="px-2 py-1 flex-1">
+        <div key={idx} className="px-2 py-1 flex-1 overflow-hidden">
           <div className="flex flex-nowrap gap-1 items-center">
-            <div className="flex-initial truncate pe-2">{file.filename}</div>
             {file.error && (
               <div className="flex-1 truncate px-2">
                 <span className="text-danger-600">{file.error}</span>
@@ -121,20 +168,21 @@ export const AvatarInput = ({
             )}
             {file.progress && (
               <Icon
-                icon="mdi mdi-stop-circle"
+                icon="icon-[mdi--stop]"
                 bg="danger"
                 color="white"
                 size="sm"
-                className="p-[2px]"
+                className="p-0.5 flex-content"
                 aria-label="abort"
                 onClick={() => file.abort?.()}
               />
             )}
             {!file.progress && (
               <Icon
-                icon="mdi mdi-trash-can"
+                icon="icon-[mdi--trash-can-outline]"
                 color="danger"
                 size="sm"
+                className="flex-content"
                 aria-label="remove"
                 onClick={() => remove(file.key)}
               />

package/src/input/Checkbox.tsx

@@ -21,7 +21,7 @@
  * 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 { Icon } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import classNames from "classnames";
 import {
@@ -34,7 +34,7 @@ import {
 } from "react";
 import { ErrorIcon } from "../internal/ErrorIcon";
 
-export interface CheckboxProps extends RefProp<HTMLInputElement> {
+interface CheckboxProps extends RefProp<HTMLInputElement> {
   /**
    * checkbox label
    */
@@ -50,8 +50,7 @@ export interface CheckboxProps extends RefProp<HTMLInputElement> {
   /**
    * on checked change
    */
-  onChange?: (checked: boolean | string | number) => void;
-
+  onChange?: (checked: boolean) => void;
   /**
    * disabled input
    */
@@ -82,6 +81,15 @@ export interface CheckboxProps extends RefProp<HTMLInputElement> {
   name?: string;
 }
 
+/**
+ * Checkbox component for rendering a checkbox input with label and error handling.
+ * It supports custom icons for checked and unchecked states, and handles disabled and invalid states.
+ * The component uses a deferred value to manage the checked state, ensuring smooth updates.
+ * It also provides an error icon to indicate validation errors.
+ *
+ * @param {CheckboxProps} props - The properties for the Checkbox component.
+ * @returns {JSX.Element} The rendered Checkbox component.
+ */
 export const Checkbox = ({
   ref,
   label,
@@ -94,6 +102,8 @@ export const Checkbox = ({
   width,
   icon,
   iconChecked,
+  // @ts-expect-error ignore
+  required,
   onChange,
   ...rest
 }: CheckboxProps) => {
@@ -101,10 +111,13 @@ export const Checkbox = ({
   const deferred = useDeferredValue(!!checked);
 
   const iconOn = useMemo(
-    () => iconChecked ?? icon ?? CoreIcons.checkboxOn,
+    () => iconChecked ?? icon ?? "icon-[mdi--checkbox-marked]",
     [icon, iconChecked],
   );
-  const iconOff = useMemo(() => icon ?? CoreIcons.checkboxOff, [icon]);
+  const iconOff = useMemo(
+    () => icon ?? "icon-[mdi--checkbox-blank-outline]",
+    [icon],
+  );
 
   useEffect(() => {
     setActualValue(deferred);
@@ -125,7 +138,7 @@ export const Checkbox = ({
         disabled
           ? "opacity-50 cursor-not-allowed"
           : " opacity-85 hover:opacity-100 cursor-pointer",
-        "inline-flex gap-1 py-1 items-center relative rounded ring-offset-2 has-[:focus-visible]:ring-1",
+        "inline-flex gap-1 py-1 items-center relative rounded ring-offset-2 has-focus-visible:ring-1",
       )}
       style={{ width }}
     >
@@ -150,7 +163,7 @@ export const Checkbox = ({
       <Icon
         className={classNames(
           "p-0.5",
-          actualValue && icon && !iconChecked && "bg-primary-500 text-white",
+          actualValue && icon && !iconChecked && "bg-primary-500 text-white!",
         )}
         size="1.25em"
         color={invalid ? "danger" : "primary"}
@@ -158,7 +171,7 @@ export const Checkbox = ({
       />
       <ErrorIcon invalid={invalid} error={error} />
       {label && (
-        <span className="flex-initial leading-none truncate">{label}</span>
+        <span className="flex-initial leading-tight truncate">{label}</span>
       )}
     </label>
   );

package/src/input/ColorInput.tsx

@@ -21,39 +21,67 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { CoreIcons, Dropdown, Icon } from "@react-fabric/core";
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  FloatingArrow,
+  offset,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+} from "@floating-ui/react";
+import { Icon } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
-import { isString } from "@react-fabric/utilities";
-import classNames from "classnames";
 import {
   startTransition,
   useCallback,
   useDeferredValue,
   useEffect,
+  useRef,
   useState,
 } from "react";
+import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
 import { ColorPicker, type ColorProps } from "./ColorPicker";
 
-export interface ColorInputProps extends InputProps, ColorProps, RefProp {
+export interface ColorInputProps
+  extends InputProps,
+    Omit<ColorProps, "onChange">,
+    RefProp {
   /**
    * show eydrop picker
    */
   showPicker?: boolean;
 }
 
+/**
+ * Color input component that allows users to select a color
+ * and optionally use an eye dropper to pick a color from the screen.
+ * It uses the Floating UI library for positioning the color picker.
+ * It also provides a button to clear the selected color.
+ *
+ * This component is a wrapper around the `ColorPicker` component
+ * and provides additional functionality such as showing an eye dropper
+ * and handling the color selection state.
+ *
+ * @param {ColorInputProps} props - The properties for the ColorInput component.
+ * @returns {JSX.Element} - The rendered ColorInput component.
+ */
 export const ColorInput = ({
   ref,
   required,
   disabled,
-  allowClear,
+  readOnly,
   invalid,
   error,
   value,
   showPicker,
   defaultColor = "",
-  decorateEnd,
-  decorateStart,
+  onBlur,
+  onFocus,
   onChange,
   // @ts-expect-error ignore
   noOutline,
@@ -68,63 +96,110 @@ export const ColorInput = ({
 
   const handleChange = useCallback(
     (e?: string) => {
-      setActualValue(e ?? defaultColor);
-      onChange != null && startTransition(() => onChange(e));
+      const value = e ?? defaultColor;
+      setActualValue(value);
+      onChange != null && startTransition(() => onChange(value ?? null));
     },
-    [onChange],
+    [onChange, defaultColor],
   );
 
+  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",
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      shift({ padding: 8 }),
+      flip(),
+      offset(9),
+      arrow({
+        element: arrowRef,
+      }),
+    ],
+  });
+  const click = useClick(context, {
+    enabled: !disabled && !readOnly,
+  });
+  const dismiss = useDismiss(context, {
+    referencePress: true,
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    dismiss,
+    click,
+  ]);
+
   return (
-    <div
-      className={classNames(
-        "flex-content min-h-[1.5em] min-w-[3.5em] self-stretch flex items-center outline-tint-200 rounded",
-        !disabled && "bg-base",
-        !noOutline && "bg-[var(--fabric-input)] outline overflow-hidden",
-      )}
+    <InputWrapper
+      showClear={actualValue !== defaultColor && !disabled && !readOnly}
+      onClear={handleChange}
+      invalid={invalid}
+      readOnly={readOnly}
+      disabled={disabled}
+      required={required}
+      error={error}
+      {...rest}
     >
-      {decorateStart && (
+      <button
+        data-ref="button"
+        type="button"
+        className="flex-1 flex items-center"
+        ref={refs.setReference}
+        {...getReferenceProps({
+          onBlur,
+          onFocus,
+        })}
+        data-inner-clickable="true"
+        data-dropdown-open={isOpen ? true : undefined}
+      >
         <div
-          className={classNames(
-            "text-muted leading-none flex-content",
-            isString(decorateStart) && "px-2",
+          role="none"
+          className="h-[1.5em] min-w-[1.5em] flex-1 flex items-center justify-center self-stretch cursor-pointer m-[0.25em] rounded outline outline-tint-100"
+          style={{
+            backgroundColor: actualValue,
+            opacity: disabled ? 0.65 : 1,
+            pointerEvents: disabled ? "none" : undefined,
+          }}
+        >
+          {!actualValue && (
+            <Icon size="md" className="text-muted" icon="icon-[mdi--palette]" />
           )}
+        </div>
+      </button>
+      {isOpen && (
+        <div
+          ref={refs.setFloating}
+          style={{
+            zIndex: "var(--z-popover)",
+            ...floatingStyles,
+          }}
+          data-ref="dropdownBody"
+          {...getFloatingProps()}
         >
-          {decorateStart}
+          <ColorPicker
+            {...rest}
+            onChange={handleChange}
+            defaultColor={defaultColor}
+            value={actualValue}
+          />
+          <FloatingArrow
+            ref={arrowRef}
+            context={context}
+            strokeWidth={0.5}
+            className="fill-base stroke-muted"
+          />
         </div>
       )}
-      <Dropdown showArrow disabled={disabled}>
-        <button data-ref="button" className="flex-1 flex items-center">
-          <div
-            role="none"
-            className="h-[1.5em] min-w-[1.5em] flex-1 flex items-center justify-center self-stretch cursor-pointer m-[0.25em] rounded outline outline-tint-100"
-            style={{
-              backgroundColor: actualValue,
-              opacity: disabled ? 0.65 : 1,
-              pointerEvents: disabled ? "none" : undefined,
-            }}
-            onClick={(e) =>
-              (e.currentTarget.nextElementSibling as HTMLElement)?.focus()
-            }
-          >
-            {!actualValue && (
-              <Icon
-                size="md"
-                className="text-muted"
-                icon={CoreIcons.colorSwatch}
-              />
-            )}
-          </div>
-        </button>
-        <ColorPicker
-          {...rest}
-          onChange={handleChange}
-          defaultColor={defaultColor}
-          value={actualValue}
-        />
-      </Dropdown>
       {!disabled && showPicker && (
         <Icon
-          icon={CoreIcons.colorPicker}
+          className="flex-content p-1"
+          icon="icon-[mdi--eyedropper]"
           onClick={() =>
             (window as AnyObject).EyeDropper &&
             new (window as AnyObject).EyeDropper()
@@ -133,25 +208,6 @@ export const ColorInput = ({
           }
         />
       )}
-      {decorateEnd && (
-        <div
-          className={classNames(
-            "text-muted leading-none flex-content",
-            isString(decorateEnd) && "px-2",
-          )}
-        >
-          {decorateEnd}
-        </div>
-      )}
-      {!disabled && allowClear && actualValue !== defaultColor && (
-        <Icon
-          icon={CoreIcons.close}
-          onClick={() => handleChange()}
-          className={classNames(
-            "text-tint-500 hover:text-tint-700 p-[0.25em] flex-content",
-          )}
-        />
-      )}
-    </div>
+    </InputWrapper>
   );
 };

package/src/input/ColorPicker.tsx

@@ -32,7 +32,6 @@ import {
   type FC,
 } from "react";
 import { SketchPicker } from "react-color";
-import classes from "./ColorPicker.module.css";
 
 export interface ColorProps {
   /**
@@ -50,7 +49,7 @@ export interface ColorProps {
   /**
    * color value
    */
-  value?: string;
+  value?: string | null;
   /**
    * change handler
    */
@@ -103,6 +102,16 @@ const DEFAULT_SWATCHES = [
   "#f1f3f4",
 ];
 
+/**
+ * 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.
+ *
+ * @param {ColorProps} props - The properties for the ColorPicker component.
+ * @returns {JSX.Element} The rendered ColorPicker component.
+ *
+ * @see {@link https://react-color.github.io/react-color/} for more details on the color picker library.
+ */
 // eslint-disable-next-line react/display-name
 export const ColorPicker: FC<ColorProps> = memo(
   ({
@@ -128,83 +137,56 @@ export const ColorPicker: FC<ColorProps> = memo(
     );
 
     return (
-      <SketchPicker
-        width="16rem"
-        className={classes.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)",
-              },
-              color: {
-                boxShadow: "0 0 1px 1px var(--color-shadow)",
-              },
-              saturation: {
-                boxShadow: "0 0 1px 1px var(--color-shadow)",
-              },
-              activeColor: {
-                boxShadow: "0 0 1px 1px var(--color-shadow)",
-              },
-              picker: {
-                backgroundColor: "var(--fabric-bg)",
-                boxShadow:
-                  "0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)",
-              },
-              Alpha: {
+      <div
+        role="none"
+        // prevent default on mouse down to avoid selection issues
+        onMouseDown={(e) => e.preventDefault()}
+      >
+        <SketchPicker
+          width="16rem"
+          className={"fabric-colorPicker"}
+          styles={
+            {
+              default: {
+                hue: {
+                  boxShadow: "0 0 1px 1px var(--color-shadow)",
+                },
                 alpha: {
-                  paddingRight: "calc(1rem - 2px)",
+                  backgroundColor: "var(--fabric-bg)",
+                  boxShadow: "0 0 1px 1px var(--color-shadow)",
                 },
-                slider: {
-                  width: "calc(1rem - 2px)",
-                  borderRadius: "99px",
-                  height: "calc(1rem - 2px)",
-                  transform: "none",
+                color: {
+                  boxShadow: "0 0 1px 1px var(--color-shadow)",
                 },
-              },
-              Hue: {
-                hue: {
-                  paddingRight: "calc(1rem - 2px)",
+                saturation: {
+                  boxShadow: "0 0 1px 1px var(--color-shadow)",
                 },
-                slider: {
-                  width: "calc(1rem - 2px)",
-                  borderRadius: "99px",
-                  height: "calc(1rem - 2px)",
-                  transform: "none",
+                activeColor: {
+                  boxShadow: "0 0 1px 1px var(--color-shadow)",
                 },
-              },
-              Saturation: {
-                circle: {
-                  width: "0.5rem",
-                  borderRadius: "99px",
-                  height: "0.5rem",
-                  transform: "translate(-0.25rem, -0.25rem)",
+                picker: {
+                  backgroundColor: "var(--fabric-bg)",
+                  boxShadow:
+                    "0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)",
+                },
+                checkboard: {
+                  white: "transparent",
+                  black: "red",
                 },
               },
-              checkboard: {
-                white: "transparent",
-                black: "red",
-              },
-            },
-          } as AnyObject
-        }
-        color={actualValue}
-        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"]())
-        }
-      />
+            } as AnyObject
+          }
+          color={actualValue}
+          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"]())
+          }
+        />
+      </div>
     );
   },
 );