@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/file-upload/index.js

@@ -0,0 +1,641 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { S as getWindow, p as contains, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { s as getEventTarget, t as addDomEvent } from "../../event-bTItRgiw.js";
+import { i as raf } from "../../raf-Dhvm7f1e.js";
+import { n as visuallyHiddenStyle } from "../../visually-hidden-yDJ517KZ.js";
+import { s as flatArray } from "../../array-C4KbHsha.js";
+import { B as hash, L as callAll, n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { i as warn } from "../../warning-CrzBpWT1.js";
+import { r as createMachine } from "../../core-CJ0MZr3D.js";
+import { a as getAcceptAttrString, i as isFileEqual, o as getFileEntries, r as isValidFileSize, t as isValidFileType } from "../../file-utils-6EXCdfHx.js";
+import { c as formatBytes } from "../../i18n-utils-C4FQZ39m.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/file-upload/anatomy.ts
+const anatomy = createAnatomy("file-upload").parts("root", "dropzone", "item", "itemDeleteTrigger", "itemGroup", "itemName", "itemPreview", "itemPreviewImage", "itemSizeText", "label", "trigger", "clearTrigger");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/file-upload/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `file-upload:${ctx.id}`;
+const getDropzoneId = (ctx) => ctx.ids?.dropzone ?? `file-upload:${ctx.id}:dropzone`;
+const getHiddenInputId = (ctx) => ctx.ids?.hiddenInput ?? `file-upload:${ctx.id}:input`;
+const getTriggerId = (ctx) => ctx.ids?.trigger ?? `file-upload:${ctx.id}:trigger`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `file-upload:${ctx.id}:label`;
+const getItemId = (ctx, id) => ctx.ids?.item?.(id) ?? `file-upload:${ctx.id}:item:${id}`;
+const getItemNameId = (ctx, id) => ctx.ids?.itemName?.(id) ?? `file-upload:${ctx.id}:item-name:${id}`;
+const getItemSizeTextId = (ctx, id) => ctx.ids?.itemSizeText?.(id) ?? `file-upload:${ctx.id}:item-size:${id}`;
+const getItemPreviewId = (ctx, id) => ctx.ids?.itemPreview?.(id) ?? `file-upload:${ctx.id}:item-preview:${id}`;
+const getItemDeleteTriggerId = (ctx, id) => ctx.ids?.itemDeleteTrigger?.(id) ?? `file-upload:${ctx.id}:item-delete:${id}`;
+const getFileId = (file) => hash(`${file.name}-${file.size}`);
+const getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+const getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
+const getDropzoneEl = (ctx) => ctx.getById(getDropzoneId(ctx));
+//#endregion
+//#region src/machines/file-upload/utils.ts
+function isEventWithFiles(event) {
+	const target = getEventTarget(event);
+	if (!event.dataTransfer) return !!target && "files" in target;
+	return event.dataTransfer.types.some((type) => {
+		return type === "Files" || type === "application/x-moz-file";
+	});
+}
+function isFilesWithinRange(ctx, incomingCount, currentAcceptedFiles) {
+	const { prop, computed } = ctx;
+	if (!computed("multiple") && incomingCount > 1) return false;
+	if (!computed("multiple") && incomingCount + currentAcceptedFiles.length === 2) return true;
+	if (incomingCount + currentAcceptedFiles.length > prop("maxFiles")) return false;
+	return true;
+}
+function getEventFiles(ctx, files, currentAcceptedFiles = [], currentRejectedFiles = []) {
+	const { prop, computed } = ctx;
+	const acceptedFiles = [];
+	const rejectedFiles = [];
+	const validateParams = {
+		acceptedFiles: currentAcceptedFiles,
+		rejectedFiles: currentRejectedFiles
+	};
+	files.forEach((file) => {
+		const [accepted, acceptError] = isValidFileType(file, computed("acceptAttr"));
+		const [sizeMatch, sizeError] = isValidFileSize(file, prop("minFileSize"), prop("maxFileSize"));
+		const isDuplicate = currentAcceptedFiles.some((f) => isFileEqual(f, file)) || acceptedFiles.some((f) => isFileEqual(f, file));
+		const validateErrors = prop("validate")?.(file, validateParams);
+		const valid = validateErrors ? validateErrors.length === 0 : true;
+		if (accepted && sizeMatch && valid && !isDuplicate) acceptedFiles.push(file);
+		else {
+			const errors = [acceptError, sizeError];
+			if (isDuplicate) errors.push("FILE_EXISTS");
+			if (!valid) errors.push(...validateErrors ?? []);
+			rejectedFiles.push({
+				file,
+				errors: errors.filter(Boolean)
+			});
+		}
+	});
+	if (!isFilesWithinRange(ctx, acceptedFiles.length, currentAcceptedFiles)) {
+		acceptedFiles.forEach((file) => {
+			rejectedFiles.push({
+				file,
+				errors: ["TOO_MANY_FILES"]
+			});
+		});
+		acceptedFiles.splice(0);
+	}
+	return {
+		acceptedFiles,
+		rejectedFiles
+	};
+}
+function setInputFiles(inputEl, files) {
+	const win = getWindow(inputEl);
+	try {
+		if ("DataTransfer" in win) {
+			const dataTransfer = new win.DataTransfer();
+			files.forEach((file) => {
+				dataTransfer.items.add(file);
+			});
+			inputEl.files = dataTransfer.files;
+		}
+	} catch {}
+}
+//#endregion
+//#region src/machines/file-upload/connect.ts
+const DEFAULT_ITEM_TYPE = "accepted";
+const INTERACTIVE_SELECTOR = "button, a[href], input:not([type='file']), select, textarea, [tabindex], [contenteditable]";
+function isInteractiveTarget(element, container) {
+	if (!element || element.getAttribute("type") === "file") return false;
+	const interactive = element.closest(INTERACTIVE_SELECTOR);
+	return interactive != container && contains(container, interactive);
+}
+function connect(service, normalize) {
+	const { state, send, prop, computed, scope, context } = service;
+	const disabled = !!prop("disabled");
+	const readOnly = !!prop("readOnly");
+	const required = !!prop("required");
+	const allowDrop = prop("allowDrop");
+	const translations = prop("translations");
+	const dragging = state.matches("dragging");
+	const focused = state.matches("focused") && !disabled;
+	const acceptedFiles = context.get("acceptedFiles");
+	const maxFiles = prop("maxFiles");
+	return {
+		dragging,
+		focused,
+		disabled,
+		readOnly,
+		transforming: context.get("transforming"),
+		maxFilesReached: acceptedFiles.length >= maxFiles,
+		remainingFiles: Math.max(0, maxFiles - acceptedFiles.length),
+		openFilePicker() {
+			if (disabled || readOnly) return;
+			send({ type: "OPEN" });
+		},
+		deleteFile(file, type = DEFAULT_ITEM_TYPE) {
+			if (disabled || readOnly) return;
+			send({
+				type: "FILE.DELETE",
+				file,
+				itemType: type
+			});
+		},
+		acceptedFiles,
+		rejectedFiles: context.get("rejectedFiles"),
+		setFiles(files) {
+			if (disabled || readOnly) return;
+			send({
+				type: "FILES.SET",
+				files,
+				count: files.length
+			});
+		},
+		clearRejectedFiles() {
+			if (disabled || readOnly) return;
+			send({ type: "REJECTED_FILES.CLEAR" });
+		},
+		clearFiles() {
+			if (disabled || readOnly) return;
+			send({ type: "FILES.CLEAR" });
+		},
+		getFileSize(file) {
+			return formatBytes(file.size, prop("locale"));
+		},
+		createFileUrl(file, cb) {
+			const win = scope.getWin();
+			const url = win.URL.createObjectURL(file);
+			cb(url);
+			return () => win.URL.revokeObjectURL(url);
+		},
+		setClipboardFiles(dt) {
+			if (disabled || readOnly) return false;
+			const files = Array.from(dt?.items ?? []).reduce((acc, item) => {
+				if (item.kind !== "file") return acc;
+				const file = item.getAsFile();
+				if (!file) return acc;
+				return [...acc, file];
+			}, []);
+			if (!files.length) return false;
+			send({
+				type: "FILE.SELECT",
+				files
+			});
+			return true;
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				dir: prop("dir"),
+				id: getRootId(scope),
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
+				"data-dragging": dataAttr(dragging)
+			});
+		},
+		getDropzoneProps(props = {}) {
+			return normalize.element({
+				...parts.dropzone.attrs,
+				dir: prop("dir"),
+				id: getDropzoneId(scope),
+				tabIndex: disabled || readOnly || props.disableClick ? void 0 : 0,
+				role: props.disableClick ? "application" : "button",
+				"aria-label": translations.dropzone,
+				"aria-disabled": disabled || readOnly || void 0,
+				"data-invalid": dataAttr(prop("invalid")),
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
+				"data-dragging": dataAttr(dragging),
+				onKeyDown(event) {
+					if (disabled || readOnly) return;
+					if (event.defaultPrevented) return;
+					const target = getEventTarget(event);
+					if (!contains(event.currentTarget, target)) return;
+					if (isInteractiveTarget(target, event.currentTarget)) return;
+					if (props.disableClick) return;
+					if (event.key !== "Enter" && event.key !== " ") return;
+					send({
+						type: "DROPZONE.CLICK",
+						src: "keydown"
+					});
+				},
+				onClick(event) {
+					if (disabled || readOnly) return;
+					if (event.defaultPrevented) return;
+					if (props.disableClick) return;
+					const target = getEventTarget(event);
+					if (!contains(event.currentTarget, target)) return;
+					if (isInteractiveTarget(target, event.currentTarget)) return;
+					if (event.currentTarget.localName === "label") event.preventDefault();
+					send({ type: "DROPZONE.CLICK" });
+				},
+				onDragOver(event) {
+					if (disabled || readOnly) return;
+					if (!allowDrop) return;
+					event.preventDefault();
+					event.stopPropagation();
+					try {
+						event.dataTransfer.dropEffect = "copy";
+					} catch {}
+					if (!isEventWithFiles(event)) return;
+					const count = event.dataTransfer.items.length;
+					send({
+						type: "DROPZONE.DRAG_OVER",
+						count
+					});
+				},
+				onDragLeave(event) {
+					if (disabled || readOnly) return;
+					if (!allowDrop) return;
+					if (contains(event.currentTarget, event.relatedTarget)) return;
+					send({ type: "DROPZONE.DRAG_LEAVE" });
+				},
+				onDrop(event) {
+					if (disabled || readOnly) return;
+					if (allowDrop) {
+						event.preventDefault();
+						event.stopPropagation();
+					}
+					if (!isEventWithFiles(event)) return;
+					getFileEntries(event.dataTransfer.items, prop("directory")).then((files) => {
+						send({
+							type: "DROPZONE.DROP",
+							files: flatArray(files)
+						});
+					});
+				},
+				onFocus() {
+					if (disabled || readOnly) return;
+					send({ type: "DROPZONE.FOCUS" });
+				},
+				onBlur() {
+					if (disabled || readOnly) return;
+					send({ type: "DROPZONE.BLUR" });
+				}
+			});
+		},
+		getTriggerProps() {
+			return normalize.button({
+				...parts.trigger.attrs,
+				dir: prop("dir"),
+				id: getTriggerId(scope),
+				disabled: disabled || readOnly,
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
+				"data-invalid": dataAttr(prop("invalid")),
+				type: "button",
+				onClick(event) {
+					if (disabled || readOnly) return;
+					if (contains(getDropzoneEl(scope), event.currentTarget)) event.stopPropagation();
+					send({ type: "OPEN" });
+				}
+			});
+		},
+		getHiddenInputProps() {
+			return normalize.input({
+				id: getHiddenInputId(scope),
+				tabIndex: -1,
+				disabled: disabled || readOnly,
+				type: "file",
+				required: prop("required"),
+				capture: prop("capture"),
+				name: prop("name"),
+				accept: computed("acceptAttr"),
+				webkitdirectory: prop("directory") ? "" : void 0,
+				multiple: computed("multiple") || prop("maxFiles") > 1,
+				"aria-hidden": true,
+				onClick(event) {
+					event.stopPropagation();
+					event.currentTarget.value = "";
+				},
+				onInput(event) {
+					if (disabled || readOnly) return;
+					const { files } = event.currentTarget;
+					send({
+						type: "FILE.SELECT",
+						files: files ? Array.from(files) : []
+					});
+				},
+				style: visuallyHiddenStyle
+			});
+		},
+		getItemGroupProps(props = {}) {
+			const { type = DEFAULT_ITEM_TYPE } = props;
+			return normalize.element({
+				...parts.itemGroup.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(disabled),
+				"data-type": type
+			});
+		},
+		getItemProps(props) {
+			const { file, type = DEFAULT_ITEM_TYPE } = props;
+			return normalize.element({
+				...parts.item.attrs,
+				dir: prop("dir"),
+				id: getItemId(scope, getFileId(file)),
+				"data-disabled": dataAttr(disabled),
+				"data-type": type
+			});
+		},
+		getItemNameProps(props) {
+			const { file, type = DEFAULT_ITEM_TYPE } = props;
+			return normalize.element({
+				...parts.itemName.attrs,
+				dir: prop("dir"),
+				id: getItemNameId(scope, getFileId(file)),
+				"data-disabled": dataAttr(disabled),
+				"data-type": type
+			});
+		},
+		getItemSizeTextProps(props) {
+			const { file, type = DEFAULT_ITEM_TYPE } = props;
+			return normalize.element({
+				...parts.itemSizeText.attrs,
+				dir: prop("dir"),
+				id: getItemSizeTextId(scope, getFileId(file)),
+				"data-disabled": dataAttr(disabled),
+				"data-type": type
+			});
+		},
+		getItemPreviewProps(props) {
+			const { file, type = DEFAULT_ITEM_TYPE } = props;
+			return normalize.element({
+				...parts.itemPreview.attrs,
+				dir: prop("dir"),
+				id: getItemPreviewId(scope, getFileId(file)),
+				"data-disabled": dataAttr(disabled),
+				"data-type": type
+			});
+		},
+		getItemPreviewImageProps(props) {
+			const { file, url, type = DEFAULT_ITEM_TYPE } = props;
+			if (!file.type.startsWith("image/")) throw new Error("Preview Image is only supported for image files");
+			return normalize.img({
+				...parts.itemPreviewImage.attrs,
+				alt: translations.itemPreview?.(file),
+				src: url,
+				"data-disabled": dataAttr(disabled),
+				"data-type": type
+			});
+		},
+		getItemDeleteTriggerProps(props) {
+			const { file, type = DEFAULT_ITEM_TYPE } = props;
+			return normalize.button({
+				...parts.itemDeleteTrigger.attrs,
+				dir: prop("dir"),
+				id: getItemDeleteTriggerId(scope, getFileId(file)),
+				type: "button",
+				disabled: disabled || readOnly,
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
+				"data-type": type,
+				"aria-label": translations.deleteFile?.(file),
+				onClick() {
+					if (disabled || readOnly) return;
+					send({
+						type: "FILE.DELETE",
+						file,
+						itemType: type
+					});
+				}
+			});
+		},
+		getLabelProps() {
+			return normalize.label({
+				...parts.label.attrs,
+				dir: prop("dir"),
+				id: getLabelId(scope),
+				htmlFor: getHiddenInputId(scope),
+				"data-disabled": dataAttr(disabled),
+				"data-required": dataAttr(required)
+			});
+		},
+		getClearTriggerProps() {
+			return normalize.button({
+				...parts.clearTrigger.attrs,
+				dir: prop("dir"),
+				type: "button",
+				disabled: disabled || readOnly,
+				hidden: acceptedFiles.length === 0,
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (disabled || readOnly) return;
+					send({ type: "FILES.CLEAR" });
+				}
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/file-upload/machine.ts
+const machine = createMachine({
+	props({ props }) {
+		return {
+			minFileSize: 0,
+			maxFileSize: Number.POSITIVE_INFINITY,
+			maxFiles: 1,
+			allowDrop: true,
+			preventDocumentDrop: true,
+			defaultAcceptedFiles: [],
+			...props,
+			translations: {
+				dropzone: "dropzone",
+				itemPreview: (file) => `preview of ${file.name}`,
+				deleteFile: (file) => `delete file ${file.name}`,
+				...props.translations
+			}
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable, getContext }) {
+		return {
+			acceptedFiles: bindable(() => ({
+				defaultValue: prop("defaultAcceptedFiles"),
+				value: prop("acceptedFiles"),
+				isEqual: (a, b) => a.length === b?.length && a.every((file, i) => isFileEqual(file, b[i])),
+				hash(value) {
+					return value.map((file) => `${file.name}-${file.size}`).join(",");
+				},
+				onChange(value) {
+					const ctx = getContext();
+					prop("onFileAccept")?.({ files: value });
+					prop("onFileChange")?.({
+						acceptedFiles: value,
+						rejectedFiles: ctx.get("rejectedFiles")
+					});
+				}
+			})),
+			rejectedFiles: bindable(() => ({
+				defaultValue: [],
+				isEqual: (a, b) => a.length === b?.length && a.every((file, i) => isFileEqual(file.file, b[i].file)),
+				onChange(value) {
+					const ctx = getContext();
+					prop("onFileReject")?.({ files: value });
+					prop("onFileChange")?.({
+						acceptedFiles: ctx.get("acceptedFiles"),
+						rejectedFiles: value
+					});
+				}
+			})),
+			transforming: bindable(() => ({ defaultValue: false }))
+		};
+	},
+	computed: {
+		acceptAttr: ({ prop }) => getAcceptAttrString(prop("accept")),
+		multiple: ({ prop }) => prop("maxFiles") > 1
+	},
+	watch({ track, context, action }) {
+		track([() => context.hash("acceptedFiles")], () => {
+			action(["syncInputElement"]);
+		});
+	},
+	on: {
+		"FILES.SET": { actions: ["setFiles"] },
+		"FILE.SELECT": { actions: ["setEventFiles"] },
+		"FILE.DELETE": { actions: ["removeFile"] },
+		"FILES.CLEAR": { actions: ["clearFiles"] },
+		"REJECTED_FILES.CLEAR": { actions: ["clearRejectedFiles"] }
+	},
+	effects: ["preventDocumentDrop"],
+	states: {
+		idle: { on: {
+			OPEN: { actions: ["openFilePicker"] },
+			"DROPZONE.CLICK": { actions: ["openFilePicker"] },
+			"DROPZONE.FOCUS": { target: "focused" },
+			"DROPZONE.DRAG_OVER": { target: "dragging" }
+		} },
+		focused: { on: {
+			"DROPZONE.BLUR": { target: "idle" },
+			OPEN: { actions: ["openFilePicker"] },
+			"DROPZONE.CLICK": { actions: ["openFilePicker"] },
+			"DROPZONE.DRAG_OVER": { target: "dragging" }
+		} },
+		dragging: { on: {
+			"DROPZONE.DROP": {
+				target: "idle",
+				actions: ["setEventFiles"]
+			},
+			"DROPZONE.DRAG_LEAVE": { target: "idle" }
+		} }
+	},
+	implementations: {
+		effects: { preventDocumentDrop({ prop, scope }) {
+			if (!prop("preventDocumentDrop")) return;
+			if (!prop("allowDrop")) return;
+			if (prop("disabled")) return;
+			const doc = scope.getDoc();
+			const onDragOver = (event) => {
+				event?.preventDefault();
+			};
+			const onDrop = (event) => {
+				if (contains(getRootEl(scope), getEventTarget(event))) return;
+				event.preventDefault();
+			};
+			return callAll(addDomEvent(doc, "dragover", onDragOver, false), addDomEvent(doc, "drop", onDrop, false));
+		} },
+		actions: {
+			syncInputElement({ scope, context }) {
+				queueMicrotask(() => {
+					const inputEl = getHiddenInputEl(scope);
+					if (!inputEl) return;
+					setInputFiles(inputEl, context.get("acceptedFiles"));
+					const win = scope.getWin();
+					inputEl.dispatchEvent(new win.Event("change", { bubbles: true }));
+				});
+			},
+			openFilePicker({ scope }) {
+				raf(() => {
+					getHiddenInputEl(scope)?.click();
+				});
+			},
+			setFiles(params) {
+				const { computed, context, event } = params;
+				const { acceptedFiles, rejectedFiles } = getEventFiles(params, event.files);
+				context.set("acceptedFiles", computed("multiple") ? acceptedFiles : acceptedFiles.length > 0 ? [acceptedFiles[0]] : []);
+				context.set("rejectedFiles", rejectedFiles);
+			},
+			setEventFiles(params) {
+				const { computed, context, event, prop } = params;
+				const currentAcceptedFiles = context.get("acceptedFiles");
+				const currentRejectedFiles = context.get("rejectedFiles");
+				const { acceptedFiles, rejectedFiles } = getEventFiles(params, event.files, currentAcceptedFiles, currentRejectedFiles);
+				const set = (files) => {
+					if (computed("multiple")) {
+						context.set("acceptedFiles", (prev) => [...prev, ...files]);
+						context.set("rejectedFiles", rejectedFiles);
+						return;
+					}
+					if (files.length) {
+						context.set("acceptedFiles", [files[0]]);
+						context.set("rejectedFiles", rejectedFiles);
+						return;
+					}
+					if (rejectedFiles.length) {
+						context.set("acceptedFiles", context.get("acceptedFiles"));
+						context.set("rejectedFiles", rejectedFiles);
+					}
+				};
+				const transform = prop("transformFiles");
+				if (transform) {
+					context.set("transforming", true);
+					transform(acceptedFiles).then(set).catch((err) => {
+						warn(`[wirekyt/file-upload] error transforming files\n${err}`);
+					}).finally(() => {
+						context.set("transforming", false);
+					});
+				} else set(acceptedFiles);
+			},
+			removeFile({ context, event }) {
+				if (event.itemType === "rejected") {
+					const rejectedFiles = context.get("rejectedFiles").filter((item) => !isFileEqual(item.file, event.file));
+					context.set("rejectedFiles", rejectedFiles);
+				} else {
+					const files = context.get("acceptedFiles").filter((file) => !isFileEqual(file, event.file));
+					context.set("acceptedFiles", files);
+				}
+			},
+			clearRejectedFiles({ context }) {
+				context.set("rejectedFiles", []);
+			},
+			clearFiles({ context }) {
+				context.set("acceptedFiles", []);
+				context.set("rejectedFiles", []);
+			}
+		}
+	}
+});
+//#endregion
+//#region src/machines/file-upload/props.ts
+const props = createProps()([
+	"accept",
+	"acceptedFiles",
+	"allowDrop",
+	"capture",
+	"defaultAcceptedFiles",
+	"dir",
+	"directory",
+	"disabled",
+	"getRootNode",
+	"id",
+	"ids",
+	"invalid",
+	"locale",
+	"maxFiles",
+	"maxFileSize",
+	"minFileSize",
+	"name",
+	"onFileAccept",
+	"onFileChange",
+	"onFileReject",
+	"preventDocumentDrop",
+	"readOnly",
+	"required",
+	"transformFiles",
+	"translations",
+	"validate"
+]);
+const splitProps = createSplitProps(props);
+const itemProps = createProps()(["file", "type"]);
+const splitItemProps = createSplitProps(itemProps);
+//#endregion
+export { anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };