@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/inputs/FileInput.js

@@ -0,0 +1,476 @@
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import { formatBytes } from "../utils/format.js";
+import { useDevWarning } from "./internal/devWarn.js";
+import { useFieldWiring } from "./internal/fieldWiring.js";
+import Field, { FieldSize } from "./Field.js";
+import { rootStyle, useOwnField } from "./internal/ownField.js";
+/* empty css                    */
+import { styled } from "@linaria/react";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { FileIcon, UploadSimpleIcon, XIcon } from "@phosphor-icons/react";
+//#region src/inputs/FileInput.tsx
+/**
+* The form control for choosing local files to hand to the app: a CSV to import, documents for a
+* knowledge source, a service-account key. A drop zone accepts files dragged onto it and a
+* "Choose files" button opens the system picker; under it, the chosen files are listed with their
+* name, size and a remove button. The value is the list of `File` objects, with `value` /
+* `defaultValue` / `onChange`. `accept` filters the picker and drops alike; files it did not take
+* (wrong type, extras in single mode, folders) go to `onReject`. `renderFileActions` replaces a
+* row's remove button with the app's content, such as upload progress.
+*
+* Built on native drag-and-drop (no `react-dropzone`). It never uploads, reads or validates files:
+* uploading, size limits and messages are the app's. A standalone FileInput with `label` or
+* `error` renders a `Field` around itself. No 1.x DLS equivalent (the GX app's `react-dropzone`
+* dropzone).
+*
+* SSR: ids come from `useId`; drag state lives in event handlers; nothing touches `window`,
+* `document` or `DataTransfer` at module scope or during render.
+*/
+/** Canonical rungs; FileInput exposes three. Sets the button, the file rows, and the zone's padding and text. */
+var FileInputSize = /* @__PURE__ */ function(FileInputSize) {
+	/** 24px button and rows, body_sm text, 16px zone padding. */
+	FileInputSize["SMALL"] = "SMALL";
+	/** 32px button and rows, body_md text, 24px zone padding. The default. */
+	FileInputSize["MEDIUM"] = "MEDIUM";
+	/** 36px button and rows, body_lg text, 32px zone padding. */
+	FileInputSize["LARGE"] = "LARGE";
+	return FileInputSize;
+}({});
+/** Resting fill of the drop zone (Constitution V-A surface set; the 1.x `InputVariant` members). */
+var FileInputVariant = /* @__PURE__ */ function(FileInputVariant) {
+	/** `background.base` fill. */
+	FileInputVariant["BASE"] = "BASE";
+	/** `background.primary` fill. The default. */
+	FileInputVariant["PRIMARY"] = "PRIMARY";
+	/** `background.secondary` fill. */
+	FileInputVariant["SECONDARY"] = "SECONDARY";
+	/** `background.tertiary` fill. */
+	FileInputVariant["TERTIARY"] = "TERTIARY";
+	return FileInputVariant;
+}({});
+/** The control's width without `fillWidth` (the SelectInput panel maximum). */
+/** The group: the hidden native input, the zone, the file list and the live region. */
+var Group = /*#__PURE__*/ styled("div")({
+	name: "Group",
+	class: "gx-FileInput-Group-g1ytda4s",
+	propsAsIs: false
+});
+/** The native picker: never seen, focused or announced; the "Choose files" button clicks it. */
+var NativeInput = /*#__PURE__*/ styled("input")({
+	name: "NativeInput",
+	class: "gx-FileInput-NativeInput-n1u9x4rm",
+	propsAsIs: false
+});
+/** The drop zone: a dashed hairline around the icon, the text and the button. Not focusable. */
+var Zone = /*#__PURE__*/ styled("div")({
+	name: "Zone",
+	class: "gx-FileInput-Zone-z12oqump",
+	propsAsIs: false
+});
+/** The chosen files, in a hairline box. `role="list"` keeps list semantics without bullets. */
+var FileList = /*#__PURE__*/ styled("ul")({
+	name: "FileList",
+	class: "gx-FileInput-FileList-fdf24zr",
+	propsAsIs: false
+});
+/**
+* One file: icon, name, size and actions, at the rung's control height. The hairline between rows
+* is drawn by `::before` over the row's top edge, so it takes no height from the row and the icon
+* and buttons stay centered on whole pixels.
+*/
+var FileRow = /*#__PURE__*/ styled("li")({
+	name: "FileRow",
+	class: "gx-FileInput-FileRow-f19fvk9w",
+	propsAsIs: false
+});
+/** The file name's slot: it takes the rest of the row and truncates. */
+var FileName = /*#__PURE__*/ styled("span")({
+	name: "FileName",
+	class: "gx-FileInput-FileName-fufhquj",
+	propsAsIs: false
+});
+/** The size and the actions never shrink. */
+var NoShrink = /*#__PURE__*/ styled("span")({
+	name: "NoShrink",
+	class: "gx-FileInput-NoShrink-nepfpz5",
+	propsAsIs: false
+});
+/** The polite live region for added, removed and rejected files (`VisuallyHidden` takes no `role`). */
+var StatusRegion = /*#__PURE__*/ styled("span")({
+	name: "StatusRegion",
+	class: "gx-FileInput-StatusRegion-sy7l04l",
+	propsAsIs: false
+});
+/** Zone padding and gap, file-row height and insets per rung (the canonical rung table). */
+var FILE_INPUT_SIZE_TO_CSS_MAP = {
+	["SMALL"]: "gx-FileInput-SMALL-s1hrapll",
+	["MEDIUM"]: "gx-FileInput-MEDIUM-m3wsxhs",
+	["LARGE"]: "gx-FileInput-LARGE-l1fx5o6"
+};
+/** The zone's rest look: the Input fills, with a dashed `border.primary` hairline on every variant. */
+var FILE_INPUT_VARIANT_TO_CSS_MAP = {
+	["BASE"]: "gx-FileInput-BASE-b1qlrgtm",
+	["PRIMARY"]: "gx-FileInput-PRIMARY-p1onua8y",
+	["SECONDARY"]: "gx-FileInput-SECONDARY-s18e5m84",
+	["TERTIARY"]: "gx-FileInput-TERTIARY-t1arbxdm"
+};
+/** `isGhost`: no fill and no dashed hairline at rest. Declared after the variant map, which it replaces. */
+var GHOST_CSS = "gx-FileInput-GHOST_CSS-g1xwgmj8";
+/** Hover on an editable zone (2026-10-03 field-frame resolution): `border.hovered`. */
+var ZONE_HOVER_CSS = "gx-FileInput-ZONE_HOVER_CSS-z1nts58e";
+/** An editable ghost zone while its button has focus: the dashed frame appears, `border.hovered`. */
+var GHOST_FOCUS_CSS = "gx-FileInput-GHOST_FOCUS_CSS-g1mfv4vb";
+/** Files dragged over an editable zone: `border.focused` and the neutral interaction fill. */
+var DRAG_ACTIVE_CSS = "gx-FileInput-DRAG_ACTIVE_CSS-d5bpp2p";
+/** Error border at rest and on hover (not while drag-active, so the drop target still reads). */
+var ERROR_CSS = "gx-FileInput-ERROR_CSS-esgy3bm";
+/**
+* Disabled: the variant's resting fill and dashed hairline are kept (`border.disabled` is not used
+* on frames); the zone reads as disabled through its text, icon, button and the cursor.
+*/
+var DISABLED_CSS = "gx-FileInput-DISABLED_CSS-d194c16g";
+/** Stretch to the parent's width (the group, and the `Field` wrapper when there is one). */
+var FILL_WIDTH_CSS = "gx-FileInput-FILL_WIDTH_CSS-f1l5ttml";
+/** Zone and file-row text per rung. */
+var FILE_INPUT_SIZE_TO_TEXT_SIZE_MAP = {
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG
+};
+/** The zone's upload icon per rung. */
+var FILE_INPUT_SIZE_TO_ICON_PX_MAP = {
+	["SMALL"]: 16,
+	["MEDIUM"]: 20,
+	["LARGE"]: 24
+};
+/** A file row's icon per rung: the rung icon, one step below III-A.4 (Mitch, 2026-10-04). */
+var FILE_INPUT_SIZE_TO_ROW_ICON_PX_MAP = {
+	["SMALL"]: 12,
+	["MEDIUM"]: 14,
+	["LARGE"]: 14
+};
+/** The "Choose files" button's rung (identity). */
+var FILE_INPUT_SIZE_TO_BUTTON_SIZE_MAP = {
+	["SMALL"]: ButtonSize.SMALL,
+	["MEDIUM"]: ButtonSize.MEDIUM,
+	["LARGE"]: ButtonSize.LARGE
+};
+/** A row's remove button: Input's in-field button rung, centered in the row by the end inset. */
+var FILE_INPUT_SIZE_TO_REMOVE_BUTTON_SIZE_MAP = {
+	["SMALL"]: ButtonSize.X_SMALL,
+	["MEDIUM"]: ButtonSize.X_SMALL,
+	["LARGE"]: ButtonSize.SMALL
+};
+/** The `Field` a FileInput renders for its own `label` / `error` uses the same rung. */
+var FILE_INPUT_SIZE_TO_FIELD_SIZE_MAP = {
+	["SMALL"]: FieldSize.SMALL,
+	["MEDIUM"]: FieldSize.MEDIUM,
+	["LARGE"]: FieldSize.LARGE
+};
+/**
+* Whether `file` matches the native `accept` string: `.ext` by name (case-insensitive), `type/*`
+* by MIME prefix, anything else by exact MIME type. An unset or empty `accept` matches every file.
+*/
+function matchesAccept(file, accept) {
+	if (accept === void 0) return true;
+	const tokens = accept.split(",").map((token) => token.trim().toLowerCase()).filter((token) => token !== "");
+	if (tokens.length === 0) return true;
+	const name = file.name.toLowerCase();
+	const type = file.type.toLowerCase();
+	return tokens.some((token) => {
+		if (token.startsWith(".")) return name.endsWith(token);
+		if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+		return type === token;
+	});
+}
+/** Two `File`s are the same choice when name, size and modification time match. */
+function fileKey(file) {
+	return `${file.name}\u0000${file.size}\u0000${file.lastModified}`;
+}
+/** The files a drop carries, with folders split out (where `webkitGetAsEntry` exists). */
+function readDrop(transfer) {
+	const files = [];
+	const folders = [];
+	const items = Array.from(transfer.items ?? []);
+	if (items.length === 0) return {
+		files: Array.from(transfer.files),
+		folders
+	};
+	for (const item of items) {
+		if (item.kind !== "file") continue;
+		const file = item.getAsFile();
+		if (file === null) continue;
+		if ((typeof item.webkitGetAsEntry === "function" ? item.webkitGetAsEntry() : null)?.isDirectory === true) folders.push(file);
+		else files.push(file);
+	}
+	return {
+		files,
+		folders
+	};
+}
+/** The group, the zone and the file list, wired to the nearest Field (the input's own or the app's). */
+function FileGroup({ fileProps, forwardedRef, isRoot }) {
+	const { value, defaultValue = [], onChange, onReject, accept, isMultiple = false, renderFileActions, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, placeholder, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = fileProps;
+	const { field, controlId: groupId, describedBy: buttonDescribedBy, isInvalid, hasName } = useFieldWiring({
+		id,
+		ariaLabel,
+		ariaLabelAttribute: rest["aria-label"],
+		ariaLabelledBy: rest["aria-labelledby"],
+		ariaDescribedBy,
+		error,
+		isError,
+		isRequired
+	});
+	const [files, setFiles] = useControlledState({
+		value,
+		defaultValue,
+		onChange
+	});
+	const filesRef = useRef(files);
+	filesRef.current = files;
+	const [announcement, setAnnouncement] = useState("");
+	const [isDragActive, setIsDragActive] = useState(false);
+	const dragDepthRef = useRef(0);
+	const nativeRef = useRef(null);
+	const chooseRef = useRef(null);
+	const removeRefs = useRef([]);
+	const pendingFocusRef = useRef(null);
+	const canEdit = !isDisabled && !isReadOnly;
+	const textSize = FILE_INPUT_SIZE_TO_TEXT_SIZE_MAP[size];
+	const zoneText = placeholder ?? (isMultiple ? "Drop files here" : "Drop a file here");
+	/** Sets the live region; a repeat of the same message is made distinct so it is read again. */
+	const announce = (message) => {
+		setAnnouncement((previous) => previous === message ? `${message} ` : message);
+	};
+	/** Sorts incoming files into accepted and rejected, updates the list and reports both once. */
+	const addFiles = (incoming, folders = []) => {
+		if (!canEdit) return;
+		const current = filesRef.current;
+		const seen = new Set(current.map(fileKey));
+		const rejected = [...folders];
+		const accepted = [];
+		for (const file of incoming) {
+			if (!matchesAccept(file, accept)) {
+				rejected.push(file);
+				continue;
+			}
+			const key = fileKey(file);
+			if (seen.has(key)) continue;
+			seen.add(key);
+			if (!isMultiple && accepted.length > 0) {
+				rejected.push(file);
+				continue;
+			}
+			accepted.push(file);
+		}
+		const messages = [];
+		if (accepted.length > 0) {
+			const next = isMultiple ? [...current, ...accepted] : accepted;
+			filesRef.current = next;
+			setFiles(next);
+			messages.push(accepted.length === 1 ? `${accepted[0]?.name} added` : `${accepted.length} files added`);
+		}
+		if (rejected.length > 0) {
+			onReject?.(rejected);
+			messages.push(rejected.length === 1 ? "1 file not added" : `${rejected.length} files not added`);
+		}
+		if (messages.length > 0) announce(messages.join(". "));
+	};
+	const remove = (index) => {
+		if (!canEdit) return;
+		const current = filesRef.current;
+		const file = current[index];
+		if (file === void 0) return;
+		const next = current.filter((_, position) => position !== index);
+		pendingFocusRef.current = index < next.length ? {
+			kind: "remove",
+			index
+		} : index > 0 ? {
+			kind: "remove",
+			index: index - 1
+		} : { kind: "choose" };
+		filesRef.current = next;
+		setFiles(next);
+		announce(`${file.name} removed`);
+	};
+	const openPicker = () => {
+		if (!canEdit) return;
+		nativeRef.current?.click();
+	};
+	const handleNativeChange = (event) => {
+		const chosen = Array.from(event.target.files ?? []);
+		event.target.value = "";
+		addFiles(chosen);
+	};
+	/** A press anywhere on the zone opens the picker; the button opens it itself. */
+	const handleZoneClick = (event) => {
+		if (event.target.closest("button") !== null) return;
+		openPicker();
+	};
+	const carriesFiles = (event) => Array.from(event.dataTransfer.types).includes("Files");
+	const handleDragEnter = (event) => {
+		if (!canEdit || !carriesFiles(event)) return;
+		event.preventDefault();
+		dragDepthRef.current += 1;
+		setIsDragActive(true);
+	};
+	const handleDragLeave = (event) => {
+		if (!canEdit || !carriesFiles(event)) return;
+		dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+		if (dragDepthRef.current === 0) setIsDragActive(false);
+	};
+	const handleDragOver = (event) => {
+		if (!canEdit) return;
+		event.preventDefault();
+		event.dataTransfer.dropEffect = "copy";
+	};
+	const handleDrop = (event) => {
+		if (!canEdit) return;
+		event.preventDefault();
+		dragDepthRef.current = 0;
+		setIsDragActive(false);
+		const { files: dropped, folders } = readDrop(event.dataTransfer);
+		addFiles(dropped, folders);
+	};
+	useEffect(() => {
+		const target = pendingFocusRef.current;
+		if (target === null) return;
+		pendingFocusRef.current = null;
+		((target.kind === "choose" ? chooseRef.current : removeRefs.current[target.index]) ?? chooseRef.current)?.focus();
+	});
+	useDevWarning(!hasName, "[@galaxy-io/dls] FileInput has no accessible name. Pass `label`, wrap it in a labelled `Field`, or set `ariaLabel`.");
+	const isDropTarget = isDragActive && canEdit;
+	const rowIconPx = FILE_INPUT_SIZE_TO_ROW_ICON_PX_MAP[size];
+	const rowTextVariant = isDisabled ? TextVariant.DISABLED : TextVariant.PRIMARY;
+	const rowMetaVariant = isDisabled ? TextVariant.DISABLED : TextVariant.TERTIARY;
+	const rowIconVariant = isDisabled ? IconVariant.DISABLED : IconVariant.SECONDARY;
+	return /* @__PURE__ */ jsxs(Group, {
+		...field?.labelId === void 0 ? {} : { "aria-labelledby": field.labelId },
+		...rest,
+		ref: forwardedRef,
+		id: groupId,
+		role: "group",
+		"aria-label": ariaLabel ?? rest["aria-label"],
+		className: cx(FILE_INPUT_SIZE_TO_CSS_MAP[size], fillWidth && FILL_WIDTH_CSS, isRoot ? className : void 0),
+		...rootStyle(isRoot, style),
+		children: [
+			/* @__PURE__ */ jsx(NativeInput, {
+				ref: nativeRef,
+				type: "file",
+				tabIndex: -1,
+				"aria-hidden": true,
+				...accept === void 0 ? {} : { accept },
+				multiple: isMultiple,
+				disabled: isDisabled,
+				onChange: handleNativeChange
+			}),
+			!isReadOnly && /* @__PURE__ */ jsxs(Zone, {
+				onClick: handleZoneClick,
+				onDragEnter: handleDragEnter,
+				onDragLeave: handleDragLeave,
+				onDragOver: handleDragOver,
+				onDrop: handleDrop,
+				className: cx(isGhost ? GHOST_CSS : FILE_INPUT_VARIANT_TO_CSS_MAP[variant], canEdit && !isInvalid && ZONE_HOVER_CSS, isGhost && canEdit && !isInvalid && GHOST_FOCUS_CSS, isInvalid && !isDisabled && !isDropTarget && ERROR_CSS, isDropTarget && DRAG_ACTIVE_CSS, isDisabled && DISABLED_CSS),
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						component: UploadSimpleIcon,
+						size: FILE_INPUT_SIZE_TO_ICON_PX_MAP[size],
+						variant: isDisabled ? IconVariant.DISABLED : IconVariant.SECONDARY
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						as: "span",
+						size: textSize,
+						variant: isDisabled ? TextVariant.DISABLED : TextVariant.SECONDARY,
+						children: zoneText
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						ref: chooseRef,
+						variant: ButtonVariant.SECONDARY,
+						size: FILE_INPUT_SIZE_TO_BUTTON_SIZE_MAP[size],
+						label: isMultiple ? "Choose files" : "Choose file",
+						isDisabled,
+						onClick: openPicker,
+						...buttonDescribedBy === void 0 ? {} : { "aria-describedby": buttonDescribedBy }
+					})
+				]
+			}),
+			files.length > 0 && /* @__PURE__ */ jsx(FileList, {
+				role: "list",
+				children: files.map((file, index) => /* @__PURE__ */ jsxs(FileRow, { children: [
+					/* @__PURE__ */ jsx(Icon, {
+						component: FileIcon,
+						size: rowIconPx,
+						variant: rowIconVariant
+					}),
+					/* @__PURE__ */ jsx(FileName, { children: /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						size: textSize,
+						variant: rowTextVariant,
+						lineClamp: 1,
+						shouldTooltipOnOverflow: true,
+						children: file.name
+					}) }),
+					/* @__PURE__ */ jsx(NoShrink, { children: /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						size: textSize,
+						variant: rowMetaVariant,
+						isTabular: true,
+						children: formatBytes(file.size)
+					}) }),
+					renderFileActions !== void 0 ? /* @__PURE__ */ jsx(NoShrink, { children: renderFileActions(file, index) }) : !isReadOnly && /* @__PURE__ */ jsx(NoShrink, { children: /* @__PURE__ */ jsx(Button, {
+						ref: (element) => {
+							removeRefs.current[index] = element;
+						},
+						variant: ButtonVariant.TERTIARY,
+						size: FILE_INPUT_SIZE_TO_REMOVE_BUTTON_SIZE_MAP[size],
+						icon: XIcon,
+						ariaLabel: `Remove ${file.name}`,
+						isDisabled,
+						onClick: () => remove(index)
+					}) })
+				] }, fileKey(file)))
+			}),
+			/* @__PURE__ */ jsx(StatusRegion, {
+				role: "status",
+				"aria-live": "polite",
+				children: announcement
+			})
+		]
+	});
+}
+/** A drop zone and a "Choose files" button over a hidden native file input, with the chosen files listed. */
+var FileInput = forwardRef(function FileInput(props, ref) {
+	const { label, error, isRequired = false, size = "MEDIUM", fillWidth = false, id, className, style } = props;
+	const ownField = useOwnField({
+		componentName: "FileInput",
+		label,
+		error,
+		isRequired,
+		size: FILE_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
+		id,
+		className,
+		style,
+		rootClassName: fillWidth && FILL_WIDTH_CSS
+	});
+	if (ownField !== null) return /* @__PURE__ */ jsx(Field, {
+		...ownField,
+		children: /* @__PURE__ */ jsx(FileGroup, {
+			fileProps: props,
+			forwardedRef: ref,
+			isRoot: false
+		})
+	});
+	return /* @__PURE__ */ jsx(FileGroup, {
+		fileProps: props,
+		forwardedRef: ref,
+		isRoot: true
+	});
+});
+FileInput.displayName = "FileInput";
+//#endregion
+export { FileInputSize, FileInputVariant, FileInput as default };