@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/file-upload/file-upload-controls.tsx

@@ -0,0 +1,280 @@
+import { props } from "@stylexjs/stylex";
+import type { DragEvent, MouseEvent, RefCallback } from "react";
+import { useCallback, useRef, useState } from "react";
+import { assignRef } from "../../ref-utils";
+import { shape } from "../../styles/shape.stylex";
+import { Button } from "../button/button";
+import { fileUploadStyles } from "./file-upload.styles";
+import type {
+	FileUploadDropzoneProps,
+	FileUploadInputProps,
+	FileUploadTriggerProps,
+} from "./file-upload.types";
+import { stripForbidden, useFileUploadContext } from "./file-upload-context";
+
+const FORBIDDEN_INPUT_KEYS = [
+	"accept",
+	"defaultValue",
+	"disabled",
+	"multiple",
+	"name",
+	"onChange",
+	"required",
+	"type",
+	"value",
+] as const;
+
+// null when the drag carries no files, such as selected text.
+function draggedFileCount(transfer: DataTransfer | null): number | null {
+	const types = Array.from(transfer?.types ?? []);
+	if (types.length > 0 && !types.includes("Files")) {
+		return null;
+	}
+	return transfer?.items?.length ?? 0;
+}
+
+const dropzoneEdge = (
+	<svg
+		aria-hidden="true"
+		focusable="false"
+		{...props(fileUploadStyles.dropzoneEdge)}
+	>
+		<rect
+			// StyleX has no SVG geometry, so the half-pixel inset lives here:
+			// it keeps the 1px line inside the edge, with the corner radius.
+			style={{
+				height: "calc(100% - 1px)",
+				rx: `calc(${shape.controlRadiusLarge} - 0.5px)`,
+				width: "calc(100% - 1px)",
+				x: "0.5px",
+				y: "0.5px",
+			}}
+		/>
+	</svg>
+);
+
+export function FileUploadDropzone({
+	children,
+	disabled = false,
+	onDragEnter,
+	onDragLeave,
+	onDragOver,
+	onDrop,
+	ref: forwardedRef,
+	...rest
+}: FileUploadDropzoneProps) {
+	const context = useFileUploadContext();
+	// null while nothing is dragged over; 0 when the browser hides the count.
+	const [dragCount, setDragCount] = useState<number | null>(null);
+	const isDragging = dragCount !== null;
+	const depthRef = useRef(0);
+	const isDisabled = context.disabled || disabled;
+
+	const mergedRef: RefCallback<HTMLDivElement> = useCallback(
+		(node) => {
+			if (node && isDisabled) {
+				depthRef.current = 0;
+				setDragCount(null);
+			}
+			const consumerCleanup = assignRef(forwardedRef, node);
+			return () => {
+				depthRef.current = 0;
+				consumerCleanup?.();
+			};
+		},
+		[forwardedRef, isDisabled]
+	);
+
+	const handleDragEnter = useCallback(
+		(event: DragEvent<HTMLDivElement>) => {
+			if (isDisabled) {
+				return;
+			}
+			onDragEnter?.(event);
+			if (event.defaultPrevented) {
+				return;
+			}
+			const count = draggedFileCount(event.dataTransfer);
+			if (count === null) {
+				return;
+			}
+			event.preventDefault();
+			depthRef.current += 1;
+			if (depthRef.current === 1) {
+				setDragCount(count);
+			}
+		},
+		[isDisabled, onDragEnter]
+	);
+
+	const handleDragLeave = useCallback(
+		(event: DragEvent<HTMLDivElement>) => {
+			if (isDisabled) {
+				depthRef.current = 0;
+				setDragCount(null);
+				return;
+			}
+			onDragLeave?.(event);
+			depthRef.current = Math.max(0, depthRef.current - 1);
+			if (depthRef.current === 0) {
+				setDragCount(null);
+			}
+		},
+		[isDisabled, onDragLeave]
+	);
+
+	const handleDragOver = useCallback(
+		(event: DragEvent<HTMLDivElement>) => {
+			if (isDisabled) {
+				event.preventDefault();
+				return;
+			}
+			onDragOver?.(event);
+			if (event.defaultPrevented) {
+				return;
+			}
+			event.preventDefault();
+			if (event.dataTransfer) {
+				event.dataTransfer.dropEffect = "copy";
+			}
+		},
+		[isDisabled, onDragOver]
+	);
+
+	const handleDrop = useCallback(
+		(event: DragEvent<HTMLDivElement>) => {
+			if (isDisabled) {
+				event.preventDefault();
+				depthRef.current = 0;
+				setDragCount(null);
+				return;
+			}
+			onDrop?.(event);
+			depthRef.current = 0;
+			setDragCount(null);
+			if (event.defaultPrevented) {
+				return;
+			}
+			event.preventDefault();
+			const files = event.dataTransfer?.files;
+			if (files && files.length > 0) {
+				context.handleDropFiles(Array.from(files));
+			}
+		},
+		[context, isDisabled, onDrop]
+	);
+
+	const cleanProps = stripForbidden(rest);
+	const content =
+		typeof children === "function"
+			? children({ dragCount: dragCount ?? 0, isDragging })
+			: children;
+
+	return (
+		// biome-ignore lint/a11y/noNoninteractiveElementInteractions: Native HTML drag and drop target container
+		// biome-ignore lint/a11y/noStaticElementInteractions: Dropzone receives drag events on host div
+		<div
+			{...cleanProps}
+			data-disabled={isDisabled ? "" : undefined}
+			data-dragging={!isDisabled && isDragging ? "" : undefined}
+			data-slot="file-upload-dropzone"
+			onDragEnter={handleDragEnter}
+			onDragLeave={handleDragLeave}
+			onDragOver={handleDragOver}
+			onDrop={handleDrop}
+			ref={mergedRef}
+			{...props(fileUploadStyles.dropzone)}
+		>
+			{content}
+			{dropzoneEdge}
+		</div>
+	);
+}
+
+export function FileUploadTrigger({
+	children,
+	disabled = false,
+	onClick,
+	ref: forwardedRef,
+	...rest
+}: FileUploadTriggerProps) {
+	const context = useFileUploadContext();
+	const { triggerRef } = context;
+	const isDisabled = context.disabled || disabled;
+
+	const handleClick = useCallback(
+		(event: MouseEvent<HTMLButtonElement>) => {
+			onClick?.(event);
+			if (!(event.defaultPrevented || isDisabled)) {
+				context.openPicker();
+			}
+		},
+		[context, isDisabled, onClick]
+	);
+
+	const mergedRef: RefCallback<HTMLButtonElement> = useCallback(
+		(node) => {
+			const internalCleanup = assignRef(triggerRef, node);
+			const consumerCleanup = assignRef(forwardedRef, node);
+			return () => {
+				internalCleanup?.();
+				consumerCleanup?.();
+			};
+		},
+		[triggerRef, forwardedRef]
+	);
+
+	const cleanProps = stripForbidden(rest, ["type"]);
+
+	return (
+		<Button
+			{...cleanProps}
+			data-slot="file-upload-trigger"
+			disabled={isDisabled}
+			onClick={handleClick}
+			ref={mergedRef}
+			size="sm"
+			type="button"
+			variant="outline"
+		>
+			{children}
+		</Button>
+	);
+}
+
+export function FileUploadInput({
+	ref: forwardedRef,
+	...rest
+}: FileUploadInputProps) {
+	const context = useFileUploadContext();
+	const { setInputCallbackRef } = context;
+	const cleanProps = stripForbidden(rest, FORBIDDEN_INPUT_KEYS);
+
+	const mergedRef: RefCallback<HTMLInputElement> = useCallback(
+		(node) => {
+			const internalCleanup = setInputCallbackRef(node);
+			const consumerCleanup = assignRef(forwardedRef, node);
+			return () => {
+				internalCleanup?.();
+				consumerCleanup?.();
+			};
+		},
+		[setInputCallbackRef, forwardedRef]
+	);
+
+	return (
+		<input
+			{...cleanProps}
+			accept={context.accept}
+			data-slot="file-upload-input"
+			disabled={context.disabled}
+			multiple={context.maxFiles > 1}
+			name={context.name}
+			onChange={context.handleInputChange}
+			ref={mergedRef}
+			tabIndex={-1}
+			type="file"
+			{...props(fileUploadStyles.hiddenInput)}
+		/>
+	);
+}

package/src/components/file-upload/file-upload-item-preview.tsx

@@ -0,0 +1,56 @@
+import { props } from "@stylexjs/stylex";
+import type { ReactNode } from "react";
+import { useCallback, useState } from "react";
+import { fileUploadStyles } from "./file-upload.styles";
+import { useFileUploadItemContext } from "./file-upload-context";
+
+export interface FileUploadItemPreviewProps {
+	children: ReactNode;
+}
+
+export function FileUploadItemPreview({
+	children,
+}: FileUploadItemPreviewProps) {
+	const { file, layout } = useFileUploadItemContext();
+	const [failedFile, setFailedFile] = useState<File | null>(null);
+	const image = file.type.startsWith("image/") && failedFile !== file;
+	const fail = useCallback(() => setFailedFile(file), [file]);
+	const previewRef = useCallback(
+		(node: HTMLImageElement | null) => {
+			if (!node) {
+				return;
+			}
+			const url = URL.createObjectURL(file);
+			node.src = url;
+			return () => URL.revokeObjectURL(url);
+		},
+		[file]
+	);
+	return (
+		<div
+			data-slot="file-upload-item-preview"
+			title={file.name}
+			{...props(
+				fileUploadStyles.preview,
+				image && fileUploadStyles.previewFull,
+				layout === "row" && fileUploadStyles.previewRow,
+				layout === "upload" && fileUploadStyles.previewUpload
+			)}
+		>
+			{image ? (
+				// biome-ignore lint/performance/noImgElement: Local blob previews cannot use a framework image optimizer.
+				// biome-ignore lint/a11y/noNoninteractiveElementInteractions: Decode errors switch to the document fallback; this is not an input event.
+				<img
+					alt={file.name}
+					height={72}
+					onError={fail}
+					ref={previewRef}
+					width={72}
+					{...props(fileUploadStyles.previewImage)}
+				/>
+			) : (
+				children
+			)}
+		</div>
+	);
+}

package/src/components/file-upload/file-upload-items.tsx

@@ -0,0 +1,339 @@
+import { props } from "@stylexjs/stylex";
+import type { MouseEvent, ReactNode, RefCallback } from "react";
+import { useCallback, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { IconX } from "../../icons";
+import { assignRef } from "../../ref-utils";
+import { Progress } from "../progress/progress";
+import { fileUploadStyles } from "./file-upload.styles";
+import type {
+	FileUploadItemNameProps,
+	FileUploadItemProgressProps,
+	FileUploadItemProps,
+	FileUploadItemRemoveProps,
+	FileUploadItemSizeProps,
+	FileUploadItemStatusProps,
+	FileUploadListProps,
+} from "./file-upload.types";
+import {
+	FileUploadItemContext,
+	stripForbidden,
+	useFileUploadContext,
+	useFileUploadItemContext,
+} from "./file-upload-context";
+import { collapseItem, growItem, settleList } from "./file-upload-motion";
+import { formatFileSize } from "./file-upload-validation";
+
+export function FileUploadList({
+	children,
+	layout = "rows",
+	ref: forwardedRef,
+	...rest
+}: FileUploadListProps) {
+	const context = useFileUploadContext();
+	const cleanProps = stripForbidden(rest);
+	// Children attach before the list, so only later items animate in.
+	const mergedRef: RefCallback<HTMLUListElement> = useCallback(
+		(node) => {
+			settleList(node);
+			return assignRef(forwardedRef, node);
+		},
+		[forwardedRef]
+	);
+
+	return (
+		<ul
+			{...cleanProps}
+			data-slot="file-upload-list"
+			ref={mergedRef}
+			{...props(
+				fileUploadStyles.list,
+				layout === "tiles" ? fileUploadStyles.tiles : fileUploadStyles.rows
+			)}
+		>
+			{typeof children === "function"
+				? context.files.map((file, index) => children(file, index))
+				: (children ?? null)}
+		</ul>
+	);
+}
+
+export function FileUploadItem({
+	children,
+	file,
+	index,
+	layout = "row",
+	ref: forwardedRef,
+	...rest
+}: FileUploadItemProps) {
+	const context = useFileUploadContext();
+	const cleanProps = stripForbidden(rest);
+	const mergedRef: RefCallback<HTMLLIElement> = useCallback(
+		(node) => {
+			growItem(node);
+			return assignRef(forwardedRef, node);
+		},
+		[forwardedRef]
+	);
+
+	return (
+		<FileUploadItemContext.Provider value={{ file, index, layout }}>
+			<li
+				{...cleanProps}
+				data-disabled={context.disabled ? "" : undefined}
+				data-layout={layout}
+				data-slot="file-upload-item"
+				ref={mergedRef}
+				{...props(
+					fileUploadStyles.item,
+					layout === "upload" && fileUploadStyles.upload,
+					layout === "tile" ? fileUploadStyles.tile : fileUploadStyles.rowItem
+				)}
+			>
+				<div
+					data-slot="file-upload-item-content"
+					{...props(
+						fileUploadStyles.itemContent,
+						layout === "upload" && fileUploadStyles.uploadContent,
+						layout === "tile" && fileUploadStyles.tileContent
+					)}
+				>
+					{children}
+				</div>
+			</li>
+		</FileUploadItemContext.Provider>
+	);
+}
+
+export function FileUploadItemName({
+	children,
+	ref: forwardedRef,
+	...rest
+}: FileUploadItemNameProps) {
+	const itemContext = useFileUploadItemContext();
+	const cleanProps = stripForbidden(rest);
+
+	return (
+		<span
+			{...cleanProps}
+			data-slot="file-upload-item-name"
+			ref={forwardedRef}
+			title={cleanProps.title ?? itemContext.file.name}
+			{...props(
+				fileUploadStyles.name,
+				itemContext.layout === "upload" && fileUploadStyles.uploadName,
+				itemContext.layout === "tile" && fileUploadStyles.tileName
+			)}
+		>
+			{children ?? itemContext.file.name}
+		</span>
+	);
+}
+
+export function FileUploadItemSize({
+	children,
+	ref: forwardedRef,
+	...rest
+}: FileUploadItemSizeProps) {
+	const itemContext = useFileUploadItemContext();
+	const cleanProps = stripForbidden(rest);
+
+	return (
+		<span
+			{...cleanProps}
+			data-slot="file-upload-item-size"
+			ref={forwardedRef}
+			{...props(fileUploadStyles.size)}
+		>
+			{children ?? formatFileSize(itemContext.file.size)}
+		</span>
+	);
+}
+
+// The check strokes on when an upload finishes, like the Checkbox mark. An
+// item that is already done when it renders shows the check drawn.
+function StatusCheck({
+	status,
+}: {
+	status: FileUploadItemStatusProps["status"];
+}) {
+	const [shown, setShown] = useState(status);
+	const [drawing, setDrawing] = useState(false);
+	const settle = useCallback(() => setDrawing(false), []);
+	if (status !== shown) {
+		setShown(status);
+		setDrawing(status === "success");
+	}
+	if (status !== "success") {
+		return null;
+	}
+	return (
+		<svg
+			aria-hidden="true"
+			fill="none"
+			focusable="false"
+			viewBox="0 0 16 16"
+			{...props(fileUploadStyles.statusCheck)}
+		>
+			<path
+				d="M3.5 8.5l3 3l6 -6.5"
+				onAnimationEnd={settle}
+				pathLength={1}
+				stroke="currentColor"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				{...props(
+					fileUploadStyles.statusCheckMark,
+					drawing && fileUploadStyles.statusCheckDraw
+				)}
+			/>
+		</svg>
+	);
+}
+
+export function FileUploadItemStatus({
+	children,
+	ref: forwardedRef,
+	status,
+	...rest
+}: FileUploadItemStatusProps) {
+	const cleanProps = stripForbidden(rest);
+
+	return (
+		<span
+			{...cleanProps}
+			aria-atomic={cleanProps["aria-atomic"] ?? true}
+			data-slot="file-upload-item-status"
+			data-status={status}
+			ref={forwardedRef}
+			role={cleanProps.role ?? "status"}
+			{...props(fileUploadStyles.status)}
+		>
+			<StatusCheck status={status} />
+			{children ?? status}
+		</span>
+	);
+}
+
+export function FileUploadItemProgress({
+	"aria-label": ariaLabel,
+	"aria-labelledby": ariaLabelledBy,
+	ref: forwardedRef,
+	value,
+	...rest
+}: FileUploadItemProgressProps) {
+	const itemContext = useFileUploadItemContext();
+	const cleanProps = stripForbidden(rest);
+	const progressLabel =
+		ariaLabel ??
+		(ariaLabelledBy ? undefined : `${itemContext.file.name} progress`);
+
+	return (
+		<div
+			{...cleanProps}
+			data-slot="file-upload-item-progress"
+			ref={forwardedRef}
+			{...props(fileUploadStyles.progress)}
+		>
+			<Progress
+				aria-label={progressLabel}
+				aria-labelledby={ariaLabelledBy}
+				value={value ?? null}
+			/>
+		</div>
+	);
+}
+
+const defaultRemoveIcon = (
+	<IconX aria-hidden="true" focusable="false" size="1em" />
+);
+
+function RemoveButtonContent({
+	children,
+	fileName,
+	hasName,
+}: {
+	children: ReactNode;
+	fileName: string;
+	hasName: boolean;
+}) {
+	const needsFallback = children !== null && children !== undefined && !hasName;
+	return (
+		<>
+			{children ?? defaultRemoveIcon}
+			{needsFallback ? (
+				<span {...props(fileUploadStyles.visuallyHidden)}>
+					Remove {fileName}
+				</span>
+			) : null}
+		</>
+	);
+}
+
+export function FileUploadItemRemove({
+	"aria-label": ariaLabel,
+	children,
+	disabled = false,
+	onClick,
+	ref: forwardedRef,
+	...rest
+}: FileUploadItemRemoveProps) {
+	const context = useFileUploadContext();
+	const itemContext = useFileUploadItemContext();
+	const isDisabled = context.disabled || disabled;
+	// The row collapses before removal, so read the newest file list then.
+	const removeRef = useRef<() => void>(() => undefined);
+	const mergedRef: RefCallback<HTMLButtonElement> = useCallback(
+		(node) => {
+			removeRef.current = () =>
+				context.removeFile(itemContext.index, itemContext.file);
+			return assignRef(forwardedRef, node);
+		},
+		[context, forwardedRef, itemContext.file, itemContext.index]
+	);
+
+	const handleClick = useCallback(
+		(event: MouseEvent<HTMLButtonElement>) => {
+			onClick?.(event);
+			if (!(event.defaultPrevented || isDisabled)) {
+				collapseItem(
+					event.currentTarget.closest<HTMLElement>(
+						"[data-slot='file-upload-item']"
+					),
+					() => flushSync(() => removeRef.current())
+				);
+			}
+		},
+		[isDisabled, onClick]
+	);
+
+	const cleanProps = stripForbidden(rest, ["type"]);
+	const hasCustomName = ariaLabel || cleanProps["aria-labelledby"];
+	const defaultAriaLabel =
+		(children === null || children === undefined) && !hasCustomName
+			? `Remove ${itemContext.file.name}`
+			: undefined;
+
+	return (
+		<button
+			{...cleanProps}
+			aria-label={ariaLabel ?? defaultAriaLabel}
+			data-slot="file-upload-item-remove"
+			disabled={isDisabled}
+			onClick={handleClick}
+			ref={mergedRef}
+			type="button"
+			{...props(
+				fileUploadStyles.remove,
+				itemContext.layout === "tile" && fileUploadStyles.tileRemove
+			)}
+		>
+			<RemoveButtonContent
+				fileName={itemContext.file.name}
+				hasName={Boolean(hasCustomName)}
+			>
+				{children}
+			</RemoveButtonContent>
+		</button>
+	);
+}