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

package/src/input/AvatarInput.tsx

@@ -22,9 +22,12 @@
  */
 
 import { Avatar, Icon, ProgressBar } from "@react-fabric/core";
-import { type RefProp } from "@react-fabric/core/dist/types/types";
+import type { AvatarProps } from "@react-fabric/core/dist/types/components/avatar/Avatar";
+import type { RefProp } from "@react-fabric/core/dist/types/types";
+import { cn } from "@react-fabric/utilities";
 import { useEffect, useState } from "react";
-import { useFileUploader, type UploadHandler } from "../hooks/useFileUploader";
+import type { UploadHandler } from "../hooks/useFileUploader";
+import { useFileUploader } from "../hooks/useFileUploader";
 import { HiddenInput } from "./Hidden";
 
 export interface Props extends RefProp {
@@ -37,14 +40,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
@@ -53,25 +67,40 @@ export interface Props extends RefProp {
    * @param base64
    * @returns storage path
    */
-  onChange?: (path: string) => void;
+  onChange?: (path: string | null) => 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.
+ */
 export const AvatarInput = ({
-  src,
   size = "6rem",
+  avatarName,
+  avatarClassName,
+  value,
+  rounded,
+  defaultValue,
+  fallbackIcon,
+  variant,
   fileUrl,
   uploadHandler,
+  onChange,
   ...rest
-}: Props) => {
-  const { files, list, upload, remove } = useFileUploader(
+}: Props): React.ReactElement => {
+  const { files, upload, remove } = useFileUploader(
     async (data, config) => await uploadHandler?.(data, config),
-    rest.value,
-    false,
+    value ?? defaultValue,
+    {
+      multiple: false,
+      onChange: (files) => onChange?.(files?.path ?? null),
+    },
   );
 
   const [base64, setBase64] = useState("");
   useEffect(() => {
-    if (list?.length) {
+    if (files?.length) {
       const file = files?.[0]?.file;
       void (
         file &&
@@ -87,19 +116,37 @@ export const AvatarInput = ({
         })
       );
     } else {
-      setBase64("");
+      // eslint-disable-next-line @eslint-react/set-state-in-effect
+      setBase64(fileUrl?.(defaultValue ?? "") ?? defaultValue ?? "");
     }
-  }, [files, list]);
+  }, [files, defaultValue, fileUrl]);
 
   useEffect(() => {
-    src && setBase64(fileUrl?.(src) ?? src);
-  }, [src]);
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
+    if (!value && defaultValue) setBase64(fileUrl?.(defaultValue) ?? defaultValue);
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
+    if (value) setBase64(fileUrl?.(value) ?? value);
+  }, [value, defaultValue, fileUrl]);
 
   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 p-px">
+      <div
+        className={cn(
+          "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,40 +156,36 @@ export const AvatarInput = ({
           />
         </div>
       </div>
-      <HiddenInput hiddenValue={list?.[0]?.path} {...rest} />
+      <HiddenInput hiddenValue={files?.[0]?.path} {...rest} />
       {files.map((file, idx) => (
-        <div key={idx} className="px-2 py-1 flex-1">
+        // eslint-disable-next-line @eslint-react/no-array-index-key
+        <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>
               </div>
             )}
             {file.progress && (
-              <Icon
-                icon="mdi mdi-stop-circle"
-                bg="danger"
-                color="white"
-                size="sm"
-                className="p-[2px]"
-                aria-label="abort"
+              <button
+                type="button"
+                className={cn("size-fit flex-content leading-0 cursor-pointer")}
                 onClick={() => file.abort?.()}
-              />
+              >
+                <Icon icon="icon-[mdi--stop]" bg="danger" color="white" size="sm" className="p-0.5" aria-label="abort" />
+              </button>
             )}
             {!file.progress && (
-              <Icon
-                icon="mdi mdi-trash-can"
-                color="danger"
-                size="sm"
-                aria-label="remove"
+              <button
+                type="button"
+                className={cn("size-fit flex-content leading-0 cursor-pointer")}
                 onClick={() => remove(file.key)}
-              />
+              >
+                <Icon icon="icon-[mdi--trash-can-outline]" color="danger" size="sm" aria-label="remove" />
+              </button>
             )}
           </div>
-          {file.progress && (
-            <ProgressBar animate value={file.progress * 100} size="xxs" />
-          )}
+          {file.progress && <ProgressBar animate value={file.progress * 100} size="xxs" />}
         </div>
       ))}
     </div>

package/src/input/Checkbox.tsx

@@ -21,37 +21,25 @@
  * 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 { type RefProp } from "@react-fabric/core/dist/types/types";
-import classNames from "classnames";
-import {
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useMemo,
-  useState,
-  type ChangeEvent,
-} from "react";
+import { Icon, useControlledValue } from "@react-fabric/core";
+import type { RefProp } from "@react-fabric/core/dist/types/types";
+import { cn } from "@react-fabric/utilities";
+import { useCallback, useMemo } from "react";
 import { ErrorIcon } from "../internal/ErrorIcon";
 
-export interface CheckboxProps extends RefProp<HTMLInputElement> {
+interface CheckboxProps extends RefProp<HTMLInputElement> {
   /**
    * checkbox label
    */
-  label?: JSX.Element | string;
+  label?: React.ReactElement | string;
   /**
    * checked
    */
   checked?: boolean;
-  /**
-   * value
-   */
-  value?: string | number;
   /**
    * on checked change
    */
-  onChange?: (checked: boolean | string | number) => void;
-
+  onChange?: (checked: boolean) => void;
   /**
    * disabled input
    */
@@ -82,10 +70,15 @@ export interface CheckboxProps extends RefProp<HTMLInputElement> {
   name?: string;
 }
 
-export const Checkbox = ({
+/**
+ * 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.
+ */
+export function Checkbox({
   ref,
   label,
-  value,
   name,
   checked,
   invalid,
@@ -96,43 +89,31 @@ export const Checkbox = ({
   iconChecked,
   onChange,
   ...rest
-}: CheckboxProps) => {
-  const [actualValue, setActualValue] = useState(false);
-  const deferred = useDeferredValue(!!checked);
+}: CheckboxProps) {
+  const { currentValue, updateValue } = useControlledValue(!!checked, false);
 
-  const iconOn = useMemo(
-    () => iconChecked ?? icon ?? CoreIcons.checkboxOn,
-    [icon, iconChecked],
-  );
-  const iconOff = useMemo(() => icon ?? CoreIcons.checkboxOff, [icon]);
-
-  useEffect(() => {
-    setActualValue(deferred);
-  }, [deferred]);
+  const iconOn = useMemo(() => iconChecked ?? icon ?? "icon-[mdi--checkbox-marked]", [icon, iconChecked]);
+  const iconOff = useMemo(() => icon ?? "icon-[mdi--checkbox-blank-outline]", [icon]);
 
   const handleChange = useCallback(
-    (e?: ChangeEvent<HTMLInputElement>) => {
-      setActualValue(e?.target.checked ?? false);
+    (e?: React.ChangeEvent<HTMLInputElement>) => {
+      updateValue(e?.target.checked ?? false);
       onChange?.(e?.target.checked ?? false);
     },
-    [onChange, value],
+    [onChange, updateValue],
   );
 
   return (
     <label
-      className={classNames(
+      className={cn(
         invalid ? "ring-danger-500" : "ring-primary-500",
-        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",
+        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",
       )}
       style={{ width }}
     >
       <input
-        className={classNames(
-          "appearance-none absolute opacity-0 inset-0 bg-transparent border-none outline-none ring-0",
-        )}
+        className={cn("appearance-none absolute opacity-0 inset-0 bg-transparent border-none outline-none ring-0")}
         aria-invalid={invalid}
         aria-disabled={disabled}
         disabled={disabled}
@@ -143,23 +124,18 @@ export const Checkbox = ({
         tabIndex={0}
         name={name}
         autoComplete="off"
-        checked={actualValue}
+        checked={!!currentValue}
         onChange={handleChange}
         {...rest}
       />
       <Icon
-        className={classNames(
-          "p-0.5",
-          actualValue && icon && !iconChecked && "bg-primary-500 text-white",
-        )}
+        className={cn("p-0.5", currentValue && icon && !iconChecked && "bg-primary-500 text-white!")}
         size="1.25em"
         color={invalid ? "danger" : "primary"}
-        icon={actualValue ? iconOn : iconOff}
+        icon={currentValue ? iconOn : iconOff}
       />
       <ErrorIcon invalid={invalid} error={error} />
-      {label && (
-        <span className="flex-initial leading-none truncate">{label}</span>
-      )}
+      {label && <span className="flex-initial leading-tight truncate">{label}</span>}
     </label>
   );
-};
+}

package/src/input/ColorInput.tsx

@@ -21,137 +21,178 @@
  * 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 { type RefProp } from "@react-fabric/core/dist/types/types";
-import { isString } from "@react-fabric/utilities";
-import classNames from "classnames";
 import {
-  startTransition,
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useState,
-} from "react";
-import { type InputProps } from "../types";
-import { ColorPicker, type ColorProps } from "./ColorPicker";
+  arrow,
+  autoUpdate,
+  flip,
+  FloatingArrow,
+  FloatingFocusManager,
+  offset,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+} from "@floating-ui/react";
+import { Icon, useControlledValue } from "@react-fabric/core";
+import type { RefProp } from "@react-fabric/core/dist/types/types";
+import { mergeRefs } from "@react-fabric/utilities";
+import { startTransition, useCallback, useRef, useState } from "react";
+import { InputWrapper } from "../internal/InputWrapper";
+import type { InputProps, WrapperProps } from "../types";
+import { getWrapperProps } from "../utils";
+import type { ColorProps } from "./ColorPicker";
+import { ColorPicker } from "./ColorPicker";
 
-export interface ColorInputProps extends InputProps, ColorProps, RefProp {
+export interface ColorInputProps extends InputProps, WrapperProps, Omit<ColorProps, "onChange">, RefProp<HTMLButtonElement> {
   /**
    * show eydrop picker
    */
   showPicker?: boolean;
 }
 
-export const ColorInput = ({
-  ref,
-  required,
-  disabled,
-  allowClear,
-  invalid,
-  error,
-  value,
-  showPicker,
-  defaultColor = "",
-  decorateEnd,
-  decorateStart,
-  onChange,
-  // @ts-expect-error ignore
-  noOutline,
-  ...rest
-}: ColorInputProps) => {
-  const [actualValue, setActualValue] = useState("");
-  const deferred = useDeferredValue(value ?? defaultColor);
+interface EyeDropper {
+  open(): Promise<{ sRGBHex: string }>;
+}
+
+interface Window {
+  EyeDropper?: {
+    new (): EyeDropper;
+  };
+}
 
-  useEffect(() => {
-    setActualValue(deferred ?? "");
-  }, [deferred]);
+/**
+ * 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.
+ */
+export function ColorInput(props: ColorInputProps) {
+  const {
+    ref,
+    disabled,
+    readOnly,
+    value,
+    invalid,
+    allowClear,
+    showPicker,
+    defaultColor = "",
+    onBlur,
+    onFocus,
+    onChange,
+  } = props;
+  const { currentValue, updateValue } = useControlledValue(value, defaultColor);
 
   const handleChange = useCallback(
     (e?: string) => {
-      setActualValue(e ?? defaultColor);
-      onChange != null && startTransition(() => onChange(e));
+      const value = e ?? defaultColor;
+      updateValue(value);
+      if (onChange) startTransition(() => onChange(value ?? null));
     },
-    [onChange],
+    [defaultColor, updateValue, 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",
+    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={allowClear && currentValue !== defaultColor && !disabled && !readOnly}
+      onClear={handleChange}
+      {...getWrapperProps(props)}
     >
-      {decorateStart && (
+      <button
+        data-ref="button"
+        type="button"
+        className="flex-1 flex items-center"
+        ref={mergeRefs(ref, (el: HTMLButtonElement) => refs.setReference(el))}
+        {...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",
-          )}
+          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"
+          aria-invalid={invalid}
+          style={{
+            backgroundColor: currentValue ?? "",
+            opacity: disabled ? 0.65 : 1,
+            pointerEvents: disabled ? "none" : undefined,
+          }}
         >
-          {decorateStart}
+          {!currentValue && <Icon size="md" className="text-muted" icon="icon-[mdi--palette]" />}
         </div>
-      )}
-      <Dropdown showArrow disabled={disabled}>
-        <button data-ref="button" className="flex-1 flex items-center">
+      </button>
+      {isOpen && (
+        <FloatingFocusManager context={context} closeOnFocusOut>
           <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"
+            ref={(el) => refs.setFloating(el)}
             style={{
-              backgroundColor: actualValue,
-              opacity: disabled ? 0.65 : 1,
-              pointerEvents: disabled ? "none" : undefined,
+              zIndex: "var(--z-popover)",
+              ...floatingStyles,
             }}
-            onClick={(e) =>
-              (e.currentTarget.nextElementSibling as HTMLElement)?.focus()
-            }
+            data-ref="dropdownBody"
+            {...getFloatingProps()}
           >
-            {!actualValue && (
-              <Icon
-                size="md"
-                className="text-muted"
-                icon={CoreIcons.colorSwatch}
-              />
-            )}
+            <ColorPicker {...props} onChange={handleChange} defaultColor={defaultColor} value={currentValue} />
+            <FloatingArrow
+              ref={arrowRef}
+              context={context}
+              strokeWidth={0.5}
+              className="stroke-muted"
+              style={{
+                fill: currentValue || "var(--bg-color-default)",
+              }}
+            />
           </div>
-        </button>
-        <ColorPicker
-          {...rest}
-          onChange={handleChange}
-          defaultColor={defaultColor}
-          value={actualValue}
-        />
-      </Dropdown>
-      {!disabled && showPicker && (
-        <Icon
-          icon={CoreIcons.colorPicker}
-          onClick={() =>
-            (window as AnyObject).EyeDropper &&
-            new (window as AnyObject).EyeDropper()
-              .open()
-              .then((resp: AnyObject) => handleChange(resp.sRGBHex))
-          }
-        />
+        </FloatingFocusManager>
       )}
-      {decorateEnd && (
-        <div
-          className={classNames(
-            "text-muted leading-none flex-content",
-            isString(decorateEnd) && "px-2",
-          )}
+      {!disabled && showPicker && (
+        <button
+          type="button"
+          className="size-fit leading-0 cursor-pointer"
+          onClick={() => {
+            const ED = (window as Window).EyeDropper;
+            if (ED) {
+              void new ED().open().then((resp) => handleChange(resp.sRGBHex));
+            }
+          }}
         >
-          {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",
-          )}
-        />
+          <Icon className="flex-content p-1" icon="icon-[mdi--eyedropper]" />
+        </button>
       )}
-    </div>
+    </InputWrapper>
   );
-};
+}