@react-fabric/form 1.0.0-beta.5 → 1.0.0-beta.52

package/src/input/AvatarInput.tsx

@@ -37,14 +37,17 @@ export interface Props extends RefProp {
    */
   value?: string;
   /**
-   * avatar stream src
+   * avatar name
    */
-  src?: string;
+  avatarName?: string;
   size?: string | number;
   /**
    * upload handler to store file in temp storage
    */
   uploadHandler: UploadHandler;
+  /**
+   * file stream path
+   */
   fileUrl?: (path: string) => string;
   /**
    * change handler
@@ -56,16 +59,25 @@ 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,
+  value,
   fileUrl,
   uploadHandler,
   ...rest
 }: Props) => {
   const { files, list, upload, remove } = useFileUploader(
     async (data, config) => await uploadHandler?.(data, config),
-    rest.value,
+    value,
     false,
   );
 
@@ -92,14 +104,14 @@ export const AvatarInput = ({
   }, [files, list]);
 
   useEffect(() => {
-    src && setBase64(fileUrl?.(src) ?? src);
-  }, [src]);
+    value && setBase64(fileUrl?.(value) ?? value);
+  }, [value]);
 
   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">
+        <Avatar name={avatarName ?? "temp"} size={size} avatar={base64} />
+        <div className="absolute inset-x-0 bottom-0 cursor-pointer bg-black/20 hover:bg-black/50 text-white text-xs text-center py-1">
           <span>Edit</span>
           <input
             type="file"

package/src/input/Checkbox.tsx

@@ -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) => {
@@ -150,7 +160,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 +168,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 { CoreIcons, 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,
@@ -69,59 +97,107 @@ export const ColorInput = ({
   const handleChange = useCallback(
     (e?: string) => {
       setActualValue(e ?? defaultColor);
-      onChange != null && startTransition(() => onChange(e));
+      onChange != null && startTransition(() => onChange(e ?? null));
     },
     [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={actualValue !== defaultColor && !disabled && !readOnly}
+      onClear={handleChange}
+      invalid={invalid}
+      readOnly={readOnly}
+      disabled={disabled}
+      required={required}
+      error={error}
+      {...rest}
     >
-      {decorateStart && (
+      <button
+        data-ref="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={CoreIcons.colorSwatch}
+            />
           )}
+        </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}
@@ -133,25 +209,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(
   ({
@@ -130,17 +139,14 @@ export const ColorPicker: FC<ColorProps> = memo(
     return (
       <SketchPicker
         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)",
               },
@@ -158,36 +164,6 @@ export const ColorPicker: FC<ColorProps> = memo(
                 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)",
-                },
-              },
               checkboard: {
                 white: "transparent",
                 black: "red",