@refraktor/core 0.0.3 → 0.0.4

package/src/components/drawer/use-drawer.ts

@@ -1,5 +1,12 @@
 import { useUncontrolled } from "@refraktor/utils";
-import { useCallback, useEffect } from "react";
+import {
+    FloatingContext,
+    useDismiss,
+    useFloating,
+    useInteractions,
+    useRole
+} from "@floating-ui/react";
+import { useCallback } from "react";
 
 interface UseDrawerProps {
     opened?: boolean;
@@ -7,7 +14,6 @@ interface UseDrawerProps {
     onOpenedChange?: (opened: boolean) => void;
     closeOnClickOutside?: boolean;
     closeOnEscape?: boolean;
-    contentRef: React.MutableRefObject<HTMLElement | null>;
 }
 
 export interface UseDrawerReturn {
@@ -15,6 +21,15 @@ export interface UseDrawerReturn {
     open: () => void;
     close: () => void;
     toggle: () => void;
+    context: FloatingContext;
+    refs: {
+        setReference: (node: HTMLElement | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+        floating: React.MutableRefObject<HTMLElement | null>;
+    };
+    getFloatingProps: (
+        userProps?: React.HTMLAttributes<HTMLElement>
+    ) => Record<string, unknown>;
 }
 
 export function useDrawer(options: UseDrawerProps): UseDrawerReturn {
@@ -23,8 +38,7 @@ export function useDrawer(options: UseDrawerProps): UseDrawerReturn {
         defaultOpened,
         onOpenedChange,
         closeOnClickOutside = true,
-        closeOnEscape = true,
-        contentRef
+        closeOnEscape = true
     } = options;
 
     const [isOpen, setIsOpen] = useUncontrolled({
@@ -34,6 +48,23 @@ export function useDrawer(options: UseDrawerProps): UseDrawerReturn {
         onChange: onOpenedChange
     });
 
+    const floating = useFloating({
+        open: isOpen,
+        onOpenChange: setIsOpen
+    });
+
+    const dismiss = useDismiss(floating.context, {
+        outsidePress: closeOnClickOutside,
+        outsidePressEvent: "mousedown",
+        escapeKey: closeOnEscape
+    });
+
+    const role = useRole(floating.context, {
+        role: "dialog"
+    });
+
+    const { getFloatingProps } = useInteractions([dismiss, role]);
+
     const open = useCallback(() => {
         setIsOpen(true);
     }, [setIsOpen]);
@@ -46,56 +77,18 @@ export function useDrawer(options: UseDrawerProps): UseDrawerReturn {
         setIsOpen(!isOpen);
     }, [isOpen, setIsOpen]);
 
-    useEffect(() => {
-        if (!isOpen || !closeOnEscape) {
-            return;
-        }
-
-        const handleKeyDown = (event: KeyboardEvent) => {
-            if (event.key === "Escape") {
-                setIsOpen(false);
-            }
-        };
-
-        document.addEventListener("keydown", handleKeyDown);
-
-        return () => {
-            document.removeEventListener("keydown", handleKeyDown);
-        };
-    }, [closeOnEscape, isOpen, setIsOpen]);
-
-    useEffect(() => {
-        if (!isOpen || !closeOnClickOutside) {
-            return;
-        }
-
-        const handlePointerDown = (event: MouseEvent | TouchEvent) => {
-            const target = event.target;
-
-            if (!(target instanceof Node)) {
-                return;
-            }
-
-            if (contentRef.current?.contains(target)) {
-                return;
-            }
-
-            setIsOpen(false);
-        };
-
-        document.addEventListener("mousedown", handlePointerDown);
-        document.addEventListener("touchstart", handlePointerDown);
-
-        return () => {
-            document.removeEventListener("mousedown", handlePointerDown);
-            document.removeEventListener("touchstart", handlePointerDown);
-        };
-    }, [closeOnClickOutside, contentRef, isOpen, setIsOpen]);
-
     return {
         opened: isOpen,
         open,
         close,
-        toggle
+        toggle,
+        context: floating.context,
+        refs: {
+            setReference: floating.refs.setReference,
+            setFloating: floating.refs.setFloating,
+            floating: floating.refs
+                .floating as React.MutableRefObject<HTMLElement | null>
+        },
+        getFloatingProps
     };
 }

package/src/components/file-input/file-input.test.tsx

@@ -0,0 +1,134 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent } from "../../vitest";
+import FileInput from "./file-input";
+
+const createFile = (name: string, type: string, size: number) =>
+    new File([new Uint8Array(size)], name, { type });
+
+describe("@refraktor/core/FileInput", () => {
+    it("supports input wrapper props", async () => {
+        await render(
+            <FileInput
+                label="Documents"
+                description="Upload PDF files"
+                error="At least one file is required"
+            />
+        );
+
+        const input = screen.getByLabelText("Documents");
+
+        expect(input).toHaveAttribute("type", "file");
+        expect(input).toHaveAttribute("aria-invalid", "true");
+        expect(screen.getByText("Upload PDF files")).toBeInTheDocument();
+        expect(
+            screen.getByText("At least one file is required")
+        ).toBeInTheDocument();
+    });
+
+    it("handles single file selection", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+
+        await render(<FileInput label="Upload" onChange={onChange} />);
+
+        const input = screen.getByLabelText("Upload") as HTMLInputElement;
+        const file = new File(["hello"], "hello.txt", { type: "text/plain" });
+
+        await user.upload(input, file);
+
+        expect(onChange).toHaveBeenLastCalledWith([file]);
+        expect(screen.getByText("hello.txt")).toBeInTheDocument();
+    });
+
+    it("enforces max files in multiple mode", async () => {
+        const user = userEvent.setup({ applyAccept: false });
+        const onChange = vi.fn();
+        const onReject = vi.fn();
+
+        await render(
+            <FileInput
+                label="Attachments"
+                multiple
+                maxFiles={2}
+                onChange={onChange}
+                onReject={onReject}
+            />
+        );
+
+        const input = screen.getByLabelText("Attachments") as HTMLInputElement;
+        const first = createFile("first.txt", "text/plain", 2);
+        const second = createFile("second.txt", "text/plain", 3);
+        const third = createFile("third.txt", "text/plain", 4);
+
+        await user.upload(input, [first, second, third]);
+
+        expect(onChange).toHaveBeenLastCalledWith([first, second]);
+        expect(onReject).toHaveBeenCalledWith(
+            expect.arrayContaining([
+                expect.objectContaining({
+                    file: third,
+                    code: "too-many-files"
+                })
+            ])
+        );
+    });
+
+    it("rejects invalid type and invalid size files", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        const onReject = vi.fn();
+
+        await render(
+            <FileInput
+                label="Media"
+                multiple
+                accept="image/*,.pdf"
+                minSize={2}
+                maxSize={4}
+                onChange={onChange}
+                onReject={onReject}
+            />
+        );
+
+        const input = screen.getByLabelText("Media") as HTMLInputElement;
+        const valid = createFile("photo.png", "image/png", 3);
+        const invalidType = createFile("script.js", "application/javascript", 3);
+        const tooSmall = createFile("tiny.png", "image/png", 1);
+        const tooLarge = createFile("large.pdf", "application/pdf", 6);
+
+        await user.upload(input, [valid, invalidType, tooSmall, tooLarge]);
+
+        expect(onChange).toHaveBeenLastCalledWith([valid]);
+
+        const rejectionPayload =
+            onReject.mock.calls[onReject.mock.calls.length - 1]?.[0] ?? [];
+        const rejectionCodes = rejectionPayload.map(
+            (item: { code: string }) => item.code
+        );
+
+        expect(rejectionCodes).toEqual(
+            expect.arrayContaining([
+                "file-too-small",
+                "file-too-large"
+            ])
+        );
+    });
+
+    it("clears selected files", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+
+        await render(<FileInput label="Receipt" onChange={onChange} />);
+
+        const input = screen.getByLabelText("Receipt") as HTMLInputElement;
+        const file = createFile("receipt.pdf", "application/pdf", 3);
+
+        await user.upload(input, file);
+
+        const clearButton = screen.getByRole("button", { name: "Clear file" });
+        await user.click(clearButton);
+
+        expect(onChange).toHaveBeenLastCalledWith([]);
+        expect(screen.getByText("Select file")).toBeInTheDocument();
+    });
+});

package/src/components/file-input/file-input.tsx

@@ -0,0 +1,224 @@
+import { useId, useMergedRefs } from "@refraktor/utils";
+import { useMemo, useRef, useState } from "react";
+import { XIcon } from "../../icons";
+import { useTheme } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory,
+    useClassNames,
+    useProps
+} from "../../utils";
+import { getSize, getVariant } from "../input/input-field/input-field.styles";
+import { InputWrapper } from "../input/input-wrapper";
+import {
+    FileInputClassNames,
+    FileInputFactoryPayload,
+    FileInputProps
+} from "./file-input.types";
+import { formatFileSummary, validateFiles } from "./file-input.utils";
+
+const defaultProps = {
+    variant: "default",
+    size: "md",
+    radius: "default",
+    clearable: true
+} satisfies Partial<FileInputProps>;
+
+const FileInput = factory<FileInputFactoryPayload>((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const {
+        id,
+        label,
+        description,
+        error,
+        required,
+        withAsterisk,
+        variant,
+        size,
+        radius,
+        multiple,
+        placeholder,
+        clearable,
+        maxSize,
+        minSize,
+        maxFiles,
+        onChange,
+        onReject,
+        className,
+        classNames,
+        disabled,
+        accept,
+        ...props
+    } = useProps("FileInput", defaultProps, _props);
+
+    const classes = useClassNames<FileInputClassNames>("FileInput", classNames);
+    const _id = useId(id);
+
+    const localRef = useRef<HTMLInputElement>(null);
+    const mergedRef = useMergedRefs(ref, localRef);
+
+    const [files, setFiles] = useState<File[]>([]);
+
+    const hasWrapper = label || description || error;
+    const hasValue = files.length > 0;
+    const describedBy = error
+        ? `${_id}-error`
+        : description
+          ? `${_id}-description`
+          : undefined;
+
+    const summary = useMemo(() => formatFileSummary(files), [files]);
+    const resolvedPlaceholder = placeholder ?? (multiple ? "Select files" : "Select file");
+
+    const openPicker = () => {
+        if (disabled) {
+            return;
+        }
+
+        localRef.current?.click();
+    };
+
+    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const selectedFiles = Array.from(event.currentTarget.files ?? []);
+
+        if (selectedFiles.length === 0) {
+            return;
+        }
+
+        const { accepted, rejections } = validateFiles(selectedFiles, {
+            accept,
+            minSize,
+            maxSize,
+            maxFiles,
+            multiple
+        });
+
+        setFiles(accepted);
+        onChange?.(accepted);
+
+        if (rejections.length > 0) {
+            onReject?.(rejections);
+        }
+    };
+
+    const handleTriggerKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            openPicker();
+        }
+    };
+
+    const handleClear = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (disabled) {
+            return;
+        }
+
+        if (localRef.current) {
+            localRef.current.value = "";
+        }
+
+        setFiles([]);
+        onChange?.([]);
+    };
+
+    const field = (
+        <div className={cx("relative w-full", classes.root)}>
+            <input
+                {...props}
+                id={_id}
+                ref={mergedRef}
+                type="file"
+                accept={accept}
+                multiple={multiple}
+                disabled={disabled}
+                required={required}
+                aria-invalid={error ? true : undefined}
+                aria-describedby={describedBy}
+                className="pointer-events-none absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 opacity-0"
+                onClick={(event) => {
+                    event.currentTarget.value = "";
+                }}
+                onChange={handleInputChange}
+            />
+
+            <div
+                role="button"
+                tabIndex={disabled ? -1 : 0}
+                aria-disabled={disabled}
+                aria-invalid={error ? true : undefined}
+                aria-describedby={describedBy}
+                className={cx(
+                    "w-full flex items-center gap-2 transition-all",
+                    "focus-visible:border-[var(--refraktor-primary)]",
+                    "select-none",
+                    getSize(size),
+                    getVariant(variant),
+                    getRadius(radius),
+                    error && "border-[var(--refraktor-colors-red-6)]",
+                    disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+                    classes.trigger,
+                    className
+                )}
+                onClick={openPicker}
+                onKeyDown={handleTriggerKeyDown}
+            >
+                <span
+                    className={cx(
+                        "min-w-0 flex-1 truncate",
+                        classes.value,
+                        hasValue
+                            ? cx("text-[var(--refraktor-text)]", classes.files)
+                            : cx(
+                                  "text-[var(--refraktor-text-tertiary)]",
+                                  classes.placeholder
+                              )
+                    )}
+                >
+                    {hasValue ? summary : resolvedPlaceholder}
+                </span>
+
+                {clearable && hasValue && !disabled && (
+                    <button
+                        type="button"
+                        className={cx(
+                            "inline-flex h-4 w-4 items-center justify-center rounded-full border-0 bg-transparent p-0",
+                            "text-[var(--refraktor-text-secondary)] transition-colors hover:text-[var(--refraktor-text)]",
+                            classes.clear
+                        )}
+                        aria-label={files.length > 1 ? "Clear files" : "Clear file"}
+                        onClick={handleClear}
+                    >
+                        <XIcon size={12} />
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+
+    if (!hasWrapper) {
+        return field;
+    }
+
+    return (
+        <InputWrapper
+            label={label}
+            description={description}
+            error={error}
+            required={required}
+            withAsterisk={withAsterisk}
+            inputId={_id}
+        >
+            {field}
+        </InputWrapper>
+    );
+});
+
+FileInput.displayName = "@refraktor/core/FileInput";
+FileInput.configure = createComponentConfig<FileInputProps>();
+FileInput.classNames = createClassNamesConfig<FileInputClassNames>();
+
+export default FileInput;

package/src/components/file-input/file-input.types.ts

@@ -0,0 +1,78 @@
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload
+} from "../../utils";
+import type { InputProps } from "../input";
+
+export type FileInputRejectCode =
+    | "invalid-type"
+    | "file-too-large"
+    | "file-too-small"
+    | "too-many-files";
+
+export interface FileInputRejection {
+    /** Rejected file */
+    file: File;
+
+    /** Rejection reason code */
+    code: FileInputRejectCode;
+
+    /** Human-readable rejection reason */
+    message: string;
+}
+
+export type FileInputClassNames = {
+    root?: string;
+    trigger?: string;
+    value?: string;
+    placeholder?: string;
+    files?: string;
+    clear?: string;
+};
+
+export interface FileInputProps
+    extends Omit<
+        InputProps,
+        | "type"
+        | "value"
+        | "defaultValue"
+        | "onChange"
+        | "leftSection"
+        | "rightSection"
+    > {
+    /** Placeholder shown when no files are selected */
+    placeholder?: string;
+
+    /** Whether to show clear button when value exists @default `true` */
+    clearable?: boolean;
+
+    /** Maximum allowed file size in bytes */
+    maxSize?: number;
+
+    /** Minimum allowed file size in bytes */
+    minSize?: number;
+
+    /** Maximum allowed number of files */
+    maxFiles?: number;
+
+    /** Callback called with accepted files */
+    onChange?: (files: File[]) => void;
+
+    /** Callback called with rejected files */
+    onReject?: (rejections: FileInputRejection[]) => void;
+
+    /** Used for styling different parts of the component */
+    classNames?: FileInputClassNames;
+}
+
+export interface FileInputFactoryPayload extends FactoryPayload {
+    props: FileInputProps;
+    ref: HTMLInputElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<FileInputProps>>;
+        classNames: ReturnType<
+            typeof createClassNamesConfig<FileInputClassNames>
+        >;
+    };
+}

package/src/components/file-input/file-input.utils.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+import { matchesAccept, validateFiles } from "./file-input.utils";
+
+const createFile = (name: string, type: string, size: number) =>
+    new File([new Uint8Array(size)], name, { type });
+
+describe("@refraktor/core/FileInput utils", () => {
+    it("matches files against accept rules", () => {
+        const image = createFile("avatar.png", "image/png", 3);
+        const pdf = createFile("sheet.pdf", "application/pdf", 3);
+
+        expect(matchesAccept(image, "image/*")).toBe(true);
+        expect(matchesAccept(pdf, "image/*")).toBe(false);
+        expect(matchesAccept(pdf, ".pdf")).toBe(true);
+    });
+
+    it("rejects invalid file types", () => {
+        const image = createFile("avatar.png", "image/png", 3);
+        const script = createFile("script.js", "application/javascript", 3);
+
+        const result = validateFiles([image, script], {
+            multiple: true,
+            accept: "image/*"
+        });
+
+        expect(result.accepted).toEqual([image]);
+        expect(result.rejections).toEqual(
+            expect.arrayContaining([
+                expect.objectContaining({
+                    file: script,
+                    code: "invalid-type"
+                })
+            ])
+        );
+    });
+});